Mark highlighted results with aria-selected #5841
Merged
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
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.
This was referenced May 2, 2020
|
@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? |
anttikuuskoski
pushed a commit
to anttikuuskoski/select2
that referenced
this pull request
Mar 29, 2022
* 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.
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.
This pull request includes a
The following changes were made
select2-results__option--selectableclass was introduced to mark options that are selectable within resultsselect2-results__option--selectedclass was introduced to mark options that are selectedselect2-results__option--disabledclass 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