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

[All fields and inputs] Helper text update #2329

Closed
jeanservaas opened this issue Apr 19, 2019 · 24 comments

Comments

@jeanservaas
Copy link
Contributor

commented Apr 19, 2019

Enhancement[All input fields]: Helper text update

Jan Child, the Design Lead for Watson assistant made several really good points about the way we're treating helper text followed by these suggestions...

This issue relates to all of our input fields (i.e. text input, text area, number input, select and dropdown components); it also affects the $helper-text type token (which would eventually need to be deprecated).

The Watson Assistant team would like to the helper text to be below the input field rather than above it (directly under the label); when the label is underneath, it's only there if you need it vs. when it's above, it's given the same weight as the label and is obtrusive for the user.

  • Move helper text below the input / dropdown field Edit based on thread: doesn't work coz dropdown opens and covers helper text.

They also want to eliminate the use of italics; if the helper text is below the input field, there's no need for the italic to differentiate it from the label; also, the use of italics in the situation was not appropriate in the first place. Italics should be reserved primarily for single-word emphasis, titles / names and foreign / technical words and terms.

  • ~~Use $label-01 token for helper text (eliminates the italic); eventually deprecate $helper-text-01; in the meantime, update $helper-text-01 to call regular Plex Sans instead of italic ~~ Edit based on thread: Keeping italic because it is currently the only visual differentiation between label text and helper text.

Speaking for the design team; I agree with these proposed changes; due to time constraints, we didn't spend enough time iterating on the helper text designs. Our primary concern was that it not interfere with the error text below the input field. Jan suggested that best practice here would be to remove the helper text when the warning appears.

  • In the instance of an error state, remove helper text in favor of error message Edit based on thread: no longer relevant if we don't move text down.

Designs:


Current state of helper text in context:

image.png


Proposed change:

image.png

@elizabethsjudd

This comment has been minimized.

Copy link
Contributor

commented Apr 19, 2019

From an a11y side of things moving the helper text would mean that the aria-describedby attribute would need to be used on the input that is connected to the id of the helper text so that screen reader users have access to the helper text when they are on the input and not after they leave the input.

Or even easier, using Flexbox's order property. Here's a screen shot from one of my team member's playing around with the component.

Screen Shot 2019-04-19 at 4 09 48 PM

@jeanservaas

This comment has been minimized.

Copy link
Contributor Author

commented Apr 22, 2019

Thanks for this input @elizabethsjudd! Just to clarify, do you see this as an impediment to making this change? Or is this just an added bullet point for the devs to tackle?

@elizabethsjudd

This comment has been minimized.

Copy link
Contributor

commented Apr 22, 2019

@jeanservaas simply something for the devs to tackle while implementing the change. It shouldn't block the update.

@stale

This comment has been minimized.

Copy link

commented May 6, 2019

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

@stale stale bot added the inactive label May 6, 2019
@dakahn dakahn added this to Backlog in Accessibility May 6, 2019
asudoh added a commit to asudoh/carbon-components that referenced this issue May 9, 2019
asudoh added a commit to asudoh/carbon-components that referenced this issue May 9, 2019
@stale

This comment has been minimized.

Copy link

commented May 9, 2019

As there's been no activity since this issue was marked as stale, we are auto-closing it.

@stale stale bot closed this May 9, 2019
Accessibility automation moved this from Backlog to Done May 9, 2019
@jeanservaas

This comment has been minimized.

Copy link
Contributor Author

commented May 9, 2019

THIS IS NOT STALE

@jeanservaas jeanservaas reopened this May 9, 2019
Accessibility automation moved this from Done to In progress May 9, 2019
@stale stale bot removed the inactive label May 9, 2019
@shixiedesign shixiedesign added this to issue triage in v10 Enhancements, tech debt, new features via automation May 9, 2019
@shixiedesign shixiedesign removed this from In progress in Accessibility May 9, 2019
@shixiedesign shixiedesign added this to Backlog: vanilla in Accessibility via automation May 9, 2019
@dakahn dakahn added the priority: low label May 9, 2019
@shixiedesign shixiedesign removed this from Backlog: vanilla in Accessibility May 10, 2019
@shixiedesign shixiedesign added this to issue triage in v10 Enhancements, tech debt, new features via automation May 10, 2019
@dakahn dakahn added this to New issues in Accessibility May 13, 2019
@shixiedesign shixiedesign changed the title Enhancement[All fields and input fields]: Helper text update [All fields and inputs] Helper text update May 13, 2019
@shixiedesign shixiedesign moved this from issue triage to To do in v10 Enhancements, tech debt, new features May 13, 2019
@stale

This comment has been minimized.

Copy link

commented Jun 26, 2019

As there's been no activity since this issue was marked as stale, we are auto-closing it.

@stale stale bot closed this Jun 26, 2019
v10 Enhancements, tech debt, new features automation moved this from issue triage to Done Jun 26, 2019
Accessibility automation moved this from Backlog to Closed: ready for review Jun 26, 2019
@shixiedesign

This comment has been minimized.

Copy link
Contributor

commented Jun 26, 2019

Palette work in progress.

@shixiedesign shixiedesign reopened this Jun 26, 2019
v10 Enhancements, tech debt, new features automation moved this from Done to In progress Jun 26, 2019
Accessibility automation moved this from Closed: ready for review to In progress Jun 26, 2019
@shixiedesign shixiedesign added this to To do in [Inactive] Theming via automation Jun 26, 2019
@shixiedesign

This comment has been minimized.

Copy link
Contributor

commented Jun 28, 2019

Blocked by #3226

@stale

This comment has been minimized.

Copy link

commented Jul 28, 2019

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

@stale stale bot added the inactive label Jul 28, 2019
@shixiedesign

This comment has been minimized.

Copy link
Contributor

commented Jul 29, 2019

not stale

@stale stale bot removed the inactive label Jul 29, 2019
@jeanservaas

This comment has been minimized.

Copy link
Contributor Author

commented Jul 29, 2019

Keep open to wait for palette work

@lnajjar

This comment has been minimized.

Copy link

commented Aug 20, 2019

It looks like you're going this way anyway, but, if not, here is a rationale. To match users' cognitive flow and prevent user input errors, it would be helpful to retain your original design: Label, helper text, input field, error message. That way, users read the label, then the helper text, then make a valid entry. As you do now, displaying the helper text in italics might be a nice way to differentiate the helper text from the label.

@shixiedesign shixiedesign removed this from To do in [Inactive] Theming Sep 5, 2019
@shixiedesign shixiedesign removed this from the v10-update milestone Sep 5, 2019
@shixiedesign

This comment has been minimized.

Copy link
Contributor

commented Sep 12, 2019

Closing this issue to start a new one to track implementation of color palette solution. See #3961

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Accessibility
  
In progress 👩‍💻
7 participants
You can’t perform that action at this time.