Made expandable navbar section more accessible #3581
+248
−65
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.
References
Description
Improved the accessibility of the expandable navbar menu section. For all the keyboard interactions, I based them on the W3C guidelines. The only behaviors I haven't implemented are the
Left Arrow
&Right Arrow
.Instructions for Reviewers
List of changes in this PR:
HoverOutsideDirective
to detect when you hover outside a specific element to close the expandable modal. This also works when you open it using your keyboard and hover outside the expandable navbar afterwardsspace
&enter
)Up Arrow
&Down Arrow
support to navigate through the expandable navbar optionsesc
&shift
+tab
tab
and navigate to the next itemThe only two keyboard interactions I didn't implement are
Left Arrow
&Right Arrow
. To achieve these, we would need to know what the next & previous top-level items are. The cleanest approach would have been to trigger atab
/shift
+tab
event; however, doing this doesn't automatically set the focus on the next/previous top-level item, as this is controlled by the browser. Calculating these items using CSS selectors also didn't seem like a clean solution, which is why I didn't implement this.Guidance for how to test and review this PR:
Left Arrow
&Right Arrow
).Checklist
main
branch of code (unless it is a backport or is fixing an issue specific to an older branch).npm run lint
npm run check-circ-deps
)package.json
), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.