SONAR-22290 Fix focus indicator in legacy components

3 files changed, 43 insertions, 58 deletions

diff --git a/server/sonar-web/design-system/src/components/__tests__/Dropdown-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Dropdown-test.tsx
index eb3c7cfd4d7..fce2fd2bc67 100644
--- a/server/sonar-web/design-system/src/components/__tests__/Dropdown-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/Dropdown-test.tsx
@@ -20,7 +20,7 @@
 import { screen } from '@testing-library/react';
 import { renderWithRouter } from '../../helpers/testUtils';
 import { ButtonSecondary } from '../../sonar-aligned/components/buttons';
-import { ActionsDropdown, Dropdown } from '../Dropdown';
+import { Dropdown } from '../Dropdown';
 
 describe('Dropdown', () => {
   it('renders', async () => {
@@ -90,18 +90,3 @@ describe('Dropdown', () => {
     );
   }
 });
-
-describe('ActionsDropdown', () => {
-  it('renders', () => {
-    setup();
-    expect(screen.getByRole('button')).toHaveAccessibleName('menu');
-  });
-
-  function setup() {
-    return renderWithRouter(
-      <ActionsDropdown id="test-menu">
-        <div id="overlay" />
-      </ActionsDropdown>,
-    );
-  }
-});
diff --git a/server/sonar-web/design-system/src/components/__tests__/SpotlightTour-test.tsx b/server/sonar-web/design-system/src/components/__tests__/SpotlightTour-test.tsx
index 830e86bce97..f95b68f1a2a 100644
--- a/server/sonar-web/design-system/src/components/__tests__/SpotlightTour-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/SpotlightTour-test.tsx
@@ -28,42 +28,42 @@ it('should display the spotlight tour', async () => {
   renderSpotlightTour({ callback });
 
   expect(await screen.findByRole('alertdialog')).toBeInTheDocument();
-  expect(screen.getByRole('alertdialog')).toHaveTextContent(
-    'Trust The FooFoo bar is bazstep 1 of 5next',
-  );
+  let dialog = screen.getByRole('alertdialog');
+  expect(dialog).toHaveTextContent('Trust The Foo');
+  expect(dialog).toHaveTextContent('Foo bar is baz');
   expect(screen.getByText('step 1 of 5')).toBeInTheDocument();
 
   await user.click(screen.getByRole('button', { name: 'next' }));
 
-  expect(screen.getByRole('alertdialog')).toHaveTextContent(
-    'Trust The BazBaz foo is barstep 2 of 5go_backnext',
-  );
+  dialog = screen.getByRole('alertdialog');
+  expect(dialog).toHaveTextContent('Trust The Baz');
+  expect(dialog).toHaveTextContent('Baz foo is bar');
   expect(callback).toHaveBeenCalled();
 
   await user.click(screen.getByRole('button', { name: 'next' }));
 
-  expect(screen.getByRole('alertdialog')).toHaveTextContent(
-    'Trust The BarBar baz is foostep 3 of 5go_backnext',
-  );
+  dialog = screen.getByRole('alertdialog');
+  expect(dialog).toHaveTextContent('Trust The Bar');
+  expect(dialog).toHaveTextContent('Bar baz is foo');
 
   await user.click(screen.getByRole('button', { name: 'next' }));
 
-  expect(screen.getByRole('alertdialog')).toHaveTextContent(
-    'Trust The Foo 2Foo baz is barstep 4 of 5go_backnext',
-  );
+  dialog = screen.getByRole('alertdialog');
+  expect(dialog).toHaveTextContent('Trust The Foo 2');
+  expect(dialog).toHaveTextContent('Foo baz is bar');
 
   await user.click(screen.getByRole('button', { name: 'go_back' }));
 
-  expect(screen.getByRole('alertdialog')).toHaveTextContent(
-    'Trust The BarBar baz is foostep 3 of 5go_backnext',
-  );
+  dialog = screen.getByRole('alertdialog');
+  expect(dialog).toHaveTextContent('Trust The Bar');
+  expect(dialog).toHaveTextContent('Bar baz is foo');
 
   await user.click(screen.getByRole('button', { name: 'next' }));
   await user.click(screen.getByRole('button', { name: 'next' }));
 
-  expect(screen.getByRole('alertdialog')).toHaveTextContent(
-    'Trust The Baz 2Baz bar is foostep 5 of 5go_backclose',
-  );
+  dialog = screen.getByRole('alertdialog');
+  expect(dialog).toHaveTextContent('Trust The Baz 2');
+  expect(dialog).toHaveTextContent('Baz bar is foo');
 
   expect(screen.queryByRole('button', { name: 'next' })).not.toBeInTheDocument();
 
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
index 6b27c088c74..1d7aad782e8 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
@@ -24,12 +24,7 @@ exports[`should highlight code content correctly 1`] = `
   border: var(--border);
   color: var(--color);
   background-color: var(--background);
-  -webkit-transition: background-color 0.2s ease,outline 0.2s ease;
-  transition: background-color 0.2s ease,outline 0.2s ease;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  transition:background-color 0.2s ease,display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -64,9 +59,14 @@ exports[`should highlight code content correctly 1`] = `
 }
 
 .emotion-4:focus,
-.emotion-4:active {
+.emotion-4:active,
+.emotion-4:focus-visible {
   color: var(--color);
-  outline: 4px solid var(--focus);
+}
+
+.emotion-4:focus-visible {
+  outline: var(--echoes-focus-border-width-default) solid var(--echoes-color-focus-default);
+  outline-offset: var(--echoes-focus-border-offset-default);
 }
 
 .emotion-4:disabled,
@@ -226,12 +226,7 @@ exports[`should show full size when multiline with no editing 1`] = `
   border: var(--border);
   color: var(--color);
   background-color: var(--background);
-  -webkit-transition: background-color 0.2s ease,outline 0.2s ease;
-  transition: background-color 0.2s ease,outline 0.2s ease;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  transition:background-color 0.2s ease,display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -266,9 +261,14 @@ exports[`should show full size when multiline with no editing 1`] = `
 }
 
 .emotion-4:focus,
-.emotion-4:active {
+.emotion-4:active,
+.emotion-4:focus-visible {
   color: var(--color);
-  outline: 4px solid var(--focus);
+}
+
+.emotion-4:focus-visible {
+  outline: var(--echoes-focus-border-width-default) solid var(--echoes-color-focus-default);
+  outline-offset: var(--echoes-focus-border-offset-default);
 }
 
 .emotion-4:disabled,
@@ -430,12 +430,7 @@ exports[`should show reduced size when single line with no editing 1`] = `
   border: var(--border);
   color: var(--color);
   background-color: var(--background);
-  -webkit-transition: background-color 0.2s ease,outline 0.2s ease;
-  transition: background-color 0.2s ease,outline 0.2s ease;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  transition:background-color 0.2s ease,display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -472,9 +467,14 @@ exports[`should show reduced size when single line with no editing 1`] = `
 }
 
 .emotion-4:focus,
-.emotion-4:active {
+.emotion-4:active,
+.emotion-4:focus-visible {
   color: var(--color);
-  outline: 4px solid var(--focus);
+}
+
+.emotion-4:focus-visible {
+  outline: var(--echoes-focus-border-width-default) solid var(--echoes-color-focus-default);
+  outline-offset: var(--echoes-focus-border-offset-default);
 }
 
 .emotion-4:disabled,