Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

USWDS: style aria-disabled to match disabled #4783

Merged
merged 32 commits into from
Jul 27, 2022
Merged

Conversation

amyleadem
Copy link
Contributor

@amyleadem amyleadem commented Jun 7, 2022

Description

Closes: #4508

Preview links:

Problem

At times, users of the Design System will want to use aria-disabled in place of the disabled attribute, but are limited because currently there is no explicit styling for aria-disabled elements in the Design System.

aria-disabled provides a different experience to end-users that use keyboard navigation or assistive technologies. The primary difference between the two attributes is this:

  • disabled elements do not receive focus on tab, which can result in the item being:
    • invisible to users on screen readers who use tab to navigate forms
    • difficult and confusing to interact with for other users using keyboard navigation without a screen reader, particularly for those with cognitive and fine-motor disabilities
  • aria-disabled does receive focus on tab, which can give users important clues about their next steps

The movement in industry conversation seems to be towards aria-disabled as the preferred user experience (See resources below), but other mainstream design systems still use the disabled attribute. This item is only one piece of a larger discussion about the UX/accessibility of disabled buttons.

From Mozilla:

The aria-disabled attribute is similar to the HTML disabled attribute, but better. The first rule of ARIA is "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of repurposing an element and adding an ARIA role, state or property to make it accessible, then do so." aria-disabled is an exception to that rule. It is one of the only cases where an ARIA attribute may be better than the native disabled attribute HTML equivalent.

Resources

Solution

Providing styling for both aria-disabled and disabled will give users more flexibility to make the appropriate usability decisions for their site.

⚠️ This PR is concerned only with CSS styling of aria-disabled. It is not intended to replace disabled as the default attribute in our components.

Tasks completed

  • Add styling for aria-disabled wherever :disabled is declared
  • Standardize hover states for disabled/aria-disabled buttons
  • Set disabled/aria-disabled cursor to auto instead of pointer
    • Note: Radio and Checkbox do use cursor: not-allowed. Should we standardize to one value?
  • Add aria-disabled control to relevant stories to help with testing

Testing

  1. Confirm that all :disabled SCSS references also include aria-disabled
  2. Check that the styling for disabled and aria-disabled align on the following components:
    • Button
    • Button group
    • Date picker
    • Radio
    • Checkbox

Additional information

Before you hit Submit, make sure you’ve done whichever of these applies to you:

  • Follow the 18F Front End Coding Style Guide and Accessibility Guide.
  • Run npm test and make sure the tests for the files you have changed have passed.
  • Run your code through HTML_CodeSniffer and make sure it’s error free.
  • Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

@amyleadem amyleadem marked this pull request as ready for review June 29, 2022 22:41
@amyleadem amyleadem requested a review from mejiaj June 29, 2022 22:41
@amyleadem amyleadem requested a review from mejiaj July 13, 2022 21:03
Copy link
Contributor

@mejiaj mejiaj left a comment

Choose a reason for hiding this comment

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

Looks good so far! Added some comments below. Show disabled is for aria-disabled exclusively, right? Do you think it'd be easier to add that attribute on the existing elements vs adding new items?

Comment on lines 19 to 24
{% if aria_disabled == true %}
<div class="usa-checkbox">
<input class="usa-checkbox__input" id="check-historical-carver" type="checkbox" name="historical-figures" value="george-washington-carver" disabled>
<label class="usa-checkbox__label" for="check-historical-carver">George Washington Carver</label>
</div>
{% endif %}
Copy link
Contributor

Choose a reason for hiding this comment

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

Thoughts on adding this existing elements if disabled instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I dig it. Updated in de783f3.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Also added this behavior to usa-radio: acd1289

Copy link
Contributor Author

Choose a reason for hiding this comment

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

And added to button group: 01dafee

@amyleadem
Copy link
Contributor Author

@mejiaj
Thanks for the comments. They were helpful for reframing approach. Here are the changes I made:

  • Updated the structure of the button-group segemented story to display all button variants 01dafee
  • Added aria-disabled to the element rather than creating new elements in:
    • Button group 01dafee
    • Radio acd1289
    • Checkbox de783f3
    • I did not do this for button because it would require creating some demo styles for .usa-button--active and .usa-button--hover
  • Repaired date picker stories ea3389e

Please let me know if you have any questions or concerns.

@amyleadem amyleadem requested a review from mejiaj July 15, 2022 16:09
Copy link
Contributor

@mejiaj mejiaj left a comment

Choose a reason for hiding this comment

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

Sorry, one last item. Do you think the disabled controls might be better if we combined them into radio or select? Because right now you can have both disabled and aria-disabled selected.

The options being something like:

Disabled state:
  - None
  - Disabled
  - Aria-disabled

@amyleadem
Copy link
Contributor Author

Sorry, one last item. Do you think the disabled controls might be better if we combined them into radio or select? Because right now you can have both disabled and aria-disabled selected.

Good call! I'll fix now.

@amyleadem
Copy link
Contributor Author

@mejia I have updated the controls to use radio buttons wherever both disabled and aria-disabled can be applied. Please let me know if you see anything else.

@amyleadem amyleadem requested a review from mejiaj July 18, 2022 16:07
@amyleadem amyleadem requested a review from mejiaj July 22, 2022 19:48
Copy link
Contributor

@mejiaj mejiaj left a comment

Choose a reason for hiding this comment

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

Added some suggestions and comments for clarifying button group template. I realize this is outside the scope of the PR, so happy to move it to a separate issue. If you think so too, can you create a new issue for it?

The styling looks good.

<li class="usa-button-group__item">
{{ item }}
<button class="usa-button" {% if disabled_state == "disabled" %}disabled{% endif %} {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}>Map</button>
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe an if/elseif statement might be more readable  — along with some formatting.

Suggested change
<button class="usa-button" {% if disabled_state == "disabled" %}disabled{% endif %} {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}>Map</button>
<button class="usa-button"
{% if disabled_state == "disabled" %}
disabled
{% elseif disabled_state == "aria-disabled" %}
aria-disabled="true"
{% endif %}
>
Map
</button>

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Opened issue #4881 to resolve in a future enhancement

Comment on lines +15 to +32
{% for modifier in modifiers %}
{% if 'usa-button--outline usa-button--inverse' in modifier %}
<div class="bg-base-darkest padding-1" style="max-width: fit-content">
{% endif %}
<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button class="usa-button {{ modifier }}" {% if disabled_state == "disabled" %}disabled{% endif %} {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}>Map</button>
</li>
<li class="usa-button-group__item">
<button class="usa-button {{ modifier }}" {% if disabled_state == "disabled" %}disabled{% endif %} {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}>Hybrid</button>
</li>
<li class="usa-button-group__item">
<button class="usa-button {{ modifier }}" {% if disabled_state == "disabled" %}disabled{% endif %} {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}>Satellite</button>
</li>
</ul>
{% if 'usa-button--outline usa-button--inverse' in modifier %}
</div>
{% endif %}
Copy link
Contributor

Choose a reason for hiding this comment

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

If we added items to usa-button-group~segmented.json we could loop too.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Opened issue #4881 to resolve in a future enhancement

@amyleadem
Copy link
Contributor Author

amyleadem commented Jul 25, 2022

Added some suggestions and comments for clarifying button group template. I realize this is outside the scope of the PR, so happy to move it to a separate issue. If you think so too, can you create a new issue for it?

@mejiaj I opened issue #4881 so that we can address these concerns about the button-group template in a future enhancement.

@amyleadem amyleadem requested a review from mejiaj July 25, 2022 17:32
@mejiaj mejiaj requested a review from thisisdano July 25, 2022 17:35
@thisisdano thisisdano merged commit 9099ffe into develop Jul 27, 2022
@thisisdano thisisdano deleted the al-aria-disabled branch July 27, 2022 22:14
@thisisdano thisisdano mentioned this pull request Aug 5, 2022
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.

Style aria-disabled the same as disabled
3 participants