Text input Usage and Style tabs have content which needs to be addressed

[mbgower]

As part of a review of Text Input for accessibility considerations, a number of problems and points of discussion were identified, which are captured in comments in pdf outputs of both the usage and style pages.

These issues include (but are not limited to):

• on other components, the default version is called 'default', here it is called 'text input'; recommend changing to "default."
• text area is treated as a separate component in Figma and on the react examples but is listed as a variant of text input here. It should be consistent (and I recommend making it a variant in the prototyping and react examples to match the component)
• password should be listed as another variant
• the anatomy section is missing and should be added
• information on masking should be added (including weighing value of using Helper text compared to placeholder

There are also the questions/considerations raised in the CAG slack channel:

• Do you have an implementation where character count is built in? There are none in the React component library, although they are mentioned on Usage and appear in Figma (image below).

• Any working examples of errors? I assume exceeding character count is the typical time when errors are surfaced, although if there are other common text input/area situations resulting in errors, i’d like to understand them.
• Do you have any working examples of masking requirements for text inputs? (i.e., date formatting)

See the above linked pdfs for more detailed comments and additional considerations.

[aagonzales]

Sprint task for Carbon team:
Find any actionable bug changes in Gower's PDFs (direct conflicts). If there are larger concerns addressed then open a specific new issue about it and that will be addressed in a future sprint. Find any actionable bug changes in Gower's PDFs (direct conflicts). If there are larger concerns addressed then open a specific new issue about it and that will be addressed in a future sprint. 

[aagonzales]

@mbgower could you ellaborate on this, what is masking?

information on masking should be added (including weighing value of using Helper text compared to placeholder

[aagonzales]

on other components, the default version is called 'default', here it is called 'text input'; recommend changing to "default."

• A: As a system, we have been trying to avoid using "default" as a component name. This system-wide discussion would need to be addressed outside the scope of just text input. Perhaps we can start a discussion thread about this topic instead.

text area is treated as a separate component in Figma and on the react examples but is listed as a variant of text input here. It should be consistent (and I recommend making it a variant in the prototyping and react examples to match the component)

• A: The way Figma components work doesn't always allow us to combine things in nice buckets, the structures of input and area are too different to exist inside one component.
• A: They are also separate components in React code; there is nothing we can do to combine them. Several components in the system get combined into one documentation page, we aren't always consistent with this. This is also an item that needs to be addressed system-wide and is outside the scope of just text input.

password should be listed as another variant

• A: Password is a sub-variant of text-input and not equal to text input (default) and text area. That is why its not listed as a top-level variant.

the anatomy section is missing and should be added

• A: text input is one of the few components that hasn't been updated to use the new template yet which is why its structures differently and missing sections. By a happy coincidence, I'm actually working on update it this sprint so this will be addressed soon. You might notice a few other components that aren't updated yet as well.

information on masking should be added (including weighing value of using Helper text compared to placeholder

• Do you have an implementation where character count is built in? There are none in the React component library, although they are mentioned on Usage and appear in Figma (image below).

• A: Character count does exist in code, you have to turn on the knob to see it in the storybook.

[aagonzales]

I have made significant changes to the text input page in this PR here. @mbgower you may want to re-review the page. Some of your other concerns are system-wide changes that can't be addressed in silo. We have made note of them however.

[mbgower]

Thanks @aagonzales I'll have a look. In answer to your prior question:

@mbgower could you ellaborate on this, what is masking?
information on masking should be added (including weighing value of using Helper text compared to placeholder

Masking is the term used to refer to input-specific data requirements, usually conveyed in the form of a text cue, such as MM/DD/YY for date (by far the most common). Others may involve string length. The most basic input restriction is, say, only allowing numbers. A complex input restriction is often password requirements, but these are almost in a different category. The accessibility point is that any input requirements need to be surfaced to ATs, and so need to be either baked into Carbon or called out by designers.

[mbgower]

I believe the updates to the Text input Usage by @aagonzales have addressed the issues identified.
I'm going to assume that my comments in the Style document that did not cause changes were primarily off target :)