Fixes accessibility issue when reading epubs

[nathanaelg16]

Summary

These changes fix the issue for those using tabs to navigate through books using the epub viewer library. Previously, one could never reach the Right Navigation button due to the tabindex terminating with the epub viewer. This change sets the first tab item to be the epubviewer, then all other tab-accessible items will follow the DOM order.

BEFORE

AFTER

References

#10371

Reviewer guidance

1. Open an epub book to read
2. Press tab repeatedly until it reaches the Right navigation button
3. Trigger the Right navigation button (press tab or enter)
4. Press tab repeatedly again until it reaches the right navigation button

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[ellipsis-dev]

Your free trial has expired. To keep using Ellipsis, sign up at https://app.ellipsis.dev for $20/seat/month or reach us at [email protected]

[akolson]

Implementation seems correct to me! Thanks @nathanaelg16
Leaving final review to @radinamatic @pcenov after further accessibility QA is done!

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-.pex
Windows Installer (EXE)	kolibri-0.16.2b1.dev0+git.1089.g0d451798-windows-setup-unsigned.exe
Debian Package	kolibri_0.16.2b1.dev0+git.1089.g0d451798-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.2b1.dev0+git.1089.g0d451798-0.4.1.dmg
Android Package (APK)	kolibri-0.16.2b1.dev0+git.1089.g0d451798-0.1.2-debug.apk
TAR file	kolibri-0.16.2b1.dev0+git.1089.g0d451798.tar.gz
WHL file	kolibri-0.16.2b1.dev0+git.1089.g0d451798-py2.py3-none-any.whl

[radinamatic]

Thank you for diving into trying to fix this accessibility issue, @nathanaelg16!

However, positive tabIndex values are often flagged as errors, and are not the recommended way to approach the keyboard accessibility. I tested the asset from your PR on Firefox in Ubuntu 20.04, and while it may seem that it fixes the immediate issue of not being able to focus the right arrow for page navigation, this made me realize that we have deeper problems related to keyboard navigation for epub renderer that need some decisions first before trying to fix isolated issues. I'm almost leaning into thinking of the iframe as a sort of a modal window that should have the focus trap within for all the epub-specific features (page navigation, settings, search, etc.), and the defined way in- and out- of that epub-space, for the rest of the Kolibri features (folder, bookmarks, info, etc...)

But I digress... Bottom line is that I think we need some more general decision before approaching the fix for this specific issue. If this was more than one-off PR and you are interested to contribute more to improve the keyboard navigation in Kolibri epub renderer, please join our Kolibri #dev-community channel on Slack, where we can decide what would be the best approach. Thank you!

[nathanaelg16]

Thank you @radinamatic for your feedback. I was debating whether to set the tabIndex to a positive or negative value, but the negative value didn't seem right either. I'd be happy to join the Slack channel and continue discussing this! Thanks

[MisRob]

Thanks both. Just general FYI on the PR - this is already being discussed on Slack. Some decisions are needed and @radinamatic is planning to have a look at it at some point.