File tree Expand file tree Collapse file tree 7 files changed +40
-14
lines changed Expand file tree Collapse file tree 7 files changed +40
-14
lines changed Original file line number Diff line number Diff line change @@ -100,5 +100,5 @@ desired display value. Then bind it to the autocomplete's `displayWith` property
100100The input for autocomplete without text or labels should be given a meaningful label via
101101` aria-label ` or ` aria-labelledby ` .
102102
103- Autocomplete trigger sets ` aria-owns ` to the autocomplete's id, and sets ` aria-activedescendant ` to
104- the active option's id.
103+ Autocomplete trigger is given ` role="combobox" ` . The trigger sets ` aria-owns ` to the autocomplete's
104+ id, and sets ` aria-activedescendant ` to the active option's id.
Original file line number Diff line number Diff line change @@ -40,5 +40,5 @@ use a neutral background color based on the current theme (light or dark). This
4040` 'primary' ` , ` 'accent' ` , or ` 'warn' ` .
4141
4242### Accessibility
43- Chips have role="option", while the chip list has ` role="listbox " ` . The chip input should have a
44- placeholder or be given a meaningful label via ` aria-label ` or ` aria-labelledby ` .
43+ A chip-list behaves as a ` role="listbox" ` , with each chip being a ` role="option " ` . The chip input
44+ should have a placeholder or be given a meaningful label via ` aria-label ` or ` aria-labelledby ` .
Original file line number Diff line number Diff line change @@ -128,8 +128,20 @@ export class AppModule() {}
128128```
129129
130130### Accessibility
131- The dialog has ` role="dialog" ` , and dialog role can be overwritten to ` alertdialog ` in the
132- appropriate context .
131+ By default, each dialog has ` role="dialog" ` on the root element. The role can be changed to
132+ ` alertdialog ` via the ` MdDialogConfig ` when opening .
133133
134- The dialog will focus on the first tabbable element when opened,
135- and restore focus to the element that was focused before the dialog opened when closed.
134+ The ` aria-label ` , ` aria-labelledby ` , and ` aria-describedby ` attributes can all be set to the
135+ dialog element via the ` MdDialogConfig ` as well. Each dialog should typically have a label
136+ set via ` aria-label ` or ` aria-labelledby ` .
137+
138+ #### Focus management
139+ By default, the first tabbable element within the dialog will receive focus upon open.
140+
141+ Tabbing through the elements of the dialog will keep focus inside of the dialog element,
142+ wrapping back to the first tabbable element when reaching the end of the tab sequence.
143+
144+ #### Keyboard interaction
145+ By default pressing the escape key will close the dialog. While this behavior can
146+ be turned off via the ` disableClose ` option, users should generally avoid doing so
147+ as it breaks the expected interaction pattern for screen-reader users.
Original file line number Diff line number Diff line change @@ -100,8 +100,10 @@ panel can be expanded at a given time:
100100```
101101
102102### Accessibility
103+ The expansion-panel aims to mimic the experience of the native ` <details> ` and ` <summary> ` elements.
103104The expansion panel header has ` role="button" ` . The expansion panel header has attribute
104105` aria-controls ` with the expansion panel's id as value.
105106
106107The expansion panel headers are buttons. Users can use the keyboard to activate the expansion panel
107- header to switch between expanded state and collapsed state.
108+ header to switch between expanded state and collapsed state. Because the header acts as a button,
109+ additional interactive elements should not be put inside of the header.
Original file line number Diff line number Diff line change @@ -154,7 +154,7 @@ Here are the available global options:
154154### Accessibility
155155The ` mdInput ` directive works with native ` <input> ` to provide an accessible experience.
156156
157- If a placeholder attributed is added to the input, or a ` md-placeholder ` element is added
157+ If a placeholder attribute is added to the input, or a ` md-placeholder ` element is added
158158in the form field, the placeholder text will automatically be used as the label for the input.
159159If there's no placeholder specified, ` aria-label ` , ` aria-labelledby ` or ` <label for=...> ` should be
160160added.
Original file line number Diff line number Diff line change @@ -48,6 +48,9 @@ and selection).
4848
4949### Accessibility
5050Tables without text or labels should be given a meaningful label via ` aria-label ` or
51- ` aria-labelledby ` .
51+ ` aria-labelledby ` . The ` aria-readonly ` defaults to ` true ` if it's not set.
5252
53- Table's default role is 'grid', and it can be changed through ` role ` attribute.
53+ Table's default role is ` grid ` , and it can be changed to ` treegrid ` through ` role ` attribute.
54+
55+ ` md-table ` does not manage any focus/keyboard interaction on its own. Users can add desired
56+ focus/keyboard interactions in their application.
Original file line number Diff line number Diff line change @@ -81,5 +81,14 @@ the `active` property to determine which tab is currently active. The correspond
8181` <router-outlet> ` can be placed anywhere in the view.
8282
8383### Accessibility
84- ` MdTabNav ` s without text or labels should be given a meaningful label via ` aria-label ` or
85- ` aria-labelledby ` .
84+ Tabs without text or labels should be given a meaningful label via ` aria-label ` or
85+ ` aria-labelledby ` . For ` MdTabNav ` , the ` <nav> ` element should have a label as well.
86+
87+
88+ ### Keyboard shortcuts
89+
90+ | Shortcut | Action |
91+ | ----------------------| ----------------------------|
92+ | ` LEFT_ARROW ` | Move focus to previous tab |
93+ | ` RIGHT_ARROW ` | Move focus to next tab |
94+ | ` SPACE ` or 'ENTER' | Switch to focused tab |
You can’t perform that action at this time.
0 commit comments