Edit & Delete Buttons: Post-Deployment Review & Accessibility

This document addresses a crucial discussion regarding the "Edit" and "Delete" buttons on cards, specifically in the context of a recent accessibility review following deployment. The discussion is centered around feedback received concerning the styling and functionality of these buttons, and whether our current implementation aligns with the VA design system standards, particularly the forms library.

Purpose

The genesis of this discussion stems from a Figma comment originating from our accessibility review. The comment highlighted the following points:

• The "EDIT" button should be rendered as "Edit", presented as a link, and visually distinguished with an underline.
• The "DELETE" element should be implemented as a button and should not be underlined.

While the Figma comment has been marked as resolved to centralize the discussion here, Kristen and Liza retain full access for review and contribution. It's important that accessibility is core to any product we develop, and we must ensure adherence to best practices.

To provide context, the image below showcases the standard implementation within the forms library, as detailed in the VA design documentation concerning multiple responses.

Currently, our designs within the Complex travel reimbursement claims Figma file depict both "Edit" and "Delete" as links. This divergence from the standard component library was a deliberate decision resulting from discussions between engineering and design teams. Earlier in the year, Peri raised a crucial point: "A link can't have an onclick event, and delete needs an onclick event since it's not re-routing. So these actually need to be buttons not va links."

Understanding the Situation

Navigating accessibility and design standards requires careful consideration. Here’s my current understanding of the situation and a proposed approach to address the feedback:

Delete Button Implementation

The Delete button functionality is clear: it must be implemented as a button to accommodate the necessary onclick event, as it doesn't involve redirection. However, our current designs include an underline, which deviates from the standard component and the VA design guidelines. This discrepancy warrants justification or a revision to align with the established pattern.

Edit Button Functionality

The Edit button presents a more nuanced challenge. The standard forms library component, seemingly, does not trigger a re-route upon being clicked. However, our "Edit" functionality does require redirection. If this assessment is accurate, we possess a valid justification for employing a button instead of a standard link. Conversely, if the standard component does handle re-routing, we must reconsider our implementation to conform to the established Edit link pattern. This is especially critical because of the screen sizes involved as Edit button functionality can be different on smaller screens like mobile devices.

Addressing Accessibility Concerns

Accessibility is key in web development. To effectively address the accessibility concerns and ensure compliance with VA design standards, we need to focus on both the Edit and Delete buttons. The primary goal is to provide a user experience that is both intuitive and accessible to everyone, including users with disabilities.

Key Considerations for the Delete Button

• Semantic Correctness: Ensure the Delete function is implemented as a <button> element. This semantic correctness is essential for screen readers to properly announce the element as an interactive button.
• ARIA Attributes: Use appropriate ARIA attributes, such as aria-label or aria-describedby, to provide additional context for screen reader users. For example, if the button deletes a specific item, the aria-label should indicate what will be deleted (e.g., `aria-label=