[Security:Rules:Benchmarks]Flyout missing title from announcement · elastic/kibana#227791

(4 留言) (0 反應) (0 負責人)TypeScript (19,065 star) (8,021 fork)batch import

Project:AccessibilityTeam: SecuritySolutionTeam:Cloud SecurityWCAG Adefect-level-3good first issue

描述

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)

Understanding SC 4.1.2: Name, Role, Value (Level A)(https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html)

貢獻者指南

技術棧: typescriptreacthtmlcss
領域: frontendaccessibility
議題類型: accessibility
難度: 2
預計時間: 1-3 hours
活動狀態: fresh
清晰度: clear
前置要求: Understanding of ARIA attributesFamiliarity with React and TypeScript
新手友善度: 75
研究方向: 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.