feat: improve screen reader accessibility #405
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This allows to follow WAI-ARIA best practices for combobox elements https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ Changes: - Add role="combobox" to the selected country button - Add role="listbox" to the countries list - Refer the countries list by its Id in the combobox element via aria-controls and aria-owns - Add role="option" to each country list option - Use aria-expanded on the combobox element - Refer focused option by its Id in the combobox element via aria-activedescendant to read focused option while navigating by keyboard - Add aria-selected="true" to the selected list option - Set aria-autocomplete="none" to the combobox element since displayed options do not depend on the number input value - Allow passing arbitrary props to the combobox element via flagDropdownProps prop (for example, "aria-labelledby" property can be passed)
VladyslavBondarenko
added a commit
to salemove/react-intl-tel-input
that referenced
this pull request
Nov 7, 2022
Ramp task: https://ramp.accessibleweb.com/app/websites/83ca83c6265c/tasks/2787246f7ae2 This allows following WAI-ARIA best practices for combobox elements - https://www.w3.org/WAI/ARIA/apg/patterns/combobox/. Changes in this PR mostly correspond to the patw0929#405 Although most of the best practices to improve accessibility were implemented, the role="combobox" was not added neither the to the number input (because the input doesn't show/hide the dropdown), nor to the country code button. Looks like OSx VoiceOver announces everything correctly. Changes: - Add role="listbox" to the countries list - Refer the countries list by its Id in the country code button via aria-controls and aria-owns - Add role="option" to each country list option - Use aria-expanded on the country code button element - Refer focused option by its Id in the country code button element via aria-activedescendant to read focused option while navigating by keyboard - Add aria-selected="true" to the selected list option - Set aria-autocomplete="none" to the country code button element since displayed options do not depend on the number input value - Allow passing arbitrary props to the country code button element via flagDropdownProps prop (for example, "aria-labelledby" property can be passed)
7 tasks
VladyslavBondarenko
added a commit
to salemove/react-intl-tel-input
that referenced
this pull request
Nov 7, 2022
Ramp task: https://ramp.accessibleweb.com/app/websites/83ca83c6265c/tasks/2787246f7ae2 This allows following WAI-ARIA best practices for combobox elements - https://www.w3.org/WAI/ARIA/apg/patterns/combobox/. Changes in this PR mostly correspond to the patw0929#405 Although most of the best practices to improve accessibility were implemented, the role="combobox" was not added neither the to the number input (because the input doesn't show/hide the dropdown), nor to the country code button. Looks like OSx VoiceOver announces everything correctly. Changes: - Add role="listbox" to the countries list - Refer the countries list by its Id in the country code button via aria-controls and aria-owns - Add role="option" to each country list option - Use aria-expanded on the country code button element - Refer focused option by its Id in the country code button element via aria-activedescendant to read focused option while navigating by keyboard - Add aria-selected="true" to the selected list option - Set aria-autocomplete="none" to the country code button element since displayed options do not depend on the number input value - Allow passing arbitrary props to the country code button element via flagDropdownProps prop (for example, "aria-labelledby" property can be passed)
VladyslavBondarenko
added a commit
to salemove/react-intl-tel-input
that referenced
this pull request
Nov 7, 2022
Ramp task: https://ramp.accessibleweb.com/app/websites/83ca83c6265c/tasks/2787246f7ae2 This allows following WAI-ARIA best practices for combobox elements - https://www.w3.org/WAI/ARIA/apg/patterns/combobox/. Changes in this PR mostly correspond to the patw0929#405 Although most of the best practices to improve accessibility were implemented, the role="combobox" was not added neither the to the number input (because the input doesn't show/hide the dropdown), nor to the country code button. Looks like OSx VoiceOver announces everything correctly. Changes: - Add role="listbox" to the countries list - Refer the countries list by its Id in the country code button via aria-controls and aria-owns - Add role="option" to each country list option - Use aria-expanded on the country code button element - Refer focused option by its Id in the country code button element via aria-activedescendant to read focused option while navigating by keyboard - Add aria-selected="true" to the selected list option - Set aria-autocomplete="none" to the country code button element since displayed options do not depend on the number input value - Allow passing arbitrary props to the country code button element via flagDropdownProps prop (for example, "aria-labelledby" property can be passed) Updates dist files (built with node 7)
VladyslavBondarenko
added a commit
to salemove/react-intl-tel-input
that referenced
this pull request
Nov 7, 2022
Ramp task: https://ramp.accessibleweb.com/app/websites/83ca83c6265c/tasks/2787246f7ae2 This allows following WAI-ARIA best practices for combobox elements - https://www.w3.org/WAI/ARIA/apg/patterns/combobox/. Changes in this PR mostly correspond to the patw0929#405 Although most of the best practices to improve accessibility were implemented, the role="combobox" was not added neither the to the number input (because the input doesn't show/hide the dropdown), nor to the country code button. Looks like OSx VoiceOver announces everything correctly. Changes: - Add role="listbox" to the countries list - Refer the countries list by its Id in the country code button via aria-controls and aria-owns - Add role="option" to each country list option - Use aria-expanded on the country code button element - Refer focused option by its Id in the country code button element via aria-activedescendant to read focused option while navigating by keyboard - Add aria-selected="true" to the selected list option - Set aria-autocomplete="none" to the country code button element since displayed options do not depend on the number input value - Allow passing arbitrary props to the country code button element via flagDropdownProps prop (for example, "aria-labelledby" property can be passed) Updates dist files
VladyslavBondarenko
added a commit
to salemove/react-intl-tel-input
that referenced
this pull request
Nov 8, 2022
Ramp task: https://ramp.accessibleweb.com/app/websites/83ca83c6265c/tasks/2787246f7ae2 This allows following WAI-ARIA best practices for combobox elements - https://www.w3.org/WAI/ARIA/apg/patterns/combobox/. Changes in this PR mostly correspond to the patw0929#405 Although most of the best practices to improve accessibility were implemented, the role="combobox" was not added neither the to the number input (because the input doesn't show/hide the dropdown), nor to the country code button. Looks like OSx VoiceOver announces everything correctly. Changes: - Add role="listbox" to the countries list - Refer the countries list by its Id in the country code button via aria-controls and aria-owns - Add role="option" to each country list option - Use aria-expanded on the country code button element - Refer focused option by its Id in the country code button element via aria-activedescendant to read focused option while navigating by keyboard - Add aria-selected="true" to the selected list option - Set aria-autocomplete="none" to the country code button element since displayed options do not depend on the number input value - Allow passing arbitrary props to the country code button element via flagDropdownProps prop (for example, "aria-labelledby" property can be passed) Updates dist files (built with node 8.17.0)
|
Hello, |
|
I made the changes in a fork and used it instead |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This allows to follow WAI-ARIA best practices for combobox elements.
Changes:
role="combobox"to the selected country buttonrole="listbox"to the countries listaria-controlsandaria-ownsrole="option"to each country list optionaria-expandedon the combobox elementidin the combobox element viaaria-activedescendantto read the focused option while navigating by keyboardaria-selected="true"to the selected list optionaria-autocomplete="none" to the combobox element since displayed options do not depend on the number input valueflagDropdownPropsprop (for example,aria-labelledbyproperty can be passed so that a screen reader can read proper visible label for this input)Types of changes
Checklist: