[Collapsable panels][A11y] Tabbing through panels in a correct order

mbondyra commented 1 week ago

Summary

This is a preparatory step for keyboard navigation improvements.

It ensures proper tabbing order by aligning grid positions with the sequence in the HTML structure, as recommended for accessibility. Manipulating the tabindex property is an alternative but it's not a good approach. Keeping grid layouts consistent with the HTML flow is a more sustainable and accessible approach, as outlined in related documentation.

https://github.com/user-attachments/assets/d41eac8d-1ee1-47b1-8f40-e3207796573b

I also modified styles for drag and resize handles.

hover:

focus:

elasticmachine commented 1 week ago

Pinging @elastic/kibana-presentation (Team:Presentation)

elasticmachine commented 1 week ago

:green_heart: Build Succeeded

Buildkite Build
Commit: 5e1dd2b2f0a86583cadc83b72c56af77b664a7ca

Metrics [docs]

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.