[Lens] accessibility screen reader issues

[mbondyra]

Summary

Fixes #83872

Hey @myasonik here are my responses to the issues you listed:

• All of the field lists should be lists (ul > li > button)
  we are not able to make button a direct child of li, as it’s a popover… Is this ok?

• The layer configuration flyout needs to should have a proper heading, not just a button that looks like one

  • Recommendation: Make the button just the back arrow icon, then make the text an h2. You can still put a hover effect and click action on the h2 and the back arrow icon will maintain the semantics you need and be able to accurately describe what's happening.
    Done

• Select a function buttons act like a radio group... They should be a radio group.
  Eui doesn't provide styling for radio group that we need here. Should we make this a separate issue as it seems like a bigger effort (and also an effort from EUI team side)?

• "Remove configuration" button should say what configuration it will remove (e.g., "Remove timestamp from Horizontal axis")
  Done

• The data-test-subj="lns-dimensionTrigger" button has an aria-label of "click to edit configuration or drag to move". Similar to above, it needs to say what configuration it is editing. There's no way to figure that out right now with activating it. Also while drag+drop is not keyboard accessible, it is probably not worth mentioning...
  It is keyboard accessible in groups for reordering (check data table or pie chart - for xy charts we currently have a bug so it’s turned off)
changed to “Click to edit configuration for {label} or drag to move”.

• All of the "Drop a field or click to add" buttons should have an aria-label adding to which where this field will be added (e.g., `aria-label="Drop a field or click to add to the vertical axis")
  Done

• All of the "Delete layer" buttons should have an aria-label describing which layer they will trash.
  Added an index (we don’t have other way of identifying layer, except for long and random id)

• When the visualization is unsaved, the h1 just says "Unsaved". "Unsaved visualization" or "Unsaved workspace" or something along those lines would be better.
  Changed to Unsaved visualization

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[myasonik]

Select a function buttons act like a radio group... They should be a radio group.
Eui doesn't provide styling for radio group that we need here. Should we make this a separate issue as it seems like a bigger effort (and also an effort from EUI team side)?

Yeah, I'd open an EUI issue for it to get discussed. There's a chance EUI team will decide it's better to implement it in app though so it might still come back but it can be tracked as a separate effort.

[mbondyra]

@elasticmachine merge upstream

[mbondyra]

@elasticmachine merge upstream

[flash1293]

Looks really good to me, left some small comments.

[flash1293]

This looks a little strange because the button has the little y translation on hover while the heading doesn't: Can we make it look like the old version (no translation)?

[myasonik]

This PR is 🔥

🚀

[mbondyra]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: efe3c2d

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
lens	995.8KB	999.6KB	+3.8KB

History

• 💚 Build #91430 succeeded fa93967
• 💔 Build #91097 failed 81780408f57c858a1dab203e86395399bb946c70
• 💚 Build #91083 succeeded 905f600804c553db7fa6cb602795532c97591344
• 💚 Build #90948 succeeded f232650
• 💚 Build #90715 succeeded d842c17

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[flash1293]

Tested in Chrome and Firefox, works fine, looks fine, LGTM