Skip to content

fix(a11y): enable keyboard tab closure and expand pointer target size in QueryaTabStrip #1372

Closed

Description

@ZhuchkaTriplesix

Summary

In Querya UI Kit QueryaTabStrip (lib/shared/widgets/querya_tab_strip.dart, lines 294–317):

The tab close button is rendered as a raw GestureDetector containing a 13px close icon with padding: EdgeInsets.all(1):

  1. Pointer Target Violation: The effective hit area is only ~15x15 px. This violates WCAG 2.1 AA (minimum 24x24 px target size) and AAA (minimum 44x44 px target size), making it difficult to click precisely on high-DPI desktop screens without hitting the tab itself.
  2. Keyboard inaccessible: The close button cannot be reached via Tab navigation, and when keyboard focus is on a tab (_onKeyEvent), pressing Delete or Backspace does not close the focused tab (only arrowLeft, arrowRight, home, end are handled).
  3. No semantic label: Missing Semantics(button: true, label: 'Close $label tab').

Scope

  • In QueryaTabStrip._onKeyEvent, add handlers for LogicalKeyboardKey.delete and LogicalKeyboardKey.backspace to trigger widget.onClose!(index).
  • Expand the close button tap target to at least 24x24 px padding.
  • Wrap the close button in material.Semantics(button: true, label: 'Close $label tab') with a tooltip.
  • Add regression widget test in test/shared/widgets/querya_tab_strip_test.dart.

Activity

  1. added
    bugSomething isn't working
    frontendTheme parser epic label: frontend
    accessibilityReduced motion, OS accessibility preferences
    uiUser interface components and widgets
    uxUser experience, keyboard shortcuts and interactions
    P3Low priority / Polish & Enhancements
    on Oct 10, 2026
  2. ZhuchkaTriplesix commented on Oct 11, 2026

    @ZhuchkaTriplesix
    MemberAuthor

    Done in #1398 (merged into dev).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Low priority / Polish & EnhancementsaccessibilityReduced motion, OS accessibility preferencesbugSomething isn't workingfrontendTheme parser epic label: frontenduiUser interface components and widgetsuxUser experience, keyboard shortcuts and interactions

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions