feat: users should be able to customize accessibility defaults

Bug Report

Ionic version:

[x] 5.x

Current behavior:

Often times users will want to customize the accessibility defaults we provide for components. For example, if a user is distributing an app in multiple languages, having a label always be announced in English is not very helpful. Additionally, even if users are distributing an app in English only, they cannot override the defaults we provide.

For example, we add role="banner" to the Host of ion-header (https://github.com/ionic-team/ionic/blob/master/core/src/components/header/header.tsx#L148). This may not be desirable to some users and they may wish to use role="none"; however, they are unable to override this as role="banner" is always used. On top of this, if we provide any attributes to elements inside the shadow dom, users cannot easily access them to customize them. Users can access them via JS and shadowRoot, but that is not a sustainable approach.

Expected behavior:

I would expect that developers can customize most/all of the accessibility defaults we provide to fine tune the user experience for their applications.

This thread will be used to track areas where there needs to be improvement regarding this.

[liamdebeasi]

Hi @paulobr01 and @masbrutus,

Thanks for the feedback! Let me look into this issue and see if we can make role easier to customize on ion-header.

[paulobr01]

21327 Hello,

Please understand. I am deaf, blind, and in a wheelchair. Use of iPhone and MacBook with Braille display.

I’m an Ionic programmer. I’ve really liked the language. But Ionic is currently pissing me off a lot.

I can’t delete role = “banner” from my APP. This landmark takes up a lot of space without a Braille display.

My Braille display only has 32 characters per content. I’ve already done something like:

<ion-header translucent =“true” mode =“ios” role ="none"o õion-toolbaro õion-titleo Hi everyone / ion-title> õ/ion-toolbaro õ / ion-header>

But don’t delete the role = “banner” .

The code above is identifier like this on the Braille display in the APP on the iPhone:

banner, Hello everyone, banner landmark

This is horrible using a Braille display. help me take this role = “banner” from my Ionic APP.

Fix this issue is very important. My project is delayed because of this.

Please help me.

Thank!