elastic / kibana

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

(Accessibility) Ingest Node Pipelines UI #71666

Open jloleysens opened 4 years ago

jloleysens commented 4 years ago

Steps to reproduce

  1. Start Kibana on basic license
  2. Navigate to the Ingest Node Pipelines application (there should be at least 2 pipelines by default)
  3. Interact with a11y features in the app like opening a pipeline and re-ordering processors

Current list of a11y issues

  1. Use of react-virtualized leading to issue with HTML grid being 0 rows and 0 columns even though there are processors. This makes the HTML not traversable as a grid (react-window is a recommended alternative, matching EUI)
  2. ~No visual indication of "drop" button on keyboard focus. These are the buttons that you would use to place a processor after entering move mode~ https://github.com/elastic/kibana/pull/79122
  3. ~Other elements in the processor should not be focus-able while in move mode. This will provide a much smoother a11y experience~ https://github.com/elastic/kibana/pull/79122
  4. If the 4th item in a list of processors is moved to the 6th position, focus jumps back to the 4th item in the list. After moving a processors, the moved processor should get focus
  5. In the processor configuration form, the code editor (React monaco) is currently a focus trap
  6. When the duplicate processor action is taken, the newly duplicated processor should get focus
  7. When a new processor is created that processor should get focus or at least the list of processors should get focus
  8. Deleting a processor should focus the processors list
  9. Differentiate "Add a processor" buttons in their aria-labels. For instance, adding to the global on failure list should have a different aria-label to adding to the primary processors list
  10. When testing processors the "Output" pane is disabled, but the screen reader reports 2 tabs. We should use "aria-described-by" to indicate that the second tab is disabled (when it is disabled)
  11. After saving a pipeline and navigating back to the pipeline list view, focus should be in the flyout (at the moment focus is not on the flyout and the flyout cannot be accessed)
  12. Updated aria-label for drop zone buttons when they are disabled. The label should indicate that the processor cannot be moved here.
  13. There are 3 nested <main> tags on the ingest pages (there should be one)
  14. On the management page, headings jump to h3 but there are not h2 headings

Kibana Version:

Tested on commit b4737e81857

CC @myasonik

elasticmachine commented 4 years ago

Pinging @elastic/es-ui (Team:Elasticsearch UI)

alisonelizabeth commented 3 years ago

It'd be great if we can add some accessibility tests as part of this work.

elasticmachine commented 2 weeks ago

Pinging @elastic/kibana-management (Team:Kibana Management)