Visitar URL original
USWDS: style aria-disabled to match disabled by amyleadem · Pull Request #4783 · uswds/uswds · GitHub
Skip to content

USWDS: style aria-disabled to match disabled #4783

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.

Sign up for GitHub

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

Merged
thisisdano merged 32 commits into from
Jul 27, 2022
Merged

USWDS: style aria-disabled to match disabled #4783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
a18fe63
Extend :disabled styles to include aria-disabled
Jun 7, 2022
e884254
Update more :disabled styles to include aria-disabled
Jun 24, 2022
23c42e0
Add aria-disabled to date picker and button stories
Jun 24, 2022
6852493
Repair missing curly bracket
Jun 27, 2022
a81fa89
Add story controls for aria-disabled (for testing)
Jun 29, 2022
782dd16
Add cursor:auto to button-disabled styles
Jun 29, 2022
a1ab8a8
Add disabled styling to aria-disabled usa-date-picker_button
Jun 29, 2022
babbf34
Repair border styles on disabled buttons
Jun 29, 2022
78c2a08
Standardize disabled hover states for button variants
Jun 29, 2022
5d08b5b
Merge branch 'develop' of https://github.com/uswds/uswds into al-aria…
Jun 29, 2022
888677f
Run prettier
Jun 29, 2022
7db47bf
Restore some not([disabled]) styles
Jun 29, 2022
ea7953a
Repair date-picker scss
Jun 29, 2022
1bf37f9
Run prettier
Jun 29, 2022
43f604b
Restore previous focus.scss
Jun 29, 2022
8211b00
Run prettier
Jun 29, 2022
7515f51
Merge develop
Jul 11, 2022
855072b
Set show_disabled to true
Jul 12, 2022
75643d7
Incorporate :where
Jul 13, 2022
beecb2f
Format code
Jul 15, 2022
de783f3
Move aria-disabled to conditional in existing elements
Jul 15, 2022
af9e8e2
Reorder disabled big button
Jul 15, 2022
2cc1bb3
Repair disabled hover styles
Jul 15, 2022
ea3389e
Repair datepicker disabled/aria-disabled stories
Jul 15, 2022
acd1289
Move aria-disabled to conditional in existing elements (Radio)
Jul 15, 2022
a7494a5
Add name to aria_disabled (Button)
Jul 15, 2022
01dafee
Restructure button-group twig and json to apply aria-disabled to elem…
Jul 15, 2022
c94c74a
Add aria-disabled to elements (radio tile)
Jul 15, 2022
f39d798
Run prettier
Jul 18, 2022
a0cbcc9
Move aria-disabled demo next to disabled
Jul 18, 2022
0419688
Use radio button control for disabled states
Jul 18, 2022
af3c60e
Remove disabled attribute from link button demo
Jul 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions packages/usa-button-group/src/content/usa-button-group~segmented.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
{
"modifier": "usa-button-group--segmented",
"items": [
"<button class=\"usa-button\">Map</button>",
"<button class=\"usa-button usa-button--outline\">Satellite</button>",
"<button class=\"usa-button usa-button--outline\">Hybrid</button>"
]
"modifiers": [
"",
"usa-button--accent-cool",
"usa-button--accent-warm",
"usa-button--base",
"usa-button--big",
"usa-button--outline",
"usa-button--outline usa-button--inverse",
"usa-button--secondary"
],
"segmented": true
}
61 changes: 31 additions & 30 deletions packages/usa-button-group/src/styles/_usa-button-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,47 +93,48 @@
}
}

&:not(:first-child):not(:last-child) > .usa-button {
&:where(:not(:first-child):not(:last-child)) > .usa-button {
border-radius: 0;
margin-right: -(math.div(units($theme-button-stroke-width), 2));
margin-left: -(math.div(units($theme-button-stroke-width), 2));
}

// Creates separators
&:not(:last-child) .usa-button::before {
border-right: 1px solid color("primary-dark");
bottom: 0;
content: "";
display: block;
height: 100%;
position: absolute;
right: 1px;
top: 0;
width: 1px;
z-index: 3;
}
&:where(:not(:last-child)) {
.usa-button::before {
border-right: 1px solid color("primary-dark");
bottom: 0;
content: "";
display: block;
height: 100%;
position: absolute;
right: 1px;
top: 0;
width: 1px;
z-index: 3;
}

&:not(:last-child) .usa-button--secondary::before {
border-right-color: color("secondary-dark");
}
.usa-button--secondary::before {
border-right-color: color("secondary-dark");
}

&:not(:last-child) .usa-button--accent-cool::before {
border-right-color: color("accent-cool-dark");
}
.usa-button--accent-cool::before {
border-right-color: color("accent-cool-dark");
}

&:not(:last-child) .usa-button--base::before {
border-right-color: color("base-dark");
}
.usa-button--base::before {
border-right-color: color("base-dark");
}

&:not(:last-child) .usa-button--secondary:disabled::before,
&:not(:last-child) .usa-button--accent-cool:disabled::before,
&:not(:last-child) .usa-button--base:disabled::before {
border-right-color: color("base");
}
[class*="usa-button"]:disabled::before,
[class*="usa-button"][aria-disabled="true"]::before {
border-right-color: color($theme-body-background-color);
}
Comment thread
amyleadem marked this conversation as resolved.
Resolved

&:not(:last-child) .usa-button:active::before,
&:not(:last-child) .usa-button--outline::before {
display: none;
.usa-button:active::before,
.usa-button--outline::before {
display: none;
}
Comment thread
amyleadem marked this conversation as resolved.
Resolved
}
}
}
16 changes: 16 additions & 0 deletions packages/usa-button-group/src/usa-button-group.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,22 @@ import { DefaultContent, SegmentedContent } from "./content";

export default {
title: "Components/Button Group",
argTypes: {
disabled_state: {
name: "Disabled state",
control: { type: "radio" },
options: ["none", "disabled", "aria-disabled"]
},
segmented: {
table: { disable: true }
},
modifiers: {
table: { disable: true }
},
modifier: {
table: { disable: true }
}
}
};

const Template = (args) => Component(args);
Expand Down
48 changes: 44 additions & 4 deletions packages/usa-button-group/src/usa-button-group.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,47 @@
<ul class="usa-button-group {{ modifier }}">
{% for item in items %}
<!-- start segmented styles -->
{% if segmented == true %}
<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>

@mejiaj mejiaj Jul 25, 2022

Copy link
Copy Markdown
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>

@amyleadem amyleadem Jul 25, 2022

Copy link
Copy Markdown
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

</li>
<li class="usa-button-group__item">
<button class="usa-button usa-button--outline" {% 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 usa-button--outline" {% if disabled_state == "disabled" %}disabled{% endif %} {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}>Satellite</button>
</li>
Comment thread
amyleadem marked this conversation as resolved.
Resolved
</ul>

{% 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 %}
Comment on lines +15 to +32

@mejiaj mejiaj Jul 25, 2022

Copy link
Copy Markdown
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.

@amyleadem amyleadem Jul 25, 2022

Copy link
Copy Markdown
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

{% endfor %}
</ul>
<!-- end segmented styles -->

<!-- start default styles -->
{% else %}
<ul class="usa-button-group">
<li class="usa-button-group__item">
<a href="javascript:void(0);" class="usa-button usa-button--outline" {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}>Back</a>
</li>
<li class="usa-button-group__item">
<button class="usa-button" {% if disabled_state == "disabled" %}disabled{% endif %} {% if disabled_state == "aria-disabled" %}aria-disabled="true"{% endif %}>Continue</button>
</li>
</ul>
Comment thread
mejiaj marked this conversation as resolved.
Resolved
<!-- end default styles -->
{% endif %}
3 changes: 2 additions & 1 deletion packages/usa-button/src/content/usa-button.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"modifier": "",
"text": "Default",
"is_demo": true
"is_demo": true,
"aria_disabled": false
}
3 changes: 2 additions & 1 deletion packages/usa-button/src/content/usa-button~accent-cool.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"modifier": "usa-button--accent-cool",
"text": "Accent cool",
"is_demo": true
"is_demo": true,
"aria_disabled": false
}
3 changes: 2 additions & 1 deletion packages/usa-button/src/content/usa-button~accent-warm.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"modifier": "usa-button--accent-warm",
"text": "Accent warm",
"is_demo": true
"is_demo": true,
"aria_disabled": false
}
3 changes: 2 additions & 1 deletion packages/usa-button/src/content/usa-button~base.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"modifier": "usa-button--base",
"text": "Base",
"is_demo": true
"is_demo": true,
"aria_disabled": false
}
3 changes: 2 additions & 1 deletion packages/usa-button/src/content/usa-button~big.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"modifier": "usa-button--big",
"text": "Big button",
"is_demo": true
"is_demo": true,
"aria_disabled": false
}
3 changes: 2 additions & 1 deletion packages/usa-button/src/content/usa-button~outline-inverse.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"modifier": "usa-button--outline usa-button--inverse",
"text": "Outline inverse",
"is_demo": true
"is_demo": true,
"aria_disabled": false
}
3 changes: 2 additions & 1 deletion packages/usa-button/src/content/usa-button~outline.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"modifier": "usa-button--outline",
"text": "Outline",
"is_demo": true
"is_demo": true,
"aria_disabled": false
}
3 changes: 2 additions & 1 deletion packages/usa-button/src/content/usa-button~secondary.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"modifier": "usa-button--secondary",
"text": "Secondary",
"is_demo": true
"is_demo": true,
"aria_disabled": false
}
3 changes: 2 additions & 1 deletion packages/usa-button/src/content/usa-button~unstyled.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"modifier": "usa-button--unstyled",
"text": "Unstyled button",
"is_demo": true
"is_demo": true,
"aria_disabled": false
}
16 changes: 12 additions & 4 deletions packages/usa-button/src/styles/_usa-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
outline-offset: units(0.5);
}

&:disabled {
&:disabled,
&[aria-disabled="true"] {
@include button-disabled;
}
}
Expand All @@ -68,6 +69,11 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
&.usa-button--active {
@include set-text-and-bg("accent-cool-darker", $context: $button-context);
}

&:disabled:hover,
&[aria-disabled="true"]:hover {
color: color("white");
}
}

.usa-button--accent-warm {
Expand Down Expand Up @@ -198,8 +204,9 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
.usa-button--outline-disabled,
.usa-button--outline-inverse-disabled,
.usa-button--outline:disabled,
.usa-button--outline[aria-disabled="true"],
.usa-button--outline-inverse:disabled,
.usa-button--outline-inverse:disabled {
.usa-button--outline-inverse[aria-disabled="true"] {
background-color: color("transparent");

&:hover,
Expand All @@ -209,12 +216,13 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
&:focus,
&.usa-focus {
background-color: color("transparent");
border: 0;
box-shadow: $button-stroke color("disabled");
}
}

.usa-button--outline-disabled,
.usa-button--outline:disabled {
.usa-button--outline:disabled,
.usa-button--outline[aria-disabled="true"] {
box-shadow: $button-stroke color("disabled");
color: color("disabled");

Expand Down
5 changes: 5 additions & 0 deletions packages/usa-button/src/usa-button.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@ import {

export default {
title: "Components/Button",
argTypes: {
aria_disabled: {
name: "aria-disabled",
},
}
};

const Template = (args) => Component(args);
Expand Down
9 changes: 8 additions & 1 deletion packages/usa-button/src/usa-button.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,17 @@
<button class="usa-button {{ modifier }} usa-button--active">Active</button>
<button class="usa-button {{ modifier }} usa-focus">Focus</button>
<button class="usa-button {{ modifier }}" disabled>Disabled</button>
{% if aria_disabled == true %}
<button class="usa-button {{ modifier }}" aria-disabled="true">aria-disabled</button>
{% endif %}
<button class="usa-button {{ modifier }} usa-button--unstyled">Unstyled button</button>
{% else %}
<button class="usa-button {{ modifier }}" {% if disabled %} disabled {% endif %}>{{ text }}</button>
<button class="usa-button {{ modifier }}">{{ text }}</button>
{% if is_demo and 'usa-button--big' in modifier %}
<button class="usa-button {{ modifier }}" disabled>Disabled</button>
{% if aria_disabled == true %}
<button class="usa-button {{ modifier }}" aria-disabled="true">aria-disabled</button>
{% endif %}
<button class="usa-button {{ modifier }} usa-button--unstyled">Unstyled button</button>
{% endif %}
{% endif %}
Expand Down
6 changes: 4 additions & 2 deletions packages/usa-checkbox/src/styles/_usa-checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
}
}

&:disabled {
&:disabled,
&[aria-disabled="true"] {
@include format-input {
cursor: not-allowed;
}
Expand All @@ -41,7 +42,8 @@

.usa-checkbox__input {
&:checked,
&:checked:disabled {
&:checked:disabled,
&:checked[aria-disabled="true"] {
@include format-input {
background-position: center center;
background-size: units(1.5) auto;
Expand Down
6 changes: 3 additions & 3 deletions packages/usa-checkbox/src/usa-checkbox--tile.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<fieldset class="usa-fieldset">
<legend class="usa-legend">Select any historical figure</legend>
<div class="usa-checkbox">
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-2" type="checkbox" name="historical-figures-2" value="sojourner-truth" checked>
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-2" type="checkbox" name="historical-figures-2" value="sojourner-truth" checked {% if aria_disabled == true %}aria-disabled="true"{% endif %}>
<label class="usa-checkbox__label" for="check-historical-truth-2">
Sojourner Truth
<span class="usa-checkbox__label-description">
Expand All @@ -11,11 +11,11 @@
</label>
</div>
<div class="usa-checkbox">
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-2" type="checkbox" name="historical-figures-2" value="frederick-douglass">
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-2" type="checkbox" name="historical-figures-2" value="frederick-douglass" {% if aria_disabled == true %}aria-disabled="true"{% endif %}>
<label class="usa-checkbox__label" for="check-historical-douglass-2">Frederick Douglass</label>
</div>
<div class="usa-checkbox">
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-2" type="checkbox" name="historical-figures-2" value="booker-t-washington">
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-2" type="checkbox" name="historical-figures-2" value="booker-t-washington" {% if aria_disabled == true %}aria-disabled="true"{% endif %}>
<label class="usa-checkbox__label" for="check-historical-washington-2">Booker T. Washington</label>
</div>
<div class="usa-checkbox">
Expand Down
12 changes: 12 additions & 0 deletions packages/usa-checkbox/src/usa-checkbox.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,13 @@ import TestComponent from "./test/test-patterns/test-usa-checkbox.twig";

export default {
title: "Components/Form Inputs/Checkbox",
argTypes: {
aria_disabled: {
control: {type: 'boolean'},
defaultValue: false,
name: "aria-disabled",
}
}
};

const Template = (args) => Component(args);
Expand All @@ -13,3 +20,8 @@ const TestTemplate = (args) => TestComponent(args);
export const Default = Template.bind({});
export const CheckboxTile = TileTemplate.bind({});
export const Test = TestTemplate.bind({});
Test.argTypes = {
aria_disabled: {
table: { disable: true },
},
}
Loading