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

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 597a7a572a141cc6681a7079aefe6f4c3999f9c7..d5ff9e58047aded679e31e2a0bc2ee60cb72d38a 100644 (file)
--- 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 df652e50de1463bba46593403baf97cdae4cd95e..545144085bebb7d6319aefc8f60adf1590c71222 100644 (file)
--- 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 a29b2181191173f721f301e2dcd0c89d77e3f08e..e89e0916a7ad697040070e213ca4b952315ecbf5 100644 (file)
--- 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 75c8d0f51104d1cd825314b03a065df99dffc216..34a7066236b87c3f2823c1d7e455d4469e45a8b4 100644 (file)
--- 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 171cd166d51d31c4c895a4223a235e6387f9ea1e..d6a8d642c27efd17467ce04d0f9bee791f715d0c 100644 (file)
--- 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,