Button outline on clicking links in right navbar

[saranshbarua]

This is probably a small but significant issue. On clicking the topics such as Installation, main concepts etc a default button border appears which results in an imperfect user experience. Attached below are the screenshots for the same.

I can make a PR resolving this if it is approved.

[AlmeroSteyn]

Hi @saranshbarua .

What is the exact change you are proposing?

Please keep in mind that these focus outlines are important for keyboard-only users who navigate web pages using the TAB key to select elements. When an element has a focus outline it will also be triggered when focus is set on the element by clicking on it.

[saranshbarua]

@AlmeroSteyn I understand the need for keeping the focus highlighting on the page, for example, the links in the footer and the content also have an outline when we use TAB key to navigate through them.

But in those cases clicking on the links navigates to a different section hence the user does not see a border on clicking on the links. However, the links on the right side of the page are drop-down links and a user clicks on them a hundred times.

We don't need to alter the :focus pseudo-class rather we can just alter the :active pseudo-class for the right links. In this way the default focus behaviour will remain intact but the click will not show a border.

[AlmeroSteyn]

That should in theory be OK. Although I generally wont recommend to remove the focus outline in any cases. Would it also be an idea to keep it but change it a bit? Perhaps you could come up with a pull request to show your idea?

[saranshbarua]

@AlmeroSteyn I tried changing the focus outline. It now looks clean and precise. Below is the screenshot of the same, have a look.

Let me know what you think. If this is good, I'll make a PR soon.

[AlmeroSteyn]

Hi Saran, thanks for your suggestion.

I suspect it may be too subtle for a focus outline but can only judge it if I see it working so feel free to create the PR.

On the image it looks like a <hr>, which looks more like a separator than drawing a users attention to the fact that the element has focus.