Skip to content

fix(a11y): keyboard close and a 24 px close target in QueryaTabStrip - #1398

Merged
ZhuchkaTriplesix merged 1 commit into
devfrom
issue/1372-tab-strip-keyboard-close
Oct 10, 2026
Merged

ZhuchkaTriplesix merged 1 commit into
devfrom
issue/1372-tab-strip-keyboard-close

Conversation

@ZhuchkaTriplesix

Copy link
Copy Markdown
Member

Closes #1372

Problem

  • The close icon was a 13 px glyph with 1 px padding: a ~15 px pointer target.
  • A focused tab ignored Delete / Backspace, so a keyboard user could not close it.
  • The close button had no semantics of its own: the whole tab was inside ExcludeSemantics.

Change

  • _onKeyEvent: Delete and Backspace call onClose(index), only when canClose allows it.
  • The close hit area is a 24x24 box. The tab's padding around it shrinks (left 10, right 5, vertical 2 dense / 6 standard) so tabs keep their width and height.
  • ExcludeSemantics now wraps only the label text. The close button is a container Semantics(button, label: 'Close <tab> tab') inside a tooltip, so it is a separate node under the tab.

Not in this PR

The close button is not a separate Tab stop; Delete / Backspace on the focused tab is the keyboard path. Golden querya_tab_strip.png (tag golden, excluded from CI) may need a refresh if the 1 px padding shift is visible.

Tests

test/shared/querya_tab_strip_test.dart: Delete, Backspace, canClose respected, and the close button's size, semantics label, tooltip and tap.

Not run locally; CI is the check.

- Delete / Backspace close the focused tab (honouring canClose)
- the close button hit area is 24x24; padding shrinks so the tab keeps its size
- the close button is its own labelled semantics button with a tooltip
Closes #1372.
@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 ux User experience, keyboard shortcuts and interactions P3 Low priority / Polish & Enhancements labels Oct 10, 2026
@ZhuchkaTriplesix
ZhuchkaTriplesix merged commit 5ab1a38 into dev Oct 10, 2026
13 checks passed
@ZhuchkaTriplesix
ZhuchkaTriplesix deleted the issue/1372-tab-strip-keyboard-close 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 P3 Low priority / Polish & Enhancements ui User interface components and widgets ux User experience, keyboard shortcuts and interactions

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant