SONAR-17725 Using incorrect ARIA role "group" for list of buttons

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/App-it.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/App-it.tsx
index d9550498dbc5aac7640b80798fccee7098109eb8..9dff5dcce8ec1a01fd891577198dc0538d474d3c 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/App-it.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/App-it.tsx
@@ -285,21 +285,15 @@ describe('The Project section', () => {
 
     await user.click(notDefaultQualityGate);
 
-    const projectSelectList = screen.getByRole('group');
     // by default it shows "selected" values
-    expect(within(projectSelectList).getAllByRole('button')).toHaveLength(3);
     expect(screen.getAllByRole('checkbox')).toHaveLength(2);
 
     // change tabs to show deselected projects
-    await user.click(
-      within(projectSelectList).getByRole('button', { name: 'quality_gates.projects.without' })
-    );
+    await user.click(screen.getByRole('button', { name: 'quality_gates.projects.without' }));
     expect(screen.getAllByRole('checkbox')).toHaveLength(2);
 
     // change tabs to show all projects
-    await user.click(
-      within(projectSelectList).getByRole('button', { name: 'quality_gates.projects.all' })
-    );
+    await user.click(screen.getByRole('button', { name: 'quality_gates.projects.all' }));
     expect(screen.getAllByRole('checkbox')).toHaveLength(4);
   });
 
@@ -312,7 +306,6 @@ describe('The Project section', () => {
 
     await user.click(notDefaultQualityGate);
 
-    const projectSelectList = screen.getByRole('group');
     const checkedProjects = screen.getAllByRole('checkbox')[0];
     expect(screen.getAllByRole('checkbox')).toHaveLength(2);
     await user.click(checkedProjects);
@@ -325,7 +318,7 @@ describe('The Project section', () => {
     expect(screen.getAllByRole('checkbox')).toHaveLength(1);
 
     // change tabs to show deselected projects
-    await user.click(within(projectSelectList).getAllByRole('button')[1]);
+    await user.click(screen.getByRole('button', { name: 'quality_gates.projects.without' }));
 
     const uncheckedProjects = screen.getAllByRole('checkbox')[0];
     expect(screen.getAllByRole('checkbox')).toHaveLength(3);

diff --git a/server/sonar-web/src/main/js/components/controls/ButtonToggle.tsx b/server/sonar-web/src/main/js/components/controls/ButtonToggle.tsx
index 6c5ad5477e360aed1a0394e9be6c1feaef8426b8..db941a80161c442de26d43a2ba56f12e017ee9c3 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/ButtonToggle.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ButtonToggle.tsx
@@ -42,7 +42,7 @@ export default function ButtonToggle(props: ButtonToggleProps) {
   const { disabled, label, options, value } = props;
 
   return (
-    <ul aria-label={label} role="group" className="button-toggle">
+    <ul aria-label={label} className="button-toggle">
       {options.map((option) => (
         <li key={option.value.toString()}>
           <Button