fix(material-experimental/mdc-paginator): target page size label with aria-labelledby
#23172
Conversation
This file contains hidden or 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
google-cla
bot
added
the
cla: yes
|
Kicked off a presubmit |
zarend
force-pushed
the
mdc-paginator-screenreader
branch
from
bc47590 to
319daff
Compare
zarend
changed the title
zarend
force-pushed
the
mdc-paginator-screenreader
branch
from
319daff to
1e38251
Compare
zarend
added
Accessibility
zarend
force-pushed
the
mdc-paginator-screenreader
branch
from
1e38251 to
482e969
Compare
… `aria-labelledby`
Fixes a screenrader bug on the mdc-paginator for the page size combobox
("Items per page: [combo]"). On Firefox, JAWS and NVDA do not read the
value of the combobox, and only read the label. This happens because the
mdc-paginator explicitly sets an `aria-label` on the `mdc-select` for
the page size label. This causes the mdc-select to not apply an
aria-labelledby, which would reference the value of the combobox. This
leaves us with only relying on inner text to read the value of the
combobox and not having an aria-label or labelledby to read it.
This PR corrects that behavior by refering the existing page size label
using `aria-labelledby`, and not setting an `aria-label`. The mdc-select
will append a reference to the value of the combobox to the
aria-lablledby. This gives us a list of ids of both the label and the
value of the combobox. That way we can be sure that all screenreaders
(including Windows screenreaders) will read both the value and label of
the combobox.
zarend
force-pushed
the
mdc-paginator-screenreader
branch
from
482e969 to
f223301
Compare
|
@zarend were you able to test this fix on Windows and confirm it addresses the issues? |
|
Yes, I validated that this fixes the bug on Windows Firefox using the mdc-paginator demo in the dev-app. |
jelbourn
approved these changes
Jul 21, 2021
| @@ -66,6 +68,10 @@ export class MatPaginator extends _MatPaginatorBase<MatPaginatorDefaultOptions> | |||
| /** If set, styles the "page size" form field with the designated style. */ | |||
| _formFieldAppearance?: MatFormFieldAppearance; | |||
|
|
|||
| /** ID for the DOM node containing the pagiators's items per page label. */ | |||
| readonly _pageSizeLabelId = `mat-paginator-page-size-label-${nextUniqueId++}`; | |||
There was a problem hiding this comment.
I might shorten this to something like mat-pgntr-x just to shave off a few bytes
zarend
changed the title
aria-labelledby
mmalerba
pushed a commit
that referenced
this pull request
Jul 23, 2021
… `aria-labelledby` (#23172) Fixes a screenrader bug on the mdc-paginator for the page size combobox ("Items per page: [combo]"). On Firefox, JAWS and NVDA do not read the value of the combobox, and only read the label. This happens because the mdc-paginator explicitly sets an `aria-label` on the `mdc-select` for the page size label. This causes the mdc-select to not apply an aria-labelledby, which would reference the value of the combobox. This leaves us with only relying on inner text to read the value of the combobox and not having an aria-label or labelledby to read it. This PR corrects that behavior by refering the existing page size label using `aria-labelledby`, and not setting an `aria-label`. The mdc-select will append a reference to the value of the combobox to the aria-lablledby. This gives us a list of ids of both the label and the value of the combobox. That way we can be sure that all screenreaders (including Windows screenreaders) will read both the value and label of the combobox. (cherry picked from commit 85a7e45)
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
See commit message for description.
Original bug is filed internally at http://b/188218083
From the bug report:
ENVIRONMENT
OS | Browser | Assistive Technology
Windows version 20H2, Firefox version 88.0.1 (64-bit)
JAWS 2021 Version 2021.2102.34 ILM,
NVDA version 2020.4
PREREQUISITES
Turn on screen reader
STEPS TO REPRODUCE
Open Mozilla Firefox
Navigate to https://xap-gallery.googleplex.com/embed/a11y/mdc-paginator
Tab to the number of items combo box.
Notice the announcement.
EXPECTED RESULT(S)
the value of the combo box should be announced by the screen reader.
ACTUAL RESULT(S)
The screen reader announces the role of the combo box, but not the value . e.g. “Items per page: Combo box, To change the selection use the Arrow keys”.
ADDITIONAL NOTE(S)
This issue is only reproducible in Mozilla Firefox.
VIDEO/SCREENSHOT(S)
https://drive.google.com/file/d/1HRDaA8bXKXlduobTUmWUraAUd7v1tZ5h/view?usp=sharing&resourcekey=0-rNDyr76TRjgPc9mEQH-exg