Transcript from the "Accessible Dropdown Exercise" Lesson
[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.