Fix iseec 2378 UI shell accessibility #49
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 11 commits
December 6, 2021 15:37
…g-react into fix-ISEEC-2378-ui-shell-accessibility
MthdeSouza
requested review from
Okisa,
BenjaminRuby,
LucasGrimauth and
marcusdroy
and removed request for
BenjaminRuby
timrbula
previously approved these changes
Jan 18, 2022
4 tasks
|
@MthdeSouza Added a few more a11y things for the header (and fixed some tests, cleaned up some code) |
timrbula
approved these changes
Jan 26, 2022
| @@ -49,14 +49,14 @@ | |||
| }, | |||
| "dependencies": { | |||
| "@carbon/elements": "^10.21.0", | |||
| "@carbon/themes": "^10.21.0", | |||
| "@stomp/stompjs": "^5.4.2", | ||
| "@tippyjs/react": "^4.0.2", | ||
| "carbon-icons": "^7.0.7", | ||
| "classnames": "^2.2.5", | ||
| "date-fns": "^1.30.1", | ||
| "dompurify": "^2.0.6", | ||
| "downshift": "^5.2.1", | ||
| "invariant": "^2.2.3", | ||
| "focus-trap-react": "^8.9.1", |
There was a problem hiding this comment.
Remove dependencies that aren't used and migrated to use of a better focus trap library for focus management from the UIShell
| @@ -50,7 +50,7 @@ test('select and remove items', async () => { | |||
| expect(queryByLabelText(/Clear filter cat/i)).toBeInTheDocument(); | |||
| }); | |||
|
|
|||
| const clearButton = getByRole('button', { name: 'Clear Selection' }); | |||
| const clearButton = getByRole('button', { name: 'Clear selected item' }); | |||
| @@ -4,8 +4,8 @@ import Error403 from './Error403'; | |||
|
|
|||
| test('render Error403 with defaults', async () => { | |||
| const { getByText } = render(<Error403 />); | |||
| expect(getByText('403 - Access Forbidden')).toBeInTheDocument(); | |||
| expect(getByText('You’ve found yourself in deep water.')).toBeInTheDocument(); | |||
| expect(getByText('403 Access Forbidden')).toBeInTheDocument(); | |||
| @@ -5,15 +5,15 @@ import Error404 from './Error404'; | |||
|
|
|||
| test('render Error404 with defaults', async () => { | |||
| const { getByText } = render(<Error404 />); | |||
| expect(getByText('404 - Page Not Found')).toBeInTheDocument(); | |||
| expect(getByText('Crikey. Something seems to have swam off with this page.')).toBeInTheDocument(); | |||
| expect(getByText('404 Page Not Found')).toBeInTheDocument(); | |||
| @@ -8,15 +8,14 @@ const { prefix } = settings; | |||
| const HeaderMenuBmrg = React.forwardRef((props, ref) => { | |||
| const { isOpen, ...other } = props; | |||
| return ( | |||
| <div | |||
| <button | |||
There was a problem hiding this comment.
Made this a proper button and fixed some styling for it to match better w/ the rest of the header
| ))} | ||
| </ul> | ||
| </div> | ||
| <FocusTrap active focusTrapOptions={{ allowOutsideClick: true }}> |
There was a problem hiding this comment.
Focus trap here to keep the tabbing inside the menu while it is open. ESC closes it.
| @@ -12,9 +11,8 @@ import { | |||
| NotificationNew24, | |||
| } from '@carbon/icons-react'; | |||
| import { settings } from 'carbon-components'; | |||
| import FocusTrap from 'focus-trap-react'; | |||
There was a problem hiding this comment.
I made a few changes here to manage:
- Focus traps within the different menus and the sidenav
- Handling the "ESC" key to exit out of the sidenav and menus and returning focus to the button associated w/ the menu.
- Tab to leave the side panel (not sure if this is the best approach but its not used afaik at the moment)
- Removed dead code.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Context
Jira Issue:
ISEEC-2378
Build Number:
1.4.1-beta.5
Checklist:
PR Review Guidance
Additional Info