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

Add aria attributes to improve facet accessibility. #2607

Merged
merged 1 commit into from
Feb 24, 2022
Merged

Conversation

JakePT
Copy link
Contributor

@JakePT JakePT commented Feb 23, 2022

Description of the Change

Adds aria attributes to facets to improve accessibility. This includes adding aria-disabled and aria-role attributes to disabled links, as per the solution described in this article. It also includes adding an aria-label attribute to the links, so that the accessible label makes it clear whether following the link will add or remove the filter.

The change also includes a filter for the accessible label: ep_facet_widget_term_accessible_label.

Closes #2596

Verification Process

  1. Add a facet widget to a page.
  2. Observe the list of links, available facets should have an aria-label that reads "Apply filter:", followed by the term name.
  3. After applying a filter, observe disabled options, they should have an aria-disabled="true" attribute and an aria-role="link" attribute. Active filters should have an aria-label that reads "Remove filter:", followed by the term name.

Checklist:

  • I have read the CONTRIBUTING document.
  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my change.
  • All new and existing tests passed.

Changelog Entry

Added ARIA attributes to Facet widget links to improve accessibility.

Credits

Props @JakePT

@JakePT JakePT self-assigned this Feb 23, 2022
@JakePT JakePT linked an issue Feb 23, 2022 that may be closed by this pull request
@felipeelia felipeelia merged commit 51e27ce into 4.x.x Feb 24, 2022
@felipeelia felipeelia deleted the fix/2596 branch February 24, 2022 13:27
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

Successfully merging this pull request may close these issues.

Improve accessibility of Facet widgets
2 participants