[Security:Rules:Benchmarks]Missing Search announcement for options list · elastic/kibana#227770

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

Project:AccessibilityTeam: SecuritySolutionTeam:Cloud SecurityWCAG Adefect-level-2good first issueimpact:high

描述

Description All interactive elements has to be announced for the user, using assistive technology, to understand what element it is, how to interact with 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 CIS Section or Rule Number and press Enter. 2.Press Tab. 3.Observe page and screen reader.

UI elements + VoiceOver

Actual Result

Options list opens with the first element being Search field, which is not announced for the user.

Expected Result

Search field for Search CIS Section is announced for the user.

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)
Understanding SC 1.3.1: Info and Relationships (Level A)(https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)

貢獻者指南

技術棧: typescriptreact
領域: frontendaccessibility
議題類型: bug
難度: 2
預計時間: 1-3 hours
活動狀態: fresh
清晰度: clear
前置要求: basic knowledge of web accessibilityfamiliarity with React
新手友善度: 80
研究方向: The issue is that the search field inside the options list on the Security > Rules > Benchmarks page is not announced by screen readers. To fix this, locate the component rendering the options list (likely in x pack/plugins/security solution/public/management/pages/benchmarks or similar). Add an aria label or role='search' to the input element. Ensure the field is given a programmatic label that can be announced. Test with VoiceOver on Safari.