Transcript from the "Progressive Enhancement Exercise" Lesson
>> Marcy Sutton: That's how I could make, like that's the start of how I could create something that's more progressively enhanced. And I've got some examples here, the tab list you could play with, maybe adding more functionality to that. I have this starter here that my feelings will not be hurt if you want to go over here cuz this is what I think more of when I think of progressive enhancement.
[00:00:22] This is a little bit more similar to like the Gatsby thing kind of abstracts it away, which is fine, but this is a cool thing to work on. So I have this little ARIA tab switcher and it works. It's using the pattern similar to what you can find on the ARIA authoring practices guide.
[00:00:41] But there's all these classes in here and let's say ARIA, I've named it to rely on ARIA. So I might go through and change those to be a little bit more generic. And then so how I would change this is to go through here. Remove the things that rely on scripting and probably change the CSS.
[00:02:44] So if spread its client onto it and use this double &&, it will combine this object with role of tab to the representation of the element if this condition matches. And it just short circuits a longer ternary condition to check that. I did add an alternative here, something that might come in handy later is to just start with the role attribute.
[00:03:13] And then giving it a value no matter what the condition is. So in this case, I'm saying if isClient is true, give it a tablist role, otherwise, give it the list role. And the reason that you could consider doing that is that, I mentioned this earlier, that Safari needs that list role to be bolted on if the list styles are removed in CSS.
[00:03:37] So sometimes you might want to add a default role just so that a screen reader will respect it with that CSS loaded. But this short circuiting is pretty crafty, and it'll keep that role attribute from being added at all unless this condition matches.