Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Jul 22, 2020
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
915f82a
Fix accessibility issue in Uptime app nav links.
justinkambic Jul 22, 2020
a3f2857
Refresh outdated snapshot.
justinkambic Jul 22, 2020
1c89a1f
Introduce aria-label for hidden content.
justinkambic Jul 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 13 additions & 16 deletions x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

31 changes: 20 additions & 11 deletions x-pack/plugins/uptime/public/pages/certificates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -72,26 +72,35 @@ 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
color="primary"
data-test-subj="uptimeCertificatesToOverviewLink"
iconType="gear"
href={history.createHref({ pathname: SETTINGS_ROUTE })}
size="s"
>
justinkambic marked this conversation as resolved.
Show resolved Hide resolved
<EuiHideFor sizes={['xs']}> {labels.SETTINGS_ON_CERT}</EuiHideFor>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiHideFor sizes={['xs']}>
Expand Down
57 changes: 29 additions & 28 deletions x-pack/plugins/uptime/public/pages/not_found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
15 changes: 9 additions & 6 deletions x-pack/plugins/uptime/public/pages/page_header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand Down
18 changes: 12 additions & 6 deletions x-pack/plugins/uptime/public/pages/settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down