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
Add help and aria described by to list input component #1587
Add help and aria described by to list input component #1587
Conversation
@@ -81,5 +85,7 @@ type ListInputProps = { | |||
label: string; | |||
initialValues?: string[]; | |||
onChange: ChangeCallback; | |||
describedBy: string; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You shouldn't need to pass this in. I'd just generated a unique value for the ID. You could use _.uniqueId
to generate one in the constructor:
this.helpID = _.uniqueId('list-view-help-');
then
aria-describedby={helpText ? this.helpID : undefined}
@@ -63,6 +64,9 @@ export class ListInput extends React.Component<ListInputProps, ListInputState> { | |||
</div> | |||
</div> | |||
))} | |||
<div className="help-block" id={describedBy}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<div className="help-block" id={describedBy}> | |
{helpText && <div className="help-block" id={describedBy}>{helpText}</div>} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@spadgett i had this before, and thought you'd just say make help text required and we won't need this logic. And i also thought, if helptext is optional now the aria-describedBy will be provided but null.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you provide undefined
for aria-describedby
when there's no help text, the attr should be left out. It should be straightforward to handle.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@spadgett oh perfect, yeah its not a problem i was just trying to anticipate your feedback :)
It looks like the help text is closer to "add more" than the input. I think we want a little extra margin above "add more." |
@spadgett updated based on feedback |
@spadgett good point, this should improve on the last change. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm, please squash. thanks!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/lgtm
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: dtaylor113, jcaianirh, spadgett The full list of commands accepted by this bot can be found here. The pull request process is described here
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
And add help text and aria-describedby for all idp pages using the list input component.
after margin change: