Fill a selected row written by hand in secondary-container again
1.x drew `data-selected` on any `data-list-row` that was not a card in secondary-container with on-secondary-container ink, whatever element the row was. 2.0.0 kept that only for `<x-list-item selected>` and a table row's `aria-selected="true"`, so an application's own `<li>`, `<div>` or `<tr>` with `data-md-list-row` and `data-md-selected` - the contract list-rows.js still describes - lost its selected state without a word. list-item.css now fills such a row, cards and list items excluded, and names the fill `--md-list-row-fill`, so hover, focus and press tint it as they tint a selected list item rather than replacing it (1.x's selected fill hid them). In `<x-table>`, `data-md-selected` selects a plain row too, beside `aria-selected="true"`, which ARIA allows on a row only in a grid. A browser test compares a hand-made selected `<li>` and a plain selected `<tr>` with the role pair in the light and dark themes, checks that a selected card keeps its own fill and that hover tints the row's fill; it fails without the change. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
613ac20013
commit
b7e16476cd
@@ -7,7 +7,8 @@
|
||||
* always wins, whatever layer it comes from. Header cells in title-small on-surface-variant over an
|
||||
* outline-variant rule, body cells in body-medium between outline-variant rules — the role itself,
|
||||
* never a fraction of it, since M3 reserves opacity for state layers and disabled. A selected row
|
||||
* (`aria-selected="true"`) is secondary-container. A row that opens something is `data-md-list-row`
|
||||
* (`data-md-selected`, or `aria-selected="true"` where the table is a grid, the only place ARIA
|
||||
* allows it on a row) is secondary-container. A row that opens something is `data-md-list-row`
|
||||
* and answers a pointer as a list row does (components/list-item.css, shared with `<x-card>` and
|
||||
* `<x-list-item>`); a selected one names its fill `--md-list-row-fill`, so that state layer is laid
|
||||
* over the secondary-container rather than in place of it.
|
||||
@@ -84,7 +85,7 @@
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
[data-md-table] :where(tbody tr[aria-selected='true']) {
|
||||
[data-md-table] :where(tbody tr:is([aria-selected='true'], [data-md-selected])) {
|
||||
--md-list-row-fill: var(--md-sys-color-secondary-container);
|
||||
|
||||
background-color: var(--md-list-row-fill);
|
||||
|
||||
Reference in New Issue
Block a user