From aac0b694cda540c989ab715fdbe9a46b7c23a32a Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Tue, 31 Mar 2020 18:26:09 +0300 Subject: [PATCH] [7.7] [SIEM][CASE] Fix aria-labels and translations (#61670) (#61975) * Fix aria-labels and translations * Fix conflicts and bugs --- .../public/components/filter_popover/index.tsx | 1 + .../link_icon/__snapshots__/index.test.tsx.snap | 1 + .../siem/public/components/link_icon/index.tsx | 14 +++++++++++++- .../siem/public/components/links/index.tsx | 13 ++++++++----- .../siem/public/components/links/translations.ts | 15 +++++++++++++++ .../components/utility_bar/utility_bar_action.tsx | 1 + .../pages/case/components/all_cases/actions.tsx | 4 ++-- .../pages/case/components/all_cases/columns.tsx | 5 ++++- .../case/components/all_cases/translations.ts | 6 ++++++ .../case/components/configure_cases/button.tsx | 1 + .../case/components/configure_cases/index.tsx | 4 ++-- .../case/components/property_actions/index.tsx | 5 ++++- .../components/property_actions/translations.ts | 11 +++++++++++ .../pages/case/components/tag_list/index.tsx | 4 ++-- .../case/components/tag_list/translations.ts | 13 +++++++++++++ .../pages/case/components/user_list/index.tsx | 11 ++++++++--- .../case/components/user_list/translations.ts | 13 +++++++++++++ 17 files changed, 105 insertions(+), 17 deletions(-) create mode 100644 x-pack/legacy/plugins/siem/public/components/links/translations.ts create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/property_actions/translations.ts create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/translations.ts create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/user_list/translations.ts diff --git a/x-pack/legacy/plugins/siem/public/components/filter_popover/index.tsx b/x-pack/legacy/plugins/siem/public/components/filter_popover/index.tsx index 0c4497f7630c..3c01ec18a879 100644 --- a/x-pack/legacy/plugins/siem/public/components/filter_popover/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/filter_popover/index.tsx @@ -76,6 +76,7 @@ export const FilterPopoverComponent = ({ numFilters={options.length} hasActiveFilters={selectedOptions.length > 0} numActiveFilters={selectedOptions.length} + aria-label={buttonLabel} > {buttonLabel} diff --git a/x-pack/legacy/plugins/siem/public/components/link_icon/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/link_icon/__snapshots__/index.test.tsx.snap index c5086c8cde28..986e9161c519 100644 --- a/x-pack/legacy/plugins/siem/public/components/link_icon/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/link_icon/__snapshots__/index.test.tsx.snap @@ -2,6 +2,7 @@ exports[`LinkIcon it renders 1`] = ` {children})< @@ -52,7 +53,17 @@ export interface LinkIconProps extends LinkProps { } export const LinkIcon = React.memo( - ({ children, color, disabled, href, iconSide = 'left', iconSize = 's', iconType, onClick }) => ( + ({ + children, + color, + disabled, + href, + iconSide = 'left', + iconSize = 's', + iconType, + onClick, + ariaLabel, + }) => ( ( href={href} iconSide={iconSide} onClick={onClick} + aria-label={ariaLabel ?? children} > {children} diff --git a/x-pack/legacy/plugins/siem/public/components/links/index.tsx b/x-pack/legacy/plugins/siem/public/components/links/index.tsx index 14dc5e7999a6..62a67af6e08b 100644 --- a/x-pack/legacy/plugins/siem/public/components/links/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/links/index.tsx @@ -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 @@ -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 ( {children ? children : detailName} diff --git a/x-pack/legacy/plugins/siem/public/components/links/translations.ts b/x-pack/legacy/plugins/siem/public/components/links/translations.ts new file mode 100644 index 000000000000..bed867cd5bf5 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/components/links/translations.ts @@ -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}', + }); diff --git a/x-pack/legacy/plugins/siem/public/components/utility_bar/utility_bar_action.tsx b/x-pack/legacy/plugins/siem/public/components/utility_bar/utility_bar_action.tsx index 19e884e32639..330e7f83b5b2 100644 --- a/x-pack/legacy/plugins/siem/public/components/utility_bar/utility_bar_action.tsx +++ b/x-pack/legacy/plugins/siem/public/components/utility_bar/utility_bar_action.tsx @@ -18,6 +18,7 @@ const Popover = React.memo( return ( > => [ { - 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', diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/columns.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/columns.tsx index f4cfac49f72e..f757fd33a93a 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/columns.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/columns.tsx @@ -46,7 +46,9 @@ export const getCasesColumns = ( render: (theCase: Case) => { if (theCase.id != null && theCase.title != null) { const caseDetailsLinkComponent = ( - {theCase.title} + + {theCase.title} + ); return theCase.status === 'open' ? ( caseDetailsLinkComponent @@ -184,6 +186,7 @@ const ServiceNowColumn: React.FC = ({ theCase }) => { data-test-subj={`case-table-column-external`} href={theCase.externalService?.externalUrl} target="_blank" + aria-label={i18n.SERVICENOW_LINK_ARIA} > {theCase.externalService?.externalTitle} diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/translations.ts b/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/translations.ts index e8459454576e..1bee96bc23ff 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/translations.ts +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/translations.ts @@ -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', }); @@ -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', +}); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/button.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/button.tsx index 9cfc51da22e8..b0bea83148bd 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/button.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/button.tsx @@ -31,6 +31,7 @@ const ConfigureCaseButtonComponent: React.FC = ({ href={getConfigureCasesUrl(urlSearch)} iconType="controlsHorizontal" isDisabled={isDisabled} + aria-label={label} > {label} diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx index 241b0b123027..b8cf5a388080 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx @@ -298,7 +298,7 @@ const ConfigureCasesComponent: React.FC = ({ userC iconType="cross" isDisabled={isLoadingAny} isLoading={persistLoading} - aria-label="Cancel" + aria-label={i18n.CANCEL} href={getCaseUrl(search)} > {i18n.CANCEL} @@ -309,7 +309,7 @@ const ConfigureCasesComponent: React.FC = ({ userC fill color="secondary" iconType="save" - aria-label="Save" + aria-label={i18n.SAVE_CHANGES} isDisabled={isLoadingAny} isLoading={persistLoading} onClick={handleSubmit} diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/property_actions/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/property_actions/index.tsx index 0e7a41edace0..6b8e00921abc 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/property_actions/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/property_actions/index.tsx @@ -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; @@ -57,10 +59,11 @@ export const PropertyActions = React.memo(({ propertyActio diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/property_actions/translations.ts b/x-pack/legacy/plugins/siem/public/pages/case/components/property_actions/translations.ts new file mode 100644 index 000000000000..4d7e15a76739 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/property_actions/translations.ts @@ -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', +}); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx index 7c456d27aced..f7d890ca60b1 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx @@ -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'; @@ -66,7 +66,7 @@ export const TagList = React.memo( diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/translations.ts b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/translations.ts new file mode 100644 index 000000000000..f7f215248dad --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/translations.ts @@ -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', +}); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/user_list/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/user_list/index.tsx index 914bbe1d3f38..579e8e48fa14 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/user_list/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/user_list/index.tsx @@ -5,6 +5,8 @@ */ import React, { useCallback } from 'react'; +import { isEmpty } from 'lodash/fp'; + import { EuiButtonIcon, EuiText, @@ -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: { @@ -50,7 +55,7 @@ const renderUsers = ( - {fullName ?? username}

}> + {fullName ? fullName : username ?? ''}

}>

{username} @@ -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)} /> diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/user_list/translations.ts b/x-pack/legacy/plugins/siem/public/pages/case/components/user_list/translations.ts new file mode 100644 index 000000000000..4d50d11f3910 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/user_list/translations.ts @@ -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}', + });