Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR ensures that when a button in the TopNavBar has an open popover, a focus ring is displayed for improved accessibility. Key changes include:
- Updating the documentation for the focus outline control in ui-view.
- Passing the withFocusOutline prop from TopNavBarItem to the underlying button component.
- Adding the withFocusOutline prop to ui-buttons components for proper focus ring handling.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/ui-view/src/View/props.ts | Updated the JSDoc for the withFocusOutline prop |
| packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/index.tsx | Added withFocusOutline prop based on popover state |
| packages/ui-buttons/src/BaseButton/props.ts | Introduced the withFocusOutline prop with documentation and prop types |
| packages/ui-buttons/src/BaseButton/index.tsx | Destructured and passed the withFocusOutline prop to the underlying View component |
|
ToMESSKa
left a comment
ToMESSKa
left a comment
There was a problem hiding this comment.
in the smallViewport version, the hambuger/X menu icon does not have a focus ring when the drilldown is open
…a button has a Popover open When a menu is active, it should be indicated as the “active” element for a11y reasons Fixes part of INSTUI-4323
| withFocusOutline: | ||
| withFocusOutline || this.hasOpenPopover || this.state.isFocused |
There was a problem hiding this comment.
This makes the TopNav items display a focus ring if their popover is open or its forced manually (this is needed for the smallViewport hamburger menu because that one does not use the customPopoverConfig prop of this class)
I've fixed this |
When a menu is active, it should be indicated as the “active” element for a11y reasons
To test: The desktop layout TopNavBar should show an outline around a button if it has some popover, like a submenu or a popup open. There should be no other change
Fixes part of INSTUI-4323