Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Lens] Add a11y test suite #88623

Merged
merged 8 commits into from
Jan 20, 2021
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion x-pack/plugins/lens/public/drag_drop/providers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,11 @@ export function ReorderProvider({
<EuiPortal>
<EuiScreenReaderOnly>
<div>
<p id="lnsDragDrop-reorderAnnouncement" aria-live="assertive" aria-atomic={true}>
<p
id={`lnsDragDrop-reorderAnnouncement-${id}`}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 things here:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at the debug page for the failure, there's effectively a duplication of divs, hence the id duplication.
Removing the id from the div will certainly fix the test, but there's still a problem with having twice as much divs with the same content on the page. I'll try to fix this as well.

aria-live="assertive"
aria-atomic={true}
>
{state.keyboardReorderMessage}
</p>
<p id={`lnsDragDrop-reorderInstructions-${id}`}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't merge this because this id is referenced from the buttons:

aria-describedby={`lnsDragDrop-reorderInstructions-${groupId}`}

We need it to tie the message and the button together

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I thought I searched for it, but maybe I was wrong with the other one. Will reintroduce it back! 👍

Expand Down
98 changes: 98 additions & 0 deletions x-pack/test/accessibility/apps/lens.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { FtrProviderContext } from '../ftr_provider_context';

export default function ({ getService, getPageObjects }: FtrProviderContext) {
const PageObjects = getPageObjects(['common', 'visualize', 'header', 'home', 'settings', 'lens']);
const a11y = getService('a11y');
const testSubjects = getService('testSubjects');
const listingTable = getService('listingTable');

describe('Lens', () => {
const lensChartName = 'MyLensChart';
before(async () => {
await PageObjects.common.navigateToUrl('home', '/tutorial_directory/sampleData', {
useActualUrl: true,
});
await PageObjects.home.addSampleDataSet('flights');
});

after(async () => {
await PageObjects.common.navigateToApp('visualize');
await listingTable.searchForItemWithName(lensChartName);
await listingTable.checkListingSelectAllCheckbox();
await listingTable.clickDeleteSelected();
await PageObjects.common.clickConfirmOnModal();
});

it('lens', async () => {
await PageObjects.visualize.navigateToNewVisualization();
await PageObjects.visualize.clickVisType('lens');
await a11y.testAppSnapshot();
});

it('lens chart', async () => {
await PageObjects.visualize.navigateToNewVisualization();
await PageObjects.visualize.clickVisType('lens');

await PageObjects.lens.configureDimension({
dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension',
operation: 'date_histogram',
field: 'timestamp',
});

await PageObjects.lens.configureDimension({
dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension',
operation: 'avg',
field: 'AvgTicketPrice',
});

await a11y.testAppSnapshot();
});

it('dimension configuration panel', async () => {
await PageObjects.visualize.navigateToNewVisualization();
await PageObjects.visualize.clickVisType('lens');

await PageObjects.lens.openDimensionEditor('lnsXY_xDimensionPanel > lns-empty-dimension');
await a11y.testAppSnapshot();

await PageObjects.lens.closeDimensionEditor();
await PageObjects.lens.openDimensionEditor('lnsXY_yDimensionPanel > lns-empty-dimension');
await a11y.testAppSnapshot();

await PageObjects.lens.closeDimensionEditor();
});

it('change chart type', async () => {
await PageObjects.lens.switchToVisualization('line');
await a11y.testAppSnapshot();
});

it('change chart type via suggestions', async () => {
await PageObjects.lens.configureDimension({
dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension',
operation: 'date_histogram',
field: 'timestamp',
});

await PageObjects.lens.configureDimension({
dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension',
operation: 'avg',
field: 'AvgTicketPrice',
});

await testSubjects.click('lnsSuggestion-barChart > lnsSuggestion');
await a11y.testAppSnapshot();
});

it('saves lens chart', async () => {
await PageObjects.lens.save(lensChartName);
await a11y.testAppSnapshot();
});
});
}
1 change: 1 addition & 0 deletions x-pack/test/accessibility/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
require.resolve('./apps/kibana_overview'),
require.resolve('./apps/ingest_node_pipelines'),
require.resolve('./apps/ml'),
require.resolve('./apps/lens'),
],

pageObjects,
Expand Down