[9.4] Fix @elastic/eui/icon-accessibility-rules lint violations across @elastic/kibana-security files (#269654)

src/platform/plugins/private/interactive_setup/public/app.tsx

@@ -76,7 +76,7 @@ export const App: FunctionComponent<AppProps> = ({ onSuccess }) => {
             ${euiShadowM};
           `}
         >
-          <EuiIcon type="logoElastic" size="xxl" />
+          <EuiIcon type="logoElastic" size="xxl" aria-hidden={true} />
         </span>
         <EuiTitle size="m">
           <h1>

src/platform/plugins/private/interactive_setup/public/cluster_configuration_form.tsx

@@ -330,7 +330,7 @@ export const CertificatePanel: FunctionComponent<CertificatePanelProps> = ({
     <EuiPanel color={compressed ? 'subdued' : undefined} hasBorder={!compressed}>
       <EuiFlexGroup responsive={false} alignItems="center" gutterSize="m">
         <EuiFlexItem grow={false}>
-          <EuiIcon type="document" size="l" />
+          <EuiIcon type="document" size="l" aria-hidden={true} />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiFlexGroup responsive={false} gutterSize="none" justifyContent="spaceBetween">
@@ -453,7 +453,7 @@ const CertificateChain: FunctionComponent<CertificateChainProps> = ({ certificat
                       <EuiSpacer size="s" />
                       <EuiFlexGroup responsive={false} justifyContent="center">
                         <EuiFlexItem grow={false}>
-                          <EuiIcon type="sortDown" color="subdued" />
+                          <EuiIcon type="sortDown" color="subdued" aria-hidden={true} />
                         </EuiFlexItem>
                       </EuiFlexGroup>
                       <EuiSpacer size="s" />

x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/change_all_privileges.tsx

@@ -88,7 +88,7 @@ export class ChangeAllPrivilegesControl extends Component<Props, State> {
             id="xpack.security.management.editRole.changeAllPrivilegesLink"
             defaultMessage="Bulk actions"
           />{' '}
-          <EuiIcon size="s" type="chevronSingleDown" />
+          <EuiIcon size="s" type="chevronSingleDown" aria-hidden={true} />
         </EuiText>
       </EuiLink>
     );

x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.tsx

@@ -111,7 +111,7 @@ export class FeatureTable extends Component<Props, State> {
         >
           {category.euiIconType ? (
             <EuiFlexItem grow={false}>
-              <EuiIcon size="m" type={category.euiIconType} />
+              <EuiIcon size="m" type={category.euiIconType} aria-hidden={true} />
             </EuiFlexItem>
           ) : null}
           <EuiFlexItem grow={1}>
@@ -279,7 +279,11 @@ export class FeatureTable extends Component<Props, State> {
         </EuiText>
       );
 
-      return renderFeatureMarkup(buttonContent, extraAction, <EuiIcon type="empty" />);
+      return renderFeatureMarkup(
+        buttonContent,
+        extraAction,
+        <EuiIcon type="empty" aria-hidden={true} />
+      );
     }
 
     if (primaryFeaturePrivileges.length === 0) {

x-pack/platform/packages/shared/security/form_components/src/form_label.tsx

@@ -51,7 +51,7 @@ export const FormLabel: FC<PropsWithChildren<FormLabelProps>> = (props) => {
 
       {!isEqual ? (
         <EuiFlexItem grow={false}>
-          <EuiIcon type="dot" color="success" size="s" />
+          <EuiIcon type="dot" color="success" size="s" aria-hidden={true} />
         </EuiFlexItem>
       ) : undefined}
     </EuiFlexGroup>

x-pack/platform/packages/shared/security/form_components/src/theme_keypad_menu.tsx

@@ -46,7 +46,7 @@ export const ThemeKeyPadMenu: FunctionComponent<ThemeKeyPadMenuProps> = ({
         isDisabled={isDisabled}
         onChange={() => helpers.setValue(id)}
       >
-        <EuiIcon type={icon} size="l" />
+        <EuiIcon type={icon} size="l" aria-hidden={true} />
       </EuiKeyPadMenuItem>
     );
   };

x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.tsx

@@ -27,7 +27,7 @@ export const AuthenticationStatePage: FC<PropsWithChildren<Props>> = (props) =>
   const logo = customLogo ? (
     <EuiImage src={customLogo} size={40} alt="logo" />
   ) : (
-    <EuiIcon type="logoElastic" size="xxl" />
+    <EuiIcon type="logoElastic" size="xxl" aria-hidden={true} />
   );
   // custom logo needs to be centered
   const logoStyle = customLogo ? { padding: 0 } : {};

x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/login_form.tsx

@@ -344,7 +344,7 @@ export class LoginForm extends Component<LoginFormProps, State> {
             >
               <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
                 <EuiFlexItem grow={false}>
-                  <EuiIcon size="xl" type={provider.icon ?? 'empty'} />
+                  <EuiIcon size="xl" type={provider.icon ?? 'empty'} aria-hidden={true} />
                 </EuiFlexItem>
                 <EuiFlexItem>
                   <EuiTitle size="xs">

x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/mapping_info_panel/mapping_info_panel.tsx

@@ -187,7 +187,7 @@ export class MappingInfoPanel extends Component<Props, State> {
               id="xpack.security.management.editRoleMapping.switchToRoleTemplates"
               defaultMessage="Switch to role templates"
             />{' '}
-            <EuiIcon size="s" type="inputOutput" />
+            <EuiIcon size="s" type="inputOutput" aria-hidden={true} />
           </Fragment>
         </EuiLink>
       );
@@ -266,7 +266,7 @@ export class MappingInfoPanel extends Component<Props, State> {
               id="xpack.security.management.editRoleMapping.switchToRoles"
               defaultMessage="Switch to roles"
             />{' '}
-            <EuiIcon size="s" type="inputOutput" />
+            <EuiIcon size="s" type="inputOutput" aria-hidden={true} />
           </Fragment>
         </EuiLink>
       );

x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/field_rule_editor.tsx

@@ -16,6 +16,7 @@ import {
   EuiFormRow,
   EuiIcon,
   EuiSelect,
+  EuiToolTip,
 } from '@elastic/eui';
 import type { ChangeEvent } from 'react';
 import React, { Component } from 'react';
@@ -156,21 +157,31 @@ export class FieldRuleEditor extends Component<Props, {}> {
       <EuiFlexItem grow={false}>
         <EuiFormRow hasEmptyLabelSpace={true}>
           {this.props.readOnly === false && renderAddValueButton ? (
-            <EuiButtonIcon
-              iconSize="s"
-              iconType="plusCircle"
-              onClick={this.onAddAlternateValue}
-              color="primary"
-              data-test-subj="addAlternateValueButton"
-              aria-label={i18n.translate(
+            <EuiToolTip
+              content={i18n.translate(
                 'xpack.security.management.editRoleMapping.fieldRuleEditor.addAlternateValueButton',
                 {
                   defaultMessage: 'Add alternate value',
                 }
               )}
-            />
+              disableScreenReaderOutput
+            >
+              <EuiButtonIcon
+                iconSize="s"
+                iconType="plusCircle"
+                onClick={this.onAddAlternateValue}
+                color="primary"
+                data-test-subj="addAlternateValueButton"
+                aria-label={i18n.translate(
+                  'xpack.security.management.editRoleMapping.fieldRuleEditor.addAlternateValueButton',
+                  {
+                    defaultMessage: 'Add alternate value',
+                  }
+                )}
+              />
+            </EuiToolTip>
           ) : (
-            <EuiIcon size="s" type="empty" />
+            <EuiIcon size="s" type="empty" aria-hidden={true} />
           )}
         </EuiFormRow>
       </EuiFlexItem>
@@ -182,21 +193,31 @@ export class FieldRuleEditor extends Component<Props, {}> {
       <EuiFlexItem grow={1}>
         <EuiFormRow hasEmptyLabelSpace={true}>
           {this.props.readOnly === false ? (
-            <EuiButtonIcon
-              iconType="trash"
-              color="danger"
-              iconSize="s"
-              data-test-subj={`fieldRuleEditorDeleteValue fieldRuleEditorDeleteValue-${valueIndex}`}
-              aria-label={i18n.translate(
+            <EuiToolTip
+              content={i18n.translate(
                 'xpack.security.management.editRoleMapping.fieldRuleEditor.deleteValueLabel',
                 {
                   defaultMessage: 'Delete value',
                 }
               )}
-              onClick={() => this.onRemoveAlternateValue(valueIndex)}
-            />
+              disableScreenReaderOutput
+            >
+              <EuiButtonIcon
+                iconType="trash"
+                color="danger"
+                iconSize="s"
+                data-test-subj={`fieldRuleEditorDeleteValue fieldRuleEditorDeleteValue-${valueIndex}`}
+                aria-label={i18n.translate(
+                  'xpack.security.management.editRoleMapping.fieldRuleEditor.deleteValueLabel',
+                  {
+                    defaultMessage: 'Delete value',
+                  }
+                )}
+                onClick={() => this.onRemoveAlternateValue(valueIndex)}
+              />
+            </EuiToolTip>
           ) : (
-            <EuiIcon size="s" type="empty" />
+            <EuiIcon size="s" type="empty" aria-hidden={true} />
           )}
         </EuiFormRow>
       </EuiFlexItem>

x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_editor_panel.tsx

@@ -194,7 +194,7 @@ export class RuleEditorPanel extends Component<Props, State> {
                 id="xpack.security.management.editRoleMapping.switchToJSONEditorLink"
                 defaultMessage="Switch to JSON editor"
               />{' '}
-              <EuiIcon type="inputOutput" size="s" />
+              <EuiIcon type="inputOutput" size="s" aria-hidden={true} />
             </Fragment>
           </EuiLink>
         );
@@ -211,7 +211,7 @@ export class RuleEditorPanel extends Component<Props, State> {
                 id="xpack.security.management.editRoleMapping.switchToVisualEditorLink"
                 defaultMessage="Switch to visual editor"
               />{' '}
-              <EuiIcon type="inputOutput" size="s" />
+              <EuiIcon type="inputOutput" size="s" aria-hidden={true} />
             </Fragment>
           </EuiLink>
         );

x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_title.tsx

@@ -77,7 +77,7 @@ export const RuleGroupTitle = (props: Props) => {
       data-test-subj="ruleGroupTitle"
     >
       {props.rule.getDisplayTitle()}
-      {readOnly === false && <EuiIcon type="chevronSingleDown" />}
+      {readOnly === false && <EuiIcon type="chevronSingleDown" aria-hidden={true} />}
     </EuiLink>
   );
 

x-pack/platform/plugins/shared/security/public/management/role_table_display/role_table_display.tsx

@@ -9,6 +9,7 @@ import { EuiIcon, EuiLink, EuiToolTip } from '@elastic/eui';
 import React from 'react';
 
 import type { ApplicationStart } from '@kbn/core/public';
+import { i18n } from '@kbn/i18n';
 
 import type { Role } from '../../../common';
 import { getExtendedRoleDeprecationNotice, isRoleDeprecated } from '../../../common/model';
@@ -31,7 +32,17 @@ export const RoleTableDisplay = ({ role, navigateToApp }: Props) => {
         data-test-subj="roleDeprecationTooltip"
       >
         <div tabIndex={0}>
-          {role.name} <EuiIcon type="warning" color="warning" size="s" className={'eui-alignTop'} />
+          {role.name}{' '}
+          <EuiIcon
+            type="warning"
+            color="warning"
+            size="s"
+            className={'eui-alignTop'}
+            aria-label={i18n.translate(
+              'xpack.security.management.roles.roleTableDisplay.deprecatedIconAriaLabel',
+              { defaultMessage: 'Deprecated' }
+            )}
+          />
         </div>
       </EuiToolTip>
     );

x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/collapsible_panel.tsx

@@ -55,6 +55,7 @@ const CollapsiblePanelTitle = ({
                 <EuiIcon
                   type={iconType}
                   size="xl"
+                  aria-hidden={true}
                   css={css`
                     margin-right: ${euiTheme.size.s};
                     vertical-align: text-bottom;

x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/privilege_summary/privilege_summary_table.tsx

@@ -16,6 +16,7 @@ import {
   EuiInMemoryTable,
   EuiSpacer,
   EuiTitle,
+  EuiToolTip,
 } from '@elastic/eui';
 import React, { Fragment, useMemo, useState } from 'react';
 
@@ -126,12 +127,19 @@ export const PrivilegeSummaryTable = (props: PrivilegeSummaryTableProps) => {
         return null;
       }
       return (
-        <EuiButtonIcon
-          onClick={() => toggleExpandedFeature(featureId)}
-          data-test-subj={`expandPrivilegeSummaryRow`}
-          aria-label={expandedFeatures.includes(featureId) ? 'Collapse' : 'Expand'}
-          iconType={expandedFeatures.includes(featureId) ? 'chevronSingleUp' : 'chevronSingleDown'}
-        />
+        <EuiToolTip
+          content={expandedFeatures.includes(featureId) ? 'Collapse' : 'Expand'}
+          disableScreenReaderOutput
+        >
+          <EuiButtonIcon
+            onClick={() => toggleExpandedFeature(featureId)}
+            data-test-subj={`expandPrivilegeSummaryRow`}
+            aria-label={expandedFeatures.includes(featureId) ? 'Collapse' : 'Expand'}
+            iconType={
+              expandedFeatures.includes(featureId) ? 'chevronSingleUp' : 'chevronSingleDown'
+            }
+          />
+        </EuiToolTip>
       );
     },
   };
@@ -180,7 +188,7 @@ export const PrivilegeSummaryTable = (props: PrivilegeSummaryTableProps) => {
             />
           );
         } else {
-          iconTip = <EuiIcon size="s" type="empty" />;
+          iconTip = <EuiIcon size="s" type="empty" aria-hidden={true} />;
         }
         return (
           <span
@@ -229,7 +237,7 @@ export const PrivilegeSummaryTable = (props: PrivilegeSummaryTableProps) => {
       >
         {category.euiIconType ? (
           <EuiFlexItem grow={false}>
-            <EuiIcon size="m" type={category.euiIconType} />
+            <EuiIcon size="m" type={category.euiIconType} aria-hidden={true} />
           </EuiFlexItem>
         ) : null}
         <EuiFlexItem grow={1}>

x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/privilege_display.tsx

@@ -11,6 +11,7 @@ import _ from 'lodash';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 
+import { i18n } from '@kbn/i18n';
 import { constants } from '@kbn/security-ui-components';
 
 interface Props extends PropsOf<typeof EuiText> {
@@ -44,7 +45,16 @@ function getDisplayValue(privilege: string | string[] | undefined) {
     (privileges.length === 1 && privileges.includes(constants.NO_PRIVILEGE_VALUE));
 
   if (isPrivilegeMissing) {
-    displayValue = <EuiIcon color="subdued" type={'minusCircle'} />;
+    displayValue = (
+      <EuiIcon
+        color="subdued"
+        type={'minusCircle'}
+        aria-label={i18n.translate(
+          'xpack.security.management.editRole.privilegeDisplay.noPrivilegeAriaLabel',
+          { defaultMessage: 'None' }
+        )}
+      />
+    );
   } else {
     displayValue = privileges.map((p) => _.upperFirst(p)).join(', ');
   }