feat(list): Update list to toggle tabindex of radio/checkbox #3542
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
Codecov Report
@@ Coverage Diff @@
## master #3542 +/- ##
=========================================
Coverage ? 98.39%
=========================================
Files ? 120
Lines ? 5058
Branches ? 627
=========================================
Hits ? 4977
Misses ? 81
Partials ? 0
Continue to review full report at Codecov.
|
|
All 389 screenshot tests passed for commit 7e5cf49 vs. |
kfranqueiro
suggested changes
Sep 12, 2018
packages/mdc-list/README.md
Outdated
| a list item. The MDCList will perform the following actions for each key press | ||
| As the user navigates through the list, any `button`, `a`, `input[type="radio"]` and `input[type="checkbox"]` elements | ||
| within the list will receive `tabindex="-1"` when the list item is not focused. When the list item receives focus, the | ||
| child `button` and `a` elements will receive `tabIndex="0"`. This allows for the user to tab through list item elements |
There was a problem hiding this comment.
the first sentence was updated but not this one; how about "the aforementioned elements"
packages/mdc-list/README.md
Outdated
| @@ -352,7 +352,7 @@ Method Signature | Description | |||
| `addClassForElementIndex(index: Number, className: String) => void` | Adds the `className` class to the list item at `index`. | |||
| `removeClassForElementIndex(index: Number, className: String) => void` | Removes the `className` class to the list item at `index`. | |||
| `focusItemAtIndex(index: Number) => void` | Focuses the list item at the `index` value specified. | |||
| `setTabIndexForListItemChildren(index: Number, value: Number) => void` | Sets the `tabindex` attribute to `value` for each child `button` and `a` element in the list item at the `index` specified. | |||
| `setTabIndexForListItemChildren(index: Number, value: Number) => void` | Sets the `tabindex` attribute to `value` for each child button, anchor, radio button or checkbox element in the list item at the `index` specified. | |||
There was a problem hiding this comment.
change "or" back to "and"?
packages/mdc-list/README.md
Outdated
| @@ -364,8 +364,8 @@ Method Signature | Description | |||
| `setSingleSelection(value: Boolean) => void` | Sets the list to be a selection list. Enables the `enter` and `space` keys for selecting/deselecting a list item. | |||
| `setSelectedIndex(index: Number) => void` | Toggles the `selected` state of the list item at index `index`. | |||
| `setUseActivated(useActivated: boolean) => void` | Sets the selection logic to apply/remove the `mdc-list-item--activated` class. | |||
| `handleFocusIn(evt: Event) => void` | Handles the changing of `tabindex` to `0` for all `button` and `a` elements when a list item receives focus. | |||
| `handleFocusOut(evt: Event) => void` | Handles the changing of `tabindex` to `-1` for all `button` and `a` elements when a list item loses focus. | |||
| `handleFocusIn(evt: Event) => void` | Handles the changing of `tabindex` to `0` for all button, anchor, radio, or checkbox elements when a list item receives focus. | |||
There was a problem hiding this comment.
Change "or" back to "and" on these lines?
packages/mdc-list/constants.js
Outdated
| @@ -34,7 +34,8 @@ const strings = { | |||
| ARIA_ORIENTATION: 'aria-orientation', | |||
| ARIA_ORIENTATION_HORIZONTAL: 'horizontal', | |||
| ARIA_SELECTED: 'aria-selected', | |||
| FOCUSABLE_CHILD_ELEMENTS: `.${cssClasses.LIST_ITEM_CLASS} button:not(:disabled), .${cssClasses.LIST_ITEM_CLASS} a`, | |||
| FOCUSABLE_CHILD_ELEMENTS: `.${cssClasses.LIST_ITEM_CLASS} button:not(:disabled), .${cssClasses.LIST_ITEM_CLASS} a, | |||
| .${cssClasses.LIST_ITEM_CLASS} input[type="radio"], .${cssClasses.LIST_ITEM_CLASS} input[type="checkbox"]`, | |||
There was a problem hiding this comment.
Should these also have :not(:disabled)? (I'm not sure what the use case for this is on button)
kfranqueiro
approved these changes
Sep 13, 2018
|
All 409 screenshot tests passed for commit e0f49b0 vs. |
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.
fixes: #3509