Create POA Request Search Status Tabs Design - Githubissues

department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:

https://depo-platform-documentation.scrollhelp.site/index.html

284 stars 206 forks source link

Create POA Request Search Status Tabs Design #96894

Open nihil2501 opened 2 weeks ago

nihil2501 commented 2 weeks ago

Description

User Story or Problem Statement

As a representative, I want to be able to see a list of pending and completed POA requests so I know which ones will need my attention.

Implementation Details

react-router based navigation to update query params (e.g. status=Accepted) and reflect in the active tab
Pending, Completed tabs

Mockups/Designs

Tabbed results

Blockers

Acceptance Criteria/Conditions of Satisfaction

[ ] a rep will see a list of Pending POA requests by default
[ ] a rep will see a list of POA requests that have been accepted or declined, if they view the Completed tab

Resources

Discussion about a design system component (also linked in a note on our 2122 Figma)
Some prior art in Figma from another team (also linked in a note on our 2122 Figma)

Accessibility (A11y) Testing

Refer to existing VA design system
[ ] Test with either WAVE or AXE extension
As you manually test, look for the following:
- [ ] color contrast errors
- [ ] keyboard navigation
  - When navigating with a keyboard, content should flow from left to right
- [ ] heading order
  - Headings should be in order, so h1, then h2, h3. This is so the screen reader can let the user know the natural order of the elements in page. The WAVE tool has a headings tab that will display the order.
- Voiceover is built in with mac, use NVDA for windows

candilemoine commented 2 weeks ago

sorting
- no option to change for pilot
- default sort to new/old requests or reverse
split out separate tasks for more design discussion
- https://github.com/department-of-veterans-affairs/va.gov-team/issues/96919