diff options
| author | Wouter Admiraal <wouter.admiraal@sonarsource.com> | 2022-07-26 15:52:19 +0200 |
|---|---|---|
| committer | sonartech <sonartech@sonarsource.com> | 2022-07-28 20:02:56 +0000 |
| commit | ca7e8a8d9687f93d1e4ddad5748aee2d66f57252 (patch) | |
| tree | fa63667205628cd7d7eb419c5aa9e77676eff398 | |
| parent | 50f44189509bc32a1d5665a0d2572068c29c8703 (diff) | |
| download | sonarqube-ca7e8a8d9687f93d1e4ddad5748aee2d66f57252.tar.gz sonarqube-ca7e8a8d9687f93d1e4ddad5748aee2d66f57252.zip | |
SONAR-16703 [891686] Hidden content is readable with a screen reader
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" > |