[SIEM][CASE] Fix aria-labels and translations (elastic#61670)

* Fix aria-labels and translations * Fix conflicts and bugs
cnasikas · Mar 31, 2020 · ce2ce30 · ce2ce30
1 parent 16468e5
commit ce2ce30
Show file tree

Hide file tree

Showing 17 changed files with 105 additions and 17 deletions.
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
@@ -76,6 +76,7 @@ export const FilterPopoverComponent = ({
           numFilters={options.length}
           hasActiveFilters={selectedOptions.length > 0}
           numActiveFilters={selectedOptions.length}
+          aria-label={buttonLabel}
         >
           {buttonLabel}
         </EuiFilterButton>

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
diff --git a/x-pack/legacy/plugins/siem/public/components/link_icon/index.tsx b/x-pack/legacy/plugins/siem/public/components/link_icon/index.tsx
@@ -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>)<
@@ -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>

diff --git 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 (
     <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>

diff --git a/x-pack/legacy/plugins/siem/public/components/links/translations.ts 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
@@ -18,6 +18,7 @@ const Popover = React.memo<UtilityBarActionProps>(
 
     return (
       <EuiPopover
+        ownFocus
         button={
           <LinkIcon
             color={color}

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/actions.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/actions.tsx
@@ -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',

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
@@ -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
@@ -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>

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
@@ -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
@@ -31,6 +31,7 @@ const ConfigureCaseButtonComponent: React.FC<ConfigureCaseButtonProps> = ({
         href={getConfigureCasesUrl(urlSearch)}
         iconType="controlsHorizontal"
         isDisabled={isDisabled}
+        aria-label={label}
       >
         {label}
       </EuiButton>

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
@@ -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}
@@ -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}

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
@@ -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<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}
             />

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
@@ -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
@@ -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(
             <EuiFlexItem grow={false}>
               <EuiButtonIcon
                 isDisabled={disabled}
-                aria-label={'tags'}
+                aria-label={i18n.EDIT_TAGS_ARIA}
                 iconType={'pencil'}
                 onClick={setIsEditTags.bind(null, true)}
               />

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
@@ -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
@@ -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 = (
             <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>
@@ -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>

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
@@ -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}',
+  });