From ca7e8a8d9687f93d1e4ddad5748aee2d66f57252 Mon Sep 17 00:00:00 2001
From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Tue, 26 Jul 2022 15:52:19 +0200
Subject: [PATCH] SONAR-16703 [891686] Hidden content is readable with a screen
 reader

---
 .../projectInformation/InfoDrawerPage.tsx     | 19 ++++++++++++------
 .../__tests__/InfoDrawerPage-test.tsx         |  2 +-
 .../InfoDrawerPage-test.tsx.snap              | 20 ++++++-------------
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/InfoDrawerPage.tsx b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/InfoDrawerPage.tsx
index 389da6c5137..26d210e5231 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/InfoDrawerPage.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/InfoDrawerPage.tsx
@@ -38,12 +38,19 @@ export default function InfoDrawerPage(props: InfoDrawerPageProps) {
           open: displayed
         }
       )}>
-      <h2 className="back-button big-padded bordered-bottom" onClick={() => onPageChange()}>
-        <BackIcon className="little-spacer-right" />
-        {translate('back')}
-      </h2>
-
-      {displayed && <div className="overflow-y-auto big-padded">{children}</div>}
+      {displayed && (
+        <>
+          <a
+            className="h2 back-button big-padded bordered-bottom"
+            onClick={() => onPageChange()}
+            role="link"
+            tabIndex={-1}>
+            <BackIcon className="little-spacer-right" />
+            {translate('back')}
+          </a>
+          <div className="overflow-y-auto big-padded">{children}</div>
+        </>
+      )}
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/InfoDrawerPage-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/InfoDrawerPage-test.tsx
index 32ce4943b3c..9584c8862a5 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/InfoDrawerPage-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/InfoDrawerPage-test.tsx
@@ -28,7 +28,7 @@ it('should render correctly', () => {
 
 it('should call onPageChange when clicked', () => {
   const onPageChange = jest.fn();
-  const wrapper = shallowRender({ onPageChange });
+  const wrapper = shallowRender({ onPageChange, displayed: true });
 
   wrapper.find('.back-button').simulate('click');
 
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/InfoDrawerPage-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/InfoDrawerPage-test.tsx.snap
index d7d34dd05a9..4525678f4b9 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/InfoDrawerPage-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/InfoDrawerPage-test.tsx.snap
@@ -3,32 +3,24 @@
 exports[`should render correctly 1`] = `
 <div
   className="info-drawer-page info-drawer-pane display-flex-column overflow-hidden"
->
-  <h2
-    className="back-button big-padded bordered-bottom"
-    onClick={[Function]}
-  >
-    <BackIcon
-      className="little-spacer-right"
-    />
-    back
-  </h2>
-</div>
+/>
 `;
 
 exports[`should render correctly 2`] = `
 <div
   className="info-drawer-page info-drawer-pane display-flex-column overflow-hidden open"
 >
-  <h2
-    className="back-button big-padded bordered-bottom"
+  <a
+    className="h2 back-button big-padded bordered-bottom"
     onClick={[Function]}
+    role="link"
+    tabIndex={-1}
   >
     <BackIcon
       className="little-spacer-right"
     />
     back
-  </h2>
+  </a>
   <div
     className="overflow-y-auto big-padded"
   >
-- 
2.39.5