mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
fix: Home > Cases - Dropdown label does not inform user of related results (#190400)
Closes: https://github.com/elastic/observability-accessibility/issues/134 ## Description `Home` > `Cases` - Dropdown label does not inform user of related results ### Steps to recreate Pre-requisitie: Screen reader is activated 1. Navigate to the `Serverless Observability Solution `instance. 2. Click `Cases` in Left Nav 3. Keyboard navigate to 'Severity', 'Status', et al. dropdowns Expected Result: -Screen reader reads dropdown header as well as number of entries in the dropdown, indicated by the number in the header Actual Result: -Screen reader reads only the category label ### What was changed: 1. Removed extra `aria-label` attribute. `EuiFilterButton` component is responsible for setting correct `aria-label` based on internal state. ### Screen <img width="1296" alt="image" src="https://github.com/user-attachments/assets/3051e71d-5890-44c4-a2b1-bd47a71edade">
This commit is contained in:
Alexey Antonov
GitHub
parent
2519c76cff
commit
abc8495337
4 changed files with 32 additions and 36 deletions
|
|
@ -28,7 +28,7 @@ describe('multi select filter', () => {
|
|||
|
||||
render(<MultiSelectFilter {...props} />);
|
||||
|
||||
userEvent.click(await screen.findByRole('button', { name: 'Tags' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-tags'));
|
||||
await waitForEuiPopoverOpen();
|
||||
|
||||
expect(await screen.findByText('4 options')).toBeInTheDocument();
|
||||
|
|
@ -52,7 +52,7 @@ describe('multi select filter', () => {
|
|||
|
||||
const { rerender } = render(<MultiSelectFilter {...props} />);
|
||||
|
||||
userEvent.click(await screen.findByRole('button', { name: 'Tags' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-tags'));
|
||||
await waitForEuiPopoverOpen();
|
||||
|
||||
expect(await screen.findByText('Limit reached')).toBeInTheDocument();
|
||||
|
|
@ -86,7 +86,7 @@ describe('multi select filter', () => {
|
|||
|
||||
const { rerender } = render(<MultiSelectFilter {...props} />);
|
||||
|
||||
userEvent.click(await screen.findByRole('button', { name: 'Tags' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-tags'));
|
||||
await waitForEuiPopoverOpen();
|
||||
|
||||
expect(screen.queryByText('Limit reached')).not.toBeInTheDocument();
|
||||
|
|
@ -123,7 +123,7 @@ describe('multi select filter', () => {
|
|||
|
||||
render(<MultiSelectFilter {...props} />);
|
||||
|
||||
userEvent.click(await screen.findByRole('button', { name: 'Tags' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-tags'));
|
||||
await waitForEuiPopoverOpen();
|
||||
|
||||
expect(await screen.findByText('Limit reached')).toBeInTheDocument();
|
||||
|
|
@ -174,7 +174,7 @@ describe('multi select filter', () => {
|
|||
};
|
||||
|
||||
render(<MultiSelectFilter {...props} />);
|
||||
userEvent.click(await screen.findByRole('button', { name: 'Tags' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-tags'));
|
||||
await waitForEuiPopoverOpen();
|
||||
expect((await screen.findAllByTestId(TEST_ID)).length).toBe(2);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -144,7 +144,6 @@ export const MultiSelectFilter = <T extends string, K extends string = string>({
|
|||
numFilters={showActiveOptionsNumber ? options.length : undefined}
|
||||
hasActiveFilters={showActiveOptionsNumber ? selectedOptionKeys.length > 0 : undefined}
|
||||
numActiveFilters={showActiveOptionsNumber ? selectedOptionKeys.length : undefined}
|
||||
aria-label={buttonLabel}
|
||||
>
|
||||
<EuiText size="s" className="eui-textTruncate">
|
||||
{buttonLabel}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ describe('StatusFilter', () => {
|
|||
|
||||
expect(await screen.findByTestId('options-filter-popover-button-status')).not.toBeDisabled();
|
||||
|
||||
userEvent.click(await screen.findByRole('button', { name: 'Status' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-status'));
|
||||
|
||||
await waitForEuiPopoverOpen();
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ describe('StatusFilter', () => {
|
|||
it('should call onStatusChanged when changing status to open', async () => {
|
||||
render(<StatusFilter {...defaultProps} />);
|
||||
|
||||
userEvent.click(await screen.findByRole('button', { name: 'Status' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-status'));
|
||||
await waitForEuiPopoverOpen();
|
||||
userEvent.click(await screen.findByRole('option', { name: LABELS.open }));
|
||||
|
||||
|
|
@ -68,7 +68,7 @@ describe('StatusFilter', () => {
|
|||
it('should not render hidden statuses', async () => {
|
||||
render(<StatusFilter {...defaultProps} hiddenStatuses={[CaseStatuses.closed]} />);
|
||||
|
||||
userEvent.click(await screen.findByRole('button', { name: 'Status' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-status'));
|
||||
|
||||
await waitForEuiPopoverOpen();
|
||||
|
||||
|
|
|
|||
|
|
@ -367,7 +367,7 @@ describe('CasesTableFilters ', () => {
|
|||
/>
|
||||
);
|
||||
|
||||
userEvent.click(screen.getByRole('button', { name: 'Solution' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-owner'));
|
||||
await waitForEuiPopoverOpen();
|
||||
|
||||
const allOptions = screen.getAllByRole('option');
|
||||
|
|
@ -490,7 +490,7 @@ describe('CasesTableFilters ', () => {
|
|||
it('should render its options', async () => {
|
||||
appMockRender.render(<CasesTableFilters {...props} />);
|
||||
|
||||
userEvent.click(await screen.findByRole('button', { name: 'Toggle' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-toggleKey'));
|
||||
await waitForEuiPopoverOpen();
|
||||
|
||||
const allOptions = screen.getAllByRole('option');
|
||||
|
|
@ -502,7 +502,7 @@ describe('CasesTableFilters ', () => {
|
|||
it('should call onFilterChange when On option changes', async () => {
|
||||
appMockRender.render(<CasesTableFilters {...props} />);
|
||||
|
||||
userEvent.click(await screen.findByRole('button', { name: 'Toggle' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-toggleKey'));
|
||||
await waitForEuiPopoverOpen();
|
||||
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-item-on'));
|
||||
|
|
@ -521,7 +521,7 @@ describe('CasesTableFilters ', () => {
|
|||
it('should call onFilterChange when Off option changes', async () => {
|
||||
appMockRender.render(<CasesTableFilters {...props} />);
|
||||
|
||||
userEvent.click(await screen.findByRole('button', { name: 'Toggle' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-toggleKey'));
|
||||
await waitForEuiPopoverOpen();
|
||||
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-item-off'));
|
||||
|
|
@ -552,7 +552,7 @@ describe('CasesTableFilters ', () => {
|
|||
};
|
||||
appMockRender.render(<CasesTableFilters {...customProps} />);
|
||||
|
||||
userEvent.click(await screen.findByRole('button', { name: 'Toggle' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-toggleKey'));
|
||||
await waitForEuiPopoverOpen();
|
||||
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-item-off'));
|
||||
|
|
@ -588,7 +588,7 @@ describe('CasesTableFilters ', () => {
|
|||
};
|
||||
appMockRender.render(<CasesTableFilters {...customProps} />);
|
||||
|
||||
userEvent.click(await screen.findByRole('button', { name: 'More' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-filters'));
|
||||
userEvent.click(await screen.findByRole('option', { name: 'Toggle' }));
|
||||
|
||||
expect(onFilterChanged).toHaveBeenCalledWith({
|
||||
|
|
@ -654,9 +654,7 @@ describe('CasesTableFilters ', () => {
|
|||
userEvent.click(screen.getByRole('button', { name: 'More' }));
|
||||
await waitFor(() => expect(screen.getAllByRole('option')).toHaveLength(5));
|
||||
|
||||
expect(screen.queryByRole('button', { name: 'Toggle' })).not.toBeInTheDocument();
|
||||
userEvent.click(screen.getByRole('option', { name: 'Toggle' }));
|
||||
expect(screen.getByRole('button', { name: 'Toggle' })).toBeInTheDocument();
|
||||
|
||||
const filterBar = await screen.findByTestId('cases-table-filters');
|
||||
const allFilters = within(filterBar).getAllByRole('button');
|
||||
|
|
@ -709,9 +707,8 @@ describe('CasesTableFilters ', () => {
|
|||
userEvent.click(screen.getByRole('button', { name: 'More' }));
|
||||
await waitFor(() => expect(screen.getAllByRole('option')).toHaveLength(5));
|
||||
|
||||
expect(screen.getByRole('button', { name: 'Status' })).toBeInTheDocument();
|
||||
expect(await screen.findByTestId('options-filter-popover-button-status')).toBeInTheDocument();
|
||||
userEvent.click(screen.getByRole('option', { name: 'Status' }));
|
||||
expect(screen.queryByRole('button', { name: 'Status' })).not.toBeInTheDocument();
|
||||
|
||||
const filterBar = await screen.findByTestId('cases-table-filters');
|
||||
const allFilters = within(filterBar).getAllByRole('button');
|
||||
|
|
@ -895,11 +892,11 @@ describe('CasesTableFilters ', () => {
|
|||
expect(allFilters[index]).toHaveTextContent(label);
|
||||
});
|
||||
|
||||
expect(screen.getByRole('button', { name: 'Status' })).toBeInTheDocument();
|
||||
userEvent.click(screen.getByRole('button', { name: 'More' }));
|
||||
expect(await screen.findByTestId('options-filter-popover-button-status')).toBeInTheDocument();
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-filters'));
|
||||
userEvent.click(await screen.findByRole('option', { name: 'Status' }));
|
||||
|
||||
userEvent.click(screen.getByRole('button', { name: 'More' }));
|
||||
userEvent.click(await screen.findByTestId('options-filter-popover-button-filters'));
|
||||
userEvent.click(await screen.findByRole('option', { name: 'Status' }));
|
||||
|
||||
allFilters = within(filterBar).getAllByRole('button');
|
||||
|
|
@ -1030,12 +1027,12 @@ describe('CasesTableFilters ', () => {
|
|||
appMockRender.render(<CasesTableFilters {...overrideProps} />);
|
||||
|
||||
const filters = [
|
||||
{ name: 'Status', active: 2 },
|
||||
{ name: 'Severity', active: 1 },
|
||||
{ name: 'Tags', active: 1 },
|
||||
{ name: 'Categories', active: 1 },
|
||||
{ name: 'Toggle', active: 1 },
|
||||
{ name: 'click to filter assignees', active: 1 },
|
||||
{ testId: 'options-filter-popover-button-status', active: 2 },
|
||||
{ testId: 'options-filter-popover-button-severity', active: 1 },
|
||||
{ testId: 'options-filter-popover-button-tags', active: 1 },
|
||||
{ testId: 'options-filter-popover-button-category', active: 1 },
|
||||
{ testId: 'options-filter-popover-button-toggle', active: 1 },
|
||||
{ testId: 'options-filter-popover-button-assignees', active: 1 },
|
||||
];
|
||||
|
||||
await waitForComponentToUpdate();
|
||||
|
|
@ -1045,7 +1042,7 @@ describe('CasesTableFilters ', () => {
|
|||
expect(totalFilters.length).toBe(filters.length + 1);
|
||||
|
||||
for (const filter of filters) {
|
||||
const button = await screen.findByRole('button', { name: filter.name });
|
||||
const button = await screen.findByTestId(filter.testId);
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(
|
||||
await within(button).findByLabelText(`${filter.active} active filters`)
|
||||
|
|
@ -1077,12 +1074,12 @@ describe('CasesTableFilters ', () => {
|
|||
appMockRender.render(<CasesTableFilters {...overrideProps} />);
|
||||
|
||||
const filters = [
|
||||
{ name: 'Status', active: 2 },
|
||||
{ name: 'Severity', active: 1 },
|
||||
{ name: 'Tags', active: 1 },
|
||||
{ name: 'Categories', active: 1 },
|
||||
{ name: 'Toggle', active: 1 },
|
||||
{ name: 'click to filter assignees', active: 1 },
|
||||
{ testId: 'options-filter-popover-button-status', active: 2 },
|
||||
{ testId: 'options-filter-popover-button-severity', active: 1 },
|
||||
{ testId: 'options-filter-popover-button-tags', active: 1 },
|
||||
{ testId: 'options-filter-popover-button-category', active: 1 },
|
||||
{ testId: 'options-filter-popover-button-toggle', active: 1 },
|
||||
{ testId: 'options-filter-popover-button-assignees', active: 1 },
|
||||
];
|
||||
|
||||
await waitForComponentToUpdate();
|
||||
|
|
@ -1092,7 +1089,7 @@ describe('CasesTableFilters ', () => {
|
|||
expect(totalFilters.length).toBe(filters.length + 1);
|
||||
|
||||
for (const filter of filters) {
|
||||
const button = await screen.findByRole('button', { name: filter.name });
|
||||
const button = await screen.findByTestId(filter.testId);
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(
|
||||
await within(button).findByLabelText(`${filter.active} active filters`)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue