Adds aria labels and removes option id to get announcements

elastic · Mar 27, 2023 · 065c05a · 065c05a
1 parent 9f8b44d
commit 065c05a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 21 deletions.
diff --git a/...k/plugins/security/public/management/roles/edit_role/privileges/es/cluster_privileges.tsx b/...k/plugins/security/public/management/roles/edit_role/privileges/es/cluster_privileges.tsx
@@ -9,6 +9,8 @@ import { EuiComboBox, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import _ from 'lodash';
 import React, { Component } from 'react';
 
+import { i18n } from '@kbn/i18n';
+
 import type { Role } from '../../../../../../common/model';
 import { isRoleReadOnly } from '../../../../../../common/model';
 
@@ -41,6 +43,10 @@ export class ClusterPrivileges extends Component<Props, {}> {
     return (
       <EuiFlexItem key={'clusterPrivs'}>
         <EuiComboBox
+          aria-label={i18n.translate(
+            'xpack.security.management.editRole.clusterPrivilegeForm.clusterPrivilegesAriaLabel',
+            { defaultMessage: 'Cluster privileges' }
+          )}
           data-test-subj={'cluster-privileges-combobox'}
           options={options}
           selectedOptions={selectedOptions}

diff --git a/...ins/security/public/management/roles/edit_role/privileges/es/elasticsearch_privileges.tsx b/...ins/security/public/management/roles/edit_role/privileges/es/elasticsearch_privileges.tsx
@@ -118,27 +118,28 @@ export class ElasticsearchPrivileges extends Component<Props, {}> {
             </p>
           }
         >
-          <EuiFormRow hasEmptyLabelSpace>
-            <EuiComboBox
-              placeholder={
-                this.props.editable
-                  ? i18n.translate(
-                      'xpack.security.management.editRole.elasticSearchPrivileges.addUserTitle',
-                      { defaultMessage: 'Add a user…' }
-                    )
-                  : undefined
-              }
-              options={this.props.runAsUsers.map((username) => ({
-                id: username,
-                label: username,
-                isGroupLabelOption: false,
-              }))}
-              selectedOptions={this.props.role.elasticsearch.run_as.map((u) => ({ label: u }))}
-              onCreateOption={this.onCreateRunAsOption}
-              onChange={this.onRunAsUserChange}
-              isDisabled={!editable}
-            />
-          </EuiFormRow>
+          <EuiComboBox
+            aria-label={i18n.translate(
+              'xpack.security.management.editRole.elasticSearchPrivileges.runAsUserAriaLabel',
+              { defaultMessage: 'Run as user' }
+            )}
+            placeholder={
+              this.props.editable
+                ? i18n.translate(
+                    'xpack.security.management.editRole.elasticSearchPrivileges.addUserTitle',
+                    { defaultMessage: 'Add a user…' }
+                  )
+                : undefined
+            }
+            options={this.props.runAsUsers.map((username) => ({
+              label: username,
+              isGroupLabelOption: false,
+            }))}
+            selectedOptions={this.props.role.elasticsearch.run_as.map((u) => ({ label: u }))}
+            onCreateOption={this.onCreateRunAsOption}
+            onChange={this.onRunAsUserChange}
+            isDisabled={!editable}
+          />
         </EuiDescribedFormGroup>
 
         <EuiSpacer />

diff --git a/...plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx b/...plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx
@@ -128,6 +128,10 @@ export class IndexPrivilegeForm extends Component<Props, State> {
               {...this.props.validator.validateIndexPrivilege(this.props.indexPrivilege)}
             >
               <EuiComboBox
+                aria-label={i18n.translate(
+                  'xpack.security.management.editRole.indexPrivilegeForm.indicesAriaLabel',
+                  { defaultMessage: 'Indices' }
+                )}
                 data-test-subj={`indicesInput${this.props.formIndex}`}
                 options={this.props.indexPatterns.map(toOption)}
                 selectedOptions={this.props.indexPrivilege.names.map(toOption)}
@@ -148,6 +152,10 @@ export class IndexPrivilegeForm extends Component<Props, State> {
               fullWidth={true}
             >
               <EuiComboBox
+                aria-label={i18n.translate(
+                  'xpack.security.management.editRole.indexPrivilegeForm.privilegesAriaLabel',
+                  { defaultMessage: 'Index privileges' }
+                )}
                 data-test-subj={`privilegesInput${this.props.formIndex}`}
                 options={this.props.availableIndexPrivileges.map(toOption)}
                 selectedOptions={this.props.indexPrivilege.privileges.map(toOption)}
@@ -243,6 +251,10 @@ export class IndexPrivilegeForm extends Component<Props, State> {
                   >
                     <Fragment>
                       <EuiComboBox
+                        aria-label={i18n.translate(
+                          'xpack.security.management.editRole.indexPrivilegeForm.grantedFieldsAriaLabel',
+                          { defaultMessage: 'Granted fields' }
+                        )}
                         data-test-subj={`fieldInput${this.props.formIndex}`}
                         options={this.state.flsOptions.map(toOption)}
                         selectedOptions={grant.map(toOption)}
@@ -268,6 +280,10 @@ export class IndexPrivilegeForm extends Component<Props, State> {
                   >
                     <Fragment>
                       <EuiComboBox
+                        aria-label={i18n.translate(
+                          'xpack.security.management.editRole.indexPrivilegeForm.deniedFieldsAriaLabel',
+                          { defaultMessage: 'Denied fields' }
+                        )}
                         data-test-subj={`deniedFieldInput${this.props.formIndex}`}
                         options={this.state.flsOptions.map(toOption)}
                         selectedOptions={except.map(toOption)}