-
-
Notifications
You must be signed in to change notification settings - Fork 173
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(table): support w3c WAI-ARIA (a11y) pattern
- Loading branch information
Showing
6 changed files
with
321 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
216 changes: 216 additions & 0 deletions
216
packages/oruga/src/components/table/tests/table.axe.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,216 @@ | ||
| import { afterEach, describe, expect, test } from "vitest"; | ||
| import { enableAutoUnmount, mount } from "@vue/test-utils"; | ||
| import { axe } from "jest-axe"; | ||
|
|
||
| import OTable from "../Table.vue"; | ||
| import { nextTick } from "vue"; | ||
| import type { TableColumn } from "../types"; | ||
| import type { TableProps } from "../props"; | ||
|
|
||
| describe("Table axe tests", () => { | ||
| enableAutoUnmount(afterEach); | ||
|
|
||
| const data = [ | ||
| { | ||
| id: 1, | ||
| user: { first_name: "Jesse", last_name: "Simmons" }, | ||
| date: "2016/10/15 13:43:27", | ||
| gender: "Male", | ||
| }, | ||
| { | ||
| id: 2, | ||
| user: { first_name: "John", last_name: "Jacobs" }, | ||
| date: "2016/12/15 06:00:53", | ||
| gender: "Male", | ||
| }, | ||
| { | ||
| id: 3, | ||
| user: { first_name: "Tina", last_name: "Gilbert" }, | ||
| date: "2016/04/26 06:26:28", | ||
| gender: "Female", | ||
| }, | ||
| { | ||
| id: 4, | ||
| user: { first_name: "Clarence", last_name: "Flores" }, | ||
| date: "2016/04/10 10:28:46", | ||
| gender: "Male", | ||
| }, | ||
| { | ||
| id: 5, | ||
| user: { first_name: "Anne", last_name: "Lee" }, | ||
| date: "2016/12/06 14:38:38", | ||
| gender: "Female", | ||
| }, | ||
| { | ||
| id: 6, | ||
| user: { first_name: "Sara", last_name: "Armstrong" }, | ||
| date: "2016/09/23 18:50:04", | ||
| gender: "Female", | ||
| }, | ||
| { | ||
| id: 7, | ||
| user: { first_name: "Anthony", last_name: "Webb" }, | ||
| date: "2016/08/30 23:49:38", | ||
| gender: "Male", | ||
| }, | ||
| { | ||
| id: 8, | ||
| user: { first_name: "Andrew", last_name: "Greene" }, | ||
| date: "2016/11/20 14:57:47", | ||
| gender: "Male", | ||
| }, | ||
| { | ||
| id: 9, | ||
| user: { first_name: "Russell", last_name: "White" }, | ||
| date: "2016/07/13 09:29:49", | ||
| gender: "Male", | ||
| }, | ||
| { | ||
| id: 10, | ||
| user: { first_name: "Lori", last_name: "Hunter" }, | ||
| date: "2016/12/09 01:44:05", | ||
| gender: "Female", | ||
| }, | ||
| { | ||
| id: 11, | ||
| user: { first_name: "Ronald", last_name: "Wood" }, | ||
| date: "2016/12/04 02:23:48", | ||
| gender: "Male", | ||
| }, | ||
| { | ||
| id: 12, | ||
| user: { first_name: "Michael", last_name: "Harper" }, | ||
| date: "2016/07/27 13:28:15", | ||
| gender: "Male", | ||
| }, | ||
| { | ||
| id: 13, | ||
| user: { first_name: "George", last_name: "Dunn" }, | ||
| date: "2017/03/07 12:26:52", | ||
| gender: "Male", | ||
| }, | ||
| { | ||
| id: 14, | ||
| user: { first_name: "Eric", last_name: "Rogers" }, | ||
| date: "2016/06/07 05:41:52", | ||
| gender: "Male", | ||
| }, | ||
| { | ||
| id: 15, | ||
| user: { first_name: "Juan", last_name: "Meyer" }, | ||
| date: "2017/02/01 04:56:34", | ||
| gender: "Male", | ||
| }, | ||
| ]; | ||
|
|
||
| const columns: TableColumn<(typeof data)[number]>[] = [ | ||
| { | ||
| field: "id", | ||
| label: "ID", | ||
| width: "40", | ||
| numeric: true, | ||
| sortable: true, | ||
| }, | ||
| { | ||
| field: "user.first_name", | ||
| label: "First Name", | ||
| sortable: true, | ||
| }, | ||
| { | ||
| field: "user.last_name", | ||
| label: "Last Name", | ||
| sortable: true, | ||
| }, | ||
| { | ||
| field: "date", | ||
| label: "Date", | ||
| position: "centered", | ||
| sortable: true, | ||
| formatter: (v): string => new Date(String(v)).toLocaleDateString(), | ||
| }, | ||
| { | ||
| field: "gender", | ||
| label: "Gender", | ||
| sortable: true, | ||
| }, | ||
| ]; | ||
|
|
||
| const a11yCases: { | ||
| title: string; | ||
| props: TableProps<(typeof data)[number]>; | ||
| }[] = [ | ||
| { | ||
| title: "axe table - base case", | ||
| props: { data, columns }, | ||
| }, | ||
| { | ||
| title: "axe table - bordered case", | ||
| props: { data, columns, bordered: true }, | ||
| }, | ||
| { | ||
| title: "axe table - striped case", | ||
| props: { data, columns, striped: true }, | ||
| }, | ||
| { | ||
| title: "axe table - narrowed case", | ||
| props: { data, columns, narrowed: true }, | ||
| }, | ||
| { | ||
| title: "axe table - hoverable case", | ||
| props: { data, columns, hoverable: true }, | ||
| }, | ||
| { | ||
| title: "axe table - selectable case", | ||
| props: { data, columns, selectable: true }, | ||
| }, | ||
| { | ||
| title: "axe table - checkable case", | ||
| props: { | ||
| data, | ||
| columns, | ||
| checkable: true, | ||
| stickyCheckbox: true, | ||
| headerCheckable: true, | ||
| }, | ||
| }, | ||
| { | ||
| title: "axe table - draggable case", | ||
| props: { data, columns, draggable: true, draggableColumn: true }, | ||
| }, | ||
| { | ||
| title: "axe table - scrollable case", | ||
| props: { | ||
| data, | ||
| columns: [...columns, ...columns, ...columns], | ||
| scrollable: true, | ||
| }, | ||
| }, | ||
| { | ||
| title: "axe table - detailed case", | ||
| props: { data, columns, detailed: true, showDetailIcon: true }, | ||
| }, | ||
| { | ||
| title: "axe table - pagination case", | ||
| props: { | ||
| data, | ||
| columns, | ||
| paginated: true, | ||
| perPage: 2, | ||
| currentPage: 2, | ||
| }, | ||
| }, | ||
| { | ||
| title: "axe table - loading case", | ||
| props: { data, columns, loading: true }, | ||
| }, | ||
| ]; | ||
|
|
||
| test.each(a11yCases)("$title", async ({ props }) => { | ||
| const wrapper = mount<typeof OTable<(typeof data)[number]>>(OTable, { | ||
| props: props, | ||
| attachTo: document.body, | ||
| }); | ||
| await nextTick(); // await child component rendering | ||
| expect(await axe(wrapper.element)).toHaveNoViolations(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters