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

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);

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