From 999393eba2c1d6a24e20322dbc41e94cd62d11a8 Mon Sep 17 00:00:00 2001
From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Wed, 3 Aug 2022 16:11:29 +0200
Subject: [PATCH] SONAR-16760 [893222] Focus indicator is missing

---
 .../main/js/components/controls/BoxedTabs.tsx |   4 +
 .../__snapshots__/BoxedTabs-test.tsx.snap     | 264 ++++++++++++++++--
 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,
           },
@@ -141,6 +149,13 @@ exports[`should render correctly 1`] = `
                 
                 .emotion-1:last-child{border-right:1px solid #e6e6e6;}
               </style>
+              <style
+                data-emotion="css"
+                data-s=""
+              >
+                
+                .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+              </style>
               <style
                 data-emotion="css"
                 data-s=""
@@ -169,6 +184,13 @@ exports[`should render correctly 1`] = `
                 
                 .emotion-3:last-child{border-right:1px solid #e6e6e6;}
               </style>
+              <style
+                data-emotion="css"
+                data-s=""
+              >
+                
+                .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+              </style>
               <style
                 data-emotion="css"
                 data-s=""
@@ -177,7 +199,7 @@ exports[`should render correctly 1`] = `
                 .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",
@@ -205,6 +227,13 @@ exports[`should render correctly 1`] = `
                 
                 .emotion-1:last-child{border-right:1px solid #e6e6e6;}
               </style>,
+              <style
+                data-emotion="css"
+                data-s=""
+              >
+                
+                .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+              </style>,
               <style
                 data-emotion="css"
                 data-s=""
@@ -233,6 +262,13 @@ exports[`should render correctly 1`] = `
                 
                 .emotion-3:last-child{border-right:1px solid #e6e6e6;}
               </style>,
+              <style
+                data-emotion="css"
+                data-s=""
+              >
+                
+                .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+              </style>,
               <style
                 data-emotion="css"
                 data-s=""
@@ -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,
               },
@@ -307,6 +343,13 @@ exports[`should render correctly 1`] = `
                     
                     .emotion-1:last-child{border-right:1px solid #e6e6e6;}
                   </style>
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
+                    .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>
                   <style
                     data-emotion="css"
                     data-s=""
@@ -335,6 +378,13 @@ exports[`should render correctly 1`] = `
                     
                     .emotion-3:last-child{border-right:1px solid #e6e6e6;}
                   </style>
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
+                    .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>
                   <style
                     data-emotion="css"
                     data-s=""
@@ -343,7 +393,7 @@ exports[`should render correctly 1`] = `
                     .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",
@@ -371,6 +421,13 @@ exports[`should render correctly 1`] = `
                     
                     .emotion-1:last-child{border-right:1px solid #e6e6e6;}
                   </style>,
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
+                    .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>,
                   <style
                     data-emotion="css"
                     data-s=""
@@ -399,6 +456,13 @@ exports[`should render correctly 1`] = `
                     
                     .emotion-3:last-child{border-right:1px solid #e6e6e6;}
                   </style>,
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
+                    .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>,
                   <style
                     data-emotion="css"
                     data-s=""
@@ -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,
                   },
@@ -488,6 +556,13 @@ exports[`should render correctly 1`] = `
                         
                         .emotion-1:last-child{border-right:1px solid #e6e6e6;}
                       </style>
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
+                        .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>
                       <style
                         data-emotion="css"
                         data-s=""
@@ -516,6 +591,13 @@ exports[`should render correctly 1`] = `
                         
                         .emotion-3:last-child{border-right:1px solid #e6e6e6;}
                       </style>
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
+                        .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>
                       <style
                         data-emotion="css"
                         data-s=""
@@ -524,7 +606,7 @@ exports[`should render correctly 1`] = `
                         .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",
@@ -552,6 +634,13 @@ exports[`should render correctly 1`] = `
                         
                         .emotion-1:last-child{border-right:1px solid #e6e6e6;}
                       </style>,
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
+                        .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>,
                       <style
                         data-emotion="css"
                         data-s=""
@@ -580,6 +669,13 @@ exports[`should render correctly 1`] = `
                         
                         .emotion-3:last-child{border-right:1px solid #e6e6e6;}
                       </style>,
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
+                        .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>,
                       <style
                         data-emotion="css"
                         data-s=""
@@ -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,
               },
@@ -663,6 +759,13 @@ exports[`should render correctly 1`] = `
                     
                     .emotion-1:last-child{border-right:1px solid #e6e6e6;}
                   </style>
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
+                    .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>
                   <style
                     data-emotion="css"
                     data-s=""
@@ -691,6 +794,13 @@ exports[`should render correctly 1`] = `
                     
                     .emotion-3:last-child{border-right:1px solid #e6e6e6;}
                   </style>
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
+                    .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>
                   <style
                     data-emotion="css"
                     data-s=""
@@ -699,7 +809,7 @@ exports[`should render correctly 1`] = `
                     .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",
@@ -727,6 +837,13 @@ exports[`should render correctly 1`] = `
                     
                     .emotion-1:last-child{border-right:1px solid #e6e6e6;}
                   </style>,
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
+                    .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>,
                   <style
                     data-emotion="css"
                     data-s=""
@@ -755,6 +872,13 @@ exports[`should render correctly 1`] = `
                     
                     .emotion-3:last-child{border-right:1px solid #e6e6e6;}
                   </style>,
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
+                    .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>,
                   <style
                     data-emotion="css"
                     data-s=""
@@ -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,
                   },
@@ -848,6 +976,13 @@ exports[`should render correctly 1`] = `
                         
                         .emotion-1:last-child{border-right:1px solid #e6e6e6;}
                       </style>
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
+                        .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>
                       <style
                         data-emotion="css"
                         data-s=""
@@ -876,6 +1011,13 @@ exports[`should render correctly 1`] = `
                         
                         .emotion-3:last-child{border-right:1px solid #e6e6e6;}
                       </style>
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
+                        .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>
                       <style
                         data-emotion="css"
                         data-s=""
@@ -884,7 +1026,7 @@ exports[`should render correctly 1`] = `
                         .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",
@@ -912,6 +1054,13 @@ exports[`should render correctly 1`] = `
                         
                         .emotion-1:last-child{border-right:1px solid #e6e6e6;}
                       </style>,
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
+                        .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>,
                       <style
                         data-emotion="css"
                         data-s=""
@@ -940,6 +1089,13 @@ exports[`should render correctly 1`] = `
                         
                         .emotion-3:last-child{border-right:1px solid #e6e6e6;}
                       </style>,
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
+                        .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>,
                       <style
                         data-emotion="css"
                         data-s=""
@@ -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,
               },
@@ -1023,6 +1179,13 @@ exports[`should render correctly 1`] = `
                     
                     .emotion-1:last-child{border-right:1px solid #e6e6e6;}
                   </style>
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
+                    .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>
                   <style
                     data-emotion="css"
                     data-s=""
@@ -1051,6 +1214,13 @@ exports[`should render correctly 1`] = `
                     
                     .emotion-3:last-child{border-right:1px solid #e6e6e6;}
                   </style>
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
+                    .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>
                   <style
                     data-emotion="css"
                     data-s=""
@@ -1059,7 +1229,7 @@ exports[`should render correctly 1`] = `
                     .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",
@@ -1087,6 +1257,13 @@ exports[`should render correctly 1`] = `
                     
                     .emotion-1:last-child{border-right:1px solid #e6e6e6;}
                   </style>,
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
+                    .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>,
                   <style
                     data-emotion="css"
                     data-s=""
@@ -1115,6 +1292,13 @@ exports[`should render correctly 1`] = `
                     
                     .emotion-3:last-child{border-right:1px solid #e6e6e6;}
                   </style>,
+                  <style
+                    data-emotion="css"
+                    data-s=""
+                  >
+                    
+                    .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                  </style>,
                   <style
                     data-emotion="css"
                     data-s=""
@@ -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,
                   },
@@ -1208,6 +1396,13 @@ exports[`should render correctly 1`] = `
                         
                         .emotion-1:last-child{border-right:1px solid #e6e6e6;}
                       </style>
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
+                        .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>
                       <style
                         data-emotion="css"
                         data-s=""
@@ -1236,6 +1431,13 @@ exports[`should render correctly 1`] = `
                         
                         .emotion-3:last-child{border-right:1px solid #e6e6e6;}
                       </style>
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
+                        .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>
                       <style
                         data-emotion="css"
                         data-s=""
@@ -1244,7 +1446,7 @@ exports[`should render correctly 1`] = `
                         .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",
@@ -1272,6 +1474,13 @@ exports[`should render correctly 1`] = `
                         
                         .emotion-1:last-child{border-right:1px solid #e6e6e6;}
                       </style>,
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
+                        .emotion-1:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>,
                       <style
                         data-emotion="css"
                         data-s=""
@@ -1300,6 +1509,13 @@ exports[`should render correctly 1`] = `
                         
                         .emotion-3:last-child{border-right:1px solid #e6e6e6;}
                       </style>,
+                      <style
+                        data-emotion="css"
+                        data-s=""
+                      >
+                        
+                        .emotion-3:focus-visible{outline:2px dotted #4b9fd5;}
+                      </style>,
                       <style
                         data-emotion="css"
                         data-s=""
-- 
2.39.5