Coding a Live Region Component

[00:00:00]
>> Marcy Sutton: But we're gonna play with a really simple version of a live region demo. So I'm gonna go back over the app. I'm gonna go to close out some of this stuff.
>> Marcy Sutton: That's the page I wanted, announcer.jsx. So I've got this page. I'm gonna go pull it up in the browser.

[00:00:24]
So my announcer page has a little component that if I start typing, it will say forum saved. And like a lot of web applications, that's it. [LAUGH] There's no live region, there's no announcement. So if the user's typing and I'm posting into the server that I've saved their stuff, without that live region, they have no way of knowing.

[00:00:45]
So let's go add one over here on the right side. I'll go make a new component. I'm already importing it, so I just need to go over to this live region component, which is in our better components directory. And it is called Live region. So I've got a little shell here.

[00:01:06]
And I'm going to just go add a little wrapper div here. And I'm gonna make a little form component that has this write live region. So I'm gonna say role of status. And I'm gonna give it a child, not a custom paragraph, but just a normal paragraph. And I'm gonna say nothing here yet.

[00:01:28]
So that's just, that'll be there when the page loads. And then when I change its text content, because it has this role of status, it should do some good stuff. I'm actually gonna make this dynamic cuz I'm in react, so I'm gonna say the message here. And the message will be in my component.

[00:01:49]
This will be pretty self-contained. It's not really gonna get anything from the outside world. A real production component, you'd probably have props and lots more going on. But just to show you how these library agents work, I'm gonna set a state array here and say, message and setMessage.

[00:02:06]
And I'm gonna use a react hook for a use state. And the default state I will say is nothing here. The vanilla version of this, that's just the text in the component. I'm also gonna make a little form. Somebody used some form components here so a label and an input type of text.

[00:02:30]
That is a self-closing element. I'm gonna give it a label with Intertext. And I'm not even going to add any CSS to this. So that's all it's gonna get. I'm going to add a button type of Submit because I want to hit the enter key in the Submit and actually make it submit the form.

[00:02:50]
And I'm just gonna say start. This is like a really basic demo. I am going to put an on submit on this form, so that I don't submit the form by default, submitHandler.
>> Marcy Sutton: A good trick if you are trying to do some JavaScripting form things. So I'm gonna add a const submitHandler.

[00:03:15]
I'm going to give it an event, assign it a callback function. And I'm just gonna say event.preventDefault. And when we talk about progressive enhancement later on, this is where you could override a server action that would work without JavaScript. But I'm just gonna prevent the default action of submitting cuz that would refresh the page and then our demo wouldn't work.

[00:03:37]
So if I type in some text into this input, I wanna take its value and apply it here in this message. So when I submit the form is when I can go and grab that value. I'm gonna go back to our friend, the Ref API, and set an inputRef, so I can grab the value off of it.

[00:04:01]
I'm gonna say useRef, and then I'll go assign it in the JSX down below. I'm also going to assign a messageRef. Actually, I don't need that because I'm using state. So in the submitHandler I need to add the ref onto the inputs. So I'll say ref, inputRef. So that way I have a handle on an element.

[00:04:24]
I can grab its content. I could probably use a form API to go and grab the content off of that too. There's multiple ways to get this content. I'm just gonna say inputRef.current. That'll get me the actual DOM node. And I'm gonna get into value that when I type into it.

[00:04:44]
And I'm gonna say sent message to that value. And I might need to double check this to make sure it works. So my good friend, the console log statement. I'm never gonna outgrow it, it's awesome. Okay, so I've got this little component. It's got a default state. It's got a submitHandler, so that when I type in this field and I hit submit, it should copy that into this live region.

[00:05:10]
So let's just go make sure this works. So we've got our default text. If I say hi. That worked. Okay, so I'm gonna just start over with this little thing, and I'm gonna turn on voice over to see if this is working.
>> Speaker 2: VoiceOver on Chrome, Live Regions, vertical line, Accessibility in Javascript Applications.

[00:05:27]
Enter text, edit text, main [NOISE] google chrome window live regions, accessibility in Javascript applications webe contect has keyboard focus, enter text, edit text, main. You are currently on a text field. To enter text in this field, type hamburgers.
>> Marcy Sutton: No, didn't work. Let's try it again.
>> Speaker 2: [NOISE] Hello.

[00:05:41]
You are currently, hello. Select, edit text, space. [NOISE] Space. [NOISE] You are currently on a text field. To enter text in this field, type hello Frontend Masters.
>> Marcy Sutton: All right.
>> Speaker 2: F5, button, VoiceOver off.
>> Marcy Sutton: Can everyone hear that okay? My speakers on this laptop are not happy with me [LAUGH] playing music really loud.

[00:06:03]
So the role of status. It was polite. It waited for the screen reader to finish whatever other announcements it had. And then it announced the content, which was something like saved. That's not super urgent, that can wait until the screen reader's done reading. It's waiting for system announcements, things that you can't really control.

[00:06:25]
So that's the simplest live region, and that's how you can bind them. So that's that example. If you wanna recreate that, the live region component that I started with is empty just like you saw. And then I have a vanilla JavaScript version. Something you could play with in the future with live regions is to try to the two different politeness levels, play with assertive, see how that works for you.

[00:06:52]
You can also change the rate of speech in your screen reader if it's too slow or too fast. You can change voices as well, which is pretty cool. People who rely on screen readers all day every day have a much higher rate than I do. But it helps for demonstration purposes to have that slowed down a little bit and when you're new.

[00:07:11]
All right, so the live region stuff is pretty simple. So I think I'm gonna keep on rolling. But there are some examples in the deck of the component that I wrote. And then the vanilla JS version is really similar.