Skip to content

Commit

Permalink
[SIEM][CASE] Fix aria-labels and translations (elastic#61670)
Browse files Browse the repository at this point in the history
* Fix aria-labels and translations

* Fix conflicts and bugs
  • Loading branch information
cnasikas committed Mar 31, 2020
1 parent 16468e5 commit ce2ce30
Show file tree
Hide file tree
Showing 17 changed files with 105 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export const FilterPopoverComponent = ({
numFilters={options.length}
hasActiveFilters={selectedOptions.length > 0}
numActiveFilters={selectedOptions.length}
aria-label={buttonLabel}
>
{buttonLabel}
</EuiFilterButton>
Expand Down

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

14 changes: 13 additions & 1 deletion x-pack/legacy/plugins/siem/public/components/link_icon/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ interface LinkProps {
href?: string;
iconSide?: 'left' | 'right';
onClick?: Function;
ariaLabel?: string;
}

const Link = styled(({ iconSide, children, ...rest }) => <EuiLink {...rest}>{children}</EuiLink>)<
Expand Down Expand Up @@ -52,14 +53,25 @@ export interface LinkIconProps extends LinkProps {
}

export const LinkIcon = React.memo<LinkIconProps>(
({ children, color, disabled, href, iconSide = 'left', iconSize = 's', iconType, onClick }) => (
({
children,
color,
disabled,
href,
iconSide = 'left',
iconSize = 's',
iconType,
onClick,
ariaLabel,
}) => (
<Link
className="siemLinkIcon"
color={color}
disabled={disabled}
href={href}
iconSide={iconSide}
onClick={onClick}
aria-label={ariaLabel ?? children}
>
<EuiIcon size={iconSize} type={iconType} />
<span className="siemLinkIcon__label">{children}</span>
Expand Down
13 changes: 8 additions & 5 deletions x-pack/legacy/plugins/siem/public/components/links/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,13 @@ import {
import { FlowTarget, FlowTargetSourceDest } from '../../graphql/types';
import { useUiSetting$ } from '../../lib/kibana';
import { IP_REPUTATION_LINKS_SETTING } from '../../../common/constants';
import * as i18n from '../page/network/ip_overview/translations';
import { isUrlInvalid } from '../../pages/detection_engine/rules/components/step_about_rule/helpers';
import { ExternalLinkIcon } from '../external_link_icon';
import { navTabs } from '../../pages/home/home_navigations';
import { useGetUrlSearch } from '../navigation/use_get_url_search';

import * as i18n from './translations';

export const DEFAULT_NUMBER_OF_LINK = 5;

// Internal Links
Expand Down Expand Up @@ -88,16 +89,18 @@ const IPDetailsLinkComponent: React.FC<{

export const IPDetailsLink = React.memo(IPDetailsLinkComponent);

const CaseDetailsLinkComponent: React.FC<{ children?: React.ReactNode; detailName: string }> = ({
children,
detailName,
}) => {
const CaseDetailsLinkComponent: React.FC<{
children?: React.ReactNode;
detailName: string;
title?: string;
}> = ({ children, detailName, title }) => {
const search = useGetUrlSearch(navTabs.case);

return (
<EuiLink
href={getCaseDetailsUrl({ id: detailName, search })}
data-test-subj="case-details-link"
aria-label={i18n.CASE_DETAILS_LINK_ARIA(title ?? detailName)}
>
{children ? children : detailName}
</EuiLink>
Expand Down
15 changes: 15 additions & 0 deletions x-pack/legacy/plugins/siem/public/components/links/translations.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { i18n } from '@kbn/i18n';

export * from '../page/network/ip_overview/translations';

export const CASE_DETAILS_LINK_ARIA = (detailName: string) =>
i18n.translate('xpack.siem.case.caseTable.caseDetailsLinkAria', {
values: { detailName },
defaultMessage: 'click to visit case with title {detailName}',
});
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const Popover = React.memo<UtilityBarActionProps>(

return (
<EuiPopover
ownFocus
button={
<LinkIcon
color={color}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ export const getActions = ({
deleteCaseOnClick,
}: GetActions): Array<DefaultItemIconButtonAction<Case>> => [
{
description: i18n.DELETE,
description: i18n.DELETE_CASE,
icon: 'trash',
name: i18n.DELETE,
name: i18n.DELETE_CASE,
onClick: deleteCaseOnClick,
type: 'icon',
'data-test-subj': 'action-delete',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@ export const getCasesColumns = (
render: (theCase: Case) => {
if (theCase.id != null && theCase.title != null) {
const caseDetailsLinkComponent = (
<CaseDetailsLink detailName={theCase.id}>{theCase.title}</CaseDetailsLink>
<CaseDetailsLink detailName={theCase.id} title={theCase.title}>
{theCase.title}
</CaseDetailsLink>
);
return theCase.status === 'open' ? (
caseDetailsLinkComponent
Expand Down Expand Up @@ -184,6 +186,7 @@ const ServiceNowColumn: React.FC<Props> = ({ theCase }) => {
data-test-subj={`case-table-column-external`}
href={theCase.externalService?.externalUrl}
target="_blank"
aria-label={i18n.SERVICENOW_LINK_ARIA}
>
{theCase.externalService?.externalTitle}
</EuiLink>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,11 @@ export const CLOSED_CASES = i18n.translate('xpack.siem.case.caseTable.closedCase
export const CLOSED = i18n.translate('xpack.siem.case.caseTable.closed', {
defaultMessage: 'Closed',
});

export const DELETE = i18n.translate('xpack.siem.case.caseTable.delete', {
defaultMessage: 'Delete',
});

export const REQUIRES_UPDATE = i18n.translate('xpack.siem.case.caseTable.requiresUpdate', {
defaultMessage: ' requires update',
});
Expand All @@ -76,3 +78,7 @@ export const NOT_PUSHED = i18n.translate('xpack.siem.case.caseTable.notPushed',
export const REFRESH = i18n.translate('xpack.siem.case.caseTable.refreshTitle', {
defaultMessage: 'Refresh',
});

export const SERVICENOW_LINK_ARIA = i18n.translate('xpack.siem.case.caseTable.serviceNowLinkAria', {
defaultMessage: 'click to view the incident on servicenow',
});
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const ConfigureCaseButtonComponent: React.FC<ConfigureCaseButtonProps> = ({
href={getConfigureCasesUrl(urlSearch)}
iconType="controlsHorizontal"
isDisabled={isDisabled}
aria-label={label}
>
{label}
</EuiButton>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@ const ConfigureCasesComponent: React.FC<ConfigureCasesComponentProps> = ({ userC
iconType="cross"
isDisabled={isLoadingAny}
isLoading={persistLoading}
aria-label="Cancel"
aria-label={i18n.CANCEL}
href={getCaseUrl(search)}
>
{i18n.CANCEL}
Expand All @@ -309,7 +309,7 @@ const ConfigureCasesComponent: React.FC<ConfigureCasesComponentProps> = ({ userC
fill
color="secondary"
iconType="save"
aria-label="Save"
aria-label={i18n.SAVE_CHANGES}
isDisabled={isLoadingAny}
isLoading={persistLoading}
onClick={handleSubmit}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
import React, { useCallback, useState } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiPopover, EuiButtonIcon, EuiButtonEmpty } from '@elastic/eui';

import * as i18n from './translations';

export interface PropertyActionButtonProps {
disabled?: boolean;
onClick: () => void;
Expand Down Expand Up @@ -57,10 +59,11 @@ export const PropertyActions = React.memo<PropertyActionsProps>(({ propertyActio
<EuiFlexItem grow={false}>
<EuiPopover
anchorPosition="downRight"
ownFocus
button={
<EuiButtonIcon
data-test-subj={`${ComponentId}-ellipses`}
aria-label="Actions"
aria-label={i18n.ACTIONS_ARIA}
iconType="boxesHorizontal"
onClick={onButtonClick}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { i18n } from '@kbn/i18n';

export const ACTIONS_ARIA = i18n.translate('xpack.siem.case.caseView.editActionsLinkAria', {
defaultMessage: 'click to see all actions',
});
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
EuiLoadingSpinner,
} from '@elastic/eui';
import styled, { css } from 'styled-components';
import * as i18n from '../../translations';
import * as i18n from './translations';
import { Form, useForm } from '../../../../shared_imports';
import { schema } from './schema';
import { CommonUseField } from '../create';
Expand Down Expand Up @@ -66,7 +66,7 @@ export const TagList = React.memo(
<EuiFlexItem grow={false}>
<EuiButtonIcon
isDisabled={disabled}
aria-label={'tags'}
aria-label={i18n.EDIT_TAGS_ARIA}
iconType={'pencil'}
onClick={setIsEditTags.bind(null, true)}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { i18n } from '@kbn/i18n';

export * from '../../translations';

export const EDIT_TAGS_ARIA = i18n.translate('xpack.siem.case.caseView.editTagsLinkAria', {
defaultMessage: 'click to edit tags',
});
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
*/

import React, { useCallback } from 'react';
import { isEmpty } from 'lodash/fp';

import {
EuiButtonIcon,
EuiText,
Expand All @@ -15,8 +17,11 @@ import {
EuiLoadingSpinner,
EuiToolTip,
} from '@elastic/eui';

import styled, { css } from 'styled-components';

import { ElasticUser } from '../../../../containers/case/types';
import * as i18n from './translations';

interface UserListProps {
email: {
Expand Down Expand Up @@ -50,7 +55,7 @@ const renderUsers = (
<MyAvatar name={fullName ? fullName : username ?? ''} />
</EuiFlexItem>
<EuiFlexItem>
<EuiToolTip position="top" content={<p>{fullName ?? username}</p>}>
<EuiToolTip position="top" content={<p>{fullName ? fullName : username ?? ''}</p>}>
<p>
<strong>
<small data-test-subj="case-view-username">{username}</small>
Expand All @@ -65,8 +70,8 @@ const renderUsers = (
data-test-subj="user-list-email-button"
onClick={handleSendEmail.bind(null, email)}
iconType="email"
aria-label="email"
isDisabled={email == null}
aria-label={i18n.SEND_EMAIL_ARIA(fullName ? fullName : username ?? '')}
isDisabled={isEmpty(email)}
/>
</EuiFlexItem>
</MyFlexGroup>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { i18n } from '@kbn/i18n';

export const SEND_EMAIL_ARIA = (user: string) =>
i18n.translate('xpack.siem.case.caseView.sendEmalLinkAria', {
values: { user },
defaultMessage: 'click to send an email to {user}',
});

0 comments on commit ce2ce30

Please sign in to comment.