GitLab Digital Experience, 9 Apr 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Slippers Mobile Navigation Accessibility: Pair Programming Review

Description

Javier Garcia and Tyler Williams from the Digital Experience team do pair programming to address accessibility concerns in the Slippers navigation component.

Link to MR: https://gitlab.com/gitlab-com/marketing/inbound-marketing/slippers-ui/-/merge_requests/55

A

Hi everybody- uh this is uh javier and tyler from the digital experience team and we're going to be talking about accessibility, work related to slippers, navigation and whatnot.

A

I had started an issue for implementing an nbc one for um navigation since we're going through a bit of a redesign, and I had gone through in in the past iteration gone through an mvc one. We have some accessibility issues that tyler has brought up so uh eloquently in the code review, so we're gonna go through and pair program and try to see like how we can resolve these issues um in a way that works well for people with screen readers, because that's important.

B

Yeah cool um well sweet uh to get started. Do you have any? um We can like link to the mr in the video if you want to jump in, but um do you have questions about the stuff that I wrote down before we hop in yeah.

A

Let me just like pull it up real quick, because I jump in um yeah. So let me just share my screen because I think that'll also help for the people with that point of view of just uh on an engineer trying to make some ui improvements all right, so um I think this makes sense like essentially like because you're just like hiding and showing two navigations like I. I understand that I just didn't know how else to do it. If that makes sense,.

B

Yeah yeah, um so the thing that I would do I I so I think display none is good for um so you've got like the two navigations. I think that's super reasonable. That's that's actually exactly what display none is built for is like we have these two things and they're like the data and semantics of them are different and like on a mobile view. We want it to be this way and on desktop view. We want it to be this way and so display.

B

None is good there because you, like literally rip it out of the dom and like that's, that's good so like I actually wouldn't change it for um between um for going between the uh um mobile and desktop views, um but I noticed that the and here let me um I've got my storybook you I don't need to share. I just want to double check them, saying the right thing, so the.

A

Yeah we can go to the actual review app if you'd like.

B

Yeah, so the um so, if you bring it to yeah navigation and then like pop it out to its little iframe, okay, um on the right hand, yeah one more left that one cool this I just this makes it easier for me personally and then um you know uh inspect it, bring it to a mobile view. Let's start there. First.

A

Oh, I have like the not integrated one. Oh.

B

Sure yeah cool awesome and then um so click the so actually, first um right, click and inspect on the uh the button itself, like, let's just.

A

B

Want to see the markup and, what's going on here and then yeah underneath so yeah, here's the first so here's the first thing. This is like partially accessibility and like partially just like seo and like our strategy around the nav, um my opinion. I think this is like generally like what most people do like the idea.

B

With navigation is like it should, it should be persistent, um even if you can't see it, it should be in the dom somewhere, because then for seo, like site, crawlers can know like what we have in our nav right, because we use our nav to communicate some things in seo and then also again for like people who are on screen readers and like not consuming it like the way that you and I are looking at this right now- we want to give them as much opportunity and like leave the stuff in the dom right, um and here.

A

B

Even using this, like you're like hiding and showing you're doing the, I think v if um in view which, like rips it edges, replaces it with a comment um so instead, like the first place to start would be using v, show um the v ship, but the v show directive uses, uh display, none and then display. None is also a problem because with display none much like that comment there that the comment line that pulls it out, it also gets ripped out of the dom.

B

I think seo will still, I think, some site crawlers will still find it and get it. So that's good, um but if you're on a screen reader, you won't have access to it.

B

So here's the solution for like so you've got a nav bar and you've got like the whole like an entire, like all your list of navigation items, but you don't want them all showing at this, like all at once or even by default, whatever um we can use absolute positioning to just kick them off the visual screen, but leave them in the document right in like in the actual dom tree so like. What I would do is like that, um and let me look at it on my screen, because I've got.

A

Excitement you wanna drive.

B

No, it's all good. I think uh you driving is good. I just want to like speak clearly and make sure I'm saying the exact right thing yeah, so the the div or even the header is probably a good thing so like we could make the header like a relative like positioned relative okay, and then this um your secondary div. That says slp mx16, which is what contains like when you click the button. Yeah um that thing yeah.

A

Let me share my my screen of the actual vs code, so I can, let me see, let me just share my entire screen, because I think that yeah.

B

We'll probably be flipping back and forth a little yeah.

A

B

A

B

All right, instead of toggling, between like right now, it's like vf, but instead of toggling like v, show or display hidden. I would just.

A

B

Its positioning between um relative and absolute, so when it's like the hidden class on this is that it's absolutely positioned and we can put it like top zero left zero and then transform negative one hundred percent negative one hundred percent right. So it just like goes to the top left and then just like shoops up. Does that make sense, yeah.

A

Sorry I was opening this up. What are you looking at in particular no.

B

Worries um in mobile drop down, okay, you've got the div vf. Mobile item is active.

A

B

A

B

And so, instead of using vf, um I would set it. We could actually set up a class, so um use a cl, so change vf to class and do the colon class, because we're going to use some javascript to be like dynamic here.

A

B

Yep cool and then uh so by default, it's slp absolute.

B

Cool, oh, um you wanna put this in uh backticks for now, so we're.

C

B

A little interpolation here, okay and at the beginning of the before after the first backtick. Okay, what's that um data that you're using is it mobile? Active modal mobile item is active yeah, yeah, okay, so um test for the truthiness of that do like a little uh ternary.

B

So oh wait! You can.

A

B

um Oh and sorry, I skipped one thing uh you wanna do interpolation, so dollar sign, curly, braces.

A

uh Are wrapped around the slp, absolute yeah, yeah, okay, so dollar sign it's.

B

After the after the backtick.

A

After the backtick gotcha, it's a dollar sign.

B

For the braces.

C

B

Perfect and oh and then inside the backtick wait.

A

Like this right, there precisely yeah.

B

Because when you do it in the backtick now you can write javascript expressions.

A

Inside of it, yeah.

B

um And then so after the first curly brace we're gonna test for the truthiness of mobile item active.

A

Okay, so wait, you can just item wait. What is it? It's mobile item is active yeah.

C

Mobile item is active, active.

A

And this is just question mark right.

B

Space and then, if it is active, uh oh and I always do this backwards, yeah, if it is active so now, you'll do like you can do like a single quote for a string return. Okay, do like slp relative slp relative, so like this.

A

B

Space, colon yeah space and then slp absolute, so um this so we'll probably end up like pulling this into a little like computed function or something right. But to start we can start simple. um I think you have a typo in.

A

So I'm not like used to writing it like directly in the template. That's why it was like confusing to me. Oh.

B

A

That's why I was like. I know what you're trying to do, but like it's not like, like.

B

A

That's not my first instinct on how to do it and, like I think that's maybe I should make that a first instinct, because it's like a lot of the times. The logic for this kind of stuff is like simple and yeah. Only when it's complicated that you would.

B

You want to pull it out, yeah, that's that, like it's, I don't know it's such a like tricky question of like do you think it's gonna get complicated and the answer is like probably eventually everything gets complicated, so it's totally a safe choice to never do it in line right, like honestly, like, I think you probably have the right way.

B

I just do this because I'm like I'm optimistic, I'm like I'm optimistic that we'll only ever need this expression and, like I'm, probably wrong, um you have a typo and mobile item as active by the way. Mobile item is but yeah so here. um So basically, if, if the active, if the active data point is true, then we want it to be positioned relative and if not, we want it to be absolute, um and here it's already going to get complex, so we want to put it um whatever the top zero left zero.

B

Is it's like inset, something right.

A

Yeah, let me wake this up. Let me just double check. What happens when I did this.

C

A

Oh wait: I was like oh.

C

This is the review app.

A

Yeah, let me how do I open the navigation from here.

B

Oh, I don't know.

A

I think sometimes it like there's this issue with storybook locally, where it's like it'll, sometimes just hide the navigation like for no reason, I don't know if you ever ran into it.

B

uh Yeah, it's like yeah, it's um the and it's like. I never know the hot key to bring it back.

A

Yeah um I've had to do something with like the dom like something with the cache and the dom like.

B

A

To type in this command into the terminal to make it to make like the bottom panel, for instance like load back again, oh.

B

Sure, okay, cool so yeah! Obviously I broke all your styles um sorry, um but this is good, so uh click inspect into it. Okay,.

A

Just let's subscribe drop down itself.

B

um Yeah yeah and then um toggle that button. Let's see what's good uh yeah, um it's still doing vf interesting. You know back to the code yeah. I think we've still got the v navigation, mobile drop down class.

A

V4, let me check the thing surrounding it, because there might be something over here.

B

Yeah, what's the is it just navigation.view.

A

C

A

Yeah, let me so if I go to navigationw, I just have this.

B

Okay: okay, right.

A

B

Yeah, it's weird did you oh um yeah, yeah. Sorry, we changed. It looks like we. It looks like nope, yeah yeah in you now we're in oh okay. There is the wrapper in navigation dash mobile in this file. So.

B

Yeah you've got this wrapper v-if, so we're gonna do the same thing here.

A

For this right here.

B

um No in the wrapper on line 10.

C

B

Yep yep use this to be.

A

The same thing.

B

Yeah, because that's what's um well, this will be a little bit different, but that's fine! Let's start here.

A

Mobile is active and then it would be question mark and then.

B

The first one is relative. The second one will be absolute. Oh.

A

I just confused myself, I was trying to like anticipate and then I was like. Oh so, I think the auto complete is what messed me up there. Yeah.

C

And it looks like something didn't get closed. Oh oops. I pressed f11 on accident.

B

Oh, um you want to make that closing quote a backtick, not the double quote, but um so one over uh one to the left, one to the left yep. This should be a backtick.

A

A backtick isn't that what that is.

B

I can't tell on the resolution it looks like it isn't. It looks like it isn't um closed. You haven't closed. The string.

A

B

Hold up, let me let me do this. Oh thank you! So much, okay, much better, perfect! Okay,.

C

A

Oh here here here here here.

C

Yep, that's probably no.

B

There there we go yep, perfect, okay um and then change it to um you. Have the vf make it uh colon class yeah.

A

You're, the boss.

B

A

Okay, let's say things.

B

All right, so this now should do we're expecting it'll still be a little wonky um you might have to like reload reload yeah, okay. This is exactly so um that's happening because you're going from absolute to relative, and so the div isn't getting the like. 100 percent width like when it's at, like relative divs span, 100 of their container absolute divs, will be zero by zero unless they have content inside and then they'll be. However much their content is right.

B

So that's so we're getting the right class, um and this is perfect, and so now um the other thing we want to do in that same file where you just the one you just modified yeah. So um it's absolute. uh We also want to transform it um back uh 100 in either direction.

B

A

B

The absolute one yep you can write uh be like so so a space and then slp transform.

B

Okay and then, um what's the tailwind translate x, uh trans.

C

B

Translates do negative, 100 percent, um so I think it's like yeah. It's the negative, translate full yeah and then same for the y.

B

Yep slp, it might be before the translate. It's oh yeah, it's before the translate so.

A

Like that translate.

B

There this one yep perfect and then same for the y.

B

You know I learned on a podcast recently. um Maybe you already know this and like I um if you need, if so, if you lose your auto your auto fill on that drop down. If you hit control space it'll bring it back, control.

A

B

Yeah, oh right, so you ever do that thing where, like you're, like, oh no, like I didn't, want to dismiss it, but now I like have to like like under. I have to delete it and then start typing it again.

A

To get the auto fill.

B

Yeah control space will save your life.

A

It will make everything so much.

B

A

Because, like I'll give you an example right here, just like, usually this will work the way that the thing works is that you have to like type a space and then like, if you type.

B

A

It's just like, oh I'll.

B

Try to it tries to fuzzy match it. Yeah.

A

Yeah, like you, have to like retype, you have to delete everything backwards, original space and then like type.

B

The space again.

A

Which is just annoying because it's like you need to have like that. So that's super helpful control.

B

Space yeah it'll take a while to get it back into like get your muscle memory on it, but it's so helpful. Okay, so let's see what we got so save that check it out.

A

Yeah, it should be saved. Let me hard to refresh just to be sure.

B

Yeah all right, perfect boom, so uh toggle the thing off and now go into the dom, and I want to show you why this is like. So we can like verify. Yeah.

A

So now yeah, I see.

B

It's still there right so like a site, crawler would see it. Someone with a screen reader could see it. That's the big thing, so we just use absolute positioning you'll end up. um You may need to like do like overflow hidden on the container, which is that header and that's appropriate, because it it also like denotes like hey. This is the this.

B

Is the container we've got stuff that like, if we're absolutely positioning it like it, should it should be hidden because, like that's a so like, that's really the hidden thing, if you do like overflow hidden on this it'll be visually hidden, it'll denote that you've got stuff. That shouldn't be shown. If it's like you're saying, like hey we're going to do something to this right, but.

A

That div is still.

C

In the dom yeah precisely.

B

Yeah, um the other thing too, is this- makes it like easier to run into so like we're? Gonna have to do the integration of like the writing, the javascript right and um you can just toggle your class, your class list here. Okay right so wait, cool.

A

So that's the first thing, which is this right like overflow. Is that what you take? Oh.

B

Yeah overflow, hidden yeah, just like.

A

B

Yeah, because, like um it's working fine for us now but like when, like if you like, put it on like a desktop and you didn't have overflow hidden, you would get like a side scrolling bar, because the.

A

Browser would be like, oh hey, let.

B

Me go find that for you right, um so you don't see it in the mobile view. So much um and also I guess it wouldn't because where you have the separate mobile you'll have to like duplicate this in the mobile. um So um but that's fine for now, and I think we should just talk about mobile because everything we do, we can keep it short, but everything we do here will still basically be the same.

A

B

Yeah, so that's the toggling, the like menu itself right there and then there's still a couple. Other accessibility things I wanted to to cover um yeah. Let's see what else you have written down here, um and this will also you'll also want to kind of carry that over to these um drop down menus right. The things that, like the top level buttons that, like click to open and stuff, you want to do the same technique um and it but it'll work. Basically exactly the same.

B

You'll just need to like be a touch aware of like where they go when you transform them left and up yeah. I think so.

A

Yeah, you also brought up the the good. There was like the the tabbing situation with the tabbing yeah.

B

So um this is what so. Here's like the because it'll get tricky, and I don't think we should do everything on this video, um but, like here's, how I here's, how I think about navigation um navigation for like sites like this is one of like the most interactive, like elements ever and it's persistent and is extremely important, and so I think about it, two ways um or I think about two two particular things that are inside navigation bars. The first is interactive elements.

B

um In my opinion. I have like a strong opinion on this and it's like mostly around semantics, but you can do the links correctly, but I think that basically, you should either have buttons or links, so it should either do something or link to something, and so these top level ones versus like product solutions, pricings partners, the drop downs. In my opinion they should be buttons and what you get out of that is a button is automatically um tab focusable. So you don't need to do tab index gotcha right and it's the same thing.

B

And then, if you make everything inside it, a link, same deal, tab focus works, and so you might not actually need to do tab index on these. However, um for some of these, what you end up doing, if you want to like you end up, if you look on like line 12, you've got the unordered list. There.

A

B

um Or maybe the the list item itself um there's a chance, depending on how this all shakes out and like how you need to like group it up by divs, you may need to put a tab index on list item because list items aren't focusable by default, but you may want it to be like if someone like tabs to this list item, it opens right, and so you may want to just add tab index equals zero to make it focusable.

B

I don't know if that's the answer on this, yet you might not need to because what's really cool is so if they tab into that anchor link.

A

B

Here's what we need to do is we. Oh. I think this is the challenge. Is you need.

B

That slp absolute right so also so not only do we want it to be or sorry on the relative. Not only do we want it to show when someone has toggled this, we also want it to be relative when someone has focused or to oh, so it is in the slp absolute because this is this is where it gets super tricky, so um line.

A

B

Where I'm getting to yeah line 11., um so I would say um so, it'd be like space and be like focus colon slp relative. So.

A

P focus: what is it focus where.

B

It's like, oh, this is what we need to focus within. Can we do focus within in tail end focus.

C

B

Yep, okay, perfect, so that so, if you can do since we can do focus within with tailwind, um I don't think you actually need to um uh do the tab index trick, because, basically, the idea is. If someone focuses on one of the buttons that you can click or one of the links you can click to.

A

B

This menu to appear so, if you're like, if you're on, because the other thing too, is it's not just screen readers, it's like if you're, um if you can only use a keyboard if you can't use a mouse um and you're looking on even on like desktop like you want to be able to tab into every item, and if I were to tab into the deepest nested link.

B

I want to see the nav bar appear and I want to see the sub menu appear where that nested link is and using focus within on the top level and also focus within on the probably the list item you have there. I think I think I probably.

A

Would need it yeah.

B

Yeah, uh because you wanted to be specific too, so it's like open the open, the overall navbar open the sub menu and use focus within there um yeah. So um that is, I think, that'll actually fix it. This is much simpler, with focus within it's much much simpler than what I've had to do in the past. I think the link I sent you to the last mega nav that I did at my last job.

B

um I had to like basically like listen for focus and keyboard events and like toggle classes, based on like I had to do a ton of like add a ton of tab indexes and add a ton of event listeners, because it's like keys and presses and all this stuff. But the nice thing is, um if you change those top level items to buttons to enable the drop downs so.

A

You're talking this to a button right.

B

Yeah yeah, if you make that a button, now it's focusable um and you can get all the get all the good all the good clicks um and.

A

B

A

What do you want to do with focus within here? Because, oh.

B

Sorry, I didn't realize we're in the drop down one. I want this on navigation mobile, so you can keep that actually, no, no keep that keep that um focused within colon slp relative.

A

Sop relative is that right, correct yep, yeah.

B

Okay, cool and then um go into navigation mobile. The file to.

A

B

See what you mean? Okay, you see.

A

What I'm saying yeah, I see what you're saying now: yeah.

B

It's either it's yeah. Basically, the idea is like the hidden state is absolutely positioned. Yeah.

A

B

And that can either be toggled by data by javascript on a button press or we want people to be able to toggle the styles by focusing on elements and if they focus on an inner button or link. We want the.

A

Parents of it to show up yeah that makes sense.

B

Yeah and that's how we and that's how we fix the accessibility and that that's pretty much that's pretty much it um and.

A

Then, obviously, because this got changed to button.

B

Yeah yeah, there's yeah, now there's like a bunch of cleanup and that's why I said: hey sorry to throw this this wrench into your day, because it's like um a lot of the styles you had in there are just gonna break because, like buttons and anchors, like behave very, have like.

A

Different behaviors there.

B

um But I do think it is like the right choice. No.

A

I thought this was gonna, be harder than what, like I thought. The changes that you were suggesting would have been harder, which is why I suggested like oh like does this need to go into an mvc2 completely because it was like.

B

I don't think so, and- and I also you know, I would have pushed back on that um because I think, like the things we're talking about are like it really is accessibility problems and, like I, don't think it's appropriate for us to like kick accessibility improvements to another or like for, like, I think you know, 80 of them like, I think. Sometimes there are like some small violations that, like you know, most accessibility experts will say like hey if you can get to the low hanging.

B

Fruit like the stuff can come later, um but for this thing, especially because it's so prominent and it's so like like yeah, and it is fundamental to the experience it's also not just like. Oh, this is on like one or two pages and it's extra content. It's the navigation like like. If we do, if this isn't accessible, people can't navigate the website and that's just like, and I think that's like an uh uh unacceptable state to be in so yeah, but.

A

B

This isn't huge and I actually think, like honestly, the big win we get here is the focus within yeah.

A

B

Without focus within, you have to like start listening for all the tab events and then like toggling classes, based on what they tab to and if it is in fact, like a focusable element. um Yeah it'll be hard, it's hard to say. If that's there's, probably a couple cleanups here, but I think I think you get the gist of like what the.

A

Strategy can actually tab to different items.

B

Yeah and then you should be able to shift tab two to go backwards. Okay, hold up! That's weird! You may need to on the button on on like on.

A

This on this right, yeah this right here.

B

Yeah, I'm not exactly sure, oh no! This is what I wanted to say so go to so on line. 10 do the same thing.

A

B

Yeah you want to make it uh focus within the uh and this itself nope. No, this will be fine, yeah, yeah, you're, good you're, good sorry, I uh um I started the thought that was wrong.

A

B

Sorry, no, no you're good you're getting it. Oh. I.

B

It took me like a week to adopt it, um but once I got it, it's just like changed. My life changed my life.

A

C

A

Oh wait: that's command space. He said control space. What control space? That's weird! Why is it not showing up.

B

It's probably because it's already all the way in or maybe it's the modifier like the focus, maybe the focus within is like making the autocomplete trip up. I don't know, but now you should be able to tab into it um check in the dom go into the root div.

A

B

Then yeah yeah exactly and then so I don't see it.

B

It's. Oh! No! It's there! It's there down. One line.

A

Down one line where.

B

Sorry um in the inspector you have the button class highlighted um in the markup and then down another line here into div class.

B

It's got the I can see the um here's, how we can test it, expand the stiff, expand this dude and then hop into something um yep and then on the, but so on that button, right click and uh for state focus.

B

Cool and now click on the the container div, uh so a couple lines up: one more yep and see if this is relative.

A

And the styles, it's still positioned absolutely.

C

B

It see that at all, how does I wonder if focus within needs to when a child element has focus.

A

Yeah give me I want to see if I like, just typed something in wrong really quickly, because that happens with tailwind yeah, like let me literally just like copy paste this, because something that was weird about that autocomplete yeah. It's I just copy pasted. It.

B

Here, oh, um it might be, I'm looking at tailwind. uh We might need to enable a plug-in for it that.

A

B

Default, the focus within varian is enabled for the following: core um accessibility is one of them.

A

Oh, so, oh so we need it. We need an a.

B

A

Plug-In for it yeah.

B

I think, and I think yeah that that makes sense to me. I was like oh wow. I can't believe tailwind has this built in. I bet that they have. I bet the accessibility plug-in is what adds this to it um and it's a core plug-in. So I think you just have it. I think we just have access to it.

B

A

Look at lookups look up the docks.

C

C

A

C

B

Okay, yeah, I think it's just a core one. So if you do um in the tailwind config, okay, uh scroll plugins at the bottom, there line 195 and then do so. um It's uh it's a require statement. So take the quotes out. Oh yep require, and then um it's just.

B

At tailwind, css, slash, accessibility,.

A

Css, slash accessibility, yep.

B

And it needs to be in quotes. I got you, that's.

A

A string tailwind, css, tailwind, css accessibility ability- am I spelling correctly. I think I am looks.

B

A

B

uh You gotta install it probably.

A

Npm install, what's it the guy right.

A

B

So I'm just looking up. Oh, I wonder if.

B

Oh sorry, you don't.

B

I don't use enough of these plugins to actually know um tailwind, css accessibility, plugin. We might just need to extend it in the in the variants yeah if you go to back to the back to the config um yeah and then yep variance extend okay, I'm put this in our zoom chat gotcha. uh So within that you want to do scale. Colon focus within.

B

Yeah perfect, okay.

C

A

B

Then you yep, so let's try.

A

Should I refresh.

B

Yeah, you might need to, you might need to kill the server and restart it, um because I think I think sometimes with the storybook uh or with the.

A

B

Config like so I I never know like. I need to actually like pay attention, sometimes it'll restart or maybe every time it does, and I don't and I think it's sometimes um but with stuff like.

A

This, I don't know what you mean, there's times, modify this file and it just like doesn't come.

B

A

Yeah, it doesn't feel reliable like if that makes sense, no.

B

C

A

C

A

Go to the actual iframe once again, yeah.

B

Okay, cool so now, yeah um well yeah, keep it hidden and try and focus in on the thing.

B

Open it up in the um elements panel, uh this yeah body root. There you go and then.

C

B

Papa um down in that div yep that one and now on just grab a random element that can take focus state like at any button yeah and then force state to focus or state focus, okay and then go up to and then check that div and see if it's the container div see if it's relative now see if the style has been crossed out like yeah scroll down to see, if it's like see, if it even knows that it has that attribute on it, I don't think it does. I don't.

A

B

A

It might be a different one of this, because.

B

Could that could very well be it? We could have just typoed something somewhere or like put it in the wrong spot yeah. I don't.

A

B

To navigation mobile again.

A

Yeah navigation, mobile.

B

C

And then scroll to the right.

A

Right yeah, I do want to add in a like a prettier rule to like cut truncate like what does it break things to a new line once it reaches yeah?

A

B

um Oh, you know what I bet.

A

No, that's not it um is it like, because I think like intuitively just like from looking at this, I would think that it's like position focus within you know what I'm saying.

B

I don't show me so.

A

Like you see how like this is typed this so in the config right here, I would think that it would be something like oh position, sure right. That's like what intuitively like, based on like how all of these have been added, because I added.

B

Oh no you're super right. um I I understand now yeah focus within apply to utility yep. You can atta, you can apply it to.

A

Yeah, let me let me just restart the thing, because I tried it again and it didn't work and I was like well.

B

Yeah you're right: okay, I see how that works.

A

Yeah, I think about the problems we've had with our repo and I'm just like three months ago I was like I would never would have anticipated us to even reach this point. So yeah like we've, come.

B

Yeah, it's much better dx! Okay! So now.

A

Let's get into like uh you said one of the divs right, one of the buttons.

B

Yeah, did you change the did you change it to?

B

um I see? Okay, so that should work now. Yeah yeah.

A

I think I think this should just work but cool.

B

So toggle the thing off so hit the yeah, we're gonna, see we're gonna, see, go from off and then.

A

Yeah focus and then try to focus it.

B

Well, it's already toggled to focus. So that's what the toggling does and now we want to check the div to see if it went to relative. So.

A

The container is.

C

A

B

One above two above sorry this one yeah, okay, yeah, hey it got relative. So now here's the other thing we need to change to is um because it's got the transforms on so turn off the transform in the inspector just to make sure I'm right before we write the code.

B

See yeah yeah, yeah cool so same deal with the focus within so we need to in extend um you want to. Probably probably what we can just do is um extend transform to take focus within so yeah copy. This into so next line would be transform.

B

Can we just unset transform.

B

C

Trying to see if I can.

A

Yeah you're, looking at the doctorate.

B

Yeah yeah, but we can okay so now in navigation mobile, so save that we'll probably need to restart again, but um here it's also focus within colon, transform dash none. So this will make that translate. Stuff won't work anymore. Okay,.

A

So focus within translate.

A

Oh my my thing went, I did it again.

B

Look at me there you go cool so now I think we're I think, we're getting there.

A

Now, if we go to the iframe, I know I get into the habit of just like closing and reopening all the things. I should just really just keep the iframe open and refresh yeah.

B

Yeah you can do that that'll. Do it too, um so you can even test this without doing what we're doing before. I bet you can just tab into it. So click on the thing hey look at that.

B

Isn't that dope and then do shift tab shift tab a couple times.

B

Oh, that's, sick, uh-huh, sick and accessible.

A

Isn't that dope yeah? That's super sweet. There you go. I learned something today, which is awesome.

B

That's so good I'm, so this is perfect. This is excellent. Thank you for sitting.

A

B

Awesome um so yeah just now we're going to do that, mess up, stuff like etc, um but.

A

B

Cleanup yeah style cleanup make it look like it was looking before, um but you got it. I mean that's, that's that I like that solves eighty percent of my concerns. um One other thing came up for me: the button, the toggle button. Do you have an aria label on that.

A

B

uh We should slap an audio label on it that just says, um like mobile cleanup, yeah, like on the button itself.

A

This one right here right.

B

Yeah and just call it like aria label yep and just call like um navigation toggle or like toggle, navigation or toggle navigation yeah, because I think what it does usually is like the screen reader. You can just write it as a sentence because the screen reader announces the aria label. So if a person's going through it it'll say like they'll, get to this element and it'll say like it'll literally read that text string, and so I think you could even say this is a button to toggle the navigation and like that will be extremely clear.

B

But I think this is perfectly acceptable too. I'm not 100 on that. But okay.

A

Yeah, I think this is us this. We should use this as an opportunity to call out that like when we you know previously when it was just like brandon and lauren like doing this entire repo. Like doing this level of detail to accessibility, is like so much harder when you have so many requests to go through.

B

All the requests and all the deadlines there's only two of you doing the thing and it's like, and you got to catch it too right because, like you'll just you'll, even if you know to do it, even if you've got the time like you'll forget or you'll miss it and like that's, you know it's it's unacceptable to have an inaccessible website, but, like also it is, I think, perhaps understandable, to end up in that state like when you don't have the tools at your disposal to like get it. There.

A

Yeah- and I think that this is like going through- this has been awesome because it's educated me a lot about accessibility. It's not something that, like, I think, like a lot of people say that it's like really important but like in practice. I think there's like a lot of knowledge gaps that people have like at least for me myself personally like, and I think that, like stuff like this, has been really helpful so yeah. We should continue to do stuff like this and focus on that. So yeah.

B

Thanks for taking the time um so yeah.

A

I think it's just style cleanup.

B

I really think that this is that this is fixed up. Then um I there's still, I think, there's a couple like other suggestions olympics but like this was the blocking stuff for me um like it just needs to be, it just needs to be tappable and like that's. Basically, that's basically it like if this is tappable in both directions, right like forward and backwards, and it goes in the um and it goes in the order you expect it to go in then like that.

B

That basically means- and that's the nice thing about this and like that's- why, like so much of accessibility, is like just understanding the semantics appropriately, because if it's tabable, it means your semantics are correct and the semantics are accessible by default.

A

That makes sense right. I think that's that's a good way of like I don't know if you've like felt this, but, like I think, like at a certain point, like accessibility comes down to like a basic understanding of like semantic html and cement like semantic css, and I think that, like a lot of people, I I I I'm not convinced that a lot a lot of the ways that people traditionally learn, html and css- really reinforces that precisely.

B

I agree yeah and so.

A

B

Complex thing, but it's getting easier to do yeah, which is good.

A

I mean, like I said like like you, were saying about like what you have to do before like to get like this sort of stuff, like yeah yeah,.

B

Yeah the focus within makes it just a thousand times better. It's just like it's awesome.

A

Yeah, it's a developer experience thing right like if it's easy to do then, like more people, are likely to care about accessibility, because it doesn't feel like a huge task. Yeah.

B

Yeah well cool, I gotta jump, um but this is great. Let me know if you, if you run into any blockers through the day, but I think this is good. um We've got this recorded. Do you have access unfiltered? I think you might need to send it to me. Yeah.

A

I think okay, cool.

B

Yeah, send me the recording and I'll post it up um for sure.

A

B

Yeah cool thank.

A

You so much yeah.

B

Thank you have a good one.

A