elastic/kibana

`Home` > `Cases` > `Create a case`- Tools in toolbar are not presented as a group

Open

#194954 opened on Aug 9, 2024

View on GitHub
 (7 comments) (0 reactions) (1 assignee)TypeScript (19,065 stars) (8,021 forks)batch import
KibanaPlatEngineKTLOProject:AccessibilityTeam:CasesWCAG Abugdefect-level-2good first issueobs-accessibilty

Description

Point of contact

@petrklapka

Description

Home > Project Settings > Integrations- Radio buttons (Recommended, Elastic Agent, Beats) do not have context conveyed via screen reader

Steps to recreate

Pre-requisite: Screen reader is activated

  1. Navigate to the Serverless Observability Solution instance.
  2. Click Cases in Left Nav
  3. Select Create a case (blue button in upper-right)
  4. Keyboard navigate to Description field and navigate through the text toolbar

Expected Result: -When tabbing to the tools menu, user tabs to the first tool and is informed that it is a group of tools for text input. User then navigates and selects the toolbar via arrow keys. The next tab event moves out of the toolbar to the next focusable element.

Actual Result: -Tab key moves focus through each tool in the toolbar.

Screenshots or Trace Logs

cases_create_text_field_toolbar

Proposed solution

Acceptance criteria

  • Axe tests do not report violations
  • e2e test suite passes with zero violations

WCAG or Vendor Guidance (optional)

Contributor guide

Tech stack
typescriptreacthtmlcss
Domain
frontendaccessibility
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Understanding of ARIA toolbar roleFamiliarity with React and Kibana codebaseBasic knowledge of screen reader behavior
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the Cases plugin's toolbar component (likely in x pack/plugins/cases/public/components) to understand its current implementation. The toolbar should use role='toolbar' and support arrow key navigation between tools. Review existing e2e tests for accessibility violations and ensure the fix aligns with WCAG SC 1.3.1. Check the referenced issue for similar patterns in other Kibana toolbars.