diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/group_assignment_selector.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/group_assignment_selector.tsx index 5d8ef7ababc8c..f6c88cb7ae6ed 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/group_assignment_selector.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/group_assignment_selector.tsx @@ -9,7 +9,13 @@ import React from 'react'; import { useActions, useValues } from 'kea'; -import { EuiComboBox, EuiFormRow, EuiHorizontalRule, EuiRadioGroup } from '@elastic/eui'; +import { + EuiComboBox, + EuiFormRow, + EuiHorizontalRule, + EuiRadioGroup, + useGeneratedHtmlId, +} from '@elastic/eui'; import { RoleOptionLabel } from '../../../shared/role_mapping'; @@ -31,6 +37,8 @@ export const GroupAssignmentSelector: React.FC = () => { const { includeInAllGroups, availableGroups, selectedGroups, selectedOptions } = useValues(RoleMappingsLogic); + const groupAssigmentLabelId = useGeneratedHtmlId(); + const hasGroupAssignment = selectedGroups.size > 0 || includeInAllGroups; const groupOptions = [ @@ -51,11 +59,12 @@ export const GroupAssignmentSelector: React.FC = () => { handleAllGroupsSelectionChange(id === 'all')} legend={{ - children: {GROUP_ASSIGNMENT_LABEL}, + children: {GROUP_ASSIGNMENT_LABEL}, }} /> @@ -69,6 +78,7 @@ export const GroupAssignmentSelector: React.FC = () => { }} fullWidth isDisabled={includeInAllGroups} + aria-labelledby={groupAssigmentLabelId} />