github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security Solution] [Attack discovery] Adds missing aria-label for the information button icon (#206886)

Browse source 
### [Security Solution] [Attack discovery] Adds missing aria-label for the information button icon

This PR fixes an a11y issue reported in <https://github.com/elastic/kibana/issues/206353>, where the information button icon, displayed while Attack discoveries are generated, was missing an `aria-label`.

This PR also updates an i18n translation in the same file, to add a missing word.

The _Before_ and _After_ screenshots below illustrate the fix, desk tested with Axe:

**Before**

![before](https://github.com/user-attachments/assets/a75d8b0c-2af7-44d0-9b10-fb961c5bd60e)

_Above: Before the fix, 1 Axe issue was detected while discoveries are generated_

**After**

![after](https://github.com/user-attachments/assets/5419f278-6963-47e2-bc99-35d5e6c2e64e)

_Above: After the fix, 0 Axe issues are detected while discoveries are generated_

#### Desk testing

The fix for this PR was desk tested locally via Axe.

Reproduction steps: <https://github.com/elastic/kibana/issues/206353>
This commit is contained in:
Andrew Macri 2025-01-16 08:35:34 -05:00 • committed by GitHub
parent aaf7b9efea
commit 93d1134bfb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 26 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

14
x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/loading_callout/countdown/index.test.tsx
View file

@ -6,14 +6,14 @@
*/
import moment from 'moment';
import type { GenerationInterval } from '@kbn/elastic-assistant-common';
import { act, render, screen } from '@testing-library/react';
import React from 'react';
import { Countdown } from '.';
import { TestProviders } from '../../../../common/mock';
import { INFORMATION } from '../translations';
import { APPROXIMATE_TIME_REMAINING } from './translations';
import type { GenerationInterval } from '@kbn/elastic-assistant-common';
describe('Countdown', () => {
const connectorIntervals: GenerationInterval[] = [
@ -81,4 +81,14 @@ describe('Countdown', () => {
expect(screen.getByTestId('timerText')).toHaveTextContent('00:59');
});
it('renders an accessible information button icon', () => {
render(
<TestProviders>
<Countdown approximateFutureTime={null} connectorIntervals={connectorIntervals} />
</TestProviders>
);
expect(screen.getByRole('button', { name: INFORMATION })).toBeInTheDocument();
});
});

10
x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/loading_callout/countdown/index.tsx
View file

@ -15,14 +15,14 @@ import {
useEuiTheme,
} from '@elastic/eui';
import { css } from '@emotion/react';
import type { GenerationInterval } from '@kbn/elastic-assistant-common';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import moment from 'moment';
import type { GenerationInterval } from '@kbn/elastic-assistant-common';
import { useKibana } from '../../../../common/lib/kibana';
import { getTimerPrefix } from './last_times_popover/helpers';
import { InfoPopoverBody } from '../info_popover_body';
import { getTimerPrefix } from './last_times_popover/helpers';
import * as i18n from '../translations';
const TEXT_COLOR = '#343741';
@ -69,7 +69,9 @@ const CountdownComponent: React.FC<Props> = ({ approximateFutureTime, connectorI
}, [approximateFutureTime]);
const iconInQuestionButton = useMemo(
() => <EuiButtonIcon iconType="questionInCircle" onClick={onClick} />,
() => (
<EuiButtonIcon aria-label={i18n.INFORMATION} iconType="questionInCircle" onClick={onClick} />
),
[onClick]
);

9
x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/loading_callout/translations.ts
View file

@ -43,7 +43,7 @@ export const AI_IS_CURRENTLY_ANALYZING_RANGE = ({
i18n.translate(
'xpack.securitySolution.attackDiscovery.loadingCallout.aiIsCurrentlyAnalyzingRangeLabel',
{
defaultMessage: `AI is analyzing up to {alertsCount} {alertsCount, plural, =1 {alert} other {alerts}} from {start} to {end} generate discoveries.`,
defaultMessage: `AI is analyzing up to {alertsCount} {alertsCount, plural, =1 {alert} other {alerts}} from {start} to {end} to generate discoveries.`,
values: { alertsCount, end, start },
}
);
@ -54,3 +54,10 @@ export const ATTACK_DISCOVERY_GENERATION_IN_PROGRESS = i18n.translate(
defaultMessage: 'Attack discovery in progress',
}
);
export const INFORMATION = i18n.translate(
'xpack.securitySolution.attackDiscovery.pages.loadingCallout.informationButtonLabel',
{
defaultMessage: 'Information',
}
);