github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-18 23:21:39 -04:00
Code Issues Projects Releases Packages Wiki Activity

fix: [Analytics:Discover page]Elements missing title from announcement (#217821)

Browse source 
Closes: #214335

**Description**
Dialog modal, flyout, field visible title should be announced for the
users, especially using assistive technology to know what dialog modal,
flyout opened, what field is active and what is needed to enter in it.

**Changes made:**
1. Added `aria-labelledby={flyoutTitleId}` for mentioned places
This commit is contained in:
Alexey Antonov 2025-04-16 02:33:40 +03:00 • committed by GitHub
parent 907cd5904b
commit 9ee5741134
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/kbn-optimizer/limits.yml
View file

@ -85,7 +85,7 @@ pageLoadAssetSize:
infra: 184320
ingestPipelines: 58003
inputControlVis: 172675
inspector: 17900
inspector: 18000
interactiveSetup: 80000
inventory: 27430
kibanaOverview: 56279

8
src/platform/plugins/shared/discover/public/application/main/components/top_nav/esql_dataview_transition/esql_dataview_transition_modal.tsx
View file

@ -24,6 +24,7 @@ import {
EuiFlexGroup,
EuiLink,
EuiHorizontalRule,
useGeneratedHtmlId,
} from '@elastic/eui';
export interface ESQLToDataViewTransitionModalProps {
@ -39,14 +40,19 @@ export default function ESQLToDataViewTransitionModal({
setDismissModalChecked(e.target.checked);
}, []);
const modalTitleId = useGeneratedHtmlId({
prefix: 'discover-esql-to-dataview-modal-title',
});
return (
<EuiModal
onClose={() => onClose()}
css={{ width: 700 }}
data-test-subj="discover-esql-to-dataview-modal"
aria-labelledby={modalTitleId}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<EuiModalHeaderTitle id={modalTitleId}>
{i18n.translate('discover.esqlToDataViewTransitionModal.title', {
defaultMessage: 'Unsaved changes',
})}

1
src/platform/plugins/shared/inspector/public/plugin.tsx
View file

@ -114,6 +114,7 @@ export class InspectorPublicPlugin implements Plugin<Setup, Start> {
),
{
'data-test-subj': 'inspectorPanel',
'aria-labelledby': 'inspector-panel-title',
closeButtonProps: { 'aria-label': closeButtonLabel },
type: options.flyoutType,
}

1
src/platform/plugins/shared/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap generated
View file

@ -13,6 +13,7 @@ Array [
>
<h1
class="euiTitle emotion-euiTitle-s"
id="inspector-panel-title"
>
Inspector
</h1>

2
src/platform/plugins/shared/inspector/public/ui/inspector_panel.tsx
View file

@ -131,7 +131,7 @@ export class InspectorPanel extends Component<InspectorPanelProps, InspectorPane
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={true}>
<EuiTitle size="s">
<h1>{title}</h1>
<h1 id="inspector-panel-title">{title}</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>

2
x-pack/platform/plugins/shared/ml/public/embeddables/job_creation/aiops/flyout/flyout.tsx
View file

@ -44,7 +44,7 @@ export const CreateCategorizationJobFlyout: FC<Props> = ({
<>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s">
<h3>
<h3 id="ml-flyout-layer-title">
<FormattedMessage
id="xpack.ml.embeddables.newJobFromPatternAnalysisFlyout.title"
defaultMessage="Create anomaly detection job"

1
x-pack/platform/plugins/shared/ml/public/embeddables/job_creation/common/create_flyout.tsx
View file

@ -66,6 +66,7 @@ export function createFlyout(
),
{
'data-test-subj': 'mlFlyoutLayerSelector',
'aria-labelledby': 'ml-flyout-layer-title',
ownFocus: true,
onClose: onFlyoutClose,
size: '35vw',

2
x-pack/platform/plugins/shared/ml/public/embeddables/job_creation/lens/lens_vis_layer_selection_flyout/flyout.tsx
View file

@ -55,7 +55,7 @@ export const LensLayerSelectionFlyout: FC<Props> = ({ onClose, embeddable }) =>
<>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s">
<h3>
<h3 id="ml-flyout-layer-title">
<FormattedMessage
id="xpack.ml.embeddables.lensLayerFlyout.title"
defaultMessage="Create anomaly detection job"

2
x-pack/platform/plugins/shared/ml/public/embeddables/job_creation/map/flyout.tsx
View file

@ -51,7 +51,7 @@ export const GeoJobFlyout: FC<Props> = ({ onClose, embeddable }) => {
<>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s">
<h3>
<h3 id="ml-flyout-layer-title">
<FormattedMessage
id="xpack.ml.embeddables.geoJobFlyout.title"
defaultMessage="Create anomaly detection job"