Skip to content

Select accessibility #306

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 5 commits into from
Nov 22, 2022
Merged

Select accessibility #306

merged 5 commits into from
Nov 22, 2022

Conversation

mauromascarenhas
Copy link

@mauromascarenhas mauromascarenhas commented Nov 19, 2022 •
edited
Loading

Proposed changes

Resolved some semantic issues in select component so as to enhance performance of assistive technologies (e.g.: screen readers).

In spite of not affecting existing projects, this PR must improve the component's overall accessibility concerns, since it fixes some HTML semantic issues (for assistive technologies) and improves keyboard navigation, in addition to better semantics in code samples available in the docs.

Summary:

  • Add missing "ARIA" attributes to custom input, dropdown and list items:
    • Fix HTML semantic roles by adding "combobox", "listbox" and "option" roles, respectively;
    • Custom input element is now "read-only" for screen readers as well;
    • Custom input element "controls" dropdown;
    • Improved element hierarchy to assistive technologies by adding references to equivalent child elements (through "aria-owns");
    • Improved listbox "expanded state" detection by assistive technologies;
    • Add "selected" and "enabled" state to option items.
  • Enhance support to select with optgroups:
    • Group names are no longer focusable on keyboard navigation;
    • Group child items are hierarchically referenced (see screenshots).
  • "Original" select's label is referenced by custom input while custom instance is active (the label should return to its original state as soon as the instance is destroyed);
  • Item images should be ignored by assistive technologies, since their purpose is solely decorative and was lacking "alt" attribute;
  • Improve docs so as to give accessible code samples😄.

NB.: Although this PR should solve semantic-wise issues with assistive technologies, select components are still affected by the lack of "focus style" as discribed in #81.

Screenshots (if appropriate) or codepen:

Here are some screenshots of how the select component is detected by assistive technologies:

Single select

Firefox development tools displaying accessibility properties for single select component.

Multiple select

Firefox development tools displaying accessibility properties for multiple select component

Select with optgroup

Firefox development tools displaying accessibility properties for single select component with option groups

Types of changes

  • Bug fix (non-breaking change which fixes an issue).
  • New feature (non-breaking change which adds functionality).
  • Breaking change (fix or feature that would cause existing functionality to change).

Checklist:

  • I have read the CONTRIBUTING document.
  • My commit messages follows the conventional commit format
  • My change requires a change to the documentation, and updated it accordingly.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@mauromascarenhas
fix(select): select accessibility
54f9861 
Improve select support to assistive technologies (e.g.: screen readers):

- Label reference for created input:
    - Input element references orignal select label on init (if exists);
    - New "labelEl" attribute: points to original select element label.
    - Label state is restored on destroy (if used "for" attribute).
- Add keyboard event handlers for element selection;
- Add missing ARIA attributes to dropdown:
    - Dropdown now acts as listbox;
    - Dropdown is now "owned" by custom input;
    - Enhanced support to "optgroups".
- Add missing ARIA attributes to dropdown elements:
    - Each element acts as a regular "option";
    - Support to disabled elements;
    - Support to "selected" items.
- Add missing ARIA attributes to custom input element:
    - Custom input should act as combobox;
    - Added relationship references (accessibility) to dropdown;
    - Added support to "expanded state".
- Custom images are hidden from screen readers.
@mauromascarenhas
test(select): select accessibility
5a7788c 
- Add "id" to select elements + "for" references in labels;
- Added accessibility tests to spec.
@mauromascarenhas
fix(select): broken reference to $el
5bc407c 
- Replaced "$el" by "el" in _setupDropdown.
@mauromascarenhas
docs(select): accessibility
9aaccac 
Update select docs so as to give better code samples:

- Add entry to new "labelEl" attribute;
- Add referenced labels to select elements:
    - Add id to select elements (also in code samples);
    - Add "for" attribute to labels (also in code samples).
@mauromascarenhas
fix(select): optgroup focus
c650b44 
- Option group names are no longer focusable by default.
@mauromascarenhas mauromascarenhas marked this pull request as ready for review November 19, 2022 23:13
@mauromascarenhas mauromascarenhas mentioned this pull request Nov 19, 2022
Merged
8 tasks
wuda-io
wuda-io approved these changes Nov 22, 2022
View reviewed changes
Copy link
Member

@wuda-io wuda-io left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@wuda-io wuda-io merged commit f8ec084 into materializecss:main Nov 22, 2022
@Smankusors Smankusors added the enhancement New feature or request label Nov 24, 2022
wuda-io pushed a commit that referenced this pull request Nov 24, 2022
@Smankusors
chore: add #306 to the changelog
05fbdd8
Smankusors added a commit that referenced this pull request Nov 25, 2022
@Smankusors
chore: forgot to add #306 to the dist folder
7375851
@mauromascarenhas mauromascarenhas deleted the select-accessibility branch November 29, 2022 22:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@wuda-io wuda-io wuda-io approved these changes

Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@mauromascarenhas @wuda-io @Smankusors