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