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

(3 comments) (0 reactions) (0 assignees)TypeScript (19,065 stars) (8,021 forks)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
Issue 種別: 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.