elastic/kibana

[Security:Rules:Benchmarks]Flyout missing title from announcement

Open

#227791 opened on Jul 14, 2025

View on GitHub
 (4 comments) (0 reactions) (0 assignees)TypeScript (19,065 stars) (8,021 forks)batch import
Project:AccessibilityTeam: SecuritySolutionTeam:Cloud SecurityWCAG Adefect-level-3good first issue

Description

Description Dialog modal, flyout, field visible title should be announced for the users, especially using assistive technology to know what dialog modal, flyout opened, what field is active and what is needed to enter in it.

Preconditions Security -> Rules -> Benchmarks page. Any benchmark is selected from the table (Enter is pressed on it). Use Screen Reader (VoiceOver).

Steps to reproduce

1.Navigate to any value in Name column and press Enter. 3.Observe screen reader.

UI elements + VoiceOver

Actual Result

  • Flyout is announced without title, only "dialog".

Expected Result

  • It should be announced with a name "Ensure no 'root' user account access key exists".

Meta Issue

Version: 9.1.0

OS: macOS Sequoia

Browser: Safari Version 18.5

Screen reader: VoiceOver

WCAG or Vendor Guidance (optional)

Related to: https://github.com/elastic/kibana-team/issues/1773

Contributor guide

Tech stack
typescriptreacthtmlcss
Domain
frontendaccessibility
Issue type
accessibility
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
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.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Understanding of ARIA attributesFamiliarity with React and TypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
Locate the Flyout component used on the Security > Rules > Benchmarks page, likely in a React file under the security solution plugin. Look for how the flyout title is set; it should be associated with the benchmark name (e.g., 'Ensure no root user account access key exists'). Add an aria label or use aria labelledby pointing to the title element to ensure screen readers announce the flyout name. Check existing similar patterns in the codebase for reference.