diff --git a/tests/minimal-data-grid/data/references.csv b/tests/minimal-data-grid/data/references.csv index e33739ea8..6eb90c232 100644 --- a/tests/minimal-data-grid/data/references.csv +++ b/tests/minimal-data-grid/data/references.csv @@ -2,7 +2,7 @@ refId,value author,Isabel Del Castillo authorEmail,isa.delcastillo5@gmail.com title,Data Grid Example 1: Minimal Data Grid -reference,reference/2021-3-8_151542/dataGrids.html +reference,reference/2022-4-27_115334/dataGrids.html designPattern,https://w3c.github.io/aria-practices/#grid example,https://w3c.github.io/aria-practices/examples/grid/dataGrids.html grid,https://w3c.github.io/aria/#grid diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/css/dataGrids.css b/tests/minimal-data-grid/reference/2022-4-27_115334/css/dataGrids.css similarity index 82% rename from tests/minimal-data-grid/reference/2021-3-8_151542/css/dataGrids.css rename to tests/minimal-data-grid/reference/2022-4-27_115334/css/dataGrids.css index 49ef67dd4..6955a5a4f 100644 --- a/tests/minimal-data-grid/reference/2021-3-8_151542/css/dataGrids.css +++ b/tests/minimal-data-grid/reference/2022-4-27_115334/css/dataGrids.css @@ -45,6 +45,20 @@ position: relative; } +.edit-text-button::after { + background-image: url("../imgs/pencil-icon.png"); + background-position: center; + background-repeat: no-repeat; + background-size: 44px; + content: " "; + height: 17px; + opacity: 0.6; + position: absolute; + right: -24px; + top: 0; + width: 20px; +} + .edit-text-button:hover, .edit-text-button:focus { color: black; diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.html b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.html similarity index 96% rename from tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.html rename to tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.html index b8ea71e73..91c592fb8 100644 --- a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.html +++ b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.html @@ -1,105 +1,105 @@ - - - - -Data Grid Examples - - - - - - - - -
-

Data Grid Examples

-

- Following is an example implementation of the - design pattern for grid - that demonstrate the keyboard interactions and ARIA features that enable accessible, interactive presentation - of tabular information. The following grid presents a set of financial - transactions via a simple grid with minimum ARIA markup and keyboard support. -

-
-

Examples

-
-
-

Example 1: Minimal Data Grid

-
- -
-

Transactions January 1 through January 6

- Navigate forwards from here - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DateTypeDescriptionAmountBalance
01-Jan-16Deposit - Cash Deposit - $1,000,000.00$1,000,000.00
02-Jan-16Debit - Down Town Grocery - $250.00$999,750.00
03-Jan-16Debit - Hot Coffee - $9.00$999,741.00
04-Jan-16Debit - The Filling Station - $88.00$999,653.00
05-Jan-16Debit - Tinker's Hardware - $3,421.00$996,232.00
06-Jan-16Debit - Cutey's Salon - $700.00$995,532.00
- Navigate backwards from here -
- -
-
- - -
- - + + + + +Data Grid Examples + + + + + + + + +
+

Data Grid Examples

+

+ Following is an example implementation of the + design pattern for grid + that demonstrate the keyboard interactions and ARIA features that enable accessible, interactive presentation + of tabular information. The following grid presents a set of financial + transactions via a simple grid with minimum ARIA markup and keyboard support. +

+
+

Examples

+
+
+

Example 1: Minimal Data Grid

+
+ +
+

Transactions January 1 through January 6

+ Navigate forwards from here + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DateTypeDescriptionAmountBalance
01-Jan-16Deposit + Cash Deposit + $1,000,000.00$1,000,000.00
02-Jan-16Debit + Down Town Grocery + $250.00$999,750.00
03-Jan-16Debit + Hot Coffee + $9.00$999,741.00
04-Jan-16Debit + The Filling Station + $88.00$999,653.00
05-Jan-16Debit + Tinker's Hardware + $3,421.00$996,232.00
06-Jan-16Debit + Cutey's Salon + $700.00$995,532.00
+ Navigate backwards from here +
+ +
+
+ + +
+ + diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusAfterGrid.html b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusAfterGrid.html similarity index 99% rename from tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusAfterGrid.html rename to tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusAfterGrid.html index 32d4eb995..3b32f2684 100644 --- a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusAfterGrid.html +++ b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusAfterGrid.html @@ -1,7 +1,7 @@ - + Data Grid Examples diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusBeforeGrid.html b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusBeforeGrid.html similarity index 99% rename from tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusBeforeGrid.html rename to tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusBeforeGrid.html index c9e7dbb5b..0a9cbb7d1 100644 --- a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusBeforeGrid.html +++ b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusBeforeGrid.html @@ -1,7 +1,7 @@ - + Data Grid Examples diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnFifthDataCell.html b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnFifthDataCell.html similarity index 99% rename from tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnFifthDataCell.html rename to tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnFifthDataCell.html index 8b2f91142..e23ae84a2 100644 --- a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnFifthDataCell.html +++ b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnFifthDataCell.html @@ -1,7 +1,7 @@ - + Data Grid Examples diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnFirstDataCell.html b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnFirstDataCell.html similarity index 99% rename from tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnFirstDataCell.html rename to tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnFirstDataCell.html index 3e0002ff5..f855a2532 100644 --- a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnFirstDataCell.html +++ b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnFirstDataCell.html @@ -1,7 +1,7 @@ - + Data Grid Examples diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnFirstLinkedCell.html b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnFirstLinkedCell.html similarity index 99% rename from tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnFirstLinkedCell.html rename to tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnFirstLinkedCell.html index c9eb17d00..d3e831c64 100644 --- a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnFirstLinkedCell.html +++ b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnFirstLinkedCell.html @@ -1,7 +1,7 @@ - + Data Grid Examples diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnFourthDataCell.html b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnFourthDataCell.html similarity index 99% rename from tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnFourthDataCell.html rename to tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnFourthDataCell.html index b0d2ab7b9..9a0c559db 100644 --- a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnFourthDataCell.html +++ b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnFourthDataCell.html @@ -1,7 +1,7 @@ - + Data Grid Examples diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnLastDataCell.html b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnLastDataCell.html similarity index 99% rename from tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnLastDataCell.html rename to tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnLastDataCell.html index 440ac7ef4..4699595a5 100644 --- a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnLastDataCell.html +++ b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnLastDataCell.html @@ -1,7 +1,7 @@ - + Data Grid Examples diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnSecondDataCell.html b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnSecondDataCell.html similarity index 99% rename from tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnSecondDataCell.html rename to tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnSecondDataCell.html index be932a38b..d2e9bfee7 100644 --- a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnSecondDataCell.html +++ b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnSecondDataCell.html @@ -1,7 +1,7 @@ - + Data Grid Examples diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnSecondLinkedCell.html b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnSecondLinkedCell.html similarity index 99% rename from tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnSecondLinkedCell.html rename to tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnSecondLinkedCell.html index 40ab3a736..3af2f1ec1 100644 --- a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnSecondLinkedCell.html +++ b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnSecondLinkedCell.html @@ -1,7 +1,7 @@ - + Data Grid Examples diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnSixthDataCell.html b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnSixthDataCell.html similarity index 99% rename from tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnSixthDataCell.html rename to tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnSixthDataCell.html index 1a94d815e..578c1a58a 100644 --- a/tests/minimal-data-grid/reference/2021-3-8_151542/dataGrids.setFocusOnSixthDataCell.html +++ b/tests/minimal-data-grid/reference/2022-4-27_115334/dataGrids.setFocusOnSixthDataCell.html @@ -1,7 +1,7 @@ - + Data Grid Examples diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/imgs/black_keys.png b/tests/minimal-data-grid/reference/2022-4-27_115334/imgs/black_keys.png similarity index 100% rename from tests/minimal-data-grid/reference/2021-3-8_151542/imgs/black_keys.png rename to tests/minimal-data-grid/reference/2022-4-27_115334/imgs/black_keys.png diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/js/dataGrid.js b/tests/minimal-data-grid/reference/2022-4-27_115334/js/dataGrid.js similarity index 99% rename from tests/minimal-data-grid/reference/2021-3-8_151542/js/dataGrid.js rename to tests/minimal-data-grid/reference/2022-4-27_115334/js/dataGrid.js index 44894e2ea..375fd4063 100644 --- a/tests/minimal-data-grid/reference/2021-3-8_151542/js/dataGrid.js +++ b/tests/minimal-data-grid/reference/2022-4-27_115334/js/dataGrid.js @@ -42,14 +42,12 @@ aria.CSSClass = { /** * @class - * * @description * Grid object representing the state and interactions for a grid widget * * Assumptions: * All focusable cells initially have tabindex="-1" * Produces a fully filled in mxn grid (with no holes) - * * @param gridNode * The DOM node pointing to the grid */ @@ -130,13 +128,10 @@ aria.Grid.prototype.setupFocusGrid = function () { /** * @description * If possible, set focus pointer to the cell with the specified coordinates - * * @param row * The index of the cell's row - * * @param col * The index of the cell's column - * * @returns {boolean} * Returns whether or not the focus could be set on the cell. */ @@ -172,10 +167,8 @@ aria.Grid.prototype.setFocusPointer = function (row, col) { /** * @param row * The index of the cell's row - * * @param col * The index of the cell's column - * * @returns {boolean} * Returns whether or not the coordinates are within the grid's boundaries. */ @@ -195,10 +188,8 @@ aria.Grid.prototype.isValidCell = function (row, col) { /** * @param row * The index of the cell's row - * * @param col * The index of the cell's column - * * @returns {boolean} * Returns whether or not the cell has been hidden. */ @@ -261,10 +252,8 @@ aria.Grid.prototype.registerEvents = function () { /** * @description * Focus on the cell in the specified row and column - * * @param row * The index of the cell's row - * * @param col * The index of the cell's column */ @@ -293,7 +282,6 @@ aria.Grid.prototype.hideKeysIndicator = function () { * @description * Triggered on keydown. Checks if an arrow key was pressed, and (if possible) * moves focus to the next valid cell in the direction of the arrow key. - * * @param event * Keydown event */ @@ -363,7 +351,6 @@ aria.Grid.prototype.checkFocusChange = function (event) { /** * @description * Reset focused row and col if it doesn't match focusedRow and focusedCol - * * @param focusedTarget * Element that is currently focused by browser */ @@ -390,7 +377,6 @@ aria.Grid.prototype.findFocusedItem = function (focusedTarget) { /** * @description * Triggered on click. Finds the cell that was clicked on and focuses on it. - * * @param event * Keydown event */ @@ -417,7 +403,6 @@ aria.Grid.prototype.focusClickedCell = function (event) { * @description * Triggered on click. Checks if user clicked on a header with aria-sort. * If so, it sorts the column based on the aria-sort attribute. - * * @param event * Keydown event */ @@ -464,13 +449,10 @@ aria.Grid.prototype.delegateButtonHandler = function (event) { * @description * Toggles the mode of an editable cell between displaying the edit button * and displaying the editable input. - * * @param editCell * Cell to toggle - * * @param toggleOn * Whether to show or hide edit input - * * @param updateText * Whether or not to update the button text with the input text */ @@ -503,7 +485,6 @@ aria.Grid.prototype.toggleEditMode = function (editCell, toggleOn, updateText) { * All other headers with aria-sort are reset to "none" * * Note: This implementation assumes that there is no pagination on the grid. - * * @param headerNode * Header DOM node */ @@ -546,7 +527,6 @@ aria.Grid.prototype.handleSort = function (headerNode) { /** * @description * Sorts the grid's rows according to the specified compareFn - * * @param compareFn * Comparison function to sort the rows */ @@ -599,7 +579,6 @@ aria.Grid.prototype.setPaginationChangeHandler = function (onPaginationChange) { /** * @description * Check if page up or page down was pressed, and show the next page if so. - * * @param event * Keydown event */ @@ -634,10 +613,8 @@ aria.Grid.prototype.movePageDown = function () { /** * @description * Scroll the specified row into view in the specified direction - * * @param startIndex * Row index to use as the start index - * * @param scrollDown * Whether to scroll the new page above or below the row index */ @@ -848,10 +825,8 @@ aria.Grid.prototype.getNextVisibleCell = function (directionX, directionY) { /** * @description * Show or hide the cells in the specified column - * * @param columnIndex * Index of the column to toggle - * * @param isShown * Whether or not to show the column */ @@ -880,13 +855,10 @@ aria.Grid.prototype.toggleColumn = function (columnIndex, isShown) { * @description * Find the closest element matching the selector. Only checks parent and * direct children. - * * @param element * Element to start searching from - * * @param selector * Index of the column to toggle - * * @returns {object} matching element */ aria.Grid.prototype.findClosest = function (element, selector) { diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/js/dataGrids.js b/tests/minimal-data-grid/reference/2022-4-27_115334/js/dataGrids.js similarity index 93% rename from tests/minimal-data-grid/reference/2021-3-8_151542/js/dataGrids.js rename to tests/minimal-data-grid/reference/2022-4-27_115334/js/dataGrids.js index f80997afc..238afe8c0 100644 --- a/tests/minimal-data-grid/reference/2021-3-8_151542/js/dataGrids.js +++ b/tests/minimal-data-grid/reference/2022-4-27_115334/js/dataGrids.js @@ -18,8 +18,7 @@ window.addEventListener('load', function () { // Initialize Example 1 Grid (if it is present in the DOM) var ex1GridElement = document.getElementById('ex1-grid'); if (ex1GridElement) { - var ex1Grid = new aria.Grid(ex1GridElement); - document.defaultView.ex1Grid = ex1Grid; + new aria.Grid(ex1GridElement); } // Initialize Example 2 Grid (if it is present in the DOM) diff --git a/tests/minimal-data-grid/reference/2021-3-8_151542/js/utils.js b/tests/minimal-data-grid/reference/2022-4-27_115334/js/utils.js similarity index 100% rename from tests/minimal-data-grid/reference/2021-3-8_151542/js/utils.js rename to tests/minimal-data-grid/reference/2022-4-27_115334/js/utils.js