Disabled 'buttons' accessibility research

[rachidatecs]

Issue description

We want to make sure our pattern of showing 'disabled' buttons follows best accessibility practices.

Currently, we are using this markup on the domain managers page:

<a class="usa-button--unstyled disabled-link usa-tooltip text-no-underline "
          data-position="bottom"
          title="Domains must have at least one domain manager"
          aria-disabled="true"
          data-tooltip="true"
          >
          Remove
</a>

We know buttons with a disabled attribute are not ideal, but are they better than an anchor with no href?

What about a simple span with an aria-label and or title?

Acceptance criteria

• [ ] We have a clear plan for revising (if needed) the disabled buttons on the domain managers page and well as implementing future disabled buttons.
• [ ] The implementation adheres to accessibility best practices.
• [ ] Timebox to no more than 2 days

Additional context

The literature states that if an action is disabled, do not show it. We think that in the context of our app, it makes sense to have an indication of the disabled action that's both visual and accessible.

Suggest reaching out to Aaron who may be able to shortcut our research.

Links to other issues

1484

Relates to #1917

[abroddrick]

@AnnaGingle have you looked at this ticket? Is there any insights that you can give off the top of your head for better approaches and that we should capture here?

[vickyszuchin]

Added "refinement" tag, this is pending @AnnaGingle to review ticket and add insight as needed cc: @Katherine-Osos

[AnnaGingle]

Best practices:

• https://www.w3.org/TR/2014/REC-html5-20141028/disabled-elements.html
• https://designsystem.digital.gov/components/button/
• Use a read only version in place of a disabled state @abroddrick Let me know if this is what you were looking for!