Accessible Dropdown Exercise

[00:00:00]
>> Marcy Sutton: I have two options for you, you can step through something similar to what I just created. I also have a series of code pens that you can play with if you wanna work with Vanilla JavaScript. So this one, the vanilla.js shell. It has the styles for you kind of similar to how I had.

[00:00:19]
But you would go and write the markup and the ARIA and then write some Vanilla JavaScript. And so in the next break, that's what we're gonna do. So we've been working on dropdowns. A couple things I wanted to mention. I didn't really wanna spoil it, but the answers are in the slide deck.

[00:00:37]
If you found them, they are listed on the read me on GitHub and in the project. So for each of the exercises we go through, there will be an answer on the next slide if you really need to look at it. In the project, if we go back over here, there is this examples directory, and that's where the files live.

[00:00:59]
They aren't running out of that directory, but you could open it and compare what you've been working on. So that's where those live. One other thing that I forgot to mention was that in this dropdown component that I made in React using an unordered list, when I was testing this with Safari.

[00:01:15]
I found because of the CSS that I'd used, that made it look just set of links without bullets in them. Safari has added a heuristic that oftentimes people are using lists and styling them to not really be lists anymore. So to have voice-over announce how many items are in that list, which for a dropdown would be useful, you have to put the ARIA role of list back on the UL and on the list item, I put a role of list item.

[00:01:46]
That'll just make doubly sure that assistive technology will announce how many items are in a list. And that pattern you might come up with in all kinds of contexts. And that's something that if you're testing with voice-over in Safari, that you might start to uncover. There's also a vanilla.js component.

[00:02:04]
So every time we have answers, there will be a React one and a Vanilla one. For each of these answers we'll have a React version and a vanilla.js version.