Skip to content

Commit

Permalink
[Security Solution] [Attack discovery] Adds missing aria-label for th…
Browse files Browse the repository at this point in the history
…e information button icon (elastic#206886)

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

This PR fixes an a11y issue reported in <elastic#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: <elastic#206353>
  • Loading branch information
andrew-goldstein authored Jan 16, 2025
1 parent aaf7b9e commit 93d1134
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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[] = [
Expand Down Expand Up @@ -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();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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]
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
}
);
Expand All @@ -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',
}
);

0 comments on commit 93d1134

Please sign in to comment.