mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
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:
parent
7caa33993a
commit
589a6eee00
1 changed files with 12 additions and 2 deletions
|
@ -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>
|
||||
</>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue