Description
What
Give a brief description of the component or pattern you want to propose.
I'd like to suggest an error summary component. A similar example can be found in the GDS Design System.
Purpose
What problem does this component or pattern solve for the user?
In past accessibility audits, I've noticed that when multiple errors occur on a page, they may not be all immediately understandable by the Veteran. This is because:
- How we announce inline errors via role="alert". If more than two exist on a page, a screen reader announces the last one in the DOM.
- We don't have a pattern or component to cover this since we strive to have one thing per page, which limits fields. However, there may be cases where more than one error can be triggered at the same time.
Past work on this ticket for the Decision Reviews and Benefits Management Tools teams
- #102281 [Decision Reviews & BMT]: Discovery - Accessibility Experience of More than One Error on Page
- #102676 [Decision Reviews]: Design Spike - Accessibility Experience of More than One Error on Page
Context or task: Explain the scenario or user tasks where this component is, or could be, used.
Behavior
Describe the key interactions for this component, calling out any specific considerations for mobile.
This error would show:
- If the continue button is activated and
- If two or more errors still exist on the page
Other notes:
- The links in the alert would anchor to the individual inputs with the errors
- When the error appears (after Continue activation), focus would shift to the heading inside the alert
- Depending on future research, we may want to alter how some forms show error messages on blur (when exiting the field) because it can mean that people using screen readers can tab through fields without filling them out as a way of exploring the page without getting errors.
Locations:
This kind of alert should appear on any screen that has more than one required input. This may not be a pervasive component, given we try to follow one thing per page. However, our team has a few spots where this happens and I imagine it may happen elsewhere. I haven't done in-depth research on other forms and pages across VA.gov.
Examples
Include any examples you have of this component or pattern. These can be screenshots, links to a Sketch file, or links to staging or production.
I've created a starting point for a design for the VA Design System.
Accessibility
Include any accessibility considerations.
- The biggest accessibility considerations for this component would be shifting focus to the alert container with a accessible name assigned to it (the heading in the alert) or shifting focus to the heading itself in the alert.
Guidance
What would you want to tell other teams about this component or pattern?
See the Behavior section:
This error would show:
- If the continue button is activated and
- If two or more errors still exist on the page
We'd likely need to think through how the content for error messages needs to be unique so that any errors that show up in the alert would create unique links.
Collaboration Cycle Ticket
Provide a link to your collaboration cycle ticket.
We haven't brought this to the Collaboration Cycle. We're exploring implementing it in our forms, but haven't done so yet.
Your team
Tell us what team you are on.
Decision Reviews & Benefit Management Tools
Research (optional)
Include any research you have already conducted, or plan to conduct, on this component or pattern.
Our team hasn't done research on this component yet. I did suggest a larger error related study to the ADE team to dive into this problem space.
Code (optional)
Include any existing code.
No code to share.
Next steps
You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.
Submit requests to join an upcoming Design System Council meeting in #platform-design-system.
During the meeting, the Design System Council Working Group will evaluate the request and make a decision.
If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.
Activity