fix: input accessibility

[jsomsanith-tlnd]

What is the problem this PR is trying to solve?
Input component is not accessible.

1. label semantic is not correct
2. labels are not associated to inputs. Focusing on the input, SR won't read the label.
3. errors are not associated to inputs. Focusing on the input, SR won't read the error.
4. errors disappear on hover, but not on its keyboard equivalent: focus
5. icon should be ignored by SR, as its purpose is decorative if the input is associated with a proper aria-label
6. DOM elements order is reversed. Error in a :before pseudo element comes first, then the input, then the icon. SR read them in this order.

What is the chosen solution to this problem?

1. use <label>
2. accept a required props id that is passed to the input. Use htmlFor react attribute to associate the label with the input through the id.
3. error is not in input :before pseudo-element anymore but in a <div>. Generate an error id based on the props.id, that is passed to the error div. Use aria-describedby on the input to associate the error with the input.
4. add the :focus management to have the same behavior as the :hover.
5. add aria-hidden on the icon
6. Set them in a more predictable order (icon - input - error)

Stories still not really accessible

• inputs should always have a label, no placeholder/title as only label. Adding an aria-label on the input makes it usable for SR users but not the rest. People without disability will be lost.
• icons can replace the label if it's explicit enough, but the input still need an aria-label for SR users.

My advice would be to rework the design and replace all invalid stories with valid ones. So those usecases only:

• Input with label

• Input with label and value

• Input with label and placeholder

• Input with label and error

• Disabled input with label

• Input with icon + aria-label

• Input with icon + aria-label and value

• Input with icon + aria-label and placeholder

• Input with icon + aria-label and error

• Disabled input with icon

[jsomsanith-tlnd]

@domyen please consider the advice on the Stories still not really accessible part.

[domyen]

Amazing job @jsomsanith!

re: Add labels always
That's probably the right call. The use case from a design POV is sometimes we won't want to show the label (even if it exists).

Perhaps the way forward is adding a prop like showLabel but make label a required prop that renders to the DOM. What do you think?

From a cursory look around the web it looks like Airbnb "hides" labels in certain form elements as well. This is their CSS for hiding labels.

    border: 0px !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(100%) !important;
    clip-path: inset(100%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0px !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;

[jsomsanith-tlnd]

If this solution is ok for you, it's ok for me too. That's what we do in our component lib at Talend.
But I will go for hideLabel instead, as the default prefered/accessible way is to have the label. But if we want to do custom rendering, we will have to explicitly require it to be hidden.

[jsomsanith-tlnd]

@domyen The use case from a design POV is sometimes we won't want to show the label (even if it exists). --> just make sure that in your designs you always have

• a proper aria-label for SR,
• another way to make user without SR to understand what is this field (like a clear icon, or within something with a clear context)

[domyen]

LGTM, merging. Excited to ship such a substantial improvement! We're on track to cut another release sometime tomorrow or the next day 🤞

[kylesuss]

🚀 PR was released in v0.0.23 🚀