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 389da6c5137e9c02335f299c714ec19bbecc96c3..26d210e5231747a2e2b961a481fce227dce1a923 100644 (file)
--- 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 32ce4943b3c4e95b418440324534bed78d5a6d13..9584c8862a58e1a626a526f7d77ca4a6fc42eea1 100644 (file)
--- 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 d7d34dd05a999202a644cd9b2daa07326a5b5be9..4525678f4b926d53ea1b619baf706d1654c14387 100644 (file)
--- 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"
   >