In the claim phase project, we are using icons in accordion headers to show status during the claims process. We've also included a repeat icon in a simple rectangular container, along with a message indicating that a claim step can be repeated.
Purpose
The status icons serves as quick visual indicators are steps that has been completed and steps that is in progress. The repeat icon signifies steps in the process that may repeat if additional information is required or needs to be reviewed.
Usage
Currently we are using these icons in the overview page to explain claims process. The idea behind the icons are as follows:
** Inside the accordion header
Check Mark icons - indicates a completed step
Flag icon - indicates your current step in the process
** Inside the accordion body
Repeat icons and container box - indicates a process step that has the potential to repeat. For instance, in products were evidence review is needed or any appointments that needs to be met, if VA finds that information is missing and thus causing the process to regress in any way, we inform Veterans to with the repeat icon and a brief message inside the container box to describe the general nature.
Behavior
At this time there is no interactive behavior for these icons.
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.
The only concern for accessibility at this point was to ensure the icons had appropriate accessible labels. Our accessibility specialist advised the following:
Check mark icon -> accessible name = Completed
Flag icon -> accessible name = Current
Repeat icons with container box = *Note: this is a decorative image in our use-case because the box has plain text description
Guidance
What would you want to tell other teams about this component or pattern?
Using the these components
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.
What
In the claim phase project, we are using icons in accordion headers to show status during the claims process. We've also included a repeat icon in a simple rectangular container, along with a message indicating that a claim step can be repeated.
Purpose
The status icons serves as quick visual indicators are steps that has been completed and steps that is in progress. The repeat icon signifies steps in the process that may repeat if additional information is required or needs to be reviewed.
Usage
Currently we are using these icons in the overview page to explain claims process. The idea behind the icons are as follows:
** Inside the accordion header
** Inside the accordion body
Behavior
At this time there is no interactive behavior for these icons.
Examples
Figma file
Mural board with accessibility notes
Accessibility
The only concern for accessibility at this point was to ensure the icons had appropriate accessible labels. Our accessibility specialist advised the following:
Check mark icon -> accessible name = Completed Flag icon -> accessible name = Current Repeat icons with container box = *Note: this is a decorative image in our use-case because the box has plain text description
Guidance
Research (optional)
Research findings where the icons were present.
Code (optional)
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.