[Components and pattern standards] Design components or patterns don't align with Design System guidelines. (04.07.4)

briandeconinck commented 1 year ago

General Information

VFS team name

Benefits Disability Experience Team

VFS product name

Disability Comp Application (21-526 EZ), Add Self Assessment Part A form information to BDD workflow

VFS feature name

Add Self Assessment Part A form information to BDD workflow

Point of Contact/Reviewers

Brian DeConinck - @briandeconinck - Accessibility

*For more information on how to interpret this ticket, please refer to the Anatomy of a Staging Review issue ticket guidance on Platform Website.

Platform Issue

Design components or patterns don't align with Design System guidelines.

Issue Details

On /supporting-evidence/additional-evidence/, the Upload button isn't actually a button, but instead is coded as a <span role="button"> with supporting JavaScript for keyboard accessibility. While the element responds to the expected keyboard commands and is announced properly with the screen reader/browser combination I tested with, there are likely to be edge cases where some assistive technology doesn't interact with the element as a user might expect it to.

Link, screenshot or steps to recreate

https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/platform/working-with-vsp/vsp-collaboration-cycle/staging-review-images/56612-Allison-040702.png Currently coded as:

<div>
     <label id="root_additionalDocuments_add_label" for="root_additionalDocuments" class="vads-u-display--inline-block">
          <span role="button" class="usa-button usa-button-secondary vads-u-padding-x--2 vads-u-padding-y--1" tabindex="0" aria-label="Upload Supporting (lay) statements or other evidence">Upload</span>
     </label>
     <input type="file" accept=".pdf,.jpg,.jpeg,.png,.gif,.bmp,.txt" id="root_additionalDocuments" name="root_additionalDocuments" style="display: none;">
</div>

Note that nesting the span inside a label and giving it an aria-label on top of that is... kind of funky markup. It doesn't throw any validation errors but I feel like it's asking for trouble!

VA.gov Experience Standard

Category Number 04, Issue Number 07

Other References

WCAG SC 3.2.4 AA

Platform Recommendation

Maintain material honesty. If it looks like a button, it should be a <button> --- with all of the accessibility features already baked in. The best option here is to update to the design system's file input component.

VFS Guidance

Close the ticket when the issue has been resolved or validated by your Product Owner
If your team has additional questions or needs Platform help validating the issue, please comment on the ticket
Some feedback provided may be out of scope for your iteration of the product, however, Platform's OCTO leadership has stated that all identified issues need to be documented and it is still your responsibility to resolve the issue.
If you do not believe that this Staging Review issue ticket is the responsibility of your team, comment below providing an explanation and who you believe is responsible. Please tag the Point of Contact/Reviewers. Governance team will research and will follow up.

christinec-fftc commented 11 months ago

Having trouble reproducing this on on staging. Am I on the right page? I'm testing the BDD flow and checked both the Upload and Add Another Document buttons on the supporting-evidence/additional-evidence page, but they both look to be using the button tag at this point.

Can you please share the steps to reproduce? I also tried to search through the 526 apps for any cases of <span role="button" but haven't found any.

RakshindaAslam commented 11 months ago

cc @briandeconinck

RakshindaAslam commented 7 months ago

@shiragoodman - can you help us with this question?

briandeconinck commented 7 months ago

Hi @christinec-fftc and @RakshindaAslam! Same note as on #59271 -- sorry for the slow reply, and please feel free to bug me in Slack to get faster responses!

Testing in the BDD flow, I can also confirm that the markup is different than when this was tested in May. It looks like it's using the va-button component rather than the va-file-input component, so there may be opportunities for future refinement. But the concerns I had with assistive technology compatibility should be resolved. You should be good to close this out!

department-of-veterans-affairs / va.gov-team