Accessibility features for visually impaired #1366

ashleyep commented 2 months ago

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

[x] I have tested these changes locally and they work as expected.
[x] 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 commented 1 month ago

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 commented 1 month ago

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/

sugarlabs / musicblocks