Create POA Request Search Status Tabs Design

[nihil2501]

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
• a rep will see a message about POA requests expiration, relevant to the tab they are on

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]

• sorting
  • no option to change for pilot
  • default sort to new/old requests or reverse
• split out separate tasks for more design discussion
  • POA Request Search (State) UX #96919

[eheintzelman]

@jquispe-oddball @nihil2501 @Kate-allbee @seipeljl @candilemoine
For the tabs concept on the POA requests landing page, there is some ongoing discussion in the Figma designs of what we want that second tab to be. Should it be completed requests or All requests? Just flagging that this is an outstanding question that should be answered before Jenny can pick this up.

[seipeljl]

@jquispe-oddball @Kate-allbee @candilemoine @nihil2501 We are going with Completed for the second tab name.

[jquispe-oddball]

Submitted pr

[Kate-allbee]

@jquispe-oddball One thing I noticed in staging is:

Pending requests can just say "Pending"

Talked with @seipeljl and She is going to provide content updates in a separate ticket

[Kate-allbee]

@jquispe-oddball Not sure if this is in another ticket, so disregard if so!
Noticed that the colors are missing from the Accepted and Declined tags in the completed tab.

[jquispe-oddball]

@Kate-allbee yes, it's in another ticket and marked for V1
#98941

[Kate-allbee]

@jquispe-oddball Looking at the mobile responsiveness of the tabs design and it looks like when the window is resized from desktop to mobile the tabs jump to stretch the span of the window at a certain point.
The way the component is built is that the tabs should be the same size in mobile/tablet/desktop. 320px x 50px:

Desk:

Tablet resize:

Mobile: