Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1Copenut opened this issue Feb 16, 2023 · 2 comments
Labels
Feature:Unified search Unified search related tasks impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. Project:Accessibility Team:Visualizations Visualization editors, elastic-charts and infrastructure WCAG A

Comments

@1Copenut
Copy link
Contributor

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

  • Screen reader announces "Kay Queue Ele, button"

Expected Result

  • Screen reader announces a more descriptive label like "Kay Queue Ele, selected, button" OR
  • "Kay Queue Ele, selected query language, button"

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
Copy link
Contributor

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

@botelastic botelastic bot added the needs-team Issues missing a team label label Feb 16, 2023
@jughosta jughosta added Team:Visualizations Visualization editors, elastic-charts and infrastructure Feature:Unified search Unified search related tasks labels Feb 20, 2023
@elasticmachine
Copy link
Contributor

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

@botelastic botelastic bot removed the needs-team Issues missing a team label label Feb 20, 2023
@stratoula stratoula added the impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. label Jun 1, 2023
@jb1b84 jb1b84 removed the vis:a11y label Aug 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Unified search Unified search related tasks impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. Project:Accessibility Team:Visualizations Visualization editors, elastic-charts and infrastructure WCAG A
Projects
None yet
Development

No branches or pull requests

6 participants