SONAR-18357 Remove select clear button from tab navigation in quality profiles page

diff --git a/server/sonar-web/src/main/js/components/controls/Select.tsx b/server/sonar-web/src/main/js/components/controls/Select.tsx
index 4b4183571343ddcc2d15c956676ef3b3fb94ff31..3d35a3d68065018bd2138c8b7b4298af78240f99 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/Select.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Select.tsx
@@ -70,7 +70,9 @@ export function clearIndicator<
   const { innerProps } = props;
   return (
     <div {...innerProps} className="spacer-left spacer-right">
-      <ClearButton className="button-tiny" iconProps={{ size: 12 }} />
+      {/* We use tabindex="-1" to prevent the clear button from being focused via tabbing.*/}
+      {/* This is done to align with react-select default behavior and because backspace already clears the select value. */}
+      <ClearButton className="button-tiny" iconProps={{ size: 12 }} tabIndex={-1} />
     </div>
   );
 }

diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Select-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Select-test.tsx.snap
index 8413389018c61bbb400c36fa13204a6f61a35122..49cb58d74e34523d27aba88ea6f8720c9a02c665 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Select-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Select-test.tsx.snap
@@ -11,6 +11,7 @@ exports[`Select should render clearIndicator correctly 1`] = `
         "size": 12,
       }
     }
+    tabIndex={-1}
   />
 </div>
 `;

diff --git a/server/sonar-web/src/main/js/components/controls/buttons.tsx b/server/sonar-web/src/main/js/components/controls/buttons.tsx
index e00a00300d592b2ff5c4b8eae3444243a1b34219..30e037e39b17d5a32cc7e322f91b5ca2cf61c6e3 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/buttons.tsx
+++ b/server/sonar-web/src/main/js/components/controls/buttons.tsx
@@ -40,6 +40,7 @@ type AllowedButtonAttributes = Pick<
   | 'onBlur'
   | 'onMouseOver'
   | 'onMouseLeave'
+  | 'tabIndex'
 >;
 
 interface ButtonProps extends AllowedButtonAttributes {