USWDS - Input & Prefix/Suffix: Add disabled styles. Resolves #4913 by mahoneycm · Pull Request #5004 · uswds/uswds

mahoneycm · 2022-10-24T15:13:28Z

Description

Resolves #4913

Input disabled styling

Currently, disabled form elements other than button rely on default browser styles to give visual queues that form elements are disabled. Chrome and Edge very lightly dim the field, but is sometimes hard to notice. Other browsers such as Safari and Firefox do not add any visual indication that these fields are inaccessible to the user.

@amyleadem summed it up very nicely in her comment on #4322 which addresses this issue for select / dropdown components

@thisisdano @mejiaj I have included a screenshot that showcases disabled visual cues in Chrome, Firefox, Safari, and Edge for OS. This screenshot displays the following:

Standard .usa-select element

Disabled .usa-select element

Disabled select element without .usa-select class

Standard .usa-input element

Disabled .usa-input element

Disabled input element without .usa-input class

I also have a link to a live demo in PR #4969 in case it is hard to glean the style differences from the screenshot.

Things to note:

Each browser has its own set of default styles for disabled form elements.

USWDS overrides some default disabled styles in a way that makes it less clear visually that the element is disabled.

I lean towards wanting to take a look at developing disabled styles for USWDS form elements that provide clearer visual cues that the element is disabled. However, we would need to be careful of poor contrast ratio and look into accessibility implications.

I agree with Amy in leaning towards developing our own disabled styles to have a consistent and easy-to-understand style across all USWDS form elements and browsers.

This PR adds disabled styles for input elements but can be extended to other form elements such as text fields, drop downs, and combo boxes if we chose to take this route.

Prefix / Suffix

As mentioned in #4913, input prefix/suffix does not inherit the input disabled style. This can be resolved by creating a usa-input-group--disabled style. The usage would be consistent with how we implement the error state with usa-input-group--error.

Prefix / Suffix are the only components that make use of the usa-input-group class so there is no worry about the styles breaking another component.

Screenshots

Before

Prefix with disabled input:

After
Prefix with usa-input-group--disabled and disabled input:

mejiaj

No issues found with input prefix / suffix visual styles specifically. Added comments based on additional findings. Also, can you check the failed test in CircleCI?

Tested

Code style and formatting
Input prefix/suffix with disabled attribute
Adding disabled attribute to all inputs found in components under Form Inputs

mahoneycm · 2022-11-01T18:29:43Z

Removed styles for text input

We'll add support disabled styles for other form elements in another ticket

~~Screenshots go from Active inputs, default chrome styles when disabled, new styles with USWDS disabled~~

~~This can easily be added to other inputs such as select or combo-box.~~

~~What do you all think @mejiaj @thisisdano @amyleadem ? Something to consider implementing?~~

mejiaj

Looks good on this component. Let's create a new issue (if there isn't one already) for extending this to other form inputs.

mahoneycm · 2022-11-22T20:31:06Z

Issue created here: #5051

…x-disable

amyleadem · 2022-11-23T20:11:37Z

@mahoneycm
Looks good. I am a bit torn on the styling because it doesn't read as disabled to me from a visual perspective. But I understand that we likely want to maintain accessible color contrast ratios and I like that it matches the disabled date picker styles.

I added a comment to #5051 about possibly standardizing USWDS disabled styles since there are differing levels of contrast in disabled styles across the design system.

Additionally, our radio and checkbox disabled styles have added cursor: not-allowed in their styles. Would it make sense to add that here as well?

mahoneycm · 2022-11-28T14:48:20Z

Originally I had set the color to disabled-light because it was closer to Chromes disabled styles. I went ahead and switched it to disabled so it was consistent to other disabled elements and added cursor: not-allowed as recommended!

amyleadem

Hi @mahoneycm,
I remembered that we should add the same styles for aria-disabled as well (like in PR #4783).

I also noticed that date picker no longer has styles for aria-disabled. Can you take a look to see if your fix will repair that?

Thanks!

mahoneycm · 2022-11-30T22:40:05Z

@amyleadem I noticed that other forms include aria-disabled styles while working on my other disabled forms PR and I planned on adding them in, so I'll do that for this PR as well!

As for date picker, I'll look into it as part of #5051

mahoneycm · 2022-12-06T19:19:25Z

@amyleadem I added aria-disabled styles and an example within the component previews.

date-picker still has aria-disabled on this branch, but I'll make sure it's included on #5051

amyleadem

⚠️ This fix conflicts with the effort to remove disabled classes in #5128. Is there an alternate method for styling this component?

amyleadem · 2023-02-07T19:49:19Z

Going to change the status on this issue to "Review" to allow for evaluation.

amyleadem

I like this styling solution and I like the clarity of the variables up top, @mahoneycm! I added a few comments for your review.

Additionally, what do you think about the possibility of removing the index.js file now that the input is full width and absolutely positioned? I might be missing something, but with a little tweaking it feels like we can handle focus with CSS exclusively now. Curious to hear your thoughts!

mahoneycm · 2023-02-13T14:44:38Z

@amyleadem Thanks for the great feedback! Resolved all of your comments if you'd like to give it a double check!

mahoneycm · 2023-02-13T15:24:27Z

+  &--error,
+  &--success {
+    & input:focus {
+      outline-offset: units($theme-input-state-border-width);
+    }
+  }


Currently, the focus outline is placed outside of the succes/error border. This allows for the same styling

If we prefer to have the focus cover the success/error border, we can remove these lines

I think the the outline-offset is a good consideration. Nice call.

I did notice that the input border (1px) is now covered by the focus outline, whereas it was visible before. It is a small thing, but just wanted to flag the visual difference. Not sure if it needs any action.

Look who's finally learning to use tokens 🤪

I experimented with trying to resolve the hidden input outline but I wasn't able to add on pixels to the units($theme-input-state-border-width) function and the input is being set by like so:

%block-input-styles { @include u-border(1px, "base-dark");

Maybe if they're both variables I could add them within the function?

Agreed, good consideration. I was initially put off by the level of nesting, but it makes sense. Moving forward we should be cautious with too much nesting.

Usually it's best practice to move your grouped selectors up before the individual ones. The & isn't necessary when it's a child element.

&--error, &--success { // No need for the preceeding `&` here. input:focus { outline-offset: units($theme-input-state-border-width); } } &--error { @include u-border($theme-input-state-border-width, "error-dark"); } &--success { @include u-border($theme-input-state-border-width, "success"); }

Compiles to:

.usa-input-group--error input:focus, .usa-input-group--success input:focus{ outline-offset:0.25rem; }

amyleadem

Looking good! I had a couple of comments for you — just some little things.

amyleadem · 2023-02-13T16:13:44Z

+  &--error,
+  &--success {
+    & input:focus {
+      outline-offset: units($theme-input-state-border-width);
+    }
+  }


I think the the outline-offset is a good consideration. Nice call.

amyleadem · 2023-02-13T16:16:12Z

+  &--error,
+  &--success {
+    & input:focus {
+      outline-offset: units($theme-input-state-border-width);
+    }
+  }


I did notice that the input border (1px) is now covered by the focus outline, whereas it was visible before. It is a small thing, but just wanted to flag the visual difference. Not sure if it needs any action.

mejiaj

@mahoneycm some minor comments, otherwise LGTM.

mejiaj · 2023-02-15T14:43:06Z

+  &--error,
+  &--success {
+    & input:focus {
+      outline-offset: units($theme-input-state-border-width);
+    }
+  }


Agreed, good consideration. I was initially put off by the level of nesting, but it makes sense. Moving forward we should be cautious with too much nesting.

Usually it's best practice to move your grouped selectors up before the individual ones. The & isn't necessary when it's a child element.

&--error, &--success { // No need for the preceeding `&` here. input:focus { outline-offset: units($theme-input-state-border-width); } } &--error { @include u-border($theme-input-state-border-width, "error-dark"); } &--success { @include u-border($theme-input-state-border-width, "success"); }

Compiles to:

.usa-input-group--error input:focus, .usa-input-group--success input:focus{ outline-offset:0.25rem; }

…suffix.scss Co-authored-by: James Mejia <james.mejia@gsa.gov>

mahoneycm · 2023-02-16T16:28:49Z

@mejiaj Thanks for sharing! Always happy to have a method to the madness and organize our files.

I did some cleanup and pushed it up if you'd like to re review! Let me know if there's anything I can organize further!

mejiaj

Looks good! Thank you for your patience on this. Tested in Firefox, Chrome, and Safari.

Also, I went ahead and ran prettier sass task.

Odd, the original test failed in CircleCI due to a timeout. Wasn't able to reproduce locally and resolved on re-run.

…x-disable

mahoneycm · 2023-03-29T14:26:23Z

Work implemented in #5063

mahoneycm added 2 commits October 24, 2022 10:26

Add disabled styles for usa-input and prefix/suffix

5187a92

Add disable previews for prefix/suffix

a0c0928

mahoneycm requested review from amyleadem and mejiaj October 24, 2022 15:13

Update disabled suffix ID

27f837f

mejiaj suggested changes Oct 24, 2022

View reviewed changes

mahoneycm added 2 commits October 31, 2022 14:25

Fix disabled input ID

83f5d39

Add quotes to disabled color

123d806

mahoneycm requested a review from mejiaj November 1, 2022 14:45

Add disabled style to .usa-textarea:disabled

cb46d4b

mahoneycm requested a review from thisisdano November 1, 2022 18:30

mejiaj approved these changes Nov 22, 2022

View reviewed changes

mahoneycm mentioned this pull request Nov 22, 2022

USWDS - Disabled styles: Apply consistent styles to disabled elements #5051

Closed

2 tasks

mahoneycm added 2 commits November 23, 2022 12:44

Removed textarea style updates that are beyond scope of this work

b2e66b9

Merge branch 'develop' of github.com:uswds/uswds into cm-prefix-suffi…

312c981

…x-disable

Update disabled input & prefix styles

b3a0e77

mahoneycm requested a review from mejiaj November 28, 2022 14:49

mejiaj approved these changes Nov 29, 2022

View reviewed changes

amyleadem suggested changes Nov 30, 2022

View reviewed changes

Include aria-disabled styles & example

309d0fd

mahoneycm requested review from amyleadem and mejiaj December 6, 2022 19:14

mahoneycm added 2 commits December 7, 2022 09:29

Fix aria-disabled ID's

07b8a68

Fix label for aria-disabled inputs

f62c579

amyleadem suggested changes Feb 7, 2023

View reviewed changes

mahoneycm added 2 commits February 8, 2023 14:28

Switch prefix/suffix to absolute positioning and replace disabled class

ce16187

Resolve padding issues due to absolute positioning

7f95a35

amyleadem suggested changes Feb 10, 2023

View reviewed changes

mahoneycm added 4 commits February 13, 2023 09:29

Lower case variable names

8d81793

Remove +1 input padding on prefix/suffix inputs

4b020e3

Remove references to disabled class

5581cdd

Add color utility note to disabled mixin

7963934

mahoneycm requested a review from amyleadem February 13, 2023 14:44

mahoneycm added 2 commits February 13, 2023 10:19

Replace focus js with css

1820ddc

Replace outline offset with var

bbb5ba2

mahoneycm commented Feb 13, 2023

View reviewed changes

Remove spec test

3b9d228

amyleadem suggested changes Feb 13, 2023

View reviewed changes

Use padding variable

5db72ab

mejiaj suggested changes Feb 15, 2023

View reviewed changes

mahoneycm and others added 2 commits February 16, 2023 11:12

Update packages/usa-input-prefix-suffix/src/styles/_usa-input-prefix-…

c364ce6

…suffix.scss Co-authored-by: James Mejia <james.mejia@gsa.gov>

Minro CSS cleanup

300a391

mahoneycm requested a review from mejiaj February 16, 2023 16:27

Add note to disabled mixin

25f1950

mahoneycm requested a review from amyleadem February 22, 2023 19:24

Run prettier sass task

bc99e05

mejiaj approved these changes Feb 24, 2023

View reviewed changes

Merge branch 'develop' of github.com:uswds/uswds into cm-prefix-suffi…

456714a

…x-disable

mahoneycm closed this Mar 29, 2023

mejiaj deleted the cm-prefix-suffix-disable branch July 18, 2023 16:53

Uh oh!

Conversation

mahoneycm commented Oct 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Input disabled styling

Prefix / Suffix

Screenshots

Uh oh!

mejiaj left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mahoneycm commented Nov 1, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Removed styles for text input

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

mahoneycm commented Nov 22, 2022

Uh oh!

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

Uh oh!

Uh oh!

mahoneycm commented Nov 28, 2022

Uh oh!

amyleadem left a comment

Choose a reason for hiding this comment

Uh oh!

mahoneycm commented Nov 30, 2022

Uh oh!

mahoneycm commented Dec 6, 2022

Uh oh!

amyleadem left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amyleadem commented Feb 7, 2023

Uh oh!

amyleadem left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mahoneycm commented Feb 13, 2023

Uh oh!

mahoneycm Feb 13, 2023

Choose a reason for hiding this comment

Uh oh!

amyleadem Feb 13, 2023

Choose a reason for hiding this comment

Uh oh!

amyleadem Feb 13, 2023

Choose a reason for hiding this comment

Uh oh!

mahoneycm Feb 13, 2023

Choose a reason for hiding this comment

Uh oh!

mejiaj Feb 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amyleadem left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

amyleadem Feb 13, 2023

Choose a reason for hiding this comment

Uh oh!

amyleadem Feb 13, 2023

Choose a reason for hiding this comment

Uh oh!

mahoneycm commented Oct 24, 2022 •

edited

Loading

mejiaj left a comment •

edited

Loading

mahoneycm commented Nov 1, 2022 •

edited

Loading

amyleadem commented Nov 23, 2022 •

edited

Loading

amyleadem left a comment •

edited

Loading

mejiaj Feb 15, 2023 •

edited

Loading

mejiaj Feb 15, 2023 •

edited

Loading

mejiaj left a comment •

edited

Loading