Accessibility features for visually impaired #1366

[ashleyep]

Description

We added a feature on the auxiliary nav bar that allows users to create custom color profiles which change the appearance of the nav bar. Users can add as many color profiles as they would like, and can switch between them via a dropdown menu. They can also delete color profiles they are no longer using. This feature allows for greater accessibility for the visually impaired by giving them the ability to customize their viewing experience.

Related Issue

This PR fixes #1366

Changes Made

• Added a new icon on the auxiliary menu, and updated toolbar.js to reflect this change
• Added a color picker that allows users to create their own color profiles and choose from them using a dropdown
• Added a delete functionality for the color profiles to update the dropdown and get rid of colors they no longer use
• Added extra functions in the DOM loaded function on index.html to save the color profiles in local storage and render them properly on load
• Added listeners for the delete and add profile buttons to dynamically update the UI
• Removed the important! tag on the css for the nav bars so that we could more easily influence the background color

Testing Performed

• We tested this feature with adding and deleting many different profiles and switching between them
• Tested on browsers Google Chrome and Safari

Checklist

• I have tested these changes locally and they work as expected.
• I have followed the project's coding style guidelines.

Additional Notes for Reviewers

Right now it seems as though it won't let you change color profiles if there is only one in the dropdown, and the delete functionality works as intended majority of the time, but sometimes will not allow you to delete the last 2 profiles.

📚 See contributing instructions.

🙋🏾🙋🏼 Questions: Community Matrix Server.

[walterbender]

This is pretty cool. But I wonder if just changing the colors of the main and aux tools bars is enough to meet the needs of the visually impaired? It would seem we'd want to change most everything defined in js/utils/platformstyle.js. And while letting the user customize, maybe the more immediate problem to solve is simply a high-contrast version of the colors?

[pikurasa]

I agree with Walter. I imagine there's documentation online of recommendations for this sort of thing. Just a quick search for me brings up this: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/