feat: users should be able to customize accessibility defaults

[liamdebeasi]

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.

[paulobr01]

@liamdebeasi                 Hello,

I am a deaf, blind and wheelchair.
I use VoiceOver and pair iPhone and MacBook without Braille display.

I'm having a hard time trying to issues
with Ionic'
The problem is that I unable delete the
role ="banner"
, as it takes up a lot of space on the braille display line.

The code goes something like this:

õion-header mode = "ios" translucent = "true" role = "none">
<ion-toolbaro
õieon-titleoHello everyone! õ/ion-titleo
õion-toolbaro
õ/ion-header>

Appears without Braille display:

banner, hello everyone!, banner landmark

It looks awful.
My Braille display only contains 32 cells, that is, it only fits 32 characters per content content.
Imagine my suffering.

Fix this is very important, as it takes the efficiency of the APP for the disabled.

Please answer me.

Thank you!

[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!

[masbrutus]

Hi, I'm @paulobr01 's friend and I help him with some things. If I could help with something about his issue with the Ionic banner bug he's reporting, you can talk to me too.

Thank you!

[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.