* ✅ Add a11y test suite for Lens + some fixes * 🔧 Removed unused ids * 🐛 Fix component duplication via key prop * :white_mark_check: Add more a11y tests * ♻️ Restored back reorder id + fix multi layer duplicate ids * 🐛 Fix #88806 Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Marco Liberati
GitHub
parent
01e873b979
commit
97aef867ba
5 changed files with 156 additions and 9 deletions
|
|
@ -171,7 +171,7 @@ export function ReorderProvider({
|
|||
<EuiPortal>
|
||||
<EuiScreenReaderOnly>
|
||||
<div>
|
||||
<p id="lnsDragDrop-reorderAnnouncement" aria-live="assertive" aria-atomic={true}>
|
||||
<p aria-live="assertive" aria-atomic={true}>
|
||||
{state.keyboardReorderMessage}
|
||||
</p>
|
||||
<p id={`lnsDragDrop-reorderInstructions-${id}`}>
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@ export function LayerPanel(
|
|||
|
||||
<EuiSpacer size="m" />
|
||||
|
||||
{groups.map((group, groupIndex) => {
|
||||
{groups.map((group) => {
|
||||
const newId = generateId();
|
||||
const isMissing = !isEmptyLayer && group.required && group.accessors.length === 0;
|
||||
|
||||
|
|
@ -207,7 +207,7 @@ export function LayerPanel(
|
|||
fullWidth
|
||||
label={<div className="lnsLayerPanel__groupLabel">{group.groupLabel}</div>}
|
||||
labelType="legend"
|
||||
key={groupIndex}
|
||||
key={group.groupId}
|
||||
isInvalid={isMissing}
|
||||
error={
|
||||
isMissing ? (
|
||||
|
|
@ -222,7 +222,10 @@ export function LayerPanel(
|
|||
}
|
||||
>
|
||||
<>
|
||||
<ReorderProvider id={group.groupId} className={'lnsLayerPanel__group'}>
|
||||
<ReorderProvider
|
||||
id={`${layerId}-${group.groupId}`}
|
||||
className={'lnsLayerPanel__group'}
|
||||
>
|
||||
{group.accessors.map((accessorConfig) => {
|
||||
const accessor = accessorConfig.columnId;
|
||||
const { dragging } = dragDropContext;
|
||||
|
|
|
|||
|
|
@ -125,6 +125,12 @@ export class EditorFrameService {
|
|||
collectAsyncDefinitions(this.visualizations),
|
||||
]);
|
||||
|
||||
const unmount = () => {
|
||||
if (domElement) {
|
||||
unmountComponentAtNode(domElement);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
mount: async (
|
||||
element,
|
||||
|
|
@ -141,6 +147,9 @@ export class EditorFrameService {
|
|||
searchSessionId,
|
||||
}
|
||||
) => {
|
||||
if (domElement !== element) {
|
||||
unmount();
|
||||
}
|
||||
domElement = element;
|
||||
const firstDatasourceId = Object.keys(resolvedDatasources)[0];
|
||||
const firstVisualizationId = Object.keys(resolvedVisualizations)[0];
|
||||
|
|
@ -179,11 +188,7 @@ export class EditorFrameService {
|
|||
domElement
|
||||
);
|
||||
},
|
||||
unmount() {
|
||||
if (domElement) {
|
||||
unmountComponentAtNode(domElement);
|
||||
}
|
||||
},
|
||||
unmount,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
138
x-pack/test/accessibility/apps/lens.ts
Normal file
138
x-pack/test/accessibility/apps/lens.ts
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
/*
|
||||
* 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 XY 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('lens pie chart', async () => {
|
||||
await PageObjects.lens.switchToVisualization('pie');
|
||||
await a11y.testAppSnapshot();
|
||||
});
|
||||
|
||||
it('lens datatable', async () => {
|
||||
await PageObjects.lens.switchToVisualization('lnsDatatable');
|
||||
await a11y.testAppSnapshot();
|
||||
});
|
||||
|
||||
it('lens metric chart', async () => {
|
||||
await PageObjects.lens.switchToVisualization('lnsMetric');
|
||||
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();
|
||||
});
|
||||
|
||||
// Skip until https://github.com/elastic/kibana/issues/88661 gets closed
|
||||
it.skip('lens XY chart with multiple layers', async () => {
|
||||
await PageObjects.lens.createLayer();
|
||||
|
||||
await PageObjects.lens.switchToVisualization('area');
|
||||
await PageObjects.lens.configureDimension(
|
||||
{
|
||||
dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension',
|
||||
operation: 'terms',
|
||||
field: 'DestCityName',
|
||||
},
|
||||
1
|
||||
);
|
||||
|
||||
await PageObjects.lens.configureDimension(
|
||||
{
|
||||
dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension',
|
||||
operation: 'median',
|
||||
field: 'FlightTimeMin',
|
||||
},
|
||||
1
|
||||
);
|
||||
await a11y.testAppSnapshot();
|
||||
});
|
||||
|
||||
it('saves lens chart', async () => {
|
||||
await PageObjects.lens.save(lensChartName);
|
||||
await a11y.testAppSnapshot();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue