This is the description from #3167842: aria-owns need ID 'fac-result' to work + other accessebility fixes. The patch that is used there should be ported to 8x version
This is not an issue in the 8x-branch:
The text input field that triggers the fac-result has an aria-owns:"fac-result". But for this to work it needs an ID, currently only a class "fac-result" is set.
So we only port this part:
Besides that we need to add a role to the ul and li elements, and we need to add the aria-activedescendant to the ul.
Inspect the fac-result div to see the missing ID.
Add ID through JS the same way as the class is set.
To further enhance the accessebility we add the following:
- to the "announce"-div we add an ID
- to the UL we add the role 'listbox', and aria-describedby with the id of the "announce"-div
- to the LI we add an id and the role 'option'
- when a li is selected, or hovered over we add an aria-activedescendant to the selected li to the TEXT INPUT
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | interdiff_9-10.txt | 950 bytes | joshahubbers |
| #10 | fac-accessebility_improvement-3200077-10.patch | 4.34 KB | joshahubbers |
Comments
Comment #2
joshahubbers commentedComment #3
joshahubbers commentedComment #4
joshahubbers commentedThis patch adds the role 'listbox' and 'option', and the 'aria-activedescentant' (along with an id on the options).
Comment #5
joshahubbers commentedComment #6
joshahubbers commentedFixes mentioned in D7-ticket implemented in this patch
- The aria-activedescendant should be set on the input element itself instead of te UL.
- It should only be set when you actually select an option with the down/up arrows. At the moment it is already set without any options displayed/selected.
- Role="listbox" items need a description to be compliant.
-- Add an ID to the "announce" div "fac-announce"
-- Add an "aria-describedby="fac-announce" to the UL that has the role=listbox.
Comment #7
joshahubbers commentedComment #8
joshahubbers commentedComment #9
joshahubbers commentedMissed the cursor-actions that loop from end of list to beginning and beginning to end. And missed the "All results"-div.
Comment #10
joshahubbers commented- Changed aria-describedby to aria-labelledby
- Added role to "all-results" div so it is read too.
Comment #11
bskibinskiPerfect! tested in NVDA and it all works now, both the search results and the "see all link" gets pronounced while using the arrow keys, and the UL with role listbox has the proper aria-labelledby now.
Comment #12
joshahubbers commentedSuggestion:
In the d7 issue a fix is added for strict CSP-headers. This should be added to this tab too. See #3207550: setTimeout causes CSP errors on window resize.
Comment #14
marty2081 commentedThank you very much for the work and patch. I am very sorry it took so long to reply. I have tested the patch and committed the changes.
The CSP issue has been fixed as part of issue #3230591