search

elastic / kibana

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

(Accessibility) Data aggregation color picker swatches must be keyboard focusable #152292

Open 1Copenut opened 1 year ago

1Copenut commented 1 year ago

Steps to reproduce

  1. Start Kibana and load the E*commerce sample data set
  2. Click the "Edit" button to edit and create visualizations
  3. Click Aggregation based > Line to load the editor
  4. Add at least one data point that draws a line on the chart
  5. Save this chart to your dashboard
  6. Click on the chart legend to open the color swatch picker
  7. Press Tab to set focus on the swatch picker flyout
  8. Press Tab again and verify focus does not go to the first swatch (which is a proper radio button).
Screen Shot 2023-02-27 at 2 58 26 PM
Screen Shot 2023-02-27 at 3 08 49 PM

Actual Result

Expected Result

Code Change The color swatches are marked up as label + input[type="radio"] but the radio buttons need a custom group name and ID/for attribute relationships. Should work correctly when those are updated.

Kibana Version: v8.8.0

OS: MacOS Monterey

Browser: Chrome

Relevant WCAG Criteria: SC 2.1.1: Keyboard (Level A)

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)