Skip to content

Commit 51b6623

Browse files
RaushenRaushen
authored
🎴 CardView: a11y (DevExpress#29884)
1 parent a76fa9d commit 51b6623

File tree

65 files changed

+849
-30
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+849
-30
lines changed

‎apps/demos/testing/common.test.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,6 @@ const getTestSpecificSkipRules = (testName) => {
5757
return ['empty-table-header'];
5858
case 'Localization-UsingGlobalize':
5959
return ['label'];
60-
// TODO CardView a11y: remove after a11y completion for CardView
61-
case 'CardView-Overview':
62-
return ['aria-toggle-field-name'];
6360
default:
6461
return [];
6562
}

‎apps/react-storybook/stories/card_view/CardView.stories.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -536,3 +536,58 @@ export const ColumnChooserDragAndDropModeStory: Story = {
536536
}
537537
}
538538

539+
export const AccessibilityStory: Story = {
540+
...DefaultMode,
541+
args: {
542+
...DefaultMode.args,
543+
544+
// Sorting
545+
'sorting.mode': 'multiple',
546+
547+
// Selection
548+
keyExpr: 'id',
549+
'selection.mode': 'multiple',
550+
'selection.showCheckBoxesMode': 'always',
551+
'selection.allowSelectAll': false,
552+
553+
// Search
554+
'searchPanel.highlightCaseSensitive': false,
555+
'searchPanel.highlightSearchText': true,
556+
'searchPanel.text': '',
557+
'searchPanel.visible': true,
558+
'searchPanel.placeholder': 'Search...',
559+
'searchPanel.searchVisibleColumnsOnly': false,
560+
'searchPanel.width': 160,
561+
562+
// HeaderFilter
563+
'headerFilter.visible': true,
564+
headerFilter: {
565+
width: 252,
566+
height: 325,
567+
allowSelectAll: true,
568+
search: {
569+
enabled: false,
570+
timeout: 500,
571+
mode: 'contains',
572+
editorOptions: {},
573+
},
574+
texts: {
575+
emptyValue: 'empty',
576+
ok: 'ok',
577+
cancel: 'cancel',
578+
},
579+
},
580+
581+
// Editing
582+
editing: {
583+
allowAdding: true,
584+
allowEditing: true,
585+
allowUpdating: true,
586+
allowDeleting: true,
587+
popup: {
588+
title: 'Employee Info',
589+
showTitle: true,
590+
},
591+
},
592+
}
593+
}

‎e2e/testcafe-devextreme/tests/cardView/columnChooser/visual.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
33
import url from '../../../helpers/getPageUrl';
44
import { testScreenshot } from '../../../helpers/themeUtils';
55
import { createWidget } from '../../../helpers/createWidget';
6+
import { a11yCheck } from '../../../helpers/accessibility/utils';
67

78
fixture`CardView - ColumnChooser.Visual`
89
.page(url(__dirname, '../../container.html'));
@@ -21,6 +22,8 @@ test('column chooser in \'select\' mode', async (t) => {
2122
await t
2223
.expect(compareResults.isValid())
2324
.ok(compareResults.errorMessages());
25+
26+
await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
2427
}).before(async () => createWidget('dxCardView', {
2528
columnChooser: {
2629
enabled: true,
@@ -54,6 +57,11 @@ test('column chooser in \'dragAndDrop\' mode', async (t) => {
5457
await t
5558
.expect(compareResults.isValid())
5659
.ok(compareResults.errorMessages());
60+
61+
const a11yCheckConfig = {
62+
rules: { 'color-contrast': { enabled: false } },
63+
};
64+
await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
5765
}).before(async () => createWidget('dxCardView', {
5866
columnChooser: {
5967
enabled: true,

‎e2e/testcafe-devextreme/tests/cardView/columnSortable/visual.ts‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,17 @@ import { createWidget } from '../../../helpers/createWidget';
44
import url from '../../../helpers/getPageUrl';
55
import { getColumnItem, triggerDragEnd, triggerDragStart } from './utils';
66
import { testScreenshot } from '../../../helpers/themeUtils';
7+
import { a11yCheck } from '../../../helpers/accessibility/utils';
78

89
fixture.disablePageReloads`CardView - ColumnSortable.Visual`
910
.page(url(__dirname, '../../container.html'));
1011

12+
const CARD_VIEW_SELECTOR = '#container';
13+
1114
test('headerPanel dragging column when it has sorting and headerFilter', async (t) => {
1215
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
1316

14-
const cardView = new CardView('#container');
17+
const cardView = new CardView(CARD_VIEW_SELECTOR);
1518
const columnElement = cardView.getHeaders().getHeaderItemNth(0).element;
1619

1720
await triggerDragStart(columnElement);
@@ -21,6 +24,11 @@ test('headerPanel dragging column when it has sorting and headerFilter', async (
2124
await t
2225
.expect(compareResults.isValid())
2326
.ok(compareResults.errorMessages());
27+
28+
const a11yCheckConfig = {
29+
rules: { 'color-contrast': { enabled: false } },
30+
};
31+
await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
2432
}).before(async () => createWidget('dxCardView', {
2533
allowColumnReordering: true,
2634
headerFilter: {
@@ -36,7 +44,7 @@ test('headerPanel dragging column when it has sorting and headerFilter', async (
3644
test('dropzone appear in headerPanel when drag from columnChooser a column', async (t) => {
3745
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
3846

39-
const cardView = new CardView('#container');
47+
const cardView = new CardView(CARD_VIEW_SELECTOR);
4048
const columnElement = getColumnItem(cardView, 0, 'columnChooser');
4149

4250
await cardView.apiShowColumnChooser();
@@ -52,6 +60,11 @@ test('dropzone appear in headerPanel when drag from columnChooser a column', asy
5260
await t
5361
.expect(compareResults.isValid())
5462
.ok(compareResults.errorMessages());
63+
64+
const a11yCheckConfig = {
65+
rules: { 'color-contrast': { enabled: false } },
66+
};
67+
await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
5568
}).before(async () => createWidget('dxCardView', {
5669
allowColumnReordering: true,
5770
height: 600,
@@ -63,7 +76,7 @@ test('dropzone appear in headerPanel when drag from columnChooser a column', asy
6376
test('dropzone appears in headerPanel when drag from columnChooser a column with allowReordering: false', async (t) => {
6477
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
6578

66-
const cardView = new CardView('#container');
79+
const cardView = new CardView(CARD_VIEW_SELECTOR);
6780
const columnElement = getColumnItem(cardView, 0, 'columnChooser');
6881

6982
await cardView.apiShowColumnChooser();
@@ -79,6 +92,8 @@ test('dropzone appears in headerPanel when drag from columnChooser a column with
7992
await t
8093
.expect(compareResults.isValid())
8194
.ok(compareResults.errorMessages());
95+
96+
await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
8297
}).before(async () => createWidget('dxCardView', {
8398
allowColumnReordering: true,
8499
height: 600,

‎e2e/testcafe-devextreme/tests/cardView/cover.visual.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,24 @@ import CardView from 'devextreme-testcafe-models/cardView';
33
import url from '../../helpers/getPageUrl';
44
import { createWidget } from '../../helpers/createWidget';
55
import { testScreenshot } from '../../helpers/themeUtils';
6+
import { a11yCheck } from '../../helpers/accessibility/utils';
67

78
fixture.disablePageReloads`CardView - HeaderPanel`
89
.page(url(__dirname, '../container.html'));
910

11+
const CARD_VIEW_SELECTOR = '#container';
12+
1013
test('default render', async (t) => {
11-
const cardView = new CardView('#container');
14+
const cardView = new CardView(CARD_VIEW_SELECTOR);
1215
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
1316

1417
await testScreenshot(t, takeScreenshot, 'cover-default-render.png', { element: cardView.element });
1518

1619
await t
1720
.expect(compareResults.isValid())
1821
.ok(compareResults.errorMessages());
22+
23+
await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
1924
}).before(async () => createWidget('dxCardView', {
2025
width: 1000,
2126
height: 600,

‎e2e/testcafe-devextreme/tests/cardView/editing.visual.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@ import { createWidget } from '../../helpers/createWidget';
55
import { columns, data } from './helpers/simpleArrayData';
66
import { testScreenshot } from '../../helpers/themeUtils';
77
import { safeSizeTest } from '../../helpers/safeSizeTest';
8+
import { a11yCheck } from '../../helpers/accessibility/utils';
89

910
fixture.disablePageReloads`CardView - Editing`
1011
.page(url(__dirname, '../container.html'));
1112

13+
const CARD_VIEW_SELECTOR = '#container';
14+
1215
const baseConfig = {
1316
width: 1000,
1417
height: 600,
@@ -23,18 +26,20 @@ const baseConfig = {
2326
};
2427

2528
safeSizeTest('default render', async (t) => {
26-
const cardView = new CardView('#container');
29+
const cardView = new CardView(CARD_VIEW_SELECTOR);
2730
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
2831

2932
await testScreenshot(t, takeScreenshot, 'editing-default-render.png', { element: cardView.element });
3033

3134
await t
3235
.expect(compareResults.isValid())
3336
.ok(compareResults.errorMessages());
37+
38+
await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
3439
}, [1100, 700]).before(async () => createWidget('dxCardView', baseConfig));
3540

3641
safeSizeTest('render of add card popup', async (t) => {
37-
const cardView = new CardView('#container');
42+
const cardView = new CardView(CARD_VIEW_SELECTOR);
3843
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
3944

4045
await t.click(cardView.getToolbar().getAddButton().element);
@@ -43,10 +48,12 @@ safeSizeTest('render of add card popup', async (t) => {
4348
await t
4449
.expect(compareResults.isValid())
4550
.ok(compareResults.errorMessages());
51+
52+
await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
4653
}, [1100, 700]).before(async () => createWidget('dxCardView', baseConfig));
4754

4855
safeSizeTest('render of edit card popup', async (t) => {
49-
const cardView = new CardView('#container');
56+
const cardView = new CardView(CARD_VIEW_SELECTOR);
5057
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
5158

5259
await t.click(cardView.getCard(0).getToolbarItem(0));
@@ -55,4 +62,6 @@ safeSizeTest('render of edit card popup', async (t) => {
5562
await t
5663
.expect(compareResults.isValid())
5764
.ok(compareResults.errorMessages());
65+
66+
await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
5867
}, [1100, 700]).before(async () => createWidget('dxCardView', baseConfig));

‎e2e/testcafe-devextreme/tests/cardView/filterPanel/behavior.themes.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@ import url from '../../../helpers/getPageUrl';
44
import { createWidget } from '../../../helpers/createWidget';
55
import { baseConfig } from './helpers/baseConfig';
66
import { testScreenshot } from '../../../helpers/themeUtils';
7+
import { a11yCheck } from '../../../helpers/accessibility/utils';
78

89
fixture.disablePageReloads`CardView - FilterPanel Appearance`
910
.page(url(__dirname, '../../container.html'));
1011

12+
const CARD_VIEW_SELECTOR = '#container';
13+
1114
test('FilterPanel and FilterBuilderPopup screenshots', async (t) => {
12-
const cardView = new CardView('#container');
15+
const cardView = new CardView(CARD_VIEW_SELECTOR);
1316
const popup = cardView.getFilterPanel().getFilterBuilderPopup();
1417
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
1518

@@ -22,6 +25,11 @@ test('FilterPanel and FilterBuilderPopup screenshots', async (t) => {
2225
await t
2326
.expect(compareResults.isValid())
2427
.ok(compareResults.errorMessages());
28+
29+
const a11yCheckConfig = {
30+
rules: { 'color-contrast': { enabled: false } },
31+
};
32+
await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
2533
}).before(async () => {
2634
await createWidget('dxCardView', {
2735
...baseConfig,

‎e2e/testcafe-devextreme/tests/cardView/headerFilter/visual.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
33
import url from '../../../helpers/getPageUrl';
44
import { createWidget } from '../../../helpers/createWidget';
55
import { testScreenshot } from '../../../helpers/themeUtils';
6+
import { a11yCheck } from '../../../helpers/accessibility/utils';
67

78
fixture`HeaderFilter.Visual`
89
.page(url(__dirname, '../../container.html'));
@@ -24,6 +25,8 @@ test('popup with list', async (t) => {
2425
await t
2526
.expect(compareResults.isValid())
2627
.ok(compareResults.errorMessages());
28+
29+
await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
2730
}).before(async () => createWidget('dxCardView', {
2831
dataSource: [
2932
{ A: 'A_0', B: 'B_0', C: 'C_0' },
@@ -54,6 +57,8 @@ test('popup with search', async (t) => {
5457
await t
5558
.expect(compareResults.isValid())
5659
.ok(compareResults.errorMessages());
60+
61+
await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
5762
}).before(async () => createWidget('dxCardView', {
5863
dataSource: [
5964
{ A: 'A_0', B: 'B_0', C: 'C_0' },
@@ -87,6 +92,8 @@ test('popup with tree', async (t) => {
8792
await t
8893
.expect(compareResults.isValid())
8994
.ok(compareResults.errorMessages());
95+
96+
await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
9097
}).before(async () => createWidget('dxCardView', {
9198
dataSource: [
9299
{ A: '2024-01-01', B: 'B_0', C: 'C_0' },

‎e2e/testcafe-devextreme/tests/cardView/headerPanel/visual.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ fixture`CardView - HeaderPanel`
1111
const CARD_VIEW_SELECTOR = '#container';
1212
const HEADER_PANEL_SELECTOR = `${CARD_VIEW_SELECTOR} .dx-cardview-headers`;
1313
const a11yCheckConfig = {
14-
rules: { 'color-contrast': { enabled: true } },
14+
rules: { 'color-contrast': { enabled: false } },
1515
};
1616

1717
const visualTest = (etalonName: string) => async (t: TestController) => {
@@ -196,7 +196,7 @@ test(
196196

197197
test('headerPanel column chooser link opens column chooser on click', async (t) => {
198198
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
199-
const cardView = new CardView('#container');
199+
const cardView = new CardView(CARD_VIEW_SELECTOR);
200200
const headerPanel = cardView.getHeaderPanel();
201201

202202
await t.click(headerPanel.getColumnChooserLink());
@@ -206,6 +206,8 @@ test('headerPanel column chooser link opens column chooser on click', async (t)
206206
await t
207207
.expect(compareResults.isValid())
208208
.ok(compareResults.errorMessages());
209+
210+
await a11yCheck(t, a11yCheckConfig, HEADER_PANEL_SELECTOR);
209211
}).before(async () => createWidget('dxCardView', {
210212
height: 600,
211213
columns: [

‎e2e/testcafe-devextreme/tests/cardView/noData.visual.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,24 @@ import CardView from 'devextreme-testcafe-models/cardView';
33
import url from '../../helpers/getPageUrl';
44
import { createWidget } from '../../helpers/createWidget';
55
import { testScreenshot } from '../../helpers/themeUtils';
6+
import { a11yCheck } from '../../helpers/accessibility/utils';
67

78
fixture.disablePageReloads`CardView - HeaderPanel`
89
.page(url(__dirname, '../container.html'));
910

11+
const CARD_VIEW_SELECTOR = '#container';
12+
1013
test('default render', async (t) => {
11-
const cardView = new CardView('#container');
14+
const cardView = new CardView(CARD_VIEW_SELECTOR);
1215
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
1316

1417
await testScreenshot(t, takeScreenshot, 'content-no-data.png', { element: cardView.element });
1518

1619
await t
1720
.expect(compareResults.isValid())
1821
.ok(compareResults.errorMessages());
22+
23+
await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
1924
}).before(async () => createWidget('dxCardView', {
2025
width: 1000,
2126
height: 600,

0 commit comments

Comments
 (0)