Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider reducing the verbosity of the date time range picker buttons #354

Open
scottaohara opened this issue Mar 7, 2022 · 0 comments
Open

Comments

@scottaohara
Copy link
Member

In the Standalone Date Time Range Picker example each button is given an aria-label which prepends the text of "select quick time of".

Doing this means that someone using a screen reader must listen to "select quick time of" before they hear the unique content of the button.

The user experience of these buttons could be improved by instead ensuring that they are contained within a role=group and that group is given the accessible name of "Select quick time".

For instance

<div class="tsi-quickTimesPanel" role=group aria-label="Select quick time">
  <button class="tsi-quickTime" aria-pressed="...">Last 15 mins</button>
  ...
</div>

Note that by front-loading the 'select quick time' text to the group container, there is no longer a need to have an aria-label on each button. Instead those buttons will simply use their child text content as their accessible name.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant