paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-08 07:52:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: Restore link focus outline in sidebar.

Browse Source 
Not having a focus outline is very bad for accessibilty.
Browsers have it by default but we completely disabled it for links in
the sidebar in 9955580251.

Showing the outline when selecting a page in the sidebar can be
distracting, so we hide the outline for the highlighted sidebar link.
Since every focusable element however should have a focus outline, we
make the highlighted link unfocusable by setting tabindex=-1 (which also
makes sense since the link to the current page doesn't do anything
anyway).

Part of #15948.
This commit is contained in:
Gittenburg
2020-07-29 07:57:06 +02:00
committed by Tim Abbott
parent 6081e0228b
commit ccaab2d471
2 changed files with 4 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/portico/help.js
View File

@@ -20,6 +20,7 @@ function registerCodeSection($codeSection) {
function highlight_current_article() { function highlight_current_article() {
$(".help .sidebar a").removeClass("highlighted"); $(".help .sidebar a").removeClass("highlighted");
$(".help .sidebar a").attr("tabindex", "0");
const path = window.location.pathname; const path = window.location.pathname;
if (!path) { if (!path) {
@@ -37,6 +38,7 @@ function highlight_current_article() {
// Highlight current article link and the heading of the same // Highlight current article link and the heading of the same
article.closest("ul").css("display", "block"); article.closest("ul").css("display", "block");
article.addClass("highlighted"); article.addClass("highlighted");
article.attr("tabindex", "-1");
} }
function render_code_sections() { function render_code_sections() {

8
static/styles/portico/portico.scss
View File

@@ -254,13 +254,9 @@ html {
width: calc(100% + 20px); width: calc(100% + 20px);
margin-left: -40px; margin-left: -40px;
padding-left: 40px; padding-left: 40px;
}
&:active, // Don't show the focus outline for the highlighted page.
&:hover, outline: 0;
&:focus,
&:visited {
outline: none;
} }
} }
} }