-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
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
Mark highlighted results with aria-selected #5841
Conversation
Previously the CSS was using a combination of very specific BEM class selectors and attribue selectors based off of ARIA attributes that were expected to be present on the elements. This creates odd specificity battles that people have been complaining about for years, so now we're solving a few of the issues by switching to BEM classes instead of using the mix. This is a breaking change within any applications that override the Select2 CSS through creating higher specificity selectors. While the attributes are still present on the elements, we are no longer going to be treating adjustements to them as breaking changes. This is important becuase accessibility is a changing field and we know we are going to have to make adjustments going forward.
This is a breaking change from past expectations where the options within the results that were selected within the dataset were previously marked as `aria-selected=true`. When Select2 was first implementing the `aria-selected` attribute, the interpretation that we followed was that the "selected" state was supposed to represent the idea that the option was "selected" similar to what is done within a standard dropdown. This would make sense and would align with the interpretation of the WAI-ARIA Authoring Practices 1.0 where it explicitly says that it represents the selected state of the option. We later found out, after Select2 had been released, that this intepretation was incorrect and the large majority of assistive technologies did not align with this interpretation. The `aria-selected` attribute should represent the location of focus within the component. This allows screen readers to read the contents out load and also detect changes within the focus location. In later revisions of the WAI-ARIA spec, this was made more clear that the `aria-selected` attribute forces the focus to be moved to the element containing that attribute, which is in line with the behaviour that was encountered during testing. This should fix a bug that has been around for a while where using VoiceOver in the Safari browser would result in the currently focused option not being read aloud.
There was a test which was checking the selected status of an option based on the `aria-selected` attribute. Instead this has been switched over to check to make sure the new class is not present.
@kevin-brown - I've updated the version of Select2 that i'm using to include your changes for accessibility and screen readers (many of my users are disabled)...After the update, it doesn't seem like keyboard navigation of the dropdowns works at all...I can open it using the spacebar but am unable to use the arrow keys to go through the options...Are you able to help me on this? Or am I just too early on updating to your beta and you already have this on your radar? |
* Switch CSS to use BEM over attribute selectors Previously the CSS was using a combination of very specific BEM class selectors and attribue selectors based off of ARIA attributes that were expected to be present on the elements. This creates odd specificity battles that people have been complaining about for years, so now we're solving a few of the issues by switching to BEM classes instead of using the mix. This is a breaking change within any applications that override the Select2 CSS through creating higher specificity selectors. While the attributes are still present on the elements, we are no longer going to be treating adjustements to them as breaking changes. This is important becuase accessibility is a changing field and we know we are going to have to make adjustments going forward. * Mark highlighted results with aria-selected This is a breaking change from past expectations where the options within the results that were selected within the dataset were previously marked as `aria-selected=true`. When Select2 was first implementing the `aria-selected` attribute, the interpretation that we followed was that the "selected" state was supposed to represent the idea that the option was "selected" similar to what is done within a standard dropdown. This would make sense and would align with the interpretation of the WAI-ARIA Authoring Practices 1.0 where it explicitly says that it represents the selected state of the option. We later found out, after Select2 had been released, that this intepretation was incorrect and the large majority of assistive technologies did not align with this interpretation. The `aria-selected` attribute should represent the location of focus within the component. This allows screen readers to read the contents out load and also detect changes within the focus location. In later revisions of the WAI-ARIA spec, this was made more clear that the `aria-selected` attribute forces the focus to be moved to the element containing that attribute, which is in line with the behaviour that was encountered during testing. This should fix a bug that has been around for a while where using VoiceOver in the Safari browser would result in the currently focused option not being read aloud. * Fix failing test There was a test which was checking the selected status of an option based on the `aria-selected` attribute. Instead this has been switched over to check to make sure the new class is not present.
This pull request includes a
The following changes were made
select2-results__option--selectable
class was introduced to mark options that are selectable within resultsselect2-results__option--selected
class was introduced to mark options that are selectedselect2-results__option--disabled
class was introduced to mark options that are disabled within results[aria-selected]
is used to indicate the highlighted option instead of indicating that an option is selectedIf this is related to an existing ticket, include a link to it as well.
Fixes #4349