Summary

This PR takes a look at existing disabled classes and attempts to replace them by just using the disabled and aria-disabled attributes in their place.

In it's current state, USWDS contains two --disabled classes and one placeholder.

usa-button--disabled class

There was an existing usa-button--disabled class that acquired all of the same style definitions as button classes that had the disabled or aria-disabled attributes. The classes themselves were not used on our storybook or USWDS Site.

There is a note on site that states to not use the class unless for testing or debugging. It might be best to simply remove the class as well as the note on site.

Use the browser-native disabled attribute for any disabled button. Don’t use usa-button--disabled, which is intended only for debugging and prototyping. ¹

usa-file-input--disabled class

File input uses a class to apply disabled styling to the child elements of the target <div>. Generally, this is acceptable behavior and helps to assign styles since the <div> element does not receive the disabled attribute.

After discussion, we have decided to allow disabled classes that style elements that:

1. Do not receive the disabled attribute
2. Are dynamically placed

This will allow us to correctly style elements as disabled without putting the burden on the user.

usa-date-picker--disabled placeholder

Date picker uses a disabled placeholder but applies these settings to elements with the disabled or aria-disabled attributes, so we can safely ignore.

Breaking change

This is potentially a breaking change

While we advise against using the usa-button--disabled class, this would break markdown for devs who have implemented it

Related issue

Closes #5116

Preview links

Button →
File Input (disabled) →

Problem statement

Rather than relying on specific state classes to target disabled components, we should instead target these elements using the disabled or aria-disabled attributes.

Solution

1. Remove unused and redundant disabled button classes
2. Ensure disabled classes are dynamically set using the related form element as to not put the need on the user.

Testing and review

1. Review the current state of disabled buttons
2. Confirm no visual discrepancies
3. Tests File Input to make sure dynamic creation works as expected

Before opening this PR, make sure you’ve done whichever of these applies to you:

• Confirm that this code follows the 18F Front End Coding Style Guide and Accessibility Guide.
• Run git pull origin [base branch] to pull in the most recent updates from your base and check for merge conflicts. (Often, the base branch is develop).
• Run npm run prettier:scss to format any Sass updates.
• Run npm test and confirm that all tests pass.