SONAR-17845 Fix a11y issues

Fix a11y issues:
- [1099717] Certain ARIA roles must contain particular children
- [1099818] Certain ARIA roles must be contained by particular parents
- [1098592] Visual list is not marked up as list

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts b/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts
index b14bf7de08da93006ced758029f1e403f1713251..ce418a366498404301e5ea192011bd194d4c0b43 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts
+++ b/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts
@@ -43,19 +43,19 @@ afterEach(() => handler.reset());
 it('should select rules with keyboard navigation', async () => {
   const user = userEvent.setup();
   renderCodingRulesApp();
-  let row = await screen.findByRole('row', { selected: true });
-  expect(within(row).getByRole('link', { name: 'Awsome java rule' })).toBeInTheDocument();
+  let listitem = await screen.findByRole('listitem', { current: true });
+  expect(within(listitem).getByRole('link', { name: 'Awsome java rule' })).toBeInTheDocument();
   await user.keyboard('{ArrowDown}');
-  row = await screen.findByRole('row', { selected: true });
-  expect(within(row).getByRole('link', { name: 'Hot hotspot' })).toBeInTheDocument();
+  listitem = await screen.findByRole('listitem', { current: true });
+  expect(within(listitem).getByRole('link', { name: 'Hot hotspot' })).toBeInTheDocument();
   await user.keyboard('{ArrowUp}');
-  row = await screen.findByRole('row', { selected: true });
-  expect(within(row).getByRole('link', { name: 'Awsome java rule' })).toBeInTheDocument();
+  listitem = await screen.findByRole('listitem', { current: true });
+  expect(within(listitem).getByRole('link', { name: 'Awsome java rule' })).toBeInTheDocument();
   await user.keyboard('{ArrowRight}');
   expect(screen.getByRole('heading', { level: 3, name: 'Awsome java rule' })).toBeInTheDocument();
   await user.keyboard('{ArrowLeft}');
-  row = await screen.findByRole('row', { selected: true });
-  expect(within(row).getByRole('link', { name: 'Awsome java rule' })).toBeInTheDocument();
+  listitem = await screen.findByRole('listitem', { current: true });
+  expect(within(listitem).getByRole('link', { name: 'Awsome java rule' })).toBeInTheDocument();
 });
 
 it('should open with permalink', async () => {

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx
index aca44a3de0db137e56c9514b9ab48694244501c2..b64b65adf4209021209849ee7f2080aa47986e88 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx
@@ -647,7 +647,7 @@ export class App extends React.PureComponent<Props, State> {
                 />
               ) : (
                 <>
-                  <section>
+                  <ul>
                     {rules.map((rule) => (
                       <RuleListItem
                         activation={this.getRuleActivation(rule.key)}
@@ -662,7 +662,7 @@ export class App extends React.PureComponent<Props, State> {
                         selectedProfile={this.getSelectedProfile()}
                       />
                     ))}
-                  </section>
+                  </ul>
                   {paging !== undefined && (
                     <ListFooter
                       count={rules.length}

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
index 1d190fae552abcf50e9d5c5573f45609ef926ce9..7631457d32d38ad90d446997e9161acd416f2886 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
@@ -202,10 +202,9 @@ export default class RuleListItem extends React.PureComponent<Props> {
     const { rule, selected } = this.props;
     const allTags = [...(rule.tags || []), ...(rule.sysTags || [])];
     return (
-      <div
+      <li
         className={classNames('coding-rule', { selected })}
-        aria-selected={selected}
-        role="row"
+        aria-current={selected}
         data-rule={rule.key}
       >
         <table className="coding-rule-table">
@@ -264,7 +263,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
             </tr>
           </tbody>
         </table>
-      </div>
+      </li>
     );
   }
 }

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap
index c063cd23eaef6695862e70e6e914eac90001ba85..59f49c690c4e994bc6d57586052f5e4b80997e1f 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/App-test.tsx.snap
@@ -267,7 +267,7 @@ exports[`should render correctly: loaded 1`] = `
       <div
         className="layout-page-main-inner"
       >
-        <section>
+        <ul>
           <RuleListItem
             isLoggedIn={true}
             key="javascript:S1067"
@@ -322,7 +322,7 @@ exports[`should render correctly: loaded 1`] = `
             }
             selected={false}
           />
-        </section>
+        </ul>
         <ListFooter
           count={2}
           loadMore={[Function]}
@@ -387,7 +387,7 @@ exports[`should render correctly: loading 1`] = `
       <div
         className="layout-page-main-inner"
       >
-        <section />
+        <ul />
       </div>
     </div>
   </div>

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleListItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleListItem-test.tsx.snap
index 7d0ea3c9c88d6457eea34e93ee19b38f95466e44..7b7869967f249d54586f0317f1cd32431b5463b8 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleListItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleListItem-test.tsx.snap
@@ -101,11 +101,10 @@ exports[`renderActions should render the deactivate button 1`] = `
 `;
 
 exports[`should render correctly: default 1`] = `
-<div
-  aria-selected={false}
+<li
+  aria-current={false}
   className="coding-rule"
   data-rule="javascript:S1067"
-  role="row"
 >
   <table
     className="coding-rule-table"
@@ -194,15 +193,14 @@ exports[`should render correctly: default 1`] = `
       </tr>
     </tbody>
   </table>
-</div>
+</li>
 `;
 
 exports[`should render correctly: with activation 1`] = `
-<div
-  aria-selected={false}
+<li
+  aria-current={false}
   className="coding-rule"
   data-rule="javascript:S1067"
-  role="row"
 >
   <table
     className="coding-rule-table"
@@ -291,5 +289,5 @@ exports[`should render correctly: with activation 1`] = `
       </tr>
     </tbody>
   </table>
-</div>
+</li>
 `;