bug: datetime, empty picker items are read by some screen readers

[shivamsharmanps]

Describe the Bug

Hi,

is not support accessibility, when we can expect to get support, it reads whitespace when use 'md' mode and behave differently and for physically challenge person this will hard, could you bring full accessibility support.

Expected Behavior

accessibility support for datetime-picker.

Steps to Reproduce

When clicking on month or year and moving up/down to select then it reads black/space.

Screenshots

Operating System

Windows 10

Browser

Chrome/Edge

Version

Version 110

Additional Information

Please add accessibility for <ion-datetime></ion-datetime>.

[averyjohnston]

Thank you for the issue. Could you give more details on the problem you're experiencing? I'm not sure I understand everything. A screen recording may help.

[shivamsharmanps]

I am not able to record the video but I am attaching a screenshot which I think will help to understand -

The red square is read as 'Blank' or 'Space' by JAWS tool ( screen reader ), I am using ionic example https://ionicframework.com/docs/api/datetime#basic-usage.
In ionic, most of the things related to accessibility are not working, and for a better experience tried angular material where tools.
working far better, but hoping to get better accessibility result from ionic.

[shivamsharmanps]

I found a issue

this where reader read blank.

[averyjohnston]

Thank you for the details. While I don't have JAWS to test with, we should be able to fix things by adding aria-hidden="true" to those elements.

If you are having other accessibility problems as well, I would recommend opening separate issues in the ionic-framework repo: https://github.com/ionic-team/ionic-framework/issues/new/choose

[shivamsharmanps]

I am looking something like this for web/mobile.
https://www.youtube.com/watch?v=yotebj3ibEE

[shivamsharmanps]

Thank you for the details. While I don't have JAWS to test with, we should be able to fix things by adding aria-hidden="true" to those elements.

If you are having other accessibility problems as well, I would recommend opening separate issues in the ionic-framework repo: https://github.com/ionic-team/ionic-framework/issues/new/choose

Actually those element we see when run app ( web )
i.e. https://user-images.githubusercontent.com/50568306/219291602-6814f36c-d009-4b66-b220-65f271637c6a.png
so how can I add there and that are inside shadow-root( open)

[averyjohnston]

I am looking something like this for web/mobile. https://www.youtube.com/watch?v=yotebj3ibEE

Please file a separate issue on the ionic-framework repo and include a minimal reproduction app so we can troubleshoot further.

Actually those element we see when run app ( web ) i.e. https://user-images.githubusercontent.com/50568306/219291602-6814f36c-d009-4b66-b220-65f271637c6a.png so how can I add there and that are inside shadow-root( open)

We'll need to fix it on our end.

[brandyscarney]

Hello @shivamsharmanps! I have released a dev build with a potential fix for your issue. Could you please test this and let us know if it resolves this? Thank you!

If you are using angular:

npm i @ionic/angular@6.6.2-dev.11680021138.106a5859

[ionitron-bot]

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.