fix(ui): keep a touch-only affordance reachable, or absent
Three controls are revealed by :hover and are the only route to their action on a device that has none. #68 hid the home card's play button on touch, which was right because tapping the card does the same thing; these are the opposite case, so hiding them removes the action outright and leaving them costs the same long-press flash #68 was filed for -- they are visibility:hidden / opacity:0, so on touch they are invisible controls that still take taps. track-details' cover-art overlay and remove, and shortcut-capture's reset, are always visible under `@media not all and (hover: hover)`. The queue row's remove is the third case the report names and takes the other treatment, because #60 has since landed: the row's context menu is a bottom sheet carrying "Remove from Queue", so the action is one long-press away and an always-visible X would spend part of a 424px row on something already reachable. It is display:none outside `(hover: hover) and (pointer: fine)` rather than visibility:hidden, which would leave a button holding its hit area and its place in the accessibility tree -- the trap this issue is about. The rule is not extracted into styles/ yet: that leaves two call sites of the always-visible form, under the four the report names. No tier here can render as a touch device, so the tests read the parsed stylesheet the way #68's does and say so; the touch and hover renderings were measured against the running app in a hasTouch context instead. Closes #137
This commit is contained in:
@@ -1462,6 +1462,32 @@ vary) wins, ours being told from theirs by **identity** rather than
|
||||
that ends the gesture is swallowed, keyed on the gesture rather than on
|
||||
a time window so the first tap on the menu it opened is not eaten too.
|
||||
|
||||
**A control revealed by `:hover` is gated on the device having hover,
|
||||
and which way round depends on whether it is the only route to its
|
||||
action.** The gate itself is not optional: a touch long-press
|
||||
synthesises a hover state in the WebView, so every one of these flashed
|
||||
into view during the 500 ms hold above — a control appearing because
|
||||
the user was reaching for a different one. Where the action is reachable
|
||||
another way the control is **absent** on a touch device (the home card's
|
||||
play button, #68; the queue row's remove, which the row's bottom-sheet
|
||||
menu carries since #60), and that is `display: none` outside
|
||||
`(hover: hover) and (pointer: fine)` rather than `opacity: 0` or
|
||||
`visibility: hidden`, both of which leave a button holding its hit area
|
||||
and its place in the accessibility tree. Where the control is the
|
||||
**only** route it is instead always visible under
|
||||
`@media not all and (hover: hover)` — `track-details`'s cover-art
|
||||
overlay and remove, `shortcut-capture`'s reset (#137) — because hiding
|
||||
it takes the action away entirely.
|
||||
|
||||
One thing to know before checking either: **no tier here can render as a
|
||||
touch device.** CDP's `Emulation.setEmulatedMedia` does not reach the
|
||||
component tier's iframe, and the e2e projects are Desktop Chrome and
|
||||
Desktop Safari, neither of which has touch. So
|
||||
`hover-affordance.test.ts` asserts the *parsed stylesheet* — which rule
|
||||
sits inside which media query — and says so; the regression it exists
|
||||
for is someone hoisting a rule out of its query as a tidy-up, which
|
||||
nothing on a desktop renders differently.
|
||||
|
||||
Three lists had no focused row to open a menu *from* — the queue panel
|
||||
and both playlist detail views — and gained a roving tab stop through
|
||||
`utils/roving-rows.ts`. **`track-list` deliberately does not use it**:
|
||||
|
||||
Reference in New Issue
Block a user