12 Comments

https://codepen.io/romola/pen/yLXZeWm?editors=1100

I used some hover.css styles but didn't have a convenient way to link to the stylesheet, so just copied some code.

Expand full comment

Yeah, it can be tricky linking to external resources in CodePen. Your bar looks great, and your links are quite bouncy! Nice job as always.🔥🔥🔥

Expand full comment

https://codepen.io/miklaan/pen/ZEyVxOv

I've noticed one thing which I can't figure out.

If you inspect the logo you can see that <a> have some 3.5px more then img which is inside.

Also if I add background-color on .logo:hover, we can see that 3.5px has color, but cannot find why?

Can you suggest me how can I remove that mistake (probably) of mine?

Expand full comment

🔥🔥🔥 Bar looks great! I did not see the issue that you are talking about though. I was using Mac with Chrome -- what are you using? Feel free to email me some screenshots if it helps.

Expand full comment

🔥🔥🔥 Looks fantastic - great work!

Expand full comment

🔥🔥🔥 Nicely done and super fun! Love the rotating logo. Code looks great - thanks for sharing!

Expand full comment

Hey, just want to throw it out there that some accessibility experts won't necessarily like it that the tab order is not the same as the DOM order when you rearrange the placement of the nav items using flex order.

https://www.w3.org/WAI/WCAG21/Techniques/general/G59

https://www.w3.org/WAI/WCAG21/Techniques/css/C27

Expand full comment

Hi Bruce -- thanks for the pointers! I am not an accessibility expert. Yes, it would be true that the tab order would be the DOM order, I think? The Flexbox "order" property rearranges how these elements appear on screen, but the HTML is untouched. At least that's my understanding... is that not true? When I tab through the links in the CodePen, it seems like they tab in the DOM order? I always welcome comments from accessibility experts, so please expand on what you're saying if we could improve accessibility?

(FYI: on Day 12, we'll take this same navbar and change its layout a few times for responsive design, including adding a hamburger button on day 13!)

Expand full comment

Sorry, I don't think I explained myself clearly. Yes, definitely, the keyboard tab order still follows the DOM order (the first tabbed item in the nav list is the logo link because that is the first item in the list). What I meant to say is that the "visual" tab order won't be the same as the DOM order. So in this case, even though the logo link is the first item in the list, it is visually the third item and thus the visual tab order goes from the third item back to the first item.

To be honest, I'm not sure if having just this one link visually out of order would be enough to be considered a WCAG violation. But I would definitely recommend that a custom outline be added to the :focus property on these links so that it is clear which one is focused because the default outline indicator in my Firefox is pathetic and I have to look really hard in order to see which link is focused. With such a weak focus outline you can definitely see how mixing up the visual tab order can cause frustration for keyboard users.

Expand full comment

Thanks, the :focus addition is an excellent point! I'll add it to the CodePen. I appreciate your feedback!

Expand full comment