/gcbrun

Preview: https://storage.googleapis.com/staging.nodejs.dev/c7b70f3/index.html

I missed this PR but removing the outline makes the TOC inaccessible.

There exists an entire website on this topic → http://www.outlinenone.com/

a { outline: none; }
DON'T DO IT!

Thoughts?

It provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can't use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people.

Honestly, I don't think we have lots of people surfing without mouse :] If that's the single argument I don't see any reason to be worried about that :]

Honestly, I don't think we have lots of people surfing without mouse :] If that's the single argument I don't see any reason to be worried about that :]

So, you are saying that we should just ignore people with disabilities who need our site to be accessible just because there are not "lots of people" like that. 🤔 Personally, I don't like that argument. I understand it's hard to make sites accessible but we can make some effort towards keeping the accessibility we have. That's just my opinion, don't take it the wrong way. :)

When I made the PR, I wasn't really thinking about accessibility, but I think it is a good point.

I just noticed that React docs keeps their TOC outline as well, probably for this reason. I'm fine with it if someone wants to revert this PR, or provide alternative styling.

I think instead of just reverting the PR how about we style the focus block and put that back in there in line with our brand colors? SmashingMag uses focus quite a lot for inspiring web devs to care about a11y. 😇

What do you say? Care to take that up @kevjin? 🙌

Sure, sounds like a great idea :)

Honestly, I don't think we have lots of people surfing without mouse :] If that's the single argument I don't see any reason to be worried about that :]

So, you are saying that we should just ignore people with disabilities who need our site to be accessible just because there are not "lots of people" like that. 🤔 Personally, I don't like that argument. I understand it's hard to make sites accessible but we can make some effort towards keeping the accessibility we have. That's just my opinion, don't take it the wrong way. :)

I'm glad that we have here socially-engaged, caring people. :]
No, that's not what I say at all and I also don't see how that's connected with people having disabilities or ignoring their disadvantage to use the page. Apart from this I also don't see how that wrongs somebody. I meant sarcastically that a lot of people don't surf without a mouse and wasn't pointed to anybody with disabilities.

However coming back to the topic it'll become a mobile only feature anyway as soon as we land #199. That means we still wont have an outline :]

I missed this PR but removing the outline makes the TOC inaccessible.

There exists an entire website on this topic → http://www.outlinenone.com/

a { outline: none; }
DON'T DO IT!

Thoughts?

I didn't think about this when landing. Thanks for bringing it up, @ahmadawais! 💯

I think instead of just reverting the PR how about we style the focus block and put that back in there in line with our brand colors? SmashingMag uses focus quite a lot for inspiring web devs to care about a11y. 😇

+1. And thanks @kevjin for taking it up. ❤️

Agreed – missed this one too! Removing outline is a pretty big a11y no-no. 😬

I have a small script we can play with that will only show outlines when a user is keyboard navigating. Will drop it in to #239 as a suggestion.