USWDS: style aria-disabled to match disabled by amyleadem · Pull Request #4783 · uswds/uswds

amyleadem · 2022-06-07T22:24:07Z

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

Making disabled buttons more inclusive (CSS Tricks)
aria-disabled (Mozilla)
Videos comparing experience of disabled and aria-disabled (A11y-101)

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
- Note: This likely addresses the concerns in: Outline and Accent buttons change style when disabled and hovered #4420
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

Confirm that all :disabled SCSS references also include aria-disabled
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.

…-disabled

mejiaj

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?

mejiaj · 2022-07-14T17:40:34Z

+  {% 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 %}


Thoughts on adding this existing elements if disabled instead?

I dig it. Updated in de783f3.

Also added this behavior to usa-radio: acd1289

And added to button group: 01dafee

…ents

amyleadem · 2022-07-15T16:08:27Z

@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.

mejiaj

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 · 2022-07-18T14:08:38Z

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 · 2022-07-18T16:07:45Z

@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.

mejiaj

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.

mejiaj · 2022-07-25T14:18:05Z

+  <ul class="usa-button-group usa-button-group--segmented">
    <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>


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>

Opened issue #4881 to resolve in a future enhancement

mejiaj · 2022-07-25T14:30:33Z

+  {% 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 %}


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

Opened issue #4881 to resolve in a future enhancement

amyleadem · 2022-07-25T17:30:23Z

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.

Amy Leadem added 16 commits June 7, 2022 15:21

Extend :disabled styles to include aria-disabled

a18fe63

Update more :disabled styles to include aria-disabled

e884254

Add aria-disabled to date picker and button stories

23c42e0

Repair missing curly bracket

6852493

Add story controls for aria-disabled (for testing)

a81fa89

Add cursor:auto to button-disabled styles

782dd16

Add disabled styling to aria-disabled usa-date-picker_button

a1ab8a8

Repair border styles on disabled buttons

babbf34

Standardize disabled hover states for button variants

78c2a08

Merge branch 'develop' of https://github.com/uswds/uswds into al-aria…

5d08b5b

…-disabled

Run prettier

888677f

Restore some not([disabled]) styles

7db47bf

Repair date-picker scss

ea7953a

Run prettier

1bf37f9

Restore previous focus.scss

43f604b

Run prettier

8211b00

amyleadem marked this pull request as ready for review June 29, 2022 22:41

amyleadem requested a review from mejiaj June 29, 2022 22:41

mejiaj reviewed Jul 11, 2022

View reviewed changes

Comment thread packages/usa-button-group/src/content/usa-button-group.json Outdated

Comment thread packages/usa-button-group/src/styles/_usa-button-group.scss Outdated

Amy Leadem added 3 commits July 11, 2022 14:49

Merge develop

7515f51

Set show_disabled to true

855072b

Incorporate :where

75643d7

amyleadem requested a review from mejiaj July 13, 2022 21:03

mejiaj suggested changes Jul 14, 2022

View reviewed changes

Amy Leadem added 6 commits July 15, 2022 05:52

Format code

beecb2f

Move aria-disabled to conditional in existing elements

de783f3

Reorder disabled big button

af9e8e2

Repair disabled hover styles

2cc1bb3

Repair datepicker disabled/aria-disabled stories

ea3389e

Move aria-disabled to conditional in existing elements (Radio)

acd1289

Amy Leadem added 3 commits July 15, 2022 07:28

Add name to aria_disabled (Button)

a7494a5

Restructure button-group twig and json to apply aria-disabled to elem…

01dafee

…ents

Add aria-disabled to elements (radio tile)

c94c74a

amyleadem requested a review from mejiaj July 15, 2022 16:09

mejiaj reviewed Jul 18, 2022

View reviewed changes

Amy Leadem added 3 commits July 18, 2022 08:31

Run prettier

f39d798

Move aria-disabled demo next to disabled

a0cbcc9

Use radio button control for disabled states

0419688

amyleadem requested a review from mejiaj July 18, 2022 16:07

mejiaj reviewed Jul 22, 2022

View reviewed changes

Comment thread packages/usa-button-group/src/usa-button-group.twig Outdated

Remove disabled attribute from link button demo

af3c60e

amyleadem requested a review from mejiaj July 22, 2022 19:48

mejiaj suggested changes Jul 25, 2022

View reviewed changes

amyleadem mentioned this pull request Jul 25, 2022

USWDS - Enhancement: Improve button group template #4881

Open

amyleadem requested a review from mejiaj July 25, 2022 17:32

mejiaj approved these changes Jul 25, 2022

View reviewed changes

mejiaj requested a review from thisisdano July 25, 2022 17:35

thisisdano approved these changes Jul 27, 2022

View reviewed changes

thisisdano merged commit 9099ffe into develop Jul 27, 2022

thisisdano deleted the al-aria-disabled branch July 27, 2022 22:14

thisisdano mentioned this pull request Aug 5, 2022

USWDS 3.1.0 #4904

Merged

Conversation

amyleadem commented Jun 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Problem

Resources

Solution

Tasks completed

Testing

Additional information

Uh oh!

Uh oh!

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amyleadem commented Jul 15, 2022

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

amyleadem commented Jul 18, 2022

Uh oh!

amyleadem commented Jul 18, 2022

Uh oh!

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

amyleadem commented Jul 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

amyleadem commented Jun 7, 2022 •

edited

Loading

amyleadem commented Jul 25, 2022 •

edited

Loading