Epub viewer settings side bar redesigned

[Akila-I]

Summary

With the user customized themes introduced in the epub viewer, the name of the themes is identified as an important attribute to be showed to the user. Also the compact view of the DELETE and EDIT buttons associated with each custom theme makes the settings side bar UI look overpopulated with items in it.

This PR refers to the designs from the Kolibri design team. As the first step of implementing the new design, The settings side bar view is modified to give user a simple and intuitive set of items to navigate through.

Also the focus management in the Modals to select different colors for the themes is implemented as well.

This PR is followed by the changes introduced in #11041 .

Screenshots

• Before (Desktop view)
  

• After (Desktop view)
  

• Before (Mobile view)
  

• After (Mobile view)
  

References

Figma design for the new EPUB viewer settings : https://www.figma.com/file/zpwcUcGR8D0hKUGvZU8kf3/Enhanced-EPUB-Renderer?type=design&node-id=0%3A1&mode=design&t=CgU7rA96zHncjSwZ-1

Reviewer guidance

Followings can be experienced in reviewing:

• Focus management of the Modals
• New Settings SideBar view

---

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

[github-actions]

Build Artifacts

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

[radinamatic]

Kudos @Akila-I , this looks good! 👏🏽

Keyboard navigation is very smooth, and thank you so much for implementing the additional context in the Delete and Edit buttons for custom themes, so the user knows exactly that their focus ends on the buttons for a specific theme for deleting and editing 🎉 😍

I've run the accessibility checker after testing with the screen reader, just to be sure that I covered all the angles. It revealed several issues that would be important in some formal accessibility audit, but all pre-existing and none relevant to your GSoC work. One single point for improvement that I would recommend at this point, given the low push, is to add the missing aria labels for the two current themes (yellow and blue). As you can see, both are missing the aria-label that are present in the first 4 default themes:

[Akila-I]

Kudos @Akila-I , this looks good! 👏🏽

Keyboard navigation is very smooth, and thank you so much for implementing the additional context in the Delete and Edit buttons for custom themes, so the user knows exactly that their focus ends on the buttons for a specific theme for deleting and editing 🎉 😍

I've run the accessibility checker after testing with the screen reader, just to be sure that I covered all the angles. It revealed several issues that would be important in some formal accessibility audit, but all pre-existing and none relevant to your GSoC work. One single point for improvement that I would recommend at this point, given the low push, is to add the missing aria labels for the two current themes (yellow and blue). As you can see, both are missing the aria-label that are present in the first 4 default themes:

Thank you for the feedback @radinamatic , sure I can add the missing labels for existing themes.
Would you think we can push these commits on top of the PR ( #11041 ) that we are currently reviewing to merge?

[radinamatic]

Since adding those missing label would be changes independent from your current work, it should be safe to add in #11041 👍🏽

[Akila-I]

Since adding those missing label would be changes independent from your current work, it should be safe to add in #11041 👍🏽

I think I might first update the design for the mobile view as well. so that we can merge a responsive UI feature

[radinamatic]

Retested with NVDA after the latest commits, and all the previous suggestions and points of improvement have been addressed.

[radinamatic]

This is formally still a draft, but looks good to go! 🙂 💯

[Akila-I]

This is formally still a draft, but looks good to go! 🙂 💯

Made it ready to review. Thanks for the feedback

[marcellamaki]

Hi - looks great! I added just a few very small comments for readability if you're able to get to them. Overall, really good work! Excited to get this merged :) I think it should be good to go as soon as these updates are in.

[marcellamaki]

Thanks @Akila-I! 🎉