SONAR-11750 Add visible focus state on links for keyboard navigation

5 files changed, 31 insertions, 3 deletions

diff --git a/server/sonar-web/src/main/js/app/components/a11y/A11ySkipLinks.css b/server/sonar-web/src/main/js/app/components/a11y/A11ySkipLinks.css
index 597a7a572a1..d5ff9e58047 100644
--- a/server/sonar-web/src/main/js/app/components/a11y/A11ySkipLinks.css
+++ b/server/sonar-web/src/main/js/app/components/a11y/A11ySkipLinks.css
@@ -36,5 +36,6 @@
   left: 6px;
   top: 6px;
   color: white;
+  background-color: var(--globalNavBarBg);
   text-decoration: underline;
 }
diff --git a/server/sonar-web/src/main/js/app/styles/init/links.css b/server/sonar-web/src/main/js/app/styles/init/links.css
index df652e50de1..545144085be 100644
--- a/server/sonar-web/src/main/js/app/styles/init/links.css
+++ b/server/sonar-web/src/main/js/app/styles/init/links.css
@@ -113,6 +113,11 @@ a.text-danger:focus {
   color: #af252f;
 }
 
+.link-red:focus,
+a.text-danger:focus {
+  outline: 1px dotted var(--red);
+}
+
 a.text-muted {
   border-bottom: 1px solid #dddddd;
   color: var(--secondFontColor);
@@ -124,6 +129,10 @@ a.text-muted:focus {
   color: #5e5e5e;
 }
 
+a.text-muted:focus {
+  outline: 1px dotted var(--blue);
+}
+
 a.text-warning {
   border-bottom: 1px solid #fcebdd;
   color: var(--orange);
@@ -135,6 +144,10 @@ a.text-warning:focus {
   color: #f1994f;
 }
 
+a.text-warning:focus {
+  outline: 1px dotted var(--orange);
+}
+
 a.text-success {
   border-bottom: 1px solid #77ff77;
   color: var(--green);
@@ -145,3 +158,12 @@ a.text-success:active,
 a.text-success:focus {
   color: #007700;
 }
+
+a.text-success:focus {
+  outline: 1px dotted var(--green);
+}
+
+a.set-homepage-link:focus,
+a.favorite-link:focus {
+  outline: 1px dotted var(--blue);
+}
diff --git a/server/sonar-web/src/main/js/apps/issues/styles.css b/server/sonar-web/src/main/js/apps/issues/styles.css
index a29b2181191..e89e0916a7a 100644
--- a/server/sonar-web/src/main/js/apps/issues/styles.css
+++ b/server/sonar-web/src/main/js/apps/issues/styles.css
@@ -294,13 +294,17 @@
   cursor: pointer;
 }
 
+.issues .issue:focus-within,
 .issues .issue:hover {
   border: 2px dashed var(--blue);
   transition: all 0.3s ease;
+  outline: 0;
 }
 
-.issues .issue:focus {
-  outline: none;
+.issues .issue a:focus,
+.issues .issue button:focus {
+  box-shadow: none;
+  outline: 1px dotted var(--blue);
 }
 
 @media (max-width: 1320px) {
diff --git a/server/sonar-web/src/main/js/components/search-navigator.css b/server/sonar-web/src/main/js/components/search-navigator.css
index 75c8d0f5110..34a7066236b 100644
--- a/server/sonar-web/src/main/js/components/search-navigator.css
+++ b/server/sonar-web/src/main/js/components/search-navigator.css
@@ -326,6 +326,7 @@ a.search-navigator-facet:focus,
   color: var(--baseFontColor);
 }
 
+.search-navigator-facet-header > a:focus,
 .search-navigator-facet-header > a:hover {
   color: var(--blue);
 }
diff --git a/server/sonar-web/src/main/js/components/ui/buttons.css b/server/sonar-web/src/main/js/components/ui/buttons.css
index 171cd166d51..d6a8d642c27 100644
--- a/server/sonar-web/src/main/js/components/ui/buttons.css
+++ b/server/sonar-web/src/main/js/components/ui/buttons.css
@@ -148,7 +148,7 @@
 .button-link:active,
 .button-link:focus {
   box-shadow: none;
-  outline: thin dotted #ccc;
+  outline: 1px dotted var(--blue);
 }
 
 .button-link:disabled,