Implementing the TextInput Component

[00:00 - 00:10] Now that you've gotten an overview of what we're building, let's jump into the code and make this component more accessible. The first thing we need to do is ensure that the input has a label and that the two elements are properly associated.

[00:11 - 00:19] If you look at the current code in text input.jsx, we'll notice that there is no label present. Let's fix that by adding a label element above the input element.

[00:20 - 00:30] Do that and then we'll display in brackets the label prop that gets passed in. Now that you can see that the label's present and says email address, because that's what we're passing in from app.jsx.

[00:31 - 00:44] And now that we have a visible label, we still need to establish a proper association between the label and the corresponding input. And to achieve this, we'll take the ID prop passed into the component and apply it to the appropriate attributes for the respective elements.

[00:45 - 00:54] So for the input element, we'll use the ID prop and assign it to the ID attribute. And for the label element, we'll utilize the ID prop and set it as a value on the four attribute.

[00:55 - 01:01] Since we're working with React, we'll use the HTML4 attribute to create the necessary association. It's a special keyword that gets mapped there.

[01:02 - 01:17] And now you can see that association is made. And then when you click on the input on the label, I'm sorry, it'll highlight the input indicating that the association has been linked properly.

[01:18 - 01:30] So now that we have our input and label elements properly associated with one another, we can move on to creating an accessible way to hide the label. And to do this, we'll make use of the high label prop that is being passed to the component.

[01:31 - 01:45] So open up text input.css and create a class called visuallyhidden, that we will reference in the JSX file. If you remember from the labels and inputs lesson, there was CSS snippet that keeps the information accessible to assistive technology, but visually hidden.

[01:46 - 01:53] We're going to copy and paste that same snippet and use it here. So now we can go back to text input.jsx and wire up the hide label prop.

[01:54 - 02:03] In React, you can apply CSS classes using the class name attribute. We only want to apply the visually hidden class when the hide label prop is true, so we'll pass in a conditional that handles that logic.

[02:04 - 02:22] So when hide label is true, it'll apply the visually hidden class, and when it's not, it'll just return zero classes. And if we were to pass the hide label prop to the text input component from app .jsx, you'll see that the label is visibly removed, but still made available to the screen reader.

[02:23 - 02:40] And if we inspect the DOM and look at the accessibility tree, we'll also see that the label is still present. Last but not least, we'll take a note from the color contrast and styles lesson and apply some styles to the input when it isn't either a focused or disabled state.

[02:41 - 03:00] So if we open back up text input.css, let's apply the two, the focus class and disabled class that we have in the lesson manuscript. And let's go ahead and wire up the disabled attribute on the input element as well.

[03:01 - 03:11] And let's actually test out the focus styles first by clicking or tabbing into the input. And we should now see a distinct focus state is being applied.

[03:12 - 03:30] Make it a more noticeable and user friendly when the input is being interacted with. And if we open up app.jsx and add the disabled prop to the text input component , we can test out and see that the styles change to indicate that the input is not interactable when we have that prop being applied.

[03:31 - 03:42] And having these visual cues in different states ensures a clear understanding of the input status, enhancing the overall user experience with the input. Great work.

[03:43 - 03:52] Within this introductory example, we were able to cover a lot of ground and incorporate some topics from the earlier modules. In the next lesson, we'll finish things up by adding error handling to our custom text input component.