This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(chips): Add basic accessibility support.
Previously, chips had no, or very broken, support for accessibility. Make many updates to fix broken functionality and add required features. - Remove existing `aria-hidden` attributes. - Dynamically apply required `role` and `aria-owns` attributes. - Ensure `tabindex` is set properly on all elements. Particularly, you can now tab to, and navigate through, a set of chips in readonly mode. - Provide new `input-aria-label` option to identify the inputs. - Provide new `container-hint` option used when the element is in readonly mode. - Provide new `md-chip-append-delay` option which controls the delay (in ms) before a user can add a new chip (fixes screen readers). - Fix issue with `delete-hint` never being read by screen readers because it was outside of the chip. - Fix keyboard navigation to properly wrap when moving both left or right. - Fix keyboard navigation when in readonly mode. - Fix issue where the wrong chip may be focused because the old chip was still in the DOM. Additionally update the Chips docs with new Accessibility info and a few other minor changes like removing the "WORK IN PROGRESS" notice. BREAKING CHANGES **MAJOR** In order to make the chips fully accessible and work properly across a wide variety of screen readers, we have added a 300ms delay after appending a chip before we re-focus the input. This is necessary because some screen readers change operational modes when the enter key is pressed inside of an input and this causes the screen reader to move into "navigation" mode and no longer apply keystrokes to the input. Additionally, this ensures that the newly added chip is properly announced to the screen readers. You **may** alter this value with the new `md-chip-append-delay` attribute, however using a value less than `300` can cause issues on JAWS and NVDA and will make your application inaccessible to those users. Note 1: This issue only seems to affect chips appended when using the `enter` key. If you override the `md-separator-keys` and disable the `enter` key (and enable something like `,` or `;`), you may be able to reduce this delay to `0` and achieve past functionality. Note 2: This issue does not appear to affect VoiceOver or ChromeVox, so if you are only targeting those users, you may be able to reduce the delay to `0`. **MINOR** We consider the following to be minor breaking changes since we never expected these attributes/elements to be utilized by developers. Nonetheless, we want to ensure that they are documented. - The `role` of the `.md-chip-content` has been modified from `button` to `option` so that it works with the new `listbox` role of it's parent. If you rely on this role being `button`, you should update your code accordingly. - The delete hint on removable chips now resides inside of the `div.md-chip-content` rather than the parent `md-chip` element where it could not be read by screen readers. If you interact with this element (in CSS or JS) please update your selectors/code to account for the new DOM hierarchy. Fixes #9391.
- Loading branch information
1 parent
7e49c78
commit 184467c
Showing
11 changed files
with
475 additions
and
73 deletions.
There are no files selected for viewing
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
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
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
<p> | ||
<b>Note:</b> Version 1.1.2 drastically improves keyboard and screen reader accessibility for the | ||
<code>md-chips</code> component, but also adds a <code>300ms</code> delay after appending a chip | ||
in order to achieve this. | ||
</p> | ||
|
||
<p> | ||
Please see the <a href="api/directive/mdChips">documentation</a> for more information and for | ||
the new option <code>md-chip-append-delay</code> which allows you to customize this delay. | ||
</p> |
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
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
Oops, something went wrong.