search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.02k stars 13.51k forks source link

feat: users should be able to customize accessibility defaults #21327

Closed liamdebeasi closed 3 years ago

liamdebeasi commented 4 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.

liamdebeasi commented 3 years ago

Hey there,

I have merged in https://github.com/ionic-team/ionic-framework/pull/23888 which lets developers customize the role attribute on ion-header. This addition should be available in the next release of Ionic Framework. Thanks for reporting this!

On a separate note regarding the GitHub issue itself, I am going to close this out in favor of having one GitHub thread per issue as opposed to having all issues tracked in this thread. This makes it much easier for us to track progress and provide updates to the community.

For any additional issues, please feel free to open separate GitHub issues. Thank you!

ionitron-bot[bot] commented 3 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.