React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

“a11y” stands for “accessibility.” It is a numeronym, with 11 representing the count of letters between the letter a and the letter y.

Accessibility is broken down into 4 categories of disability: visual, cognitive, auditory, motor. 

Regardless of the category of disability, accessibilities aim in web development is to make applications and websites usable for everyone.

a11y

- Web audio APIs include support for features that aren't available by default in the native HTML audio element.
- The operating system includes basic controls
- Custom controls must be accessible with a keyboard, and make sense to a screen reader
- Don't hide the built-in controls until you know that your custom controls are working
- Listening to what VoiceOver reads should inform the a11y information you include
    - VoiceOver says "Elapsed Time" on its own, so we wouldn't want to write it in our code.
- `loadedmetadata` should have the duration to avoid glitches from new audio not being loaded.
- Elements should be labeled with a unique `id`

In this course, we'll be focusing on building an accessible component by using a built-in browser API with React to implement best practices in accessibility custom features. 

Everyone is responsible for accessibility, and we need to start creating features and websites with that in mind. The goal of this course is for you to exploit your understanding of HTML and aria, and be able to look at any common features and identify the different accessibility patterns. 

With this course you won't only learn about accessibility, but also will learn about `HTMLMediaElement` API, and state management in React. 


 





Introduction to Creating a Custom Accessible Audio Player with React

In this lesson we are going to create an `AudioPlayer` component that takes two props `src` and `transcript`, where it returns the audio element and renders the transcript, and we write some pseudo-code for the audio player to reference.

**Think about**: What do we get for free with common HTML elements?

Setup Native Audio and Plan our Audio Player Code

We Introduce [MDN Media docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) and all the APIs. 

In this lesson, we added the `useRef` and created an `audioRef` in our components. We also added the `ref` to the audio element to control it outside of the audio element. We use the `useState` hook, and we created an `isPlaying` state. And finally, we added a `button` that dynamically renders the text as pause and play depending on the `isPlaying` state. On click of that button, we toggle the `isPlaying` state, and depending on that state, we either pause or play it.


Creating a Toggle for Playing and Pausing the Audio

We created a duration state with an initial value of zero, then added an event listener to the audio element for the `loadedMetaData` event. In the event listener callback function, you set the duration state's value to be the audio element's current duration. This ensures that the value of the duration state is only set once the audio element metadata is loaded, allowing you to display the accurate total time of the audio file.

**Think about:** Why do we need to set the duration on the `onLoadedMetadata` event?

"The `onLoadedMetadata` event occurs when metadata for the specified audio/video has been loaded." You can read the docs [here](https://www.w3schools.com/tags/av_event_loadedmetadata.asp) 


 Implementing a Duration State 

In this lesson, we are creating a new state called `mediaTime` with an initial value of 0, updating sample text in the markup to display the value of `mediaTime`, and adding an event listener to the audio element for the `timeUpdate` event.

In the `timeUpdate` event listener callback function, the `mediaTime` state is set to the audio element's current time, which can be accessed using the `audioRef.current.currentTime`. A function is added to the `onTimeUpdate` event of the audio element, to be able to track the current time. And a time formatter is added to format the time for displaying elapsed time and total time.

**Think about:** How often does onTimeUpdate update? (every second, not every millisecond) 

Tracking Audio Playback Progress by Adding Elapsed Time 

We are creating an input of type range with an associated label, this input is to represent the current playback position in the audio, and the user will be able to change the playback position using the input.

The input value is set to be the media time state, it is added a minimum value of 0 and a maximum value as the duration. The demonstration shows how the media time state updates accordingly when the user changes the time using the input range.

A function called `onScrubberChange` is added, which takes in an event as an argument and `console.logs` the value of that event. The `onChange` event is added to the input, ensuring it works as expected. A variable sets the media time state and the current time on the audio ref.

**Think about:** Why do we use the `event.target.value` to set the new `mediaTime` (reminder that the value of the range is bound to `mediaTime`....maybe take a look at that with the formatter)

Create the Audio Scrubber to Control Playback Position

In this lesson, we will create event listeners for the play and pause events on an audio player element and use these listeners to update the value of a variable called `isPlaying` that tracks the current state of the player (e.g., whether it is currently playing or paused). The event listeners, named `onPlay` and `onPause`, will be triggered when the user presses the play or pause button on the audio player element itself, not on a custom play button that may have been created.

Add Play and Pause Events to the Audio Player

We will create two buttons labeled "rewind 15 seconds" and "fast forward 15 seconds." Then, we created two functions, `onRewind` and `onFastForward`, to adjust the current time of a media by 15 seconds. The `onRewind` function will use `Math.max` to ensure that the time does not go into negative, and the `onFastForward` function will use `Math.min` to set a max limit. These functions will be added to the click events of the corresponding buttons. Finally, it sets the new time for the media state and the audio reference.

**Think about:** Why do you need the second parameter for `math.max` and `math.min`?

Add Fast-Forward and Rewind 15 Second Buttons

We are creating a playback rate button in a React application. An array of rates is created, and each element of the array is mapped to a button. Each button is given an onClick handler that calls an anonymous function called `changeRate`. 

`changeRate` sets the playback rate of an audio element to the rate passed as an argument. When the button is pressed in the browser, it shows the new playback rate.

**Think about:** We have all these states for volume, media time etc, why don't we have one for rate?

Creating a Playback Rate Button

We are creating a toggle button for muting and unmuting an audio element using React hooks `useState` and `useRef`. It destructures `isMuted` from the `useState` hook and sets the initial state to false. 

The button's inner text is dependent on the state of `isMuted`, and a `toggleMute` function is created which sets `isMuted` to the opposite of its current state and also sets the `audioRef.current.muted` property to the opposite of `isMuted`. 

A `onVolumeChange` function is added to the audio element that sets the `isMuted` state based on the value of `audioRef.current.muted`. This allows the `isMuted` state to change even when the mute button on the audio element itself is pressed.

**Think about:** 
- Why do we have to add `onVolumeChange` for instead of `onMuted`? 
- How can we use `onVolumeChange` to check for things being muted?

Creating a Toggle Button for Muting and Unmuting an Audio Element in React

We create an input range with a label, where the range is between 0 and 1 with a step of 0 - 1. The input's value should be determined by a ternary statement that checks if the volume is muted and sets it to 0 or to the current volume if not muted. 

An `onVolumeScrubberChange` function is also added that sets the volume to the event target value when the input value changes and updates the volume in the state and an audio reference. The `onVolumeChange` function does not need to be used and the logic needs to be adjusted to ensure that the volume can be updated and that it mutes when the volume reaches 0.

**Think about:** Why do we have to add `audioRef.current.volume === 0` in addition to `audioRef.current.muted`?

Implementing a Volume Range with an onChange Event

In this lesson, we are creating the audio player interface more visually appealing using icons from the React Icons library and Font Awesome, in this process, we are also ensuring that the interface remains accessible to screen readers by providing text descriptions for the icons, first by using the `title` prop on each icon, and then by implementing a `visually hidden` technique that hides the text descriptions from sighted users but makes them available to screen readers. This involves copying and pasting some CSS code to create a visually-hidden class, adding an `aria-hidden` attribute to each icon, wrapping each icon in a React fragment, and then adding a `span` element above each icon with the corresponding text description and the `visually-hidden` class.

**Think about:**  
- Why use `aria-hidden` or visually hide spans? 
- What value does this add to screen reader users?

Design Accessible Buttons Using Icons

I suggest using the previously learned approach but keep in mind that it may lead to an overly complex markup. We also use the `aria-label` attribute, which can be used to override the text within a label element.

**Think about:** Why would you use an `aria-label` instead of creating a visually hidden span?

Using Aria-Label as a Solution for Overly Complex Markup

In this lesson, we are using HTML, accessibility concepts, and ARIA attributes to improve the time scrubber feature of an audio player. 

The goal is to make it accessible to users of screen readers so that the time scrubber announces the actual time (e.g. 12 minutes and 15 seconds) rather than just the value (e.g. 735). 

We are also creating a new folder called "helpers" in the "src" folder and a new file called "format time.js" within it to hold a function called "format human read time" that takes time as a parameter and returns the human-readable equivalent of that time. Additionally, the author debugs the code and uses console.log to check the variable.

**Think about:** Why does a human-readable name help?

Create a Human Readable Time Formatter

We are creating an accessible popup menu for a web application. It covers various concepts, including handling keyboard events, creating a new dropdown component for reuse, using arrow keys to navigate through buttons, using the Tab key to close the menu and go to the next item in the tab order, using the Escape key to close the menu and focus on the button that closes it, using the `aria-expanded` attribute to communicate whether the menu is open or closed, and the difference between the tab index values of 0 and -1. 

**Think about:**
- Why tabindex -1?
- Why would you use arrows versus tab key to navigate through the dropdown?

Create a Dropdown Menu for Rates

React's `forwardRef` function allows a component to receive a ref that has been created outside of it. This can be useful in cases where you want to have a specific part of your component, such as a section of a long transcript or a specific part of an audio recording, referenced from outside the component.

One example of when this might be useful is if you have a "listicle" type of audio, such as "5 things your tech resume needs", and you want to allow users to jump to specific parts of the audio. By converting the component to a forwarded ref component, you can create a ref in the parent component (in this case, the "App" component) and pass it into the audio component. This allows you to create a few buttons in the parent component that can control the audio ref and jump to specific audio sections.

To convert a component to a forwarded ref component, you can use React's `forwardRef` function to wrap the component, and then remove the audio ref and replace all instances with the new ref.

By doing this, you can now control the audio component, like play, pause and jump to a specific time, by interacting with the `audioRef` ref object created in the parent component and passed into the audio component.

**Think about:** What ways to control the audio outside the component could help with accessibility?

Using a forwardRef to Create External Controls

At the end of this course, you will be able to add auditing tools to your development workflow for accessibility issues in your applications and ultimately automate those audits.

Auditing React Apps for Accessibility 

This is a series of videos where you'll find part interview and part screen share with experts. They focus on React, but the underlying principles are valid for UI work in general.

React State Management Expert Interviews

Learn how to set up and test different network conditions using the Cypress intercept command.

Test Network Edge Cases with .intercept() Command in Cypress

Create an Accessible Audio Player with the HTML Media Element and React

https://app.egghead.io/api/v1/lessons/a11y-introduction-to-creating-a-custom-accessible-audio-player-with-react/subtitles

Lindsey Kopacz: [0:00] Hey, and welcome to my course on building a custom accessible audio player using React. The point of this course is to learn a bit more about accessibility by architecting a custom feature.
[0:10] The goal isn't to learn how to build an audio player per se. It's to learn how to use the built-in browser APIs with a framework like React and combine that knowledge with the best practice accessibility patterns to learn how to architect custom features.

[0:24] A lot of developers understand the basics of accessibility, but oftentimes, we are getting designs for features and we're clueless on to how to start architecting them with accessibility in mind. It's always a good idea to ask designers for accessibility annotations because everyone's responsible for accessibility.

[0:43] Depending on the knowledge within your organization, it may be a good time for you to collaborate with your designers and architects something together based on your solid understanding of HTML and ARIA authoring practices.

[0:55] My goal is for you to be able to look at any custom feature and think about common accessibility patterns that already exists. We can use these as building blocks to make that feature accessible to everyone.

[1:05] Not only will you be learning about accessibility through a project, but you will also be learning more about the HTML media element API. We'll tap into this API that's built into the browser using React to help you create this custom feature.

[1:18] You'll also be managing a great deal of state within this application. It's a great time to not only improve your accessibility skills, but also see how that pairs with React. We won't be going over CSS in this course, but I chose elements that are customizable with CSS. Frankly, CSS and design aren't my areas of expertise, but there are plenty of Egghead courses that focus on CSS.

[1:41] The skills you learn here will help you think creatively about how to make advanced features in your project more accessible and using React to make things more accessible and not less.

https://app.egghead.io/api/v1/lessons/a11y-introduction-to-creating-a-custom-accessible-audio-player-with-react/transcript

https://app.egghead.io/api/v1/lessons/a11y-setup-native-audio-and-plan-our-audio-player-code/subtitles

Instructor: [0:00] First, I'm going to create our app using npx create-react-app and egghead-react-a11y-audio-player. Now that that's done, let's go into the directory. Now, I'm going to just type in yarn start and that should start our app up.
[0:18] OK. We have the scaffold of our app. First, let's clear out this entire CSS file and let's clear up all that's inside of the header and then let's just add a main element right next to the header. Inside the header tags, we're going to create an h1 and call it Accessible Audio Player.

[0:39] Next, I'm going to create a components folder in the source directory and inside that components folder that we just created, I'm going to create a new file called audio-player.js. First, let's create the component. So const AudioPlayer and then here, we're going to destructure two props, src for source and transcript.

[1:03] Then we're going to return some markup. Let's start with a React fragment, and inside the fragment, we can create an audio element with the source to be that source prop. And then we want to add the controls attribute.

[1:17] Next, let's create a div. Inside that div, we are going to render the transcript prop. At the bottom, we're going to export default AudioPlayer. Great. Now, let's add that back to the app. Import AudioPlayer from components audio-player.

[1:40] Before we add the AudioPlayer to our app, we're going to need a source. I'm just going to store that in a variable for cleanliness. This is just a MP3 from the Egghead podcast.

[1:53] Inside the main tags, I'm going to add the audio-player component and going to set that source to be the source variable that we just set. This is missing a transcript. What I'm just going to do is add an anchor with an HF to the transcript from the Egghead site, and then I'm going to pass that variable into the transcript prop.

[2:15] Now, let's take a look at what that looks like. Nothing special here, just a regular old native audio player. Let's see how we interact with this. First, we press the tab key. Go to the element, press the tab key again, and we're focused on the play button. When I press the space bar, we can trigger the play button.

[2:34] When I press tab again, I'm on the scrubber and when I use my right arrow, you can see I'm fast-forwarding. If I press my left arrow, I'm rewinding. When I press tab again, I'm on the scrubber. When I use my right arrow, you can see I'm fast-forwarding. If I press my left arrow, I'm rewinding.

[2:41] When I tab again, I am on the volume and you can see as I press my left arrow, the volume goes down. When I press my right arrow, the volume goes up. Then on the volume button, if I press it, the space bar, it mutes.

[2:57] Then technically on this one, if I press the space bar, you can download it, but I'm not going to add that to ours because you don't really need to do that right now.

[3:05] Next, I'm going to turn on voiceover so we can see what this sounds like when we use a screen reader.

Automated Voice: [3:12] You are currently on a banner inside of web content. Heading level one, end of banner. Main, you are currently play button, you are currently on a...elapsed time, :33, group, :30, end of elapsed total time/25:58, group/20 end of, total time elapsed time, :33.

Audio time scrubber 0: [3:31] 33/25:58, slider, .87, volume, slider, mute, button. You are currently on a button. To show more media controls button, visited, link, transcript.

Instructor: [3:46] OK, so now that we've gone through this on a screen reader, let's write out some pseudocode before we get started. Based off of what we observe from going through it on a keyboard and screen reader, let's just write out what we need this to do.

[4:02] First, we want to create a play button that toggles play and pause, then we want to create an elapsed time and total time, and we want to create a fast forward and rewind 15-second button. Then we need to create a rime scrubber and then we want to create a playback rate and then we want a volume slider and a mute toggle.

[4:28] To summarize what we did here, we created an audio player component that took in the source and the transcript props. We returned and audio element where we use the source as the source then underneath, we created a div that renders a transcript.

[4:44] Then we wrote some pseudocode of what we're going to be doing in the next few videos.

https://app.egghead.io/api/v1/lessons/a11y-setup-native-audio-and-plan-our-audio-player-code/transcript

https://app.egghead.io/api/v1/lessons/a11y-creating-a-toggle-for-playing-and-pausing-the-audio/subtitles

[0:00] Before we start making our custom audio player, I want to introduce you to the MDN docs for this HTML media element. This API contains all of the items we need to make a custom audio player. You'll see properties such as muted, paused, playback rate, duration. You'll also see methods like pause and play. You'll also see events such as loaded metadata and ended and play and pause. We can use this API to control our media element. To get started, we need to add useRef from React. And then we're going to create an audioRef and useRef and we're going to set that value to . So now that we have this audioRef, let's add that to our audio element. 
[0:48] Now we're going to import useState because we want to create a toggle playing state. So let's see structure isPlaying, which is the state, and set isPlaying, which is the setter. And we'll set that initial value to . So now we can start building out our custom audio player. Above the audio element, let's create a div. And inside that div, let's create a button. Inside the button, we will create a ternary that says if isPlaying. Then we'll render pause. 

[1:22] Else, we'll render play. 

[1:25] We need to add an onClick event that toggles that state. So we'll call that togglePlaying. We'll create that function. So const togglePlaying and we'll create an arrow function. So first thing we'll do is we'll set isPlaying to the opposite of isPlaying. And now this is where that media API comes in handy. We'll do another ternary that says isPlaying audioRef current pause. 

[1:56] Else audioRef current play. So we're using the play and pause method that we just went over. Now let's check to make sure it worked. We press play. 

[2:11] You'll also notice that play text changed to pause when we were playing. So to summarize, we added the useRef and created an audioRef. We added the ref to the audio element so that we could control it outside of the audio element. We added the useState hook and we created an isPlaying state. And then we added a button that dynamically renders the text as pause and play depending on the isPlaying state. And then on click of that button, we toggle the isPlaying state. And depending on that state, we either pause or play it.

https://app.egghead.io/api/v1/lessons/a11y-creating-a-toggle-for-playing-and-pausing-the-audio/transcript

https://app.egghead.io/api/v1/lessons/aria-implementing-a-duration-state/subtitles

[0:00] So the next thing we're going to do is create a duration state. So we're going to set a state as duration and then the setter is set duration and that initial state is going to be zero. Next, let's go to the markup and underneath the button we are going to create two spans. Each of them are going to have their own class name and in the first one we are going to set that class name as lapsed. In the next one we're going to set the class name to duration. Inside the first span we are going to create some sample text and we're going to say elapsed time and we're going to just set that at zero for now. In the duration span we are going to type total time and we are going to render the duration state. Before we do anything to set the duration let's go back to the MDN docs and click on the loaded metadata event. So what it says here is the loaded metadata event is fired when the metadata has been loaded. That doesn't mean much now but let's go back to the app and refresh. When I refresh I want you to keep an eye on the audio element and particularly where the duration is. So you might see for a very brief period it is at zero and then when the metadata is loaded it is 25.58. So to set the duration we have to wait until that metadata is loaded before we can set the duration. So let's create an onloaded metadata function. And then inside that arrow function we are going to set the duration to be audioRef current duration. And then on the audio element we're going to do onloaded metadata and add that function. So now let's go back to our app to refresh. 
[1:52] You'll see that our total time is about 1500 seconds. So to summarize we created the duration state and set the initial state to zero. Then we created an onloaded metadata function and set the duration to the audioRef.current.duration. Then on the audio element we added the onloaded metadata event and set that to that function.

https://app.egghead.io/api/v1/lessons/aria-implementing-a-duration-state/transcript

https://app.egghead.io/api/v1/lessons/aria-tracking-audio-playback-progress-by-adding-elapsed-time/subtitles

Lindsey Kopacz: [0:00] Now, let's add the mediaTime state. We're going to destructure mediaTime and setMediaTime. We are going to set the initial state to . Next in the elapsed time span, we are going to replace that  to be mediaTime.
[0:18] Before we do anything else, let's go back to MDN. Let's click on timeUpdate. We want to use this audio event to change the time and update the time. Whenever the currentTime attribute has been updated on the audio element, the timeUpdate event will run.

[0:36] Let's create a function here that's onTimeUpdate and create that arrow function. onTimeUpdate, we are going to setMediaTime to be the audioRef.current.currentTime.

[0:49] Now, let's add that function onto the onTimeUpdate event on the audio element. Let's press Play and see what happens to the elapsed time. Great. That's working really well.

[1:04] These times look kind of ugly. Let's format them. I'm just going to go to the syntax GitHub page and copy this formatTime function, so const formatTime, I'll make that look like an arrow function. Then in the elapsedTime and totalTimeSpans, I am going to wrap each of those states with the formatter. If I go back to the app, you'll see that it looks way better.

[1:32] To summarize, we created a mediaTime state, then we created an onTimeUpdate function that sets the mediaTime to the currentTime on the audioRef. Then we added the onTimeUpdate to the audio element and used that function. Then we created a time formatter and wrapped the duration and the mediaTime with those formatters.

https://app.egghead.io/api/v1/lessons/aria-tracking-audio-playback-progress-by-adding-elapsed-time/transcript

https://app.egghead.io/api/v1/lessons/aria-create-the-audio-scrubber-to-control-playback-position/subtitles

[0:00] After the duration span, we are going to add an input type range, and we will set the value of that range to be the media time. 
[0:12] Next, we'll add a min and set that to , and a max and set that as the duration. Now you'll notice when we adjust the scrubber on the audio element, the input range changes. However, right now we cannot use that range to change the time because we don't have an on change on it. Let's create an onScrubberChange function, pass it an event, create the arrow function, and inside this function we are going to set a new variable called newTime and set that to be the event.target.value. Next we are going to set the mediaTime state to be that variable that we just created. And next we want to make sure that we set the current time on that audio ref. 

[0:56] Last, we want to add an onChange event to that input range and set that to be that function. Now let's try to use this to adjust the time. 

[1:05] As you can see, the elapsed time on our custom player matches the elapsed time on our audio element. There's one last thing that we want to do to make sure this is accessible. Technically this is a form input. Whenever we have an input, we want to make sure that there is an associated label. So let's create an id for that input and call it timeScrubber. Above the input we are going to add a label, then give it a prop of HTML4 with the same value of that id of that scrubber. HTML4 is the same thing as writing 4 in HTML. We just can't type that because 4 is a keyword in JavaScript. Next inside the label we want to type scrubber. Now when we interact with the time scrubber, it'll be sure to announce as a scrubber and a screen reader user will know what they're interacting with. So to summarize, we created an input type range. We set the value to be the mediaTimeState. We set the min to be  and the max to be duration. Then we created an onScrubberChange function and passed in an event. We used that target value to create a new time and set the state to be a new mediaTime. Then we made sure to set that on the audioRef. Last, we made sure that we added a label to our input type range.

https://app.egghead.io/api/v1/lessons/aria-create-the-audio-scrubber-to-control-playback-position/transcript

https://app.egghead.io/api/v1/lessons/aria-add-play-and-pause-events-to-the-audio-player/subtitles

Instructor: [0:00] So far, what we have is working well, but we haven't mapped all of the audio elements states to the react app states. For example, when I press Play on the audio player, you'll notice that this state does not change. Let's go back to the MDN docs.
[0:16] Down in the event section, we have the play event and the pause event. We can use the play event to set isPlaying to true, and we can use the pause event to set isPlaying to false.

[0:27] Back in the code, underneath onTimeUpdate, we'll type onPlay, and we'll just do a function in here, that's setIsPlayingToTrue. Then onPause we'll do the same thing and pass a function of setIsPlayingToFalse. Let's go back to the app, refresh. Now, if I press this Play button, the state will update.

[0:53] To summarize, we have just mapped the play and pause events to the react state. We added onPlay on the audio element and set isPlaying to true, and we took the pause and onPause on the audio element, we set isPlaying to false.

https://app.egghead.io/api/v1/lessons/aria-add-play-and-pause-events-to-the-audio-player/transcript

https://app.egghead.io/api/v1/lessons/a11y-add-fast-forward-and-rewind-15-second-buttons/subtitles

Lindsey Kopacz: [0:00] Now, we're going to add two buttons. Inside those buttons, it's going to be a rewind and fast forward 15 seconds.
[0:09] Next, we're going to create a function called onRewind, make that an arrow function, and the first thing we're going to do is destructure the currentTime from the audioRef.current. We're going to use this currentTime to get the newTime. We're going to create a variable newTime, and that will be the currentTime - 15.

[0:33] Next, we will set the mediaTime to be that newTime, and then let's not forget to make sure that the audioRef.current.currentTime = newTime.

[0:47] We're going to create another function called onFastForward, and it's basically going to be the same. I'm going to copy this and change onRewind to onFastForward. I'm going to change the newTime to be currentTime + 15.

[1:03] This technically works, but let's make our code a little bit cleaner. What we're going to do here is we're going to wrap the currentTime - 15 and the onRewind and wrap that with a Math.max. Then the second parameter is going to be . This helps, because if you're less than 15 seconds from the start point, it'll just go to .

[1:25] We're going to do the same thing, but the opposite for onFastForward. This time we're going to wrap it with a Math.min, and the second parameter is going to be the duration.

[1:36] Next, let's take those functions and now we're going to say onClick and then add the corresponding functions. onRewind for the "rewind 15 seconds" button and onFastForward for the "fast forward 15 seconds" button.

[1:51] Now, you can see if I press fast forward that elapsed time starts increasing. I press play, you'll see that time is increasing. If I press fast forward, you see it's still working. If I rewind, that still works, pause it.

[2:12] To summarize, I created two buttons. The first one said, "rewind 15 seconds" and the next one said, "fast forward 15 seconds." Then I created two functions -- one that's onRewind, and the other is onFastForward.

[2:25] Then in each of those functions, I use the currentTime on the audioRef current, and I either add or subtract 15 seconds based off of the functionality. Then we set the mediaTimeState with that newTime, and then, we're also sure to update that audioRef.current.currentTime with that newTime. Last, we add those functions onto the onClick handlers for those corresponding buttons.

https://app.egghead.io/api/v1/lessons/a11y-add-fast-forward-and-rewind-15-second-buttons/transcript

https://app.egghead.io/api/v1/lessons/a11y-creating-a-playback-rate-button/subtitles

[0:00] Now we're going to create a playback rate button. First, let's create an array called rates. And in that array, I'm just going to say .75, one, 1.5, and two. Underneath the rewind and fast forward buttons, we are going to map through those rates. That callback will take the rate and the index. And we will return button with an onClick handler, and we're going to pass it an anonymous function called changeRate. And we are going to pass that the rate. And inside the button, we are going to render the rate text and then an x. Don't forget in React when we're mapping through elements, we have to add a key. 
[0:45] We'll set that key to be the index. Now we have to create this function. Underneath the rates array, we're going to create that function. It's going to take an argument of rate. And inside that function, we are going to do audioRef.current.playBackRate equals rate. Now let's go back to the browser and see what that looks like. So if we press play, we will get the 1x playback rate because that's a default. 

[1:12] But if we press 2x, you'll see that elapsed time is going way quicker. So to summarize, we created an array of rates with values ranging from .75 to 2. Then in the JSX, we mapped through those rates. Each rate has its own button that renders that rate. Then each button also has an onClick handler that we pass an anonymous function called changeRate. 

[1:36] And changeRate takes the rate as an argument. In that function, changeRate, we set the audioRef.

[1:41] current.playBackRate to rate.

https://app.egghead.io/api/v1/lessons/a11y-creating-a-playback-rate-button/transcript

https://app.egghead.io/api/v1/lessons/a11y-creating-a-toggle-button-for-muting-and-unmuting-an-audio-element-in-react/subtitles

[0:00] Now let's create some mute states. So we are going to destructure isMuted and set isMuted, and let's use the useState hook and set the initial state to . Now let's go down to the JSX and underneath the rates, let's create a button. 
[0:19] Inside that button, let's render a ternary. So if it is muted, we're going to render the text unmute. Else mute. Next let's create a toggleMute function. const toggleMute equals, and let's do an arrow function here, we're going to set isMuted to the opposite of isMuted. And then we are going to do audioRef.current.

[0:46] muted equals the opposite of isMuted. Now let's add the onClick handler onto the button. So onClick equals toggleMuted. So if I press play, when I press mute, it mutes. And when I press unmute, it goes back. One thing to note though is when we control it with the audio element itself, that state doesn't change. So we want to make sure that that changes. So we're back here on the MediaElement API, and we go to events there's nothing about muted, but there is a volume change event. So we're going to use that on the audio element itself. So first let's create that function. const onVolumeChange equals, and we'll create an arrow function here. So first we'll check if audioRef.current.muted, we'll set isMuted to 1. Else if isMuted, set isMuted to . Next let's add that to the audio element. So on the audio element, we can type on volume change and then pass in that function. Now when we press play, and then we press the mute button on the audio element itself, we see that state changes. So to summarize, we created an isMuted state, then we created a button whose inner text is dependent on that state. If it is muted, we render the string unmute, otherwise we render the string mute. Then we created a toggleMuted function, and inside we set isMuted to the opposite of the isMuted state, and did the same thing for audioRef.current.muted. Then we were sure to add that to the onClick for that button. Next we created an onVolume change, and if the audioRef.currentMuted was 1, we set isMuted to 1. Else is muted, then we set isMuted to . Then on the audio element, we added onVolumeChange and set it to that function we just created.

https://app.egghead.io/api/v1/lessons/a11y-creating-a-toggle-button-for-muting-and-unmuting-an-audio-element-in-react/transcript

https://app.egghead.io/api/v1/lessons/a11y-implementing-a-volume-range-with-an-onchange-event/subtitles

Instructor: [0:00] The first thing we're going to do is create the volume state. We are going to destructure useState. State will be called volume, the setter will be set volume, and we'll use the useState hook and set the initial volume to one.
[0:15] Next, let's go down to our JSX, create an input type range. We want to add an associated label. We'll add an ID and we'll call that ID volume-scrubber. Then we will create a label with an HTML for matching that volume-scrubber ID.

[0:35] We will set the inner text to be volume. Next, we will set the min to be , the max to be 1, and the step to be .1. Next, let's set the value of this input range. It's going to be conditional based off of if it is muted. Let's create a ternary.

[0:51] If it is muted, you want to set it to zero. Otherwise, it will be that volume state. Next, we have to add an onChange to this input range. Let's go up here to our functions. We'll do const onVolumeScrubberChange equals will pass at the event.

[1:10] First, we are going to create a variable called new volume and we're going to set that to event target value. To be safe, we're going to wrap that in a number constructor. Then we'll set the volume state to be the new volume. Then we also have to make sure we're updating the audioRef volume. audioRef.current.volume equals new volume.

[1:34] Next, let's add that to the onChange event on that input range. onChange equals on volume scrubber change. We notice a few things here. One, if I lower the volume on this input range scrubber that we created and I hover over the volume on the audio player, you see it has adjusted.

[1:55] You can also see that when I press the mute button, the volume gets set to zero, and unmute, it gets set back to the state. However, there are a few things missing here.

[2:04] First, when we use the scrubber to go all the way to zero, it doesn't update the mute state. You may also notice that when the volume is zero on the scrubber, the mute button enables. The next thing is when we're changing the volume on the audio element itself, you'll notice that the input range volume scrubber does not change.

[2:24] Let's go back to the onVolumeChange function. When we set is muted to 1, we don't just want to look for if we have the audioRef.current.muted. We also want to check to see if the volume equals zero. When that happens, we can set isMuted to 1. When either of these happen, then we will set isMuted to 1.

[2:46] The other thing we want to do is instead of using the state, I'm going to change this to not audioRef.current.muted. If it's not muted, we're going to set isMuted to . Next, we're going to map that [?] audioRef.volume to the volume state. So set volume audioRef.current.volume.

[3:09] Let's go back to our browser and see how that works. Great. We see that works really well. Now if I use this volume scrubber to go all the way down to the bottom, we get the unmute button. You can also see if I use the audio element to change the volume, it maps to the volume scrubber that we created.

[3:32] To summarize, we created a volume state and set the initial state to 1. Then we created an input type range and we called that volume scrubber and gave it an accessible label called volume, set the min to , the max to 1 and the step to .1. We conditionally set the value depending on if it is muted. If it is muted, we set the value to . Otherwise, we set it to volume.

[4:00] Next, we created an onVolumeScrubberChange. We got the new volume from that input type range value. Then we set the volume state to that new volume and also set the audioRef.current.volume to that new volume. Next, to make sure that things were properly mapping. Next, we updated the onVolumeChange function.

[4:19] We updated the first if statement to be if audioRef.current.muted or audioRef.current.volume equals , then we set the isMuted to 1. Then we changed the else if and we said if not audioRef.current.muted, then we set isMuted to and we update the volume.

https://app.egghead.io/api/v1/lessons/a11y-implementing-a-volume-range-with-an-onchange-event/transcript

https://app.egghead.io/api/v1/lessons/aria-design-accessible-buttons-using-icons/subtitles

[0:00] Now that we have the functionality working, let's make this look a little bit more like an audio player. So we're going to change the play and the pause to be the corresponding icons. And same thing with the mute and unmute. Because this is not an SVG course and a React audio player course, I'm going to use the React icons library, particularly Font Awesome. So if I just use the search functionality and start looking for play, I'm going to use the play circle, I'm gonna use the fa pause circle, fa volume, I'm gonna use the volume mute and volume up. I've already installed React icons, so I'm gonna do import from react icon slash fa, and then I'll import fa play circle, fa pause circle, fa volume mute, fa volume up. Next, let's go back to the JSX. And in that button where we toggle the play state, we'll replace the pause string with fa pause circle, and the play with fa play circle. We will do the same thing for the mute button. So we'll change the unmute to be fa volume mute, and the mute to be fa volume up. If we go back to our browser, we'll see that now instead of the play text, we have that play icon, and that changes when we press it. And then same thing for the mute and unmute states. However, let's open up Safari and test this on VoiceOver. VoiceOver on Safari, React app, window, React. 
[1:34] In React app, web content, heading level, and a main button. You are currently on a button. To click this button, VoiceOver off. As you can see, it just announces button. The reason for this is because icons don't have text unless we provide it to them. So let's go back to React icons and go to the GitHub page. I want you to see if there's any documentation about accessibility and adding alt text. If I go down to the configuration section, I notice that there is a title prop. And that title prop provides an icon description for accessibility. So let's use that title to add back in that text. So on every single Font Awesome icon, we'll add a title prop. 

[2:14] So fa pause circle will have a title of pause. 

[2:17] Fa play circle will have a title of play. The volume mute icon will have unmute. And the volume up will have mute. Let's go back to our browser and test this. VoiceOver on Safari, React app, in React app, heading level, and a main button. You are currently on a button. To click this button, VoiceOver off. 

[2:38] So as you can see, that doesn't actually change much. And this is why you should always test yourself to make sure things are actually accessible. So we're going to change this up again to make sure that we have an accessible icon. So we're going to use the strategy called visually hidden. Visually hidden is a technique used to hide text from sighted users. But if that context is needed for screen reader users, it makes sure that it's still available to them. This is an alternative to using display none or visibility hidden, which completely removes it from the accessibility tree. We're going to copy and paste this CSS and put it into our app.css file. Instead of adding text to the icons, we are going to use aria hidden equals 1 to hide those from the DOM. We're going to wrap every icon inside of a React fragment. And then above the icon, we are going to add a span with a class name equals visually hidden, and then add the text inside that span. So in the pause circle, we're going to put some visually hidden text of pause, play circle, visually hidden text of play. For the volume mute icon, we're going to have visually hidden text of unmute. And then for the volume up icon, we're going to have the visually hidden text of mute. So now if we go back to Safari and test this. VoiceOver on Safari, React app window, in React heading end of main, play button. You are currently on a button. To click this button, press control option space, VoiceOver off. You'll see that the button announces properly. So to summarize, we replaced the text with a corresponding icon from React icons library. We made sure that all of those icons had an aria hidden equals 1. And then we created a visually hidden span to make sure that all of those buttons had accessible names.

https://app.egghead.io/api/v1/lessons/aria-design-accessible-buttons-using-icons/transcript

https://app.egghead.io/api/v1/lessons/a11y-using-aria-label-as-a-solution-for-overly-complex-markup/subtitles

Instructor: [0:00] Now, we have to replace the icons for this rewind and fast-forward button. We could do the same thing that we did for the play/pause and volume buttons. However, this can get a little bit overly complex because we have to add a visually hidden alt text. Then we have to hide the icon.
[0:19] Before we approach that technique, let's go back to React icons and look up some icons we can use. I'm going to look up FA undo. We're going to use this FA undo alt because it kind of looks like the rewind 15 seconds button.

[0:33] We're also going to do FA redo alt. We're going to use the redo alt and the undo alt. Let's go ahead and import those icons. FA redo alt and FA undo alt. Now, let's go to those buttons. Inside the rewind 15 seconds button, I'm going to use the FA undo alt. I'm also going to type in a span that just says 15S. Next, I'm going to take that text that was previously in the button and on the button itself, I'm going to add an aria-label and set that text to be what that string was.

[1:10] We should still add an aria-hidden to this icon because it is purely decorative at this point. The reason why it's decorative is because this string overrides all of the button text. To see this in action, let's go back to the audio player and inspect this button.

[1:27] If we select the button with the aria-label and then go over to the dev tools and click on accessibility, you can scroll down to the computed properties and you see that the accessible name of that button is rewind 15 seconds.

[1:40] This dev tool is a good way to double check what the accessible name ends up being if you have a few competing things, like aria-label and contents.

[1:47] Let's go ahead and do the same thing on the fast-forward button. We'll take the text of the fast-forward button. Add that as the aria-label. We'll add the FA redo alt and add an aria-hidden equals to 1. Then we'll put a span with 15S inside of it.

[2:06] To summarize, we use the aria-label to change how we were labeling those buttons. As a result, the inner contents of those buttons are completely ignored by.

https://app.egghead.io/api/v1/lessons/a11y-using-aria-label-as-a-solution-for-overly-complex-markup/transcript

https://app.egghead.io/api/v1/lessons/a11y-create-a-human-readable-time-formatter/subtitles

[0:00] As you can see, we've been using a lot of native HTML to create an audio player. We've also been using some accessibility concepts to rename some of these buttons. Now let's improve the time scrubber slightly. So if we inspect this element, you can see that we have a value, we have a max and we have a min. All of these attributes are absolutely necessary in order to have an accessible input range. However, if we were using a screen reader, we wouldn't want that to announce something like 735. We would want it to announce the actual time. So 12 minutes and 15 seconds. If I switch to Safari and move this time to 10.42 and then turn on voiceover. 
[0:42] Voiceover on Safari, React app in React app, web content, heading left, end of main, play elapsed time 10.40 total time 25.58 scrubber, 642 scrubber slider. 

[0:56] You are currently on voiceover off. You'll see that this announces as 642 instead of 10 minutes and 42 seconds. That's because the value of that element is 642. So what can we do about this? If we go to MDN docs, there is a ARIA attribute called ARIA value text. The definition says the ARIA value text attribute defines the human readable text alternative for ARIA value now. ARIA value now is the equivalent of the value on an input range. With this information, we can use ARIA value text on our time scrubber and create another formatter to help to create that human readable value. The first thing I'm going to do is in the SRC folder, I am going to create a new folder and call it helpers. Inside that folder, I'm going to create a new file called format time dot JS. Because we're going to have a couple of formatters, I am going to take this format time function from the audio player dot JS file and move it to the format time file with an export. Now we obviously need to import format time from helpers format time dot JS. Now we're going to create a function called format human read time. And we're going to create a arrow function passing the time as a parameter. Because format time is already doing a lot of work for us, let's just use that const formatted time equals format time time. I'm a big fan of debugging as I go along, so I'm going to just console log formatted time. Then I'm going to import that format human read time into audio player. And then I am going to call it on some big number like 1000. And let's see what happens. It is working properly. Now we are going to create a time array. So const time array equals formatted time. And then we're going to split with that colon. Let's console log the time array. That is working as we expect. Now let's map through those items and change them back to numbers, map through those items, pass in the time and then parse float time. Now if we return back to the console log, those are now numbers. We're going to define a few variables here called let string and this is going to be the string that we pass back. 

[3:12] Then we'll do let minutes let seconds. What we want to make sure we're doing here is if the time array length is greater than two, meaning that we will have hours included, we will add to the string. So plus equals, we're going to use a string literal and we're going to pass in time array and going to do time array at the zero index space. And then we're going to do a ternary here. So time array zero equals one. We're going to only say hour. Otherwise we'll say hours. And then we are going to add a comma after that and a space. So now we'll set minutes to be time array in the index of one and seconds to be the time array in index of two. Now let's finish out the if statement with an else. If we don't have hours, minutes is going to be time array at the index of zero and seconds will be the time array at the index of one. So now let's build out that string. So string, we're going to be adding to the string. So we'll do a plus sign equals and then we'll add a template literal. So first we'll add the minutes. So we'll do pass in the minutes variable. Next, we'll do the same thing that we did up here for the hours. We'll do another ternary. Minutes is equal to one. We'll pass in the string minutes. Otherwise it'll be minutes and we'll also use a comma and a space. And then we will add the second to that string using that shorthand, another template literal. And then we'll do that ternary again. So seconds equals one. We'll return second. Otherwise we'll return seconds. Next, we'll return string. 

[4:57] So in that audio player file, let's go to the range scrubber and then we'll say aria value text pass in format human read time and the media time. Now if we go back to Safari, you'll see that we have that aria value text. And now let's run a quick test on it with VoiceOver. 

[5:17] VoiceOver on Safari. React app. React app in React app. Web content. Heading level end of fan. Main. Play. Elapsed time. Total time. Scrubber. 10 minutes. 42 seconds. Scrubber. Slider. 

[5:30] You. VoiceOver off. To summarize, we moved this format time into a helper and then added a format human read time function. We use that function to create a string that announces a human readable time. And then we added aria value text onto the input range for the time scrubber. And we added the format human read time and we pass in the media time.

https://app.egghead.io/api/v1/lessons/a11y-create-a-human-readable-time-formatter/transcript

https://app.egghead.io/api/v1/lessons/a11y-create-a-dropdown-menu-for-rates/subtitles

Instructor: [0:00] Now, let's convert these playback rates into a dropdown-menu. The first thing I want to do is create a new component called dropdown-menu. We'll be moving these audio-player files into their own component folder. Let's do new folder. Audio-player. We'll move these two in here.
[0:20] Before we do that, let's make sure that we adjust the paths. In app.js, we want to make sure that we update to audio player. Make sure we have not broken anything. Refresh. Everything is still there. Now, in this components folder, let's create a new folder called dropdown-menu and in that folder, we'll create a new file called dropdown-menu.js.

[0:45] Now, let's just create a function component, so const DropdownMenu and we're going to start with an options prop, but we'll be adding more later. We'll make that an arrow function. For now, we're just going to return some placeholder text of a div with the word DropdownMenu.

[1:05] Now, let's not forget to export default DropdownMenu. Now, I'm going to import DropdownMenu from DropdownMenu DropdownMenu.

[1:19] Now, let's go back to the rates and let's comment this out since we'll be using it later and then we will add DropdownMenu. In the options, we'll pass in the rates. Now, we have that component in place.

[1:33] Before we start building this, I want to take a look at some of the APG examples. This is an example of how an accessible menu might look. Just note that this example demonstrates how the menu button design pattern can be used to create a button that opens an action menu. The thing that is really nice about these examples is they show you what it looks like.

[1:56] It tells you some accessibility features. It also shows you what the keyboard support is. In this particular example, there is menu button support. On the trigger of the menu, we have space, enter, down arrow, and that opens the menu and focuses on the first menu item. Then the up arrow, which opens the menu and focuses on the last menu item.

[2:18] Then on the menu itself, it has enter which activates the menu item. This is when you are actually in the menu. It activates the menu item. It closes the menu, and then set the focus on the menu button. You can see we have a few in here. We have escape, up arrow, down arrow, etc.

[2:35] Just one thing to note, this is an example. You can take a look at some of the APG menu and menu button patterns. If I'm in the menu pattern, you can see that there's some examples in here. You can see that some of the things that were mentioned, like spacebar, is optional.

[2:51] You can also see things like home if the arrow key wrapping is not supported, meaning if it's not circular. Same thing with end. Also, pressing a printable character is optional. This would mean that, if you press the P key, it would go to the first menu item that started with P. This is also optional, so we're not going to include that in this example.

[3:11] You can also look at the menu button and you can see that the down arrow and up arrow are also optional, so we aren't going to do that in this example. Now that we have a good idea of what needs to happen, let's start doing some pseudocode in that drop down menu file.

[3:24] The first thing we need is to create a state for open close menu. Need to be able to send focus to various places. We'll do a two button upon close to other menu items upon arrow keys. We navigate focus in menu through arrow keys, not tab.

[3:47] Instead of this div with drop-down menu text, we're going to make it actually function like a drop down menu. First, we are going to need a few things from react. We are going to import use state and use ref from react. I'm going to create two refs. Cons button toggle ref equals use ref and we're going to set that to . Const drop-down wrapper ref equals use ref .

[4:20] Now I'm going to create an is open state. We are going to do structure is open and set is open from use state and the initial value will be . Next, we're going to remove this drop-down menu text and we are going to create a button. That button is going to have the text of menu.

[4:40] Then you're going to add a ref to that button, and we're going to put that as the button toggle ref. You're also going to add an on click handler on the button, and we are going to pass in a function called toggle menu. Create that function.

[4:59] For right now, we are going to just set is open to the opposite of is open. Remember, we only have an on click right here. We don't need to add an on key down because we're not supporting the arrow keys. If we were, we would want to have an on-key down. On click on a button supports space and enter.

[5:20] Next, I'm going to create a div. That div, I'm going to add a ref and call it drop down, wrapper, wrap. Next, we're going to take what we just commented out of the audio player. Next we are going to paste that inside of the div. Let's uncomment it.

[5:38] Instead of rates, we are going to change this to options. Change rate doesn't exist in this component. For now, I'm going to change this to an anonymous function. I'm also going to do the same thing for on key down and create it in an anonymous function that does it. We'll handle that in a bit.

[5:54] One thing I also want to do on these buttons is add a tab index of negative 1. What this does is it takes this button out of the tab order, but we can still use JavaScript to focus on it. It's focusable, but not in the tab order. Before I move on any further, let's get some styling in. You can do this in multiple different ways, but I'm just going to use CSS classes for the simplicity of it.

[6:21] I'm going to add a button class, a menu class, and a class name. I've already created styling with certain class names, so I am going to add those classes into my react component. For this menu class, I'm going to make it a ternary. It is open.

[6:41] I'm going to create a template literal and do menu class open. Otherwise we'll just render menu class. Now that we've added all of those props, let's pass those props into the drop-down component. Now, to make things a little bit cleaner, I'm going to go back to the top of our file, where the states are rendered, and create a playback rate state.

[7:03] Playback rate and set playback rate. Those will be structured from use state. The initial state will be one. We'll take this at playback rate function and go back to change rate. We'll update the playback rate in that change rate function.

[7:21] Next, we want to make sure we pass the change rate into the drop-down component, but right now, we don't have a prop for it. Let's go back to the drop down menu, go back up to the top, and we'll add a prop called On Option Click. Back in the audio player, let's go ahead and pass that prop, the change rate function.

[7:42] In the drop down menu, on option click, and we'll pass it. Change rate. Now, we want to make sure that we actually use that in the drop-down menu. Let's go back to the option. We're going to replace that with a function called handle option, click.

[8:01] We are going to pass that function, the option, just to make this a little bit more consistent. Instead of using rate, we will change that to be option. Now, let's create that function. Let's go up. Next we'll write an arrow function. Cont menu option-click, we'll pass in that option as a parameter, and in that, we'll do on option, click option.

[8:27] Now, this is technically working, but it's hard to tell because we have the button text still as menu and it's not dynamically updating when we change the playback rate. This is technically working and changing the playback rate, but it's not updating the text.

[8:41] Let's create a new prop called button text for the drop-down menu. Button text as a new prop. Now, back in the audio player, we will create a variable and store the button text in there. I'm going to call that text button text and we are going to just render some jsx.

[8:58] I'll create a react fragment, then I'll create a span with a class name of visually hidden. In that visually hidden span we'll call that playback rate, then we'll do another span, and then we will do the playback rate state and we'll put a little X there. Next, let's take that button text and pass it into that drop down menu.

[9:23] Next thing we have to do is we have to go back to the drop down menu and actually render the button text in that menu button. Let's remove this menu text. Next, when we refresh and we change the playback rate, you'll see it update. Now it doesn't close. We have to fix that.

[9:38] Inside the handle option-click we will do set is open to . Now when we open it and we select a rate, it will close. That's all well and good, but if we tap through this, we're replacing the tab key, so tab, tab, tab. We get to the drop-down, we open it, it's still focused on the button. We want to send the focus into the menu.

[9:59] We want to use this toggle menu function to toggle the focus as well. Remember, we want to focus on the first item when we open the menu. I'm going to create a variable called focus element. Before we toggle the is open state, we want it to focus on the button toggle wrap. That way, after we change the state, it'll focus on the button toggle wrap.

[10:22] Otherwise we want to do drop down, wrapper, wrap current, and then we want to use query selector and button. This will get the first button inside that drop down wrapper wrap.

[10:34] Next, we want to request animation frame, wrap that in on this function. Then we want to do focus, element, focus. The reason why we have to use request animation frame is, if something doesn't exist in the dom, for example, if it's display none, we want to wait until it appears before we set focus. Otherwise, it's not going to do anything.

[10:57] Let's see how that works now. I press the spacebar and it focuses on the first item, but now we can't navigate. If I press the arrow keys, we can't navigate through these options. Let's quickly just return back to the documentation to see what we need to do.

[11:12] If we go to this menu, we see that enter activates the menu item. We already have this built-in by using a button. Escape closes the menu and sets the focus back to button. Up arrow moves focus from the previous item, but if it's on the first item, it'll move it to the last item. It's kind of circular. Vice versa for down arrow.

[11:32] One last thing to note, which isn't documented here. If I'm pressing enter and I'm going through and I press the tab key, it'll close the menu and focus on the next item. Let's go back to the code. Let's create a handle option E down. You're going to path an event and an index.

[11:49] Now, before we do anything, we're going to console log E. This will help us filter out what keys we'll be looking for. Let's go ahead and path this to all of those menu buttons. Instead of this anonymous function that returns nothing, we're going to do handle option, E down. Inside of that anonymous function, we are going to path the event. We're also going to path the event to handle P down, and we're also going to path in the index.

[12:16] Let's go back to the console on the browser to check it out. Let's refresh, look at the console. Press tab, tab, tab, tab, tab, tab, press spacebar. Then I'll press the down key. Arrow down, up key, arrow up, tab key, and then Escape. Now we have all of these strings that we can use. Back in the drop-down menu, we can use this event key and add it to a switch statement.

[12:46] Switch, E key. Then we are going to create a bunch of cases. To make this a little bit easier, I'm going to create a bunch of constants. Up top I'm going to create conts tab key equals tab, conts down key equals arrow down, conts up key equals arrow up, conts escape key equals escape.

[13:20] Now, let's create a bunch of cases using those constants. Case tab key, and then we're going to make sure we put a break in all of them. Case up key, break. Case down key, break. Case escape key, break. Then default.

[13:48] Let's start with the tab key because that's the easiest. We're going to keep the tab key to be the same behavior. If you remember, when we press the tab key, when we were already there, it just tabbed out. All we have to do now is set is open, default.

[14:04] The next easiest one is the Escape key. We're going to set is open to default and we are also going to do button toggle ref, current focus. Let's see how that works. Tab, tab, tab, tab, tab space. If I press tab again, it does what it needs to do. Now, let's try the Escape key. Enter, escape, and it focuses back on the menu button.

[14:35] Let's go back to that function and outside of the switch statement, let's create a variable called conts options node list. We're going to use that drop down wrapper, ref current. This time, we're going to do a query selector all, and we are going to target that button.

[14:56] Let's start with the down key first. In theory, we could just use that index, do options node list, and use the index plus 1 and focus. What we're doing is we're getting that option plus 1 in the node list based off of the current index. We press save and go back to our audio player and refresh. Tab, tab, tab, tab, tab, space.

[15:21] It works. Well, not anymore because now we don't have an I plus 1. The options list has run out. What we need to do is create an if else. If I equals options node list length minus 1, and then I will do an else and wrap what we just did. What we want to do, if we are on the last item of that node list, is we want to focus on the first one. We'll do options, node list, Focus.

[15:59] Now, let's see how that works. Now, let's tab, tab, tab, tab, tab, space bar, and we are using the down key. Down down, down, down, and we're going in a circular motion. Now I just want to do the opposite for the up key. Let's do an if else again. If else and then in the if condition, we are going to do I equals .

[16:22] Let's start with the else since it's a little easier. We'll do options node list, I minus 1, focus. Otherwise, we are going to do options, node list, we'll do options, node list, length, minus 1, focus. Now, let's try that out. Tab, tab, tab, tab, tab, space. Now we can do it the other way.

[16:52] Before we continue on, I want to go back to the action. If we scroll down to the bottom and go to the role property state and tab index attribute, you'll see that we have a bunch of Aria attributes that we have. Aria pop up 1 indicates that the button opens the menu. Aria controls refers to the menu element controlled by the menu button. Aria expanded is added when the menu opens.

[17:16] On the menu itself, you can see that the role on the wrapper identifies it as a menu. We have an Aria labeled by, which... menu. You have a role of menu items which identifies each item. Then those items have it.

[17:32] Let's use that information we just learned and add it to our markup. First on the div that has the drop down wrapper wrap, we'll add a role. On the options, we'll add a role equals menu item. We've already added the tab index. Now let's add an Aria has pop up equals 1. Then we'll add an aria-expanded equals and we'll make this a ternary. If it is open, it'll be 1. Otherwise, it'll be undefined.

[18:03] We still have to add an aria controls to the button, but what's that going to be? For now, we will make that say ID, but ideally, we might have more than one dropdown menu on the page. We need to make sure that this ID that it will map to is unique. I'm going to use a library called unique ID.

[18:19] Once I've added this, we can create our own unique ID. At the top of the file, I'll import unique ID from unique ID, then I'll create two unique IDs. Menu, button, ID equals unique ID. We'll start it with menu- then I'll create Const dropdownID = uniqid dropdown-. Now, what we'll do is we'll add these IDs on to their respective elements, so we'll go back to the menuButton.

[18:53] We'll add an ID to the button, give it menuButtonId. Then on the menu itself, we'll ID dropdownId. In order to give the aria controls its own appropriate value, we have to match it to the ID of the dropdown so dropdownId.

[19:11] What this does is it says that this element controls the element with this ID. Last on the menu, we'll add an aria-labelledby, and then we will match it to the menuButtonId.

https://app.egghead.io/api/v1/lessons/a11y-create-a-dropdown-menu-for-rates/transcript

https://app.egghead.io/api/v1/lessons/a11y-using-a-forwardref-to-create-external-controls/subtitles

Instructor: [0:00] The last we're going to talk about forwarding refs. Depending on what you're doing, forwarding refs has an opportunity to enhance the user experience. First, what are forwardRefs?
[0:11] Let's say we have a function component called Fancy button and it returns a button with a class name of Fancy button, and the children returns the children props. For a forwardRef, what you do is instead of having a function component, you have a forwardRef that takes a callback and that callback has the arguments of props and ref.

[0:34] The props acts the same as the props would in a normal function component. However, the ref can just pass in as the ref of the button or whatever element. This allows you to create a ref outside of the component and then pass it in. Let's go to the audio player.

[0:51] First, we need to import forwardRef from React. Next thing we're going to do is I am going to take the destructured props outside of the parameters and just destructure them inside the component.

[1:05] Next, I am going to create the forwarded ref component. Then around this entire component, I am going to wrap it in parentheses because remember this is a callback. Then the arguments I'm going to pass our props and ref.

[1:21] Next thing we are going to do is we're going to remove this audioRef. Instead, we are going to replace the audioRef with the forwarded ref. We're going to replace them all because that's a lot. Next, we're going to remove this useRef from the import because we're not using it.

[1:36] Next, in the app component, we are going to import useRef from React. Then inside the app component, we are going to create an audioRef using that useRef hook. Then on the audio player component, we are going to type in ref equals audioRef.

[1:55] Next, let's create a couple of buttons. Both of those buttons are going to have an onClick handler. We're going to give them both an anonymous function. On the first button, the button text is going to be play. Then, inside that function, audioRef.current.play. In the second button, the podcast guest starts talking about the computer science degree.

[2:18] I'm going to type jump to computer science degree, and that's at about 11 seconds. In the onClick handler, I'm going to set audioRef.current.currentTime to equal 11. Let's see how that works now. If I press play, it still works, and then it jumps to 11 seconds.

[2:41] To recap, we convert the audioRef component into a forwardRef component. We remove the audioRef in place of the forwardedRef. Next in the parent component, we created an audioRef using the useRef hook, and pass that as a ref to the audio player.

[2:57] Then we created two buttons and we use the audioRef to control the audio player component outside of the component.

https://app.egghead.io/api/v1/lessons/a11y-using-a-forwardref-to-create-external-controls/transcript

Create an Accessible Audio Player with the HTML Media Element and React

Lindsey Kopacz

You might also like these resources:

Auditing React Apps for Accessibility

React State Management Expert Interviews

Test Network Edge Cases with .intercept() Command in Cypress

Course Content

You might also like these resources:

Auditing React Apps for Accessibility

React State Management Expert Interviews

Test Network Edge Cases with .intercept() Command in Cypress