fix: [Search:Stateful:EnterpriseSearch:WorkplaceSearch:UsersandRoles]Assign to specific groups input combobox is missing form label (#202462)

Closes: #202234

## Description
Assign to specific groups input combobox on create a role mapping panel
on users and roles page should have a label so assistive technology can
help the user figure out which input they would want to select.

## Changes made:
1. required `aria-*` attribute was set for `EuiComboBox`

## Screen: 

<img width="1438" alt="image"
src="https://github.com/user-attachments/assets/b167aafd-b881-4a38-aedc-953858c13dcc">
This commit is contained in:
Alexey Antonov 2024-12-05 17:48:18 +02:00 committed by GitHub
parent 7caa33993a
commit 589a6eee00
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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 = () => {
<EuiHorizontalRule />
<EuiFormRow>
<EuiRadioGroup
data-test-subj="enterpriseSearchGroupAssignmentSelectorRadioGroup"
options={groupOptions}
idSelected={includeInAllGroups ? 'all' : 'specific'}
onChange={(id) => handleAllGroupsSelectionChange(id === 'all')}
legend={{
children: <span>{GROUP_ASSIGNMENT_LABEL}</span>,
children: <span id={groupAssigmentLabelId}>{GROUP_ASSIGNMENT_LABEL}</span>,
}}
/>
</EuiFormRow>
@ -69,6 +78,7 @@ export const GroupAssignmentSelector: React.FC = () => {
}}
fullWidth
isDisabled={includeInAllGroups}
aria-labelledby={groupAssigmentLabelId}
/>
</EuiFormRow>
</>