Refine content on POA Requests detail view

[eheintzelman]

Description

User Story or Problem Statement

There are some changes to the POA Request Details View resulting from our team's content review and from mid-point review feedback. This ticket includes changes to both the Veteran-facing and Non-Veteran claimant versions.

Key changes

• Remove slim alert component in the Submit accept/decline decision form. Instead, use hint text on the field label "Do you accept or decline this POA request"?
• Some changes to copy throughout the page

Out of scope

• This ticket does not include copy within processing alerts. That will be covered in another ticket.

Mockups/Designs

• Details page design updates (1/17/25)

Acceptance Criteria/Conditions of Satisfaction

• Veteran-claimant view: Slim alert component has been removed and replaced. Copy has been updated.
• Non-Veteran claimant view: Slim alert component has been removed and replaced. Copy has been updated.

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.
  • proper tag elements
    • Since we are working with forms, make sure components have the proper tags, i.e.:
      <label for="lastName"...>Last Name <input id="lastName"... />
• test with a screen reader
  • Voiceover is built in with mac, use NVDA for windows

[jquispe-oddball]

@eheintzelman adding Kate's QA design feedback to this ticket as well

[jquispe-oddball]

staging qa testing blocked until staging data tix are completed

[eheintzelman]

QA comments. @jquispe-oddball @candilemoine

Page is missing title element, per axe extension

Colored tags

• The pending tag is not consistent with designs.
• Staging

• Figma

Copy issues

• Veteran should be capitalized consistent with designs. "Relationship to veteran" should be "Relationship to Veteran"

Data formatting issues

• Phone number is not formatted as indicated in designs (also can reference design system)
• Staging

• Figma

Color contrast issue

• The hint text in the grey box for the user to submit a decision does not meet accessibility standards. Flagging this for @seipeljl to take a look at and suggest alternate approach.

Note: I was not able to review all status variations for the page or all variations for the authorization information fields.

[seipeljl]

@eheintzelman took a look at that hint text with @jquispe-oddball and decided we could just use the standard text color in this scenario to ensure it passes accessibility.

[candilemoine]

Remaining fixes are happening in #103240