Accessibility updates

[sar-mko]

Description

This branch updates some of our accessibility features, including better labelling, colors contrasts, both font sizes and weight. As well us replicating styles from the home page to the rest of our pages.

• Updated colors and theme for better contrast
• Larger and darker/lighter text for easier reading
• Aria-labels for all of our buttons for users with screen-readers
• Updates to our default home page when users aren't logged in
• Better spacing and responsiveness

Related Issue

closes #63 (#35)

Acceptance Criteria

• All texts are legible against the color of their background
• All icons are legible against the color of their background
• All buttons are legible and functional against the color of their background

Type of Changes

Use one or more labels to help your team understand the nature of the change(s) you’re proposing. E.g., bug fix or enhancement are common ones.

Updates

Before

After

Testing Steps / QA Criteria

• Pull from sm-accessibility-updates
• Check if buttons on navbar, home page, list page work (note: there are some known errors with shareList button)
• Colors are consistent throughout site
• Be able to use your keyboard to tab through page in a logical order
• Home page shows welcome page when not signed in (note: list page does not have a default)

[arandel1]

Looks pretty good!
nit-pick: Submit button is not visible when Adding an item, and similarly, Share button is not visible when sharing a list. This can be fixed by making those buttons text color the darkest green (like the background on the navbar)

-

[github-actions]

Visit the preview URL for this PR (updated for commit 06804a7):

https://tcl-76-smart-shopping-list--pr69-sm-accessibility-upd-twauktfa.web.app

_{(expires Sat, 26 Oct 2024 04:44:38 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 512b1a88be8ae05fd3e727b99332819df760271d}