[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.