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
[SolutionNav] Fixed tabindex
and collapsible functionality
#107462
Conversation
src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
Outdated
Show resolved
Hide resolved
@elasticmachine merge upstream |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
code owner change LGMT
@elasticmachine merge upstream |
💚 Build Succeeded
Metrics [docs]Page load bundle
History
To update your PR or re-run it, just comment with: |
…#107462) * Fixed `tabIndex` * Added embellishment back in * Fixed the collapse button visibility and usability
…#107462) * Fixed `tabIndex` * Added embellishment back in * Fixed the collapse button visibility and usability
💚 Backport successful
This backport PR will be merged automatically after passing CI. |
#107943) * Fixed `tabIndex` * Added embellishment back in * Fixed the collapse button visibility and usability
Fixed
tabindex
The Solution Nav component was setting
tabindex=-1
manually on every side nav item passed in when the side nav was set to hidden because of the collapsibility. Unfortunately, it was not removing this when the side nav was made visible again, degrading the keyboard accessibility from then on.I've changed that function to accept the
isHidden
prop instead and then set thetabindex
based on that prop.Increased usability of the collapsible button
Gave the button a background color when in expanded mode.
Before, the button could potentially overlap the scrollbar making it hard to distinguish. I simply changed this to have a white (empty shade) background so that it stays visible with still being subtle.
And added the embellishment back in 😉
Made the collapsed version of the button expand the entire collapsed area
Before, the target area of the expand button was only
24x24px
which is really small especially on medium sized screens when this is the only way to trigger the solution nav. I have instead grown the button to expand the entire area creating a large hit area for expansion. (And also decreased the width to give more space back to the content).Checklist
Delete any items that are not applicable to this PR.