component-library
component-library copied to clipboard
Feature/issue 151 focus nested accordions with keyboard navigation
Description of the Change
To get more details, please see issue #151.
- The deprecated keyboard event property
which
has been replaced with thekey
one. (See UIEvent: which property in mdn web docs). - The keydown event listener is now added once, only for the top level accordion area.
- When the user navigates with the keyboard, a fresh list with all focusable accordion links is created and passed in to the
accessKeyBindings
method. - Users can access nested accordion links via keyboard navigation.
- New tests have been created.
Alternate Designs
Instead of getting a list with all focusable accordion links every time the user press one of the navigation keys (Arrow Up, Arrow Down, Home, and End), another alternative could be creating this list once, and updating it whenever the user opens/closes any accordion. However, this list is only needed for keyboard navigation, so it doesn't make sense to keep it updated if the user may end up never navigating with the keyboard and, therefore, never using the list.
Benefits
All accordion links will be accessed via keyboard navigation, including the nested ones.
Possible Drawbacks
None that I came across.
Verification Process
- Create accordions with nested accordions.
- Press the Tab key util one of the accordion links has been focused.
- Navigate across accordion links with Arrow Up, Arrow Down, Home, and End keyboard keys.
- Pressing the Arrow Down key focus the immediate next accordion link regardless of it is inside a nested accordion or is on the same level of the current focused accordion link.
- If the current focused accordion link is the last one, the focus moves to the first accordion link.
- Pressing the Arrow Up key focus the immediate previous accordion link regardless of it is inside a nested accordion or is on the same level of the current focused accordion link.
- If the current focused accordion link is the first one, the focus moves to the last accordion link.
- Pressing the Home key focus the first accordion link.
- Pressing the End key focus the last accordion link.
Checklist:
- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [x] All new and existing tests passed.
Applicable Issues
Closes #151
@devinle @joesnellpdx This PR is ready for review. There are some issues with the checks and failures with build scripts - please take a look.
Please review and let me know if you have any questions.