bug: buttons inside ion-header
not accessible with screenreader (unless scrolled down)
#29347
Open
3 tasks done
Labels
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
Given
ion-header
withcollapse="condense"
ion-header
(but not secondion-header
)When
Then
Images:
(red area is aria-hidden, even though seeing users can interact with it)
(when scrolled, buttons are accessible for everyone, including screenreader users)
Expected Behavior
Given
ion-header
withcollapse="condense"
ion-header
(but not in secondion-header
)When
Then (Desired)
Or generalized: All elements that only appear in the first header should never be
aria-hidden
.Then (Alternative)
Steps to Reproduce
See stackblitz
Steps:
Code Reproduction URL
https://stackblitz.com/edit/ionic6-angular14-p5ym3p?file=src%2Fapp%2Fapp.component.html
Ionic Info
Ionic:
Ionic CLI : 7.2.0 (C:\Users\JohannesVollmer\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 7.8.2
@angular-devkit/build-angular : 17.3.2
@angular-devkit/schematics : 17.3.2
@angular/cli : 17.3.2
@ionic/angular-toolkit : 11.0.1
Capacitor:
Capacitor CLI : 5.7.4
@capacitor/android : 5.7.4
@capacitor/core : 5.7.4
@capacitor/ios : 5.7.4
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v18.16.1 (C:\Program Files\nodejs\node.exe)
npm : 9.5.1
OS : Windows 10
Additional Information
As a workaround, we copied the buttons from the first
ion-header
in into the secondion-header
but set them to.screen-reader-only
. This is not a good solution, as the buttons cannot be clicked directly (only accessible by skipping through the list). This is also a problem because the screenreader no longer matches what the seeing users see.The text was updated successfully, but these errors were encountered: