From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Tue, 26 Jul 2022 13:52:19 +0000 (+0200)
Subject: SONAR-16703 [891686] Hidden content is readable with a screen reader
X-Git-Tag: 9.6.0.59041~141
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=ca7e8a8d9687f93d1e4ddad5748aee2d66f57252;p=sonarqube.git

SONAR-16703 [891686] Hidden content is readable with a screen reader
---

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"
   >