From 3e48de517be3d38329631f7e0b245f1b7f3659ab Mon Sep 17 00:00:00 2001
From: Ambroise <ambroise.christea@sonarsource.com>
Date: Mon, 9 Jan 2023 17:44:58 +0100
Subject: [PATCH] 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
---
 .../coding-rules/__tests__/CodingRules-it.ts     | 16 ++++++++--------
 .../main/js/apps/coding-rules/components/App.tsx |  4 ++--
 .../coding-rules/components/RuleListItem.tsx     |  7 +++----
 .../__tests__/__snapshots__/App-test.tsx.snap    |  6 +++---
 .../__snapshots__/RuleListItem-test.tsx.snap     | 14 ++++++--------
 5 files changed, 22 insertions(+), 25 deletions(-)

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 b14bf7de08d..ce418a36649 100644
--- 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 aca44a3de0d..b64b65adf42 100644
--- 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 1d190fae552..7631457d32d 100644
--- 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 c063cd23eae..59f49c690c4 100644
--- 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 7d0ea3c9c88..7b7869967f2 100644
--- 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>
 `;
-- 
2.39.5