Managing keyboard focus in React components - React.js Tutorial

- [Instructor] I'd like you to try something. Visit your bank's website and log in to your account without using a mouse or a touch screen. What is your experience like with navigating the website? Do you have to tab through lots of links, or are the input fields easy to get to? Now imagine navigating all of your favorite websites without using a mouse. This is just a small example of how accessibility users navigate the internet. Keyboard focus is important, because many people are unable to navigate the web using a mouse, so all functionalities should be made available through the standard keyboard. For people navigating a website using the tab key only, focus states or how they know their location on the page. Here's the company website that I am running locally on my machine, and you can see that I'm tapping through the navigation bar at the top of the page. Each of the links is highlighted with a blue border. Why is adding keyboard focus important in a React app? When a new element or component renders in a single page application, screen readers are silent to the page changes. It is important that users know when a new element renders in order for them to have access to all information available on the page. Let's look at an example of screen readers staying silent on page changes. I've returned to the company website that I'm running locally on my machine and I'm tabbing through the page. When reaching the footer, there's a section for users to enter their email address. I'm going to turn on my screen reader. - [Text-To-Speech] Voiceover on system preferences. Exit Chrome. Two Trees Olive Oil. Google Chrome window. Enter your email. Edit text has keyboard focus. Sign up button. - [Instructor] You can see that I hit the sign up button, and there's a success message on the page, but the screen reader hasn't read it aloud. If I hit tab again... - [Text-To-Speech] Visited link. Image logo. Chrome has new window. - [Instructor] You can see that we've returned to the top of the page and see the logo. What do we need in order to use keyboard focus in React? Using a ref or reference, which provides a way to access DOM nodes, we can create and attach the ref to the element we want to focus on. Once the ref is created and added to the element, we can set the focus to trigger on a lifecycle method. Now that we understand the importance of keyword focus in React, let's explore how to add this feature in an application. Here in the example files provided, under source components, in the footer component, we have set state from line nine through 11. And if you scroll further down on this page, on line 28, you can see that, based on the state, we will be rendering the success message. Let's go ahead into this P tag and add a ref. I've called a successMessage. Be sure to also include a tab index that will be equal to zero. This will make it so that the element can be tabbed to. Now that the ref is assigned to the P tag, let's return to our constructor, and outside of the state, let's create that ref. We'll do that by calling React.createRef method. And finally, we'll need to create a lifecycle method in this class-based component. We're using componentDidUpdate, since a piece of the page is updating and not the entire page. We'll call on the ref created, and use the current.focus method. This way, when a component updates, the element with the ref will be focused on. Let's save our work and return to the site. I'm going to scroll down on this page to get to the footer, click on the footer so that I can tab easily to the input and the sign up button, and hit enter. Now you can see that the success message is highlighted with a blue border. Let's make sure this works by turning on our screen reader. - [Text-To-Speech] Space with applications. I turn to Chrome. Two Trees Olive Oils, web content. Enter your email, edit text main. Sign up button. Thank you, you've been subscribed to our news group. - [Instructor] Now, if a user is navigating via keyboard and has a screen reader, this message will be read to them because of the keyboard focus. And we're done!