SONAR-16760 [893222] Focus indicator is missing

2 files changed, 244 insertions, 24 deletions

diff --git a/server/sonar-web/src/main/js/components/controls/BoxedTabs.tsx b/server/sonar-web/src/main/js/components/controls/BoxedTabs.tsx
index 487e119dffe..c2c7060fa50 100644
--- a/server/sonar-web/src/main/js/components/controls/BoxedTabs.tsx
+++ b/server/sonar-web/src/main/js/components/controls/BoxedTabs.tsx
@@ -60,6 +60,10 @@ const StyledTab = styled.button<{ active: boolean }>`
   &:last-child {
     border-right: ${baseBorder};
   }
+
+  &:focus-visible {
+    outline: 2px dotted ${colors.blue};
+  }
 `;
 
 const ActiveBorder = styled.div<{ active: boolean }>`
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/BoxedTabs-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/BoxedTabs-test.tsx.snap
index b4af211917e..1f423bd4af0 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/BoxedTabs-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/BoxedTabs-test.tsx.snap
@@ -29,6 +29,10 @@ exports[`should render correctly 1`] = `
   border-right: 1px solid #e6e6e6;
 }
 
+.emotion-1:focus-visible {
+  outline: 2px dotted #4b9fd5;
+}
+
 .emotion-0 {
   display: block;
   background-color: #4b9fd5;
@@ -62,6 +66,10 @@ exports[`should render correctly 1`] = `
   border-right: 1px solid #e6e6e6;
 }
 
+.emotion-3:focus-visible {
+  outline: 2px dotted #4b9fd5;
+}
+
 .emotion-2 {
   display: none;
   background-color: #4b9fd5;
@@ -106,9 +114,9 @@ exports[`should render correctly 1`] = `
         Object {
           "insert": [Function],
           "inserted": Object {
-            "1kg7pv0": true,
-            "60rv5s": true,
+            "1193b7i": true,
             "ko9asm": true,
+            "mwuwl": true,
             "o2j9ze": true,
             "v2seq5": true,
           },
@@ -146,6 +154,13 @@ exports[`should render correctly 1`] = `
                 data-s=""
               >
                 
+                .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+              </style>
+              <style
+                data-emotion="css"
+                data-s=""
+              >
+                
                 .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
               </style>
               <style
@@ -174,10 +189,17 @@ exports[`should render correctly 1`] = `
                 data-s=""
               >
                 
+                .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+              </style>
+              <style
+                data-emotion="css"
+                data-s=""
+              >
+                
                 .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
               </style>
             </head>,
-            "ctr": 8,
+            "ctr": 10,
             "insertionPoint": undefined,
             "isSpeedy": false,
             "key": "css",
@@ -210,6 +232,13 @@ exports[`should render correctly 1`] = `
                 data-s=""
               >
                 
+                .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+              </style>,
+              <style
+                data-emotion="css"
+                data-s=""
+              >
+                
                 .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
               </style>,
               <style
@@ -238,6 +267,13 @@ exports[`should render correctly 1`] = `
                 data-s=""
               >
                 
+                .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+              </style>,
+              <style
+                data-emotion="css"
+                data-s=""
+              >
+                
                 .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
               </style>,
             ],
@@ -272,9 +308,9 @@ exports[`should render correctly 1`] = `
             Object {
               "insert": [Function],
               "inserted": Object {
-                "1kg7pv0": true,
-                "60rv5s": true,
+                "1193b7i": true,
                 "ko9asm": true,
+                "mwuwl": true,
                 "o2j9ze": true,
                 "v2seq5": true,
               },
@@ -312,6 +348,13 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
+                    .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
                     .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>
                   <style
@@ -340,10 +383,17 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
+                    .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
                     .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>
                 </head>,
-                "ctr": 8,
+                "ctr": 10,
                 "insertionPoint": undefined,
                 "isSpeedy": false,
                 "key": "css",
@@ -376,6 +426,13 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
+                    .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>,
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
                     .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>,
                   <style
@@ -404,6 +461,13 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
+                    .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>,
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
                     .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>,
                 ],
@@ -414,7 +478,7 @@ exports[`should render correctly 1`] = `
           serialized={
             Object {
               "map": undefined,
-              "name": "60rv5s",
+              "name": "1193b7i",
               "next": undefined,
               "styles": "
   position: relative;
@@ -435,6 +499,10 @@ exports[`should render correctly 1`] = `
   &:last-child {
     border-right: 1px solid #e6e6e6;
   }
+
+  &:focus-visible {
+    outline: 2px dotted #4b9fd5;
+  }
 ",
               "toString": [Function],
             }
@@ -453,9 +521,9 @@ exports[`should render correctly 1`] = `
                 Object {
                   "insert": [Function],
                   "inserted": Object {
-                    "1kg7pv0": true,
-                    "60rv5s": true,
+                    "1193b7i": true,
                     "ko9asm": true,
+                    "mwuwl": true,
                     "o2j9ze": true,
                     "v2seq5": true,
                   },
@@ -493,6 +561,13 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
+                        .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
                         .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>
                       <style
@@ -521,10 +596,17 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
+                        .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
                         .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>
                     </head>,
-                    "ctr": 8,
+                    "ctr": 10,
                     "insertionPoint": undefined,
                     "isSpeedy": false,
                     "key": "css",
@@ -557,6 +639,13 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
+                        .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>,
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
                         .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>,
                       <style
@@ -585,6 +674,13 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
+                        .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>,
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
                         .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>,
                     ],
@@ -628,9 +724,9 @@ exports[`should render correctly 1`] = `
             Object {
               "insert": [Function],
               "inserted": Object {
-                "1kg7pv0": true,
-                "60rv5s": true,
+                "1193b7i": true,
                 "ko9asm": true,
+                "mwuwl": true,
                 "o2j9ze": true,
                 "v2seq5": true,
               },
@@ -668,6 +764,13 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
+                    .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
                     .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>
                   <style
@@ -696,10 +799,17 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
+                    .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
                     .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>
                 </head>,
-                "ctr": 8,
+                "ctr": 10,
                 "insertionPoint": undefined,
                 "isSpeedy": false,
                 "key": "css",
@@ -732,6 +842,13 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
+                    .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>,
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
                     .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>,
                   <style
@@ -760,6 +877,13 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
+                    .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>,
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
                     .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>,
                 ],
@@ -770,7 +894,7 @@ exports[`should render correctly 1`] = `
           serialized={
             Object {
               "map": undefined,
-              "name": "1kg7pv0",
+              "name": "mwuwl",
               "next": undefined,
               "styles": "
   position: relative;
@@ -795,6 +919,10 @@ exports[`should render correctly 1`] = `
   &:last-child {
     border-right: 1px solid #e6e6e6;
   }
+
+  &:focus-visible {
+    outline: 2px dotted #4b9fd5;
+  }
 ",
               "toString": [Function],
             }
@@ -813,9 +941,9 @@ exports[`should render correctly 1`] = `
                 Object {
                   "insert": [Function],
                   "inserted": Object {
-                    "1kg7pv0": true,
-                    "60rv5s": true,
+                    "1193b7i": true,
                     "ko9asm": true,
+                    "mwuwl": true,
                     "o2j9ze": true,
                     "v2seq5": true,
                   },
@@ -853,6 +981,13 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
+                        .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
                         .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>
                       <style
@@ -881,10 +1016,17 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
+                        .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
                         .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>
                     </head>,
-                    "ctr": 8,
+                    "ctr": 10,
                     "insertionPoint": undefined,
                     "isSpeedy": false,
                     "key": "css",
@@ -917,6 +1059,13 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
+                        .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>,
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
                         .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>,
                       <style
@@ -945,6 +1094,13 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
+                        .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>,
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
                         .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>,
                     ],
@@ -988,9 +1144,9 @@ exports[`should render correctly 1`] = `
             Object {
               "insert": [Function],
               "inserted": Object {
-                "1kg7pv0": true,
-                "60rv5s": true,
+                "1193b7i": true,
                 "ko9asm": true,
+                "mwuwl": true,
                 "o2j9ze": true,
                 "v2seq5": true,
               },
@@ -1028,6 +1184,13 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
+                    .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
                     .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>
                   <style
@@ -1056,10 +1219,17 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
+                    .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
                     .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>
                 </head>,
-                "ctr": 8,
+                "ctr": 10,
                 "insertionPoint": undefined,
                 "isSpeedy": false,
                 "key": "css",
@@ -1092,6 +1262,13 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
+                    .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>,
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
                     .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>,
                   <style
@@ -1120,6 +1297,13 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
+                    .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>,
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
                     .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>,
                 ],
@@ -1130,7 +1314,7 @@ exports[`should render correctly 1`] = `
           serialized={
             Object {
               "map": undefined,
-              "name": "1kg7pv0",
+              "name": "mwuwl",
               "next": undefined,
               "styles": "
   position: relative;
@@ -1155,6 +1339,10 @@ exports[`should render correctly 1`] = `
   &:last-child {
     border-right: 1px solid #e6e6e6;
   }
+
+  &:focus-visible {
+    outline: 2px dotted #4b9fd5;
+  }
 ",
               "toString": [Function],
             }
@@ -1173,9 +1361,9 @@ exports[`should render correctly 1`] = `
                 Object {
                   "insert": [Function],
                   "inserted": Object {
-                    "1kg7pv0": true,
-                    "60rv5s": true,
+                    "1193b7i": true,
                     "ko9asm": true,
+                    "mwuwl": true,
                     "o2j9ze": true,
                     "v2seq5": true,
                   },
@@ -1213,6 +1401,13 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
+                        .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
                         .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>
                       <style
@@ -1241,10 +1436,17 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
+                        .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
                         .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>
                     </head>,
-                    "ctr": 8,
+                    "ctr": 10,
                     "insertionPoint": undefined,
                     "isSpeedy": false,
                     "key": "css",
@@ -1277,6 +1479,13 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
+                        .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>,
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
                         .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>,
                       <style
@@ -1305,6 +1514,13 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
+                        .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>,
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
                         .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>,
                     ],