Skip to content

Conversation

@mahoneycm
Copy link
Contributor

@mahoneycm mahoneycm commented Feb 13, 2023

Summary

Remove aria-disabled attribute from usa-file-input element to allow screen readers to read out label tag.

Breaking change

This is not a breaking change

Related issue

Closes #5144

Preview link

File Input (Disabled) →

Problem statement

Currently, when File Input is initialized, the aria-disabled attribute is added to the parent element. This causes the label to no longer be read by screen readers, which goes against best practices for screen readers.

Solution

Remove JS which sets this attribute. Now the File Input is still read as disabled, but the label is also ready by screenreaders

Testing and review

  1. Visit the File Input Disabled story.
  2. Activate screen reader
  3. Check that the label is read
  4. Check that File Input component is read as disabled.

Copy link
Contributor

@amyleadem amyleadem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me!

I confirmed the following items:

  • The aria-disabled attribute is no longer added to the usa-file-input parent element
  • There was no negative impact on the VoiceOver readout. It still reads the label and stated that the input was dimmed. (This is unchanged from the experience in VO for develop)

@amycole501 I am going to add you to the review so you can confirm that the JAWS readout follows best practices. I will hold off on approval until I hear your findings.

@amyleadem amyleadem requested a review from amycole501 February 13, 2023 16:56
@mejiaj mejiaj added this to the uswds 3.5.0 milestone Mar 16, 2023
@mejiaj
Copy link
Contributor

mejiaj commented Mar 28, 2023

@amyleadem can you follow up with @amycole501 on this?

@mejiaj mejiaj requested a review from amyleadem March 28, 2023 13:27
@amycole501
Copy link

Tested in JAWS; label was read accurately. Button action reads "No file selected, button unavailable."
Tested in NVDA; label was read accurately. Button action reads "Clickable button unavailable, no file selected."

Copy link
Contributor

@amyleadem amyleadem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved!

Copy link

@amycole501 amycole501 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounded fine in both NVDA and JAWS

@mahoneycm
Copy link
Contributor Author

Work implemented in #5063

@mahoneycm mahoneycm closed this Mar 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

USWDS - File input: Remove aria-disabled from from parent wrapper

5 participants