[PDF_Viewer] Adding struct tree layer

[AlexVelezLl]

Summary

Adding a new layer that adds a PDF tree structure of tagged PDFs so that screen readers can notice the semantic structure of a tagged PDF.

With this layer screen readers should now be able to recognize among other things:

• Headings of different levels.
• Paragraphs
• Lists/List items
• Tables
• Figures alt text
• Links

References

This PR solves the lack of semantic structure of the text layer that was missing in #9536.

Reviewer guidance

1. Go to learn tab
2. pick any reading-type resource that has a tagged PDF (e.g. The pdfs that are in the Kolibri QA channel)
3. Use a screen reader and note if the screen reader is able to identify the semantic structure of the pdf.

---

Testing checklist

• [x] 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

• [x] 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

[github-actions[bot]]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0.dev0_git.20220810164424.pex
Unsigned Windows installer	kolibri-0.16.0.dev0+git.20220810164424-unsigned.exe
Debian Package	kolibri_0.16.0.dev0+git.20220810164424-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0.dev0+git.20220810164424-0.3.0.dmg
Source Tarball	kolibri-0.16.0.dev0+git.20220810164424.tar.gz
WHL file	kolibri-0.16.0.dev0+git.20220810164424-py2.py3-none-any.whl

[radinamatic]

Alex, excellent progress, you're spoiling us! 👏🏽 👏🏽 👏🏽

Headings, lists, links, even tables, all well recognized and announced by the screen reader 🎉

The only sore point are the images that are not announced, nor their alt text is read out, even though it's there as an aria-label. I don't think it's because of your implementation, they do not seem to be recognized and announced by NVDA even if I open the PDF directly in the browser. Could it be because the role=figure is used? Would it be viable to try role=img instead?

[radinamatic]

Another point for potential improvement would be to explore the possibility to exclude empty paragraphs from the text layer as those are announced as blank, blank, blank by NVDA, and it's an annoyance.

Sighted PDF users will not miss them when copying text, they can't be highlighted, and are just a bad experience for blind readers.

Empty paragraphs in the Acrobat tag tree view:

[radinamatic]

This is a thing of beauty, now Kolibri PDF viewer offers a slightly better experience for screen reader users compared even to the native browser PDF reader on this aspect... 🤩 😍 Thank you, @AlexVelezLl!!!

Since you've been churning these improvements with such efficiency, here is one last request: let's try to implement a similar rendering of the PDF file pages as pdf.js does.

You implemented the rendering of the PDF page as a section HTML element with a pdf-page class, but class names are not semantic and are not accessible to assistive technology. On another hand pdf.js renders a page as div element with a role="region" and aria-label="Page N" which are both revealed to screen readers, and could potentially help navigate the PDF document more easily.

Kolibri	pdf.js

My thinking goes in direction to try to offer a similar experience and path to knowing the PDF page numbers in Kolibri viewer as in the browser PDF reader, for those users who are already familiar and use the latter.

[AlexVelezLl]

@radinamatic It sounds great! I had not noticed that this was missing, I already pushed those changes, although the translations are missing.

[radinamatic]

The new page numbering works well, and I like it 💯 , the only twist is that the lazy loading is messing with the order when one scrolls up and down the document 😳 I'm guessing there isn't really much we can do about it, right?

[AlexVelezLl]

@radinamatic I think it's a bit complicated because all of that is handled by the RecycleList internally. Although I could search if there is any configuration for that 🤔

[radinamatic]

As discussed in our weekly call, this is working great, and ready to merge!

Thank you, I am so looking forward to what's coming next! 😍