elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.72k stars 8.14k forks source link

(Accessibility) Filter language popover needs to identify `KQL` or `Lucene` as selected to screen readers #151506

Open 1Copenut opened 1 year ago

1Copenut commented 1 year ago

Steps to reproduce

  1. Enable a sample data set in Kibana and navigate to the dashboard view 2.Turn on a screen reader like VoiceOver or NVDA
  2. Tab to the "Saved query menu" button and press Enter
  3. Tab through to the "Language: KQL, button" option and press Enter again
  4. You should press Tab 2 more times when the second panel loads
  5. You should hear "Kay Queue Ele, button" read aloud. The screen reader will not provide any indication this is the selected language.
kql-selected

Actual Result

Expected Result

Possible code snippet

<button
  class="euiContextMenuItem"
  data-test-subj="kqlLanguageMenuItem"
  type="button">
  <span class="euiContextMenu__itemLayout">
    <svg
      aria-hidden="true"
      class="euiIcon euiContextMenu__icon css-e8xmlg-euiIcon-m-inherit"
      height="16"
      role="img"
      viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.5 12a.502.502 0 01-.354-.146l-4-4a.502.502 0 01.708-.708L6.5 10.793l6.646-6.647a.502.502 0 01.708.708l-7 7A.502.502 0 016.5 12"
fill-rule="evenodd"></path>
    </svg>
    <span class="euiContextMenuItem__text">KQL</span>
!   <EuiScreenReaderOnly />
!   https://eui.elastic.co/#/utilities/accessibility#screen-reader-only
+   <span class="euiScreenReaderOnly">selected</span>
  </span>
</button>

Kibana Version: v8.8.0

OS: MacOS Monterey

Browser: Safari

Screen reader: [if relevant] VoiceOver

Relevant WCAG Criteria:

elasticmachine commented 1 year ago

Pinging @elastic/kibana-accessibility (Project:Accessibility)

elasticmachine commented 1 year ago

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)