Keyboard 'tab' key navigation improved

[oscar-escire]

References

Hi @tdonohue I've been working on this PR and i like to share it with you

Add references/links to any related issues or PRs. These may include:

• Fixes Tab navigation is not working correctly on Safari – only 3 elements receive focus #4201

Description

This PR improves tab navigation across the Dspace site, primarily targeting browsers like Safari that require explicit tags to properly detect the next focusable element.

Instructions for Reviewers

1. Open DSpace on Safari desktop navigator
2. Use tab to change between focusable elements
3. All elements like links, inputs, buttons or checkboxes will be focusable and selectable with tab in default order

List of changes in this PR:

• Added role tag to interactive elements
• Added tabindex over interactive elements to enable focusable

Checklist

• My PR is created against the main branch of code (unless it is a backport or is fixing an issue specific to an older branch).
• My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
• My PR passes ESLint validation using npm run lint
• My PR doesn't introduce circular dependencies (verified via npm run check-circ-deps)
• My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
• My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• My PR aligns with Accessibility guidelines if it makes changes to the user interface.
• My PR uses i18n (internationalization) keys instead of hardcoded English text, to allow for translations.
• My PR includes details on how to test it. I've provided clear instructions to reviewers on how to successfully test this fix or feature.
• If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.
• If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
• If my PR fixes an issue ticket, I've linked them together.

[tdonohue]

@oscar-escire : Thanks! Sorry, I didn't realize you had started work on this. I had assigned this to @pcg-kk in today's Developers meeting to look into. But, maybe @pcg-kk could just help to review or test this PR instead.

I'll see if I can also find time to give this a try soon too.

[oscar-escire]

Thanks @tdonohue, @pcg-kk I will be attentive to your comments.

[pcg-kk]

@tdonohue I will make a review of that today - no problem 👍

[pcg-kk]

This PR introduces significant improvements for Safari browser compatibility, addressing several rendering and functionality issues that were specific to this browser.

[pcg-kk]

@tdonohue my approval doesn't change the review status and it's still required. Is it normal?

[tdonohue]

@pcg-kk : I've moved it manually to the "Reviewer Approved" status column. Unfortunately, GitHub doesn't always pickup approvals from everyone and move the PR appropriately on the board, so I occasionally have to move it manually. Thanks for your review/test. I'll give this a quick sanity check that it doesn't impact behavior on other browsers & then get it merged.

[tdonohue]

👍 Thanks @oscar-escire ! While I don't have Safari to test with, I tested this in a few other browsers (Chrome & Firefox) to ensure it has no negative side effects. The code also looks good to me.

Because this is an accessibility fix, it would be nice to see if this can be backported to 8.x and possibly 7.6.x. I've flagged it as such. However, it's possible it would need a manual backport.

[dspace-bot]

Backport failed for dspace-7_x, because it was unable to cherry-pick the commit(s).

Please cherry-pick the changes locally and resolve any conflicts.

git fetch origin dspace-7_x
git worktree add -d .worktree/backport-4244-to-dspace-7_x origin/dspace-7_x
cd .worktree/backport-4244-to-dspace-7_x
git switch --create backport-4244-to-dspace-7_x
git cherry-pick -x f8cfb74555894e8e5982d63bd3007bab19d4cd84 4e5b344ce8c5224713fde612b3440d0181871361

[dspace-bot]

Backport failed for dspace-8_x, because it was unable to cherry-pick the commit(s).

Please cherry-pick the changes locally and resolve any conflicts.

git fetch origin dspace-8_x
git worktree add -d .worktree/backport-4244-to-dspace-8_x origin/dspace-8_x
cd .worktree/backport-4244-to-dspace-8_x
git switch --create backport-4244-to-dspace-8_x
git cherry-pick -x f8cfb74555894e8e5982d63bd3007bab19d4cd84 4e5b344ce8c5224713fde612b3440d0181871361

[tdonohue]

@oscar-escire : If you are willing/interested in backporting this to the dspace-8_x branch and/or dspace-7_x branch, I think this could be useful to backport manually (since the above automatic backports failed). If you don't have time though, that backport could wait on a willing volunteer.

[oscar-escire]

Hello @tdonohue @pcg-kk thanks! I'be glad to work in the two branchs to backport this fix. I'll work on that and send it as soon as I have ready