[Serverless/SideNav] Initial state of selected nav items should not be wrapped in an "active" area #167330
Assignees
Labels
Project:Serverless
Work as part of the Serverless project for its initial release
Team:SharedUX
Team label for AppEx-SharedUX (formerly Global Experience)
Comments
tsullivan
added
Team:SharedUX
|
Pinging @elastic/appex-sharedux (Team:SharedUX) |
5 tasks
Ikuni17
pushed a commit
that referenced
this issue
Sep 27, 2023
## Summary Closes #162507 Relates to #166545 ^ additional IA-related tasks - related to the alignment discussions - can be found here ## Work for next steps In this PR, some work items are being saved for a next PR: 1. _Only affects Search solution_: Navigation "group titles" do not create a breadcrumb item, as sub-items in the group are not hierarchically under the title. To address this, group titles may be going away from the design. #167323 2. _Only affects Observability solution_: Navigation accordions can not be collapsed and do not show arrow icons. To address this, in a later PR we will add internal state management for the open/closed state of each accordion. #167328 3. _Affects all solutions:_ The "collapsed" state of the side nav should show a docked view with icons-only. To address this, in later PRs we will bring Security solution into the unified nav components. 4. #167326 5. #167330 6. #167332 ### Recordings These videos show a before-and-after with the new UI. | project | old | new | |--|--|--| |observability| https://github.com/elastic/kibana/assets/908371/663765a3-4e4b-416e-b7d5-7d87eece83e8 | <img width="298" alt="CleanShot 2023-09-22 at 14 20 48@2x" src="https://github.com/elastic/kibana/assets/446285/d61f6fe0-a6a9-4806-bc27-08b0ff2afb49"> | |search| https://github.com/elastic/kibana/assets/908371/f383773e-27a8-4485-8289-274d8231b960 | <img width="281" alt="CleanShot 2023-09-22 at 14 18 43@2x" src="https://github.com/elastic/kibana/assets/446285/901b8fc1-9945-4cee-b566-5e4539f08043"> | |security| https://github.com/elastic/kibana/assets/908371/481f4533-64e5-41db-bc8e-5012f82c188a | *will change to the new style after this PR and the flyout/panel support are completed | ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: Sébastien Loix <[email protected]>
|
In #169651 I'm adding css styles to hide the If we don't think there is accessibility issue with the solution we can close this issue. Otherwise EUI would need to provide a prop to enable the active state highlighting (it should only occur on a mouse click or keyboard interaction on the chevron that expands the accordion). cc @cee-chen |
7 tasks
|
This should be resolved on EUI's end by elastic/eui#7314. Once this PR is in Kibana main, you can remove your CSS outline override. |
|
Thanks @cee-chen ! 🎉 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Taken from #164910 (review)
The Initial open state wraps the area as active on page load:
This issue is to prevent that behaviour from happening and remove the highlight on page load
The text was updated successfully, but these errors were encountered: