bug: buttons inside ion-header not accessible with screenreader (unless scrolled down)

[johannesvollmer]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Given

• ion-header with collapse="condense"
• buttons inside first ion-header (but not second ion-header)

When

• user has not scrolled yet

Then

• buttons are rendered and clickable as expected
• however, the whole header will be aria-hidden, so screenreader users cannot access the visible buttons

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 with collapse="condense"
• buttons inside first ion-header (but not in second ion-header)

When

• user has not scrolled yet

Then (Desired)

• buttons are rendered, interactive, and accessible by screenreader (expected because they are currently accessible for seeing users)
  Or generalized: All elements that only appear in the first header should never be aria-hidden.

Then (Alternative)

• buttons in the condensed header are not rendered, and therefore not clickable, by no one, including screenreader users

Steps to Reproduce

See stackblitz

<ion-header mode="ios">
    <ion-toolbar mode="ios">
        <ion-buttons slot="start">
            <ion-button>Back</ion-button>
        </ion-buttons>

        <ion-title>Title</ion-title>

        <ion-buttons slot="end">
            <ion-button>Settings</ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-header collapse="condense" mode="ios">
        <ion-toolbar mode="ios">
            <h1>Title</h1>
        </ion-toolbar>
    </ion-header>

    <p>Scroll to make aria work again.</p>
    <div style="height: 150vh;"></div>
</ion-content>

Steps:

1. Immediately observe screenreader not being able to detect the back button and the settings button
2. Scroll down
3. Observe screenreader now being able to detect all buttons

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 second ion-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.

[johannesvollmer]

The unexpected behaviour was the discrepancy between what seeing users have versus what screenreader are allowed to see.

the header will be invisible to both, but the buttons will be visible for seeing users only. both should match. either hide the buttons for all users, or show the buttons for all users.

[thetaPC]

Thank you for submitting the issue!

I was able to verify that the buttons are not accessible. This behavior does not follow the native iOS as it allows the buttons to be accessed (used the Mail app). We'll work on fixing this issue.

[johannesvollmer]

Awesome, thanks! :)