[Uptime] Fix accessibility issue in Uptime app nav links (#72926)

* Fix accessibility issue in Uptime app nav links. * Refresh outdated snapshot. * Introduce aria-label for hidden content.
elastic · Jul 22, 2020 · 24ebe0a · 24ebe0a
1 parent 8b27b1e
commit 24ebe0a
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 67 deletions.
diff --git a/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap b/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap
diff --git a/x-pack/plugins/uptime/public/pages/certificates.tsx b/x-pack/plugins/uptime/public/pages/certificates.tsx
@@ -5,7 +5,7 @@
  */
 
 import { useDispatch, useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -72,26 +72,36 @@ export const CertificatesPage: React.FC = () => {
   }, [dispatch, page, search, sort.direction, sort.field, lastRefresh]);
 
   const { data: certificates } = useSelector(certificatesSelector);
+  const history = useHistory();
 
   return (
     <>
       <EuiFlexGroup responsive={false} gutterSize="s">
         <EuiFlexItem grow={false} style={{ marginRight: 'auto', alignSelf: 'center' }}>
-          <Link to={OVERVIEW_ROUTE} data-test-subj="uptimeCertificatesToOverviewLink">
-            <EuiButtonEmpty size="s" color="primary" iconType="arrowLeft">
-              {labels.RETURN_TO_OVERVIEW}
-            </EuiButtonEmpty>
-          </Link>
+          <EuiButtonEmpty
+            color="primary"
+            data-test-subj="uptimeCertificatesToOverviewLink"
+            href={history.createHref({ pathname: OVERVIEW_ROUTE })}
+            iconType="arrowLeft"
+            size="s"
+          >
+            {labels.RETURN_TO_OVERVIEW}
+          </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <ToggleAlertFlyoutButton alertOptions={[CLIENT_ALERT_TYPES.TLS]} />
         </EuiFlexItem>
         <EuiFlexItem grow={false} style={{ alignSelf: 'center' }}>
-          <Link to={SETTINGS_ROUTE} data-test-subj="uptimeCertificatesToOverviewLink">
-            <EuiButtonEmpty size="s" color="primary" iconType="gear">
-              <EuiHideFor sizes={['xs']}> {labels.SETTINGS_ON_CERT}</EuiHideFor>
-            </EuiButtonEmpty>
-          </Link>
+          <EuiButtonEmpty
+            aria-label={labels.SETTINGS_ON_CERT}
+            color="primary"
+            data-test-subj="uptimeCertificatesToOverviewLink"
+            iconType="gear"
+            href={history.createHref({ pathname: SETTINGS_ROUTE })}
+            size="s"
+          >
+            <EuiHideFor sizes={['xs']}> {labels.SETTINGS_ON_CERT}</EuiHideFor>
+          </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiHideFor sizes={['xs']}>

diff --git a/x-pack/plugins/uptime/public/pages/not_found.tsx b/x-pack/plugins/uptime/public/pages/not_found.tsx
@@ -13,38 +13,39 @@ import {
   EuiButton,
 } from '@elastic/eui';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-export const NotFoundPage = () => (
-  <EuiFlexGroup justifyContent="center">
-    <EuiFlexItem grow={false}>
-      <EuiPanel>
-        <EuiEmptyPrompt
-          iconType="faceNeutral"
-          iconColor="subdued"
-          title={
-            <EuiTitle size="m">
-              <h3>
-                <FormattedMessage
-                  defaultMessage="Page not found"
-                  id="xpack.uptime.emptyStateError.notFoundPage"
-                />
-              </h3>
-            </EuiTitle>
-          }
-          body={
-            <Link to="/">
-              <EuiButton href="/">
+export const NotFoundPage = () => {
+  const history = useHistory();
+  return (
+    <EuiFlexGroup justifyContent="center">
+      <EuiFlexItem grow={false}>
+        <EuiPanel>
+          <EuiEmptyPrompt
+            iconType="faceNeutral"
+            iconColor="subdued"
+            title={
+              <EuiTitle size="m">
+                <h3>
+                  <FormattedMessage
+                    defaultMessage="Page not found"
+                    id="xpack.uptime.emptyStateError.notFoundPage"
+                  />
+                </h3>
+              </EuiTitle>
+            }
+            body={
+              <EuiButton href={history.createHref({ pathname: '/' })}>
                 <FormattedMessage
                   defaultMessage="Back to home"
                   id="xpack.uptime.notFountPage.homeLinkText"
                 />
               </EuiButton>
-            </Link>
-          }
-        />
-      </EuiPanel>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+            }
+          />
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/uptime/public/pages/page_header.tsx b/x-pack/plugins/uptime/public/pages/page_header.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer, EuiButtonEmpty } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import { UptimeDatePicker } from '../components/common/uptime_date_picker';
 import { SETTINGS_ROUTE } from '../../common/constants';
@@ -58,18 +58,21 @@ export const PageHeader = React.memo(
       ) : null;
 
     const kibana = useKibana();
+    const history = useHistory();
 
     const extraLinkComponents = !extraLinks ? null : (
       <EuiFlexGroup alignItems="flexEnd" responsive={false}>
         <EuiFlexItem grow={false}>
           <ToggleAlertFlyoutButton />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <Link to={SETTINGS_ROUTE}>
-            <EuiButtonEmpty data-test-subj="settings-page-link" iconType="gear">
-              {SETTINGS_LINK_TEXT}
-            </EuiButtonEmpty>
-          </Link>
+          <EuiButtonEmpty
+            data-test-subj="settings-page-link"
+            iconType="gear"
+            href={history.createHref({ pathname: SETTINGS_ROUTE })}
+          >
+            {SETTINGS_LINK_TEXT}
+          </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButtonEmpty

diff --git a/x-pack/plugins/uptime/public/pages/settings.tsx b/x-pack/plugins/uptime/public/pages/settings.tsx
@@ -18,7 +18,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useDispatch, useSelector } from 'react-redux';
 import { isEqual } from 'lodash';
-import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { selectDynamicSettings } from '../state/selectors';
 import { getDynamicSettings, setDynamicSettings } from '../state/actions/dynamic_settings';
 import { DynamicSettings } from '../../common/runtime_types';
@@ -135,13 +135,19 @@ export const SettingsPage: React.FC = () => {
     </>
   );
 
+  const history = useHistory();
+
   return (
     <>
-      <Link to={OVERVIEW_ROUTE} data-test-subj="uptimeSettingsToOverviewLink">
-        <EuiButtonEmpty size="s" color="primary" iconType="arrowLeft">
-          {Translations.settings.returnToOverviewLinkLabel}
-        </EuiButtonEmpty>
-      </Link>
+      <EuiButtonEmpty
+        color="primary"
+        data-test-subj="uptimeSettingsToOverviewLink"
+        iconType="arrowLeft"
+        href={history.createHref({ pathname: OVERVIEW_ROUTE })}
+        size="s"
+      >
+        {Translations.settings.returnToOverviewLinkLabel}
+      </EuiButtonEmpty>
       <EuiSpacer size="s" />
       <EuiPanel>
         <EuiFlexGroup>