Skip to content

ARIA Improvements and bug fixes#11

Merged
jamesjacobs merged 15 commits intomasterfrom
improvement/aria
Sep 21, 2022
Merged

ARIA Improvements and bug fixes#11
jamesjacobs merged 15 commits intomasterfrom
improvement/aria

Conversation

@jamesjacobs
Copy link
Copy Markdown

This pull request includes a number of bug fixes and improvements related to the use of ARIA. How ARIA is handled and used has changed somewhat.

Separation of ARIA from base.js

Previously, much of the aria was handled in base.js which set ARIA on the "selection" (span.select2-selection), this was then inherited by both single and multiple selects, which caused a number of aria issues. Now aria specific to single selects has been moved to selection/single.js and aria specific to multiple selects moved to the inline search selection/search.js. In multi selects, the inline search has become the combobox and not the wrapping selection span.

ARIA structural changes

Single selects

  • aria-haspopup removed due to lack of SR support
  • aria-label added to dropdown listbox ul
  • aria-selected true/false added. Previously only the selected item had aria-selected="true", now the unselected options have aria-selected="false" to match the aria pattern.
  • aria-label added to the dropdown search input

Multi selects

  • All aria removed from the span.select2-selection and added to the inline search
  • role has been changed from textbox to combobox on the inline search input
  • aria-label added to the dropdown ul listbox
  • aria-selected true/false added. Previously only the selected item had aria-selected="true", now the unselected options have aria-selected="false" to match the aria pattern.
  • aria-controls added to the inline search

This has improved screen reader coverage (see updated tables) and removed the following accessibility tool errors:

IBM Equal Access Accessibility Checker:

  • (Single select & multi select) Results ul with role="listbox" is missing an accessible name
  • (Single select) Results search input is missing an accessible name

Site Improve:

  • (Single select & multi select) search input is not labelled
  • (Single select & multi select) search input is missing aria-controls
  • (Single select) form field ul is not labelled

AXE:

  • (Single select) search input is not labelled
  • (Single select) search input is missing aria-controls
  • (Single select) form field ul is not labelled
  • (Multi select) role="combobox" is missing aria-controls

Resolves #9, resolves #7

Copy link
Copy Markdown
Member

@Stanton Stanton left a comment

Choose a reason for hiding this comment

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

minor typos, only flagged the first instances as I think there's some compiled files here in dist/

@jamesjacobs jamesjacobs merged commit 7f3f008 into master Sep 21, 2022
@jamesjacobs jamesjacobs deleted the improvement/aria branch September 21, 2022 09:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

2 participants