fix(list): Change default class to activated #3388
Conversation
|
All 353 screenshot tests passed for commit 9c536e2 vs. |
Codecov Report
@@ Coverage Diff @@
## master #3388 +/- ##
==========================================
+ Coverage 98.45% 98.45% +<.01%
==========================================
Files 123 123
Lines 5181 5185 +4
Branches 639 640 +1
==========================================
+ Hits 5101 5105 +4
Misses 80 80
Continue to review full report at Codecov.
|
|
All 353 screenshot tests passed for commit a7e7adc vs. |
williamernest
force-pushed
the
fix/list/allow-activated-or-selected-class
branch
from
a7e7adc
to
06121ac
Compare
|
All 353 screenshot tests passed for commit 06121ac vs. |
|
All 353 screenshot tests passed for commit cb31cb9 vs. |
|
All 353 screenshot tests passed for commit f1f0b5d vs. |
|
All 353 screenshot tests passed for commit 8b1a968 vs. |
| @@ -134,7 +134,7 @@ OR | |||
| ### Single Selection List | |||
|
|
|||
| MDC List can handle selecting/deselecting list elements based on click or keyboard action. When enabled, the `space` and `enter` keys (or `click` event) will trigger an | |||
There was a problem hiding this comment.
selecting/deselecting
is this still relevant?
There was a problem hiding this comment.
Yes, when clicked it will deselect the previously selected list item and select the currently selected list item.
| `setSelectedIndex()` should be called with the initially selected element immediately after the foundation is | ||
| instantiated. | ||
| the `aria-selected` attribute, the `mdc-list-item--selected` or `mdc-list-item--activated` class should be added, | ||
| and the `tabindex` of the selected element should be `0`. The first list item should have the `tabindex` updated |
There was a problem hiding this comment.
is it mandator for user to set tabindex -1 explicitly on first element? Doesn't list automatically sets tabindex to -1 to all other list items?
There was a problem hiding this comment.
If the user has marked an element as selected, they should render the first list element to tabindex=-1. The foundation may not be instantiated immediately when the page is loaded (such as in Wiz).
| this.foundation_.setUseActivatedClass(true); | ||
| } | ||
|
|
||
| this.singleSelection = true; |
There was a problem hiding this comment.
is it safe to assume user wants to have single selection mode when list has selected item?
Multi-selectable list can initially have one item selected.
There was a problem hiding this comment.
I think it is safe to assume that the user has a single selection list when using the selected or activated classes. There isn't a multi-selectable list, but this can be changed if we implement one.
demos/list.html
Outdated
| @@ -53,7 +53,7 @@ | |||
| info | |||
| </a> | |||
| </li> | |||
| <li class="mdc-list-item"> | |||
| <li class="mdc-list-item mdc-list-item--activated"> | |||
There was a problem hiding this comment.
It would be helpful to have separate demos for following cases:
- singleSelect: with
--selected - singleSelect: with
--activated - multiSelect
There was a problem hiding this comment.
I'll add a demo for --activated.
demos/list.html
Outdated
| @@ -53,7 +53,7 @@ | |||
| info | |||
| </a> | |||
| </li> | |||
| <li class="mdc-list-item"> | |||
| <li class="mdc-list-item mdc-list-item--activated"> | |||
There was a problem hiding this comment.
aria-selected and tabindex attr are missing for activated item.
|
All 353 screenshot tests passed for commit 7082f39 vs. |
|
All 353 screenshot tests passed for commit 7ffb214 vs. |
fixes: #3383, fixes: #3361
This changes the default class to add/remove from
--selectedto--activated. It preserves the ability to use--selectedby adding a foundation variableuseSelectedClass_(and setter methods).Removes the ability to toggle the activated class off by clicking the same element twice.