Let the tool rail be pressed, not only read
The rail is the develop view's primary navigation and reached the platform as four pieces of static text. The labels got through — a `Text` announces itself — so a screen reader could read "Photo, Crop, Local, Repair" and had no way to learn that any of them could be pressed, or which one was currently held. The one control that decides what a click on the photograph does was a caption. Each entry now declares itself a checkable button carrying the tool's own word, with the held state reported rather than left to the fill. Checkable is unconditional here, unlike `Button`'s: a rail entry is always a held-or-not state, so an unheld one should say "not pressed" rather than pass for an ordinary button. The action repeats the click handler's expression rather than calling it. A `TouchArea`'s `clicked` is raised by the pointer and cannot be raised from a binding, so the alternative is a function wrapping two lines — and the duplicated ternary sits four lines below the original where the two cannot drift out of sight of each other. Worth recording for the next control like this: `accessible-*` on an element inside a `for` does work, despite the accessibility pass skipping repeated elements. `process_repeater_components` runs first and moves the bindings into a real component whose root is not repeated; what the later pass skips is the empty placeholder left behind. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -121,6 +121,26 @@ export component ToolRail inherits Rectangle {
|
||||
root.picked(entry.on ? ViewMode.photo : tool.mode);
|
||||
}
|
||||
|
||||
// **The word below is drawn; this is what makes it a control.**
|
||||
// Without these the rail reaches a screen reader as four pieces of
|
||||
// static text — the labels get through, because a `Text` announces
|
||||
// itself, and nothing says any of them can be pressed. That is the
|
||||
// develop view's primary navigation reduced to a caption.
|
||||
//
|
||||
// `checkable` unconditionally, unlike `Button`'s: a rail entry is
|
||||
// always a held-or-not state, so an unheld one should say "not
|
||||
// pressed" rather than pass for an ordinary button. The action
|
||||
// repeats the click handler rather than calling it, because a
|
||||
// `TouchArea`'s `clicked` is raised by the pointer and cannot be
|
||||
// raised from here.
|
||||
accessible-role: button;
|
||||
accessible-label: tool.label;
|
||||
accessible-checkable: true;
|
||||
accessible-checked: entry.on;
|
||||
accessible-action-default => {
|
||||
root.picked(entry.on ? ViewMode.photo : tool.mode);
|
||||
}
|
||||
|
||||
// The lit tile, and the only marker there is. Inset from the
|
||||
// rail's edges so the run of four reads as four things rather than
|
||||
// as one striped column.
|
||||
|
||||
Reference in New Issue
Block a user