department-of-veterans-affairs / va-mobile-library

https://department-of-veterans-affairs.github.io/va-mobile-library/

ISC License

1 stars 0 forks source link

DS - Create SnackBar Component #62

Closed kellylein closed 2 weeks ago

kellylein commented 9 months ago

Project Status Overview

Project Objective:

This Epic represents the work of the Design System team to create a new SnackBar component within the va-mobile-library repo. This does NOT include the work to incorporate the new component throughout the Flagship App.

Update for Stakeholders

Month	Progress & Key Accomplishments	Issues/Risks/Blockers
7/24/24	Did technical spike and began implementation	none
8/6/24	Building out component and doing Accessibility review	none
8/20/24	Added additional accessibility functionality and wrapping up development	pushed completion back 1 sprint due to added complexity and team member OOO. Still on track for completion within the quarter.
9/3/24	Finishing VQA and unit tests	None

jessicawoodin commented 9 months ago

UX work was completed in #7603. The following links will need to be added to the implementation ticket.

Documentation
Master component in Figma
Examples of how the component may appear

kellylein commented 9 months ago

SWAG Estimates: UX - 1/2 sprints FE - 3 sprints

jessicawoodin commented 7 months ago

Accessibility improvements were researched and documented in #155.

"Snackbar or toast must be dynamically announced by the screen reader without moving focus to it."
- Current: App automatically moves the focus to the snackbar.
- Proposed: Snackbar is announced, but focus is not moved.
"If the Snackbar persists, it should be in the swipe order for the screen reader user and tab order for the keyboard user."
- Current: Snackbar is read in between different pieces of the bottom tab bar.
- Proposed: Snackbar should read after the last piece of content and before the bottom tab bar.
Visual appearance
- Current: Snackbar appears on top of the bottom tab bar.
- Proposed: Snackbar should appear above the bottom tab bar, so it does not block the tab bar.

jessicawoodin commented 7 months ago

As a post-MVP idea, I'd like to consider adding four different types of snackbars to align with the Alert component -- informational (blue), success (green), warning (yellow), and error (red). I've seen several examples of this type of design, and after discussing with Brea, we think it would also help with a11y. I'm adding this note here now so we can decide how to track the idea later.

kellylein commented 6 months ago

SWAG Estimates Q2: UX - 0.5 sprint FE - 3 sprints