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:
Andreas Reinhold / reini
2026-09-17 04:18:10 +02:00
co-authored by Claude Opus 5
parent 613ac20013
commit b7e16476cd
7 changed files with 102 additions and 6 deletions
+5
View File
@@ -9,6 +9,11 @@
* keep their own clicks. How a row looks while that happens is
* resources/css/components/card.css and list-item.css.
*
* `data-md-selected` on a row that is not a card — the one whose sheet is open, say — draws M3's
* selected state, secondary-container under on-secondary-container ink, with the state layers over
* it (list-item.css; `<x-list-item selected>` writes it itself, and in `<x-table>` a plain row takes
* it too, table.css). A card keeps its own container.
*
* Not a stretched link (`::after { inset: 0 }`): Safari makes no containing block of a <tr>, so in
* a table every overlay would cover the whole table; and not one <button> around the row, which
* could hold no other buttons. The listeners sit on `document` and are added once.