Skip to content

fix(a11y): focus ring and state semantics for QueryaIconButton - #1395

Merged
ZhuchkaTriplesix merged 1 commit into
devfrom
issue/1370-icon-button-focus-semantics
Oct 10, 2026
Merged

ZhuchkaTriplesix merged 1 commit into
devfrom
issue/1370-icon-button-focus-semantics

Conversation

@ZhuchkaTriplesix

Copy link
Copy Markdown
Member

Closes #1370

Problem

QueryaIconButton / QueryaToolbarButton gave keyboard users no visible focus indicator and screen readers no state: an active toggle (word wrap, filter, masking…) was announced as a plain button.

Change

  • Both buttons are now stateful and track focus through InkWell.onFocusChange; while focused the shape draws a 2px border in the theme's ring colour (it replaces the active border for that moment).
  • Both are wrapped in Semantics(button: true, enabled: onPressed != null, selected: isActive). The tooltip keeps providing the label, so it is not duplicated.
  • Public API and sizes are unchanged (dense 28 / standard 32 boxes).

Notes

  • selected rather than toggled: most callers are not real toggles and isActive: false must not be announced as "off".
  • Tests added for the ring (focus on/off) and for the semantics flags.

Not run locally; CI is the check.

…eryaToolbarButton

Track keyboard focus with InkWell.onFocusChange and draw a 2px ring in the
theme's ring colour, and wrap both buttons in Semantics (button, enabled,
selected) so screen readers announce active toggles. Closes #1370.
@github-actions github-actions Bot added bug Something isn't working frontend Theme parser epic label: frontend accessibility Reduced motion, OS accessibility preferences ui User interface components and widgets P2 Medium priority / Parity & Refactoring labels Oct 10, 2026
@ZhuchkaTriplesix
ZhuchkaTriplesix merged commit d657338 into dev Oct 10, 2026
13 checks passed
@ZhuchkaTriplesix
ZhuchkaTriplesix deleted the issue/1370-icon-button-focus-semantics branch October 11, 2026 15:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility Reduced motion, OS accessibility preferences bug Something isn't working frontend Theme parser epic label: frontend P2 Medium priority / Parity & Refactoring ui User interface components and widgets

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant