From 4ca7842ea7777b668546e74c9b5ed5b09696d927 Mon Sep 17 00:00:00 2001
From: Howard Edwards
Date: Tue, 15 Jun 2021 12:41:07 -0500
Subject: [PATCH] Revert "Generated tests and review pages output improvements
(#441)" (#449)
This reverts commit 01c265601d2e125851671c2a1f2c3b2d83a40bfb.
---
.gitattributes | 13 -
.../workflows/generate-and-commit-files.yml | 11 +-
.github/workflows/update-pr.yml | 2 +-
.gitignore | 11 +-
README.md | 3 -
.../reference/checkbox-tri-state.html | 81 -
.../reference/css/checkbox.css | 89 -
.../reference/js/checkboxMixed.js | 149 --
.../reference/js/controlledCheckbox.js | 100 -
.../checkbox-1/checkbox-1.html | 46 -
.../checkbox-1/js/checkbox.js | 80 -
.../checkbox-2/js/checkboxMixed.js | 149 --
.../checkbox-2/js/controlledCheckbox.js | 100 -
.../2020-11-23_175030/css/checkbox.css | 89 -
.../combobox-autocomplete-both.html | 528 -----
.../css/combobox-autocomplete.css | 114 -
.../css/combobox-datepicker.css | 249 ---
.../2020-11-19_142152/css/grid-combo.css | 88 -
.../2020-11-19_142152/css/select-only.css | 103 -
.../js/combobox-autocomplete.js | 573 ------
.../js/combobox-datepicker.js | 866 --------
.../js/grid-combo-example.js | 99 -
.../2020-11-19_142152/js/grid-combo.js | 297 ---
.../2020-11-19_142152/js/select-only.js | 393 ----
.../combobox-autocomplete-both.html | 97 -
.../css/combobox-autocomplete.css | 114 -
.../css/combobox-datepicker.css | 249 ---
.../2020-11-20_134016/css/grid-combo.css | 88 -
.../2020-11-20_134016/css/select-only.css | 103 -
.../js/combobox-autocomplete.js | 573 ------
.../js/combobox-datepicker.js | 866 --------
.../js/grid-combo-example.js | 99 -
.../2020-11-20_134016/js/grid-combo.js | 297 ---
.../2020-11-20_134016/js/select-only.js | 393 ----
.../combobox-autocomplete-both.html | 97 -
.../css/combobox-autocomplete.css | 114 -
.../css/combobox-datepicker.css | 249 ---
.../2020-11-23_175618/css/grid-combo.css | 88 -
.../2020-11-23_175618/css/select-only.css | 103 -
.../js/combobox-autocomplete.js | 573 ------
.../js/combobox-datepicker.js | 866 --------
.../js/grid-combo-example.js | 99 -
.../2020-11-23_175618/js/grid-combo.js | 297 ---
.../2020-11-23_175618/js/select-only.js | 393 ----
.../reference/combobox-select-only.html | 51 -
.../reference/css/select-only.css | 103 -
.../reference/js/select-only.js | 390 ----
.../css/menu-button-actions.css | 82 -
.../menu-button-actions-active-descendant.js | 347 ----
...menu-button-actions-active-descendant.html | 57 -
.../2020-11-19_152059/css/menubar-editor.css | 200 --
.../css/menubar-navigation.css | 114 -
.../images/checkbox-checked-focus.svg | 4 -
.../images/checkbox-checked.svg | 4 -
.../images/down-arrow-focus.svg | 4 -
.../2020-11-19_152059/images/down-arrow.svg | 4 -
.../images/radio-checked-focus.svg | 4 -
.../images/radio-checked.svg | 4 -
.../2020-11-19_152059/images/separator.svg | 4 -
.../images/up-arrow-focus.svg | 4 -
.../2020-11-19_152059/images/up-arrow.svg | 4 -
.../2020-11-19_152059/js/menubar-editor.js | 709 -------
.../js/menubar-navigation.js | 630 ------
.../2020-11-19_152059/js/style-manager.js | 158 --
.../2020-11-19_152059/menubar-editor.html | 822 --------
.../2020-11-20_13316/css/menubar-editor.css | 200 --
.../css/menubar-navigation.css | 114 -
.../images/checkbox-checked-focus.svg | 4 -
.../images/checkbox-checked.svg | 4 -
.../images/down-arrow-focus.svg | 4 -
.../2020-11-20_13316/images/down-arrow.svg | 4 -
.../images/radio-checked-focus.svg | 4 -
.../2020-11-20_13316/images/radio-checked.svg | 4 -
.../2020-11-20_13316/images/separator.svg | 4 -
.../images/up-arrow-focus.svg | 4 -
.../2020-11-20_13316/images/up-arrow.svg | 4 -
.../2020-11-20_13316/js/menubar-editor.js | 709 -------
.../2020-11-20_13316/js/menubar-navigation.js | 630 ------
.../2020-11-20_13316/js/style-manager.js | 158 --
.../2020-11-20_13316/menubar-editor.html | 117 --
.../2020-11-23_175528/css/menubar-editor.css | 200 --
.../css/menubar-navigation.css | 114 -
.../images/checkbox-checked-focus.svg | 4 -
.../images/checkbox-checked.svg | 4 -
.../images/down-arrow-focus.svg | 4 -
.../2020-11-23_175528/images/down-arrow.svg | 4 -
.../images/radio-checked-focus.svg | 4 -
.../images/radio-checked.svg | 4 -
.../2020-11-23_175528/images/separator.svg | 4 -
.../images/up-arrow-focus.svg | 4 -
.../2020-11-23_175528/images/up-arrow.svg | 4 -
.../2020-11-23_175528/js/menubar-editor.js | 709 -------
.../js/menubar-navigation.js | 630 ------
.../2020-11-23_175528/js/style-manager.js | 158 --
.../2020-11-23_175528/menubar-editor.html | 117 --
.../reference/2020-12-17_13353/css/dialog.css | 165 --
.../reference/2020-12-17_13353/dialog.html | 171 --
.../reference/2020-12-17_13353/js/dialog.js | 336 ---
.../reference/2020-12-17_13353/js/utils.js | 131 --
build/tests/resources/EXAMPLE_RESULT.html | 191 --
build/tests/resources/TEMPLATE_TEST_FILE.html | 39 -
build/tests/resources/aria-at-harness.mjs | 860 --------
build/tests/resources/at-commands.mjs | 105 -
build/tests/resources/at-commands.mjs.bak | 249 ---
build/tests/resources/keys.mjs | 97 -
build/tests/support.json | 42 -
.../reference/2021-2-15_124757/css/tabs.css | 107 -
.../reference/2021-2-15_124757/js/tabs.js | 222 --
.../reference/2021-2-15_124757/tabs.html | 54 -
docs/LOCAL_DEVELOPMENT.md | 100 -
build/index.html => index.html | 16 +-
package.json | 5 +-
review/checkbox-1.html | 1829 +++++++++++++++++
review/checkbox-1.html~HEAD | 1829 +++++++++++++++++
.../review => review}/checkbox-tri-state.html | 48 +-
{build/review => review}/checkbox.html | 52 +-
.../combobox-autocomplete-both.html | 60 +-
.../combobox-select-only.html | 76 +-
...menu-button-actions-active-descendant.html | 52 +-
{build/review => review}/menubar-editor.html | 80 +-
{build/review => review}/modal-dialog.html | 58 +-
.../tabs-manual-activation.html | 58 +-
scripts/create-all-tests.js | 55 +-
scripts/create-example-tests.js | 341 ++-
scripts/review-template.mustache | 10 +-
scripts/test-reviewer.mjs | 415 ++--
.../checkbox-tri-state/commands.json | 0
.../checkbox-tri-state/index.html | 0
...to-partially-checked-checkbox-reading.html | 0
...to-partially-checked-checkbox-reading.json | 0
...to-partially-checked-checkbox-reading.html | 0
...to-partially-checked-checkbox-reading.json | 0
...artially-checked-checkbox-interaction.html | 0
...artially-checked-checkbox-interaction.json | 0
...artially-checked-checkbox-interaction.html | 0
...artially-checked-checkbox-interaction.json | 0
...artially-checked-checkbox-interaction.html | 0
...artially-checked-checkbox-interaction.json | 0
...artially-checked-checkbox-interaction.html | 0
...artially-checked-checkbox-interaction.json | 0
...te-partially-checked-checkbox-reading.html | 0
...te-partially-checked-checkbox-reading.json | 0
...artially-checked-checkbox-interaction.html | 0
...artially-checked-checkbox-interaction.json | 0
...artially-checked-checkbox-interaction.html | 0
...artially-checked-checkbox-interaction.json | 0
...te-unchecked-checked-checkbox-reading.html | 0
...te-unchecked-checked-checkbox-reading.json | 0
...nchecked-checked-checkbox-interaction.html | 0
...nchecked-checked-checkbox-interaction.json | 0
...nchecked-checked-checkbox-interaction.html | 0
...nchecked-checked-checkbox-interaction.json | 0
...ad-partially-checked-checkbox-reading.html | 0
...ad-partially-checked-checkbox-reading.json | 0
...artially-checked-checkbox-interaction.html | 0
...artially-checked-checkbox-interaction.json | 0
...artially-checked-checkbox-interaction.html | 0
...artially-checked-checkbox-interaction.json | 0
.../test-16-read-checkbox-group-reading.html | 0
.../test-16-read-checkbox-group-reading.json | 0
...st-17-read-checkbox-group-interaction.html | 0
...st-17-read-checkbox-group-interaction.json | 0
...st-18-read-checkbox-group-interaction.html | 0
...st-18-read-checkbox-group-interaction.json | 0
...-forwards-into-checkbox-group-reading.html | 0
...-forwards-into-checkbox-group-reading.json | 0
...ckwards-out-of-checkbox-group-reading.html | 0
...ckwards-out-of-checkbox-group-reading.json | 0
...wards-into-checkbox-group-interaction.html | 0
...wards-into-checkbox-group-interaction.json | 0
...rds-out-of-checkbox-group-interaction.html | 0
...rds-out-of-checkbox-group-interaction.json | 0
...wards-into-checkbox-group-interaction.html | 0
...wards-into-checkbox-group-interaction.json | 0
...rds-out-of-checkbox-group-interaction.html | 0
...rds-out-of-checkbox-group-interaction.json | 0
{build/tests => tests}/checkbox/commands.json | 0
{build/tests => tests}/checkbox/index.html | 0
...avigate-to-unchecked-checkbox-reading.html | 0
...avigate-to-unchecked-checkbox-reading.json | 0
...ate-to-unchecked-checkbox-interaction.html | 0
...ate-to-unchecked-checkbox-interaction.json | 0
...ate-to-unchecked-checkbox-interaction.html | 0
...ate-to-unchecked-checkbox-interaction.json | 0
...-navigate-to-checked-checkbox-reading.html | 0
...-navigate-to-checked-checkbox-reading.json | 0
...igate-to-checked-checkbox-interaction.html | 0
...igate-to-checked-checkbox-interaction.json | 0
...igate-to-checked-checkbox-interaction.html | 0
...igate-to-checked-checkbox-interaction.json | 0
.../test-07-operate-checkbox-reading.html | 0
.../test-07-operate-checkbox-reading.json | 0
.../test-08-operate-checkbox-interaction.html | 0
.../test-08-operate-checkbox-interaction.json | 0
.../test-09-operate-checkbox-interaction.html | 0
.../test-09-operate-checkbox-interaction.json | 0
...st-10-read-unchecked-checkbox-reading.html | 0
...st-10-read-unchecked-checkbox-reading.json | 0
...1-read-unchecked-checkbox-interaction.html | 0
...1-read-unchecked-checkbox-interaction.json | 0
...2-read-unchecked-checkbox-interaction.html | 0
...2-read-unchecked-checkbox-interaction.json | 0
...test-13-read-checked-checkbox-reading.html | 0
...test-13-read-checked-checkbox-reading.json | 0
...-14-read-checked-checkbox-interaction.html | 0
...-14-read-checked-checkbox-interaction.json | 0
...-15-read-checked-checkbox-interaction.html | 0
...-15-read-checked-checkbox-interaction.json | 0
.../test-16-read-checkbox-group-reading.html | 0
.../test-16-read-checkbox-group-reading.json | 0
...st-17-read-checkbox-group-interaction.html | 0
...st-17-read-checkbox-group-interaction.json | 0
...st-18-read-checkbox-group-interaction.html | 0
...st-18-read-checkbox-group-interaction.json | 0
...tially-through-checkbox-group-reading.html | 0
...tially-through-checkbox-group-reading.json | 0
...ly-through-checkbox-group-interaction.html | 0
...ly-through-checkbox-group-interaction.json | 0
...-navigate-into-checkbox-group-reading.html | 0
...-navigate-into-checkbox-group-reading.json | 0
...igate-into-checkbox-group-interaction.html | 0
...igate-into-checkbox-group-interaction.json | 0
...igate-into-checkbox-group-interaction.html | 0
...igate-into-checkbox-group-interaction.json | 0
...avigate-out-of-checkbox-group-reading.html | 0
...avigate-out-of-checkbox-group-reading.json | 0
...ate-out-of-checkbox-group-interaction.html | 0
...ate-out-of-checkbox-group-interaction.json | 0
...ate-out-of-checkbox-group-interaction.html | 0
...ate-out-of-checkbox-group-interaction.json | 0
.../combobox-autocomplete-both/commands.json | 0
.../combobox-autocomplete-both/index.html | 0
.../test-01-navigate-to-combobox-reading.html | 0
.../test-01-navigate-to-combobox-reading.json | 0
...-navigate-by-line-to-combobox-reading.html | 0
...-navigate-by-line-to-combobox-reading.json | 0
...t-03-navigate-to-combobox-interaction.html | 0
...t-03-navigate-to-combobox-interaction.json | 0
.../test-04-read-combobox-reading.html | 0
.../test-04-read-combobox-reading.json | 0
.../test-05-read-combobox-interaction.html | 0
.../test-05-read-combobox-interaction.json | 0
.../test-06-navigate-to-combobox-reading.html | 0
.../test-06-navigate-to-combobox-reading.json | 0
...t-07-navigate-to-combobox-interaction.html | 0
...t-07-navigate-to-combobox-interaction.json | 0
.../test-08-read-combobox-reading.html | 0
.../test-08-read-combobox-reading.json | 0
.../test-09-read-combobox-interaction.html | 0
.../test-09-read-combobox-interaction.json | 0
.../test-10-navigate-to-combobox-reading.html | 0
.../test-10-navigate-to-combobox-reading.json | 0
...-navigate-by-line-to-combobox-reading.html | 0
...-navigate-by-line-to-combobox-reading.json | 0
...t-12-navigate-to-combobox-interaction.html | 0
...t-12-navigate-to-combobox-interaction.json | 0
.../test-13-read-combobox-reading.html | 0
.../test-13-read-combobox-reading.json | 0
.../test-14-read-combobox-interaction.html | 0
.../test-14-read-combobox-interaction.json | 0
...x-with-keys-that-switch-modes-reading.html | 0
...x-with-keys-that-switch-modes-reading.json | 0
.../test-16-activate-combobox-reading.html | 0
.../test-16-activate-combobox-reading.json | 0
.../test-17-open-combobox-interaction.html | 0
.../test-17-open-combobox-interaction.json | 0
.../test-18-close-combobox-interaction.html | 0
.../test-18-close-combobox-interaction.json | 0
...est-19-activate-states-button-reading.html | 0
...est-19-activate-states-button-reading.json | 0
...20-activate-states-button-interaction.html | 0
...20-activate-states-button-interaction.json | 0
...est-21-activate-states-button-reading.html | 0
...est-21-activate-states-button-reading.json | 0
...22-activate-states-button-interaction.html | 0
...22-activate-states-button-interaction.json | 0
...-into-popup-from-combobox-interaction.html | 0
...-into-popup-from-combobox-interaction.json | 0
...24-type-in-empty-combobox-interaction.html | 0
...24-type-in-empty-combobox-interaction.json | 0
...25-navigate-listbox-popup-interaction.html | 0
...25-navigate-listbox-popup-interaction.json | 0
...-read-option-in-listbox-popup-reading.html | 0
...-read-option-in-listbox-popup-reading.json | 0
...d-option-in-listbox-popup-interaction.html | 0
...d-option-in-listbox-popup-interaction.json | 0
...28-choose-combobox-option-interaction.html | 0
...28-choose-combobox-option-interaction.json | 0
.../test-29-cancel-selection-interaction.html | 0
.../test-29-cancel-selection-interaction.json | 0
...ret-movement-from-listbox-interaction.html | 0
...ret-movement-from-listbox-interaction.json | 0
.../combobox-select-only/commands.json | 0
.../combobox-select-only/index.html | 0
...ollapsed-select-only-combobox-reading.html | 0
...ollapsed-select-only-combobox-reading.json | 0
...ollapsed-select-only-combobox-reading.html | 0
...ollapsed-select-only-combobox-reading.json | 0
...psed-select-only-combobox-interaction.html | 0
...psed-select-only-combobox-interaction.json | 0
...psed-select-only-combobox-interaction.html | 0
...psed-select-only-combobox-interaction.json | 0
...psed-select-only-combobox-interaction.html | 0
...psed-select-only-combobox-interaction.json | 0
...psed-select-only-combobox-interaction.html | 0
...psed-select-only-combobox-interaction.json | 0
...ollapsed-select-only-combobox-reading.html | 0
...ollapsed-select-only-combobox-reading.json | 0
...psed-select-only-combobox-interaction.html | 0
...psed-select-only-combobox-interaction.json | 0
...psed-select-only-combobox-interaction.html | 0
...psed-select-only-combobox-interaction.json | 0
...ollapsed-select-only-combobox-reading.html | 0
...ollapsed-select-only-combobox-reading.json | 0
...psed-select-only-combobox-interaction.html | 0
...psed-select-only-combobox-interaction.json | 0
...psed-select-only-combobox-interaction.html | 0
...psed-select-only-combobox-interaction.json | 0
...-combobox-to-first-option-interaction.html | 0
...-combobox-to-first-option-interaction.json | 0
...-combobox-to-first-option-interaction.html | 0
...-combobox-to-first-option-interaction.json | 0
...mbobox-to-specific-option-interaction.html | 0
...mbobox-to-specific-option-interaction.json | 0
...mbobox-to-specific-option-interaction.html | 0
...mbobox-to-specific-option-interaction.json | 0
...y-combobox-to-last-option-interaction.html | 0
...y-combobox-to-last-option-interaction.json | 0
...y-combobox-to-last-option-interaction.html | 0
...y-combobox-to-last-option-interaction.json | 0
...ation-about-listbox-popup-interaction.html | 0
...ation-about-listbox-popup-interaction.json | 0
...ation-about-listbox-popup-interaction.html | 0
...ation-about-listbox-popup-interaction.json | 0
...o-option-in-listbox-popup-interaction.html | 0
...o-option-in-listbox-popup-interaction.json | 0
...o-option-in-listbox-popup-interaction.html | 0
...o-option-in-listbox-popup-interaction.json | 0
...o-option-in-listbox-popup-interaction.html | 0
...o-option-in-listbox-popup-interaction.json | 0
...o-option-in-listbox-popup-interaction.html | 0
...o-option-in-listbox-popup-interaction.json | 0
...c-option-in-listbox-popup-interaction.html | 0
...c-option-in-listbox-popup-interaction.json | 0
...c-option-in-listbox-popup-interaction.html | 0
...c-option-in-listbox-popup-interaction.json | 0
...t-option-in-listbox-popup-interaction.html | 0
...t-option-in-listbox-popup-interaction.json | 0
...t-option-in-listbox-popup-interaction.html | 0
...t-option-in-listbox-popup-interaction.json | 0
...t-option-in-listbox-popup-interaction.html | 0
...t-option-in-listbox-popup-interaction.json | 0
...t-option-in-listbox-popup-interaction.html | 0
...t-option-in-listbox-popup-interaction.json | 0
...-options-in-listbox-popup-interaction.html | 0
...-options-in-listbox-popup-interaction.json | 0
...-options-in-listbox-popup-interaction.html | 0
...-options-in-listbox-popup-interaction.json | 0
...-options-in-listbox-popup-interaction.html | 0
...-options-in-listbox-popup-interaction.json | 0
...-options-in-listbox-popup-interaction.html | 0
...-options-in-listbox-popup-interaction.json | 0
...t-option-in-listbox-popup-interaction.html | 0
...t-option-in-listbox-popup-interaction.json | 0
...t-option-in-listbox-popup-interaction.html | 0
...t-option-in-listbox-popup-interaction.json | 0
...st-37-close-listbox-popup-interaction.html | 0
...st-37-close-listbox-popup-interaction.json | 0
...st-38-close-listbox-popup-interaction.html | 0
...st-38-close-listbox-popup-interaction.json | 0
.../commands.json | 0
.../index.html | 0
...igate-forwards-to-menu-button-reading.html | 0
...igate-forwards-to-menu-button-reading.json | 0
...gate-backwards-to-menu-button-reading.html | 0
...gate-backwards-to-menu-button-reading.json | 0
...e-forwards-to-menu-button-interaction.html | 0
...e-forwards-to-menu-button-interaction.json | 0
...-backwards-to-menu-button-interaction.html | 0
...-backwards-to-menu-button-interaction.json | 0
...e-forwards-to-menu-button-interaction.html | 0
...e-forwards-to-menu-button-interaction.json | 0
...-backwards-to-menu-button-interaction.html | 0
...-backwards-to-menu-button-interaction.json | 0
...information-about-menu-button-reading.html | 0
...information-about-menu-button-reading.json | 0
...rmation-about-menu-button-interaction.html | 0
...rmation-about-menu-button-interaction.json | 0
...rmation-about-menu-button-interaction.html | 0
...rmation-about-menu-button-interaction.json | 0
.../test-10-open-menu-reading.html | 0
.../test-10-open-menu-reading.json | 0
.../test-11-open-menu-interaction.html | 0
.../test-11-open-menu-interaction.json | 0
.../test-12-open-menu-interaction.html | 0
.../test-12-open-menu-interaction.json | 0
...13-open-menu-to-last-item-interaction.html | 0
...13-open-menu-to-last-item-interaction.json | 0
...14-open-menu-to-last-item-interaction.html | 0
...14-open-menu-to-last-item-interaction.json | 0
...formation-about-menu-item-interaction.html | 0
...formation-about-menu-item-interaction.json | 0
...formation-about-menu-item-interaction.html | 0
...formation-about-menu-item-interaction.json | 0
...ate-to-first-item-in-menu-interaction.html | 0
...ate-to-first-item-in-menu-interaction.json | 0
...ate-to-first-item-in-menu-interaction.html | 0
...ate-to-first-item-in-menu-interaction.json | 0
...gate-to-last-item-in-menu-interaction.html | 0
...gate-to-last-item-in-menu-interaction.json | 0
...gate-to-last-item-in-menu-interaction.html | 0
...gate-to-last-item-in-menu-interaction.json | 0
...-menu-by-typing-character-interaction.html | 0
...-menu-by-typing-character-interaction.json | 0
...-menu-by-typing-character-interaction.html | 0
...-menu-by-typing-character-interaction.json | 0
...est-23-activate-menu-item-interaction.html | 0
...est-23-activate-menu-item-interaction.json | 0
...est-24-activate-menu-item-interaction.html | 0
...est-24-activate-menu-item-interaction.json | 0
.../test-25-close-menu-interaction.html | 0
.../test-25-close-menu-interaction.json | 0
.../test-26-close-menu-interaction.html | 0
.../test-26-close-menu-interaction.json | 0
.../menubar-editor/commands.json | 0
.../tests => tests}/menubar-editor/index.html | 0
.../images/checkbox-checked-focus.svg | 8 +-
.../images/checkbox-checked.svg | 8 +-
.../images/radio-checked-focus.svg | 8 +-
.../images/radio-checked.svg | 8 +-
.../images/checkbox-checked-focus.svg | 8 +-
.../images/checkbox-checked.svg | 8 +-
.../images/radio-checked-focus.svg | 8 +-
.../2020-11-20_13316/images/radio-checked.svg | 8 +-
.../images/checkbox-checked-focus.svg | 8 +-
.../images/checkbox-checked.svg | 8 +-
.../images/radio-checked-focus.svg | 8 +-
.../images/radio-checked.svg | 8 +-
.../test-01-navigate-to-menubar-reading.html | 0
.../test-01-navigate-to-menubar-reading.json | 0
.../test-02-activate-menubar-reading.html | 0
.../test-02-activate-menubar-reading.json | 0
.../test-03-tab-to-menubar-reading.html | 0
.../test-03-tab-to-menubar-reading.json | 0
...st-04-navigate-to-menubar-interaction.html | 0
...st-04-navigate-to-menubar-interaction.json | 0
...st-05-navigate-to-menubar-interaction.html | 0
...st-05-navigate-to-menubar-interaction.json | 0
...vigate-to-menuitem-in-menubar-reading.html | 0
...vigate-to-menuitem-in-menubar-reading.json | 0
...te-to-menuitem-in-menubar-interaction.html | 0
...te-to-menuitem-in-menubar-interaction.json | 0
...te-to-menuitem-in-menubar-interaction.html | 0
...te-to-menuitem-in-menubar-interaction.json | 0
...-open-menuitem-in-menubar-interaction.html | 0
...-open-menuitem-in-menubar-interaction.json | 0
...-open-menuitem-in-menubar-interaction.html | 0
...-open-menuitem-in-menubar-interaction.json | 0
...1-open-submenu-of-menubar-interaction.html | 0
...1-open-submenu-of-menubar-interaction.json | 0
...2-open-submenu-of-menubar-interaction.html | 0
...2-open-submenu-of-menubar-interaction.json | 0
...-close-submenu-of-menubar-interaction.html | 0
...-close-submenu-of-menubar-interaction.json | 0
...-close-submenu-of-menubar-interaction.html | 0
...-close-submenu-of-menubar-interaction.json | 0
...-menuitemradio-in-submenu-interaction.html | 0
...-menuitemradio-in-submenu-interaction.json | 0
...-menuitemradio-in-submenu-interaction.html | 0
...-menuitemradio-in-submenu-interaction.json | 0
...-menuitemradio-in-submenu-interaction.html | 0
...-menuitemradio-in-submenu-interaction.json | 0
...-menuitemradio-in-submenu-interaction.html | 0
...-menuitemradio-in-submenu-interaction.json | 0
...nuitemcheckbox-in-submenu-interaction.html | 0
...nuitemcheckbox-in-submenu-interaction.json | 0
...nuitemcheckbox-in-submenu-interaction.html | 0
...nuitemcheckbox-in-submenu-interaction.json | 0
...nuitemcheckbox-in-submenu-interaction.html | 0
...nuitemcheckbox-in-submenu-interaction.json | 0
...nuitemcheckbox-in-submenu-interaction.html | 0
...nuitemcheckbox-in-submenu-interaction.json | 0
...t-23-read-menuitem-in-menubar-reading.html | 0
...t-23-read-menuitem-in-menubar-reading.json | 0
...-read-menuitem-in-menubar-interaction.html | 0
...-read-menuitem-in-menubar-interaction.json | 0
...-read-menuitem-in-menubar-interaction.html | 0
...-read-menuitem-in-menubar-interaction.json | 0
...radio-in-a-group-in-a-submenu-reading.html | 0
...radio-in-a-group-in-a-submenu-reading.json | 0
...o-in-a-group-in-a-submenu-interaction.html | 0
...o-in-a-group-in-a-submenu-interaction.json | 0
...o-in-a-group-in-a-submenu-interaction.html | 0
...o-in-a-group-in-a-submenu-interaction.json | 0
...radio-in-a-group-in-a-submenu-reading.html | 0
...radio-in-a-group-in-a-submenu-reading.json | 0
...o-in-a-group-in-a-submenu-interaction.html | 0
...o-in-a-group-in-a-submenu-interaction.json | 0
...o-in-a-group-in-a-submenu-interaction.html | 0
...o-in-a-group-in-a-submenu-interaction.json | 0
...ckbox-in-a-group-in-a-submenu-reading.html | 0
...ckbox-in-a-group-in-a-submenu-reading.json | 0
...x-in-a-group-in-a-submenu-interaction.html | 0
...x-in-a-group-in-a-submenu-interaction.json | 0
...x-in-a-group-in-a-submenu-interaction.html | 0
...x-in-a-group-in-a-submenu-interaction.json | 0
...ckbox-in-a-group-in-a-submenu-reading.html | 0
...ckbox-in-a-group-in-a-submenu-reading.json | 0
...x-in-a-group-in-a-submenu-interaction.html | 0
...x-in-a-group-in-a-submenu-interaction.json | 0
...x-in-a-group-in-a-submenu-interaction.html | 0
...x-in-a-group-in-a-submenu-interaction.json | 0
...isabled-menuitem-in-a-submenu-reading.html | 0
...isabled-menuitem-in-a-submenu-reading.json | 0
...led-menuitem-in-a-submenu-interaction.html | 0
...led-menuitem-in-a-submenu-interaction.json | 0
...led-menuitem-in-a-submenu-interaction.html | 0
...led-menuitem-in-a-submenu-interaction.json | 0
.../modal-dialog/commands.json | 0
.../tests => tests}/modal-dialog/index.html | 0
.../test-01-open-modal-dialog-reading.html | 0
.../test-01-open-modal-dialog-reading.json | 0
...test-02-open-modal-dialog-interaction.html | 0
...test-02-open-modal-dialog-interaction.json | 0
...test-03-open-modal-dialog-interaction.html | 0
...test-03-open-modal-dialog-interaction.json | 0
.../test-04-close-modal-dialog-reading.html | 0
.../test-04-close-modal-dialog-reading.json | 0
...est-05-close-modal-dialog-interaction.html | 0
...est-05-close-modal-dialog-interaction.json | 0
...est-06-close-modal-dialog-interaction.html | 0
...est-06-close-modal-dialog-interaction.json | 0
...ose-modal-dialog-using-button-reading.html | 0
...ose-modal-dialog-using-button-reading.json | 0
...modal-dialog-using-button-interaction.html | 0
...modal-dialog-using-button-interaction.json | 0
...modal-dialog-using-button-interaction.html | 0
...modal-dialog-using-button-interaction.json | 0
...e-element-in-modal-dialog-interaction.html | 0
...e-element-in-modal-dialog-interaction.json | 0
...e-element-in-modal-dialog-interaction.html | 0
...e-element-in-modal-dialog-interaction.json | 0
...e-element-in-modal-dialog-interaction.html | 0
...e-element-in-modal-dialog-interaction.json | 0
...e-element-in-modal-dialog-interaction.html | 0
...e-element-in-modal-dialog-interaction.json | 0
...-to-beginning-of-modal-dialog-reading.html | 0
...-to-beginning-of-modal-dialog-reading.json | 0
...beginning-of-modal-dialog-interaction.html | 0
...beginning-of-modal-dialog-interaction.json | 0
...vigate-to-end-of-modal-dialog-reading.html | 0
...vigate-to-end-of-modal-dialog-reading.json | 0
...te-to-end-of-modal-dialog-interaction.html | 0
...te-to-end-of-modal-dialog-interaction.json | 0
...t-18-open-nested-modal-dialog-reading.html | 0
...t-18-open-nested-modal-dialog-reading.json | 0
...-open-nested-modal-dialog-interaction.html | 0
...-open-nested-modal-dialog-interaction.json | 0
...-open-nested-modal-dialog-interaction.html | 0
...-open-nested-modal-dialog-interaction.json | 0
...-21-close-nested-modal-dialog-reading.html | 0
...-21-close-nested-modal-dialog-reading.json | 0
...close-nested-modal-dialog-interaction.html | 0
...close-nested-modal-dialog-interaction.json | 0
...close-nested-modal-dialog-interaction.html | 0
...close-nested-modal-dialog-interaction.json | 0
...ted-modal-dialog-using-button-reading.html | 0
...ted-modal-dialog-using-button-reading.json | 0
...modal-dialog-using-button-interaction.html | 0
...modal-dialog-using-button-interaction.json | 0
...modal-dialog-using-button-interaction.html | 0
...modal-dialog-using-button-interaction.json | 0
...ested-modal-dialog-using-link-reading.html | 0
...ested-modal-dialog-using-link-reading.json | 0
...d-modal-dialog-using-link-interaction.html | 0
...d-modal-dialog-using-link-interaction.json | 0
...d-modal-dialog-using-link-interaction.html | 0
...d-modal-dialog-using-link-interaction.json | 0
.../tabs-manual-activation/commands.json | 0
.../tabs-manual-activation/index.html | 0
...navigate-forwards-to-tab-list-reading.html | 0
...navigate-forwards-to-tab-list-reading.json | 0
...avigate-backwards-to-tab-list-reading.html | 0
...avigate-backwards-to-tab-list-reading.json | 0
...gate-forwards-to-tab-list-interaction.html | 0
...gate-forwards-to-tab-list-interaction.json | 0
...ate-backwards-to-tab-list-interaction.html | 0
...ate-backwards-to-tab-list-interaction.json | 0
...gate-forwards-to-tab-list-interaction.html | 0
...gate-forwards-to-tab-list-interaction.json | 0
...ate-backwards-to-tab-list-interaction.html | 0
...ate-backwards-to-tab-list-interaction.json | 0
...rmation-about-tab-in-tab-list-reading.html | 0
...rmation-about-tab-in-tab-list-reading.json | 0
...ion-about-tab-in-tab-list-interaction.html | 0
...ion-about-tab-in-tab-list-interaction.json | 0
...ion-about-tab-in-tab-list-interaction.html | 0
...ion-about-tab-in-tab-list-interaction.json | 0
...igate-to-next-tab-in-tab-list-reading.html | 0
...igate-to-next-tab-in-tab-list-reading.json | 0
...e-to-next-tab-in-tab-list-interaction.html | 0
...e-to-next-tab-in-tab-list-interaction.json | 0
...e-to-next-tab-in-tab-list-interaction.html | 0
...e-to-next-tab-in-tab-list-interaction.json | 0
...e-to-previous-tab-in-tab-list-reading.html | 0
...e-to-previous-tab-in-tab-list-reading.json | 0
...-previous-tab-in-tab-list-interaction.html | 0
...-previous-tab-in-tab-list-interaction.json | 0
...-previous-tab-in-tab-list-interaction.html | 0
...-previous-tab-in-tab-list-interaction.json | 0
...-to-first-tab-in-tab-list-interaction.html | 0
...-to-first-tab-in-tab-list-interaction.json | 0
...-to-first-tab-in-tab-list-interaction.html | 0
...-to-first-tab-in-tab-list-interaction.json | 0
...e-to-last-tab-in-tab-list-interaction.html | 0
...e-to-last-tab-in-tab-list-interaction.json | 0
...e-to-last-tab-in-tab-list-interaction.html | 0
...e-to-last-tab-in-tab-list-interaction.json | 0
...ate-forwards-to-tab-panel-interaction.html | 0
...ate-forwards-to-tab-panel-interaction.json | 0
...te-backwards-to-tab-panel-interaction.html | 0
...te-backwards-to-tab-panel-interaction.json | 0
...ate-forwards-to-tab-panel-interaction.html | 0
...ate-forwards-to-tab-panel-interaction.json | 0
...te-backwards-to-tab-panel-interaction.html | 0
...te-backwards-to-tab-panel-interaction.json | 0
...t-24-activate-tab-in-tab-list-reading.html | 0
...t-24-activate-tab-in-tab-list-reading.json | 0
...-activate-tab-in-tab-list-interaction.html | 0
...-activate-tab-in-tab-list-interaction.json | 0
...-activate-tab-in-tab-list-interaction.html | 0
...-activate-tab-in-tab-list-interaction.json | 0
...t-27-delete-tab-from-tab-list-reading.html | 0
...t-27-delete-tab-from-tab-list-reading.json | 0
...-delete-tab-from-tab-list-interaction.html | 0
...-delete-tab-from-tab-list-interaction.json | 0
...-delete-tab-from-tab-list-interaction.html | 0
...-delete-tab-from-tab-list-interaction.json | 0
638 files changed, 4301 insertions(+), 21266 deletions(-)
delete mode 100644 .gitattributes
delete mode 100644 build/tests/checkbox-tri-state/reference/checkbox-tri-state.html
delete mode 100644 build/tests/checkbox-tri-state/reference/css/checkbox.css
delete mode 100644 build/tests/checkbox-tri-state/reference/js/checkboxMixed.js
delete mode 100644 build/tests/checkbox-tri-state/reference/js/controlledCheckbox.js
delete mode 100644 build/tests/checkbox/reference/2020-11-23_175030/checkbox-1/checkbox-1.html
delete mode 100644 build/tests/checkbox/reference/2020-11-23_175030/checkbox-1/js/checkbox.js
delete mode 100644 build/tests/checkbox/reference/2020-11-23_175030/checkbox-2/js/checkboxMixed.js
delete mode 100644 build/tests/checkbox/reference/2020-11-23_175030/checkbox-2/js/controlledCheckbox.js
delete mode 100644 build/tests/checkbox/reference/2020-11-23_175030/css/checkbox.css
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/combobox-autocomplete-both.html
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/combobox-autocomplete.css
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/combobox-datepicker.css
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/grid-combo.css
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/select-only.css
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/combobox-autocomplete.js
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/combobox-datepicker.js
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/grid-combo-example.js
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/grid-combo.js
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/select-only.js
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/combobox-autocomplete-both.html
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/combobox-autocomplete.css
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/combobox-datepicker.css
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/grid-combo.css
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/select-only.css
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/combobox-autocomplete.js
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/combobox-datepicker.js
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/grid-combo-example.js
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/grid-combo.js
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/select-only.js
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/combobox-autocomplete-both.html
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/combobox-autocomplete.css
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/combobox-datepicker.css
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/grid-combo.css
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/select-only.css
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/combobox-autocomplete.js
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/combobox-datepicker.js
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/grid-combo-example.js
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/grid-combo.js
delete mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/select-only.js
delete mode 100644 build/tests/combobox-select-only/reference/combobox-select-only.html
delete mode 100644 build/tests/combobox-select-only/reference/css/select-only.css
delete mode 100644 build/tests/combobox-select-only/reference/js/select-only.js
delete mode 100644 build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/css/menu-button-actions.css
delete mode 100644 build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/js/menu-button-actions-active-descendant.js
delete mode 100644 build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/menu-button-actions-active-descendant.html
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/css/menubar-editor.css
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/css/menubar-navigation.css
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/checkbox-checked-focus.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/checkbox-checked.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/down-arrow-focus.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/down-arrow.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/radio-checked-focus.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/radio-checked.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/separator.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/up-arrow-focus.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/up-arrow.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/js/menubar-editor.js
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/js/menubar-navigation.js
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/js/style-manager.js
delete mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/menubar-editor.html
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/css/menubar-editor.css
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/css/menubar-navigation.css
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/checkbox-checked-focus.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/checkbox-checked.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/down-arrow-focus.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/down-arrow.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/radio-checked-focus.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/radio-checked.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/separator.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/up-arrow-focus.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/up-arrow.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/js/menubar-editor.js
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/js/menubar-navigation.js
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/js/style-manager.js
delete mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/menubar-editor.html
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/css/menubar-editor.css
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/css/menubar-navigation.css
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/checkbox-checked-focus.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/checkbox-checked.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/down-arrow-focus.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/down-arrow.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/radio-checked-focus.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/radio-checked.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/separator.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/up-arrow-focus.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/up-arrow.svg
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/js/menubar-editor.js
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/js/menubar-navigation.js
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/js/style-manager.js
delete mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/menubar-editor.html
delete mode 100644 build/tests/modal-dialog/reference/2020-12-17_13353/css/dialog.css
delete mode 100644 build/tests/modal-dialog/reference/2020-12-17_13353/dialog.html
delete mode 100644 build/tests/modal-dialog/reference/2020-12-17_13353/js/dialog.js
delete mode 100644 build/tests/modal-dialog/reference/2020-12-17_13353/js/utils.js
delete mode 100644 build/tests/resources/EXAMPLE_RESULT.html
delete mode 100644 build/tests/resources/TEMPLATE_TEST_FILE.html
delete mode 100644 build/tests/resources/aria-at-harness.mjs
delete mode 100644 build/tests/resources/at-commands.mjs
delete mode 100644 build/tests/resources/at-commands.mjs.bak
delete mode 100644 build/tests/resources/keys.mjs
delete mode 100644 build/tests/support.json
delete mode 100644 build/tests/tabs-manual-activation/reference/2021-2-15_124757/css/tabs.css
delete mode 100644 build/tests/tabs-manual-activation/reference/2021-2-15_124757/js/tabs.js
delete mode 100644 build/tests/tabs-manual-activation/reference/2021-2-15_124757/tabs.html
delete mode 100644 docs/LOCAL_DEVELOPMENT.md
rename build/index.html => index.html (69%)
create mode 100644 review/checkbox-1.html
create mode 100644 review/checkbox-1.html~HEAD
rename {build/review => review}/checkbox-tri-state.html (98%)
rename {build/review => review}/checkbox.html (98%)
rename {build/review => review}/combobox-autocomplete-both.html (98%)
rename {build/review => review}/combobox-select-only.html (98%)
rename {build/review => review}/menu-button-actions-active-descendant.html (98%)
rename {build/review => review}/menubar-editor.html (98%)
rename {build/review => review}/modal-dialog.html (98%)
rename {build/review => review}/tabs-manual-activation.html (98%)
rename {build/tests => tests}/checkbox-tri-state/commands.json (100%)
rename {build/tests => tests}/checkbox-tri-state/index.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-05-navigate-forwards-to-partially-checked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-05-navigate-forwards-to-partially-checked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-06-navigate-backwards-to-partially-checked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-06-navigate-backwards-to-partially-checked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-09-operate-partially-checked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-09-operate-partially-checked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-12-operate-unchecked-checked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-12-operate-unchecked-checked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-15-read-partially-checked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-15-read-partially-checked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-16-read-checkbox-group-reading.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-16-read-checkbox-group-reading.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-17-read-checkbox-group-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-17-read-checkbox-group-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-18-read-checkbox-group-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-18-read-checkbox-group-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-23-navigate-forwards-into-checkbox-group-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-23-navigate-forwards-into-checkbox-group-interaction.json (100%)
rename {build/tests => tests}/checkbox-tri-state/test-24-navigate-backwards-out-of-checkbox-group-interaction.html (100%)
rename {build/tests => tests}/checkbox-tri-state/test-24-navigate-backwards-out-of-checkbox-group-interaction.json (100%)
rename {build/tests => tests}/checkbox/commands.json (100%)
rename {build/tests => tests}/checkbox/index.html (100%)
rename {build/tests => tests}/checkbox/test-01-navigate-to-unchecked-checkbox-reading.html (100%)
rename {build/tests => tests}/checkbox/test-01-navigate-to-unchecked-checkbox-reading.json (100%)
rename {build/tests => tests}/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-03-navigate-to-unchecked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-03-navigate-to-unchecked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-04-navigate-to-checked-checkbox-reading.html (100%)
rename {build/tests => tests}/checkbox/test-04-navigate-to-checked-checkbox-reading.json (100%)
rename {build/tests => tests}/checkbox/test-05-navigate-to-checked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-05-navigate-to-checked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-06-navigate-to-checked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-06-navigate-to-checked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-07-operate-checkbox-reading.html (100%)
rename {build/tests => tests}/checkbox/test-07-operate-checkbox-reading.json (100%)
rename {build/tests => tests}/checkbox/test-08-operate-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-08-operate-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-09-operate-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-09-operate-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-10-read-unchecked-checkbox-reading.html (100%)
rename {build/tests => tests}/checkbox/test-10-read-unchecked-checkbox-reading.json (100%)
rename {build/tests => tests}/checkbox/test-11-read-unchecked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-11-read-unchecked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-12-read-unchecked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-12-read-unchecked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-13-read-checked-checkbox-reading.html (100%)
rename {build/tests => tests}/checkbox/test-13-read-checked-checkbox-reading.json (100%)
rename {build/tests => tests}/checkbox/test-14-read-checked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-14-read-checked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-15-read-checked-checkbox-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-15-read-checked-checkbox-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-16-read-checkbox-group-reading.html (100%)
rename {build/tests => tests}/checkbox/test-16-read-checkbox-group-reading.json (100%)
rename {build/tests => tests}/checkbox/test-17-read-checkbox-group-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-17-read-checkbox-group-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-18-read-checkbox-group-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-18-read-checkbox-group-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.html (100%)
rename {build/tests => tests}/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.json (100%)
rename {build/tests => tests}/checkbox/test-20-navigate-sequentially-through-checkbox-group-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-20-navigate-sequentially-through-checkbox-group-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-21-navigate-into-checkbox-group-reading.html (100%)
rename {build/tests => tests}/checkbox/test-21-navigate-into-checkbox-group-reading.json (100%)
rename {build/tests => tests}/checkbox/test-22-navigate-into-checkbox-group-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-22-navigate-into-checkbox-group-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-23-navigate-into-checkbox-group-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-23-navigate-into-checkbox-group-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-24-navigate-out-of-checkbox-group-reading.html (100%)
rename {build/tests => tests}/checkbox/test-24-navigate-out-of-checkbox-group-reading.json (100%)
rename {build/tests => tests}/checkbox/test-25-navigate-out-of-checkbox-group-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-25-navigate-out-of-checkbox-group-interaction.json (100%)
rename {build/tests => tests}/checkbox/test-26-navigate-out-of-checkbox-group-interaction.html (100%)
rename {build/tests => tests}/checkbox/test-26-navigate-out-of-checkbox-group-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/commands.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/index.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-04-read-combobox-reading.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-04-read-combobox-reading.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-05-read-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-05-read-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-08-read-combobox-reading.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-08-read-combobox-reading.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-09-read-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-09-read-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-13-read-combobox-reading.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-13-read-combobox-reading.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-14-read-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-14-read-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-16-activate-combobox-reading.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-16-activate-combobox-reading.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-17-open-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-17-open-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-18-close-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-18-close-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-19-activate-states-button-reading.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-19-activate-states-button-reading.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-20-activate-states-button-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-20-activate-states-button-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-21-activate-states-button-reading.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-21-activate-states-button-reading.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-22-activate-states-button-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-22-activate-states-button-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-29-cancel-selection-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-29-cancel-selection-interaction.json (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.html (100%)
rename {build/tests => tests}/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/commands.json (100%)
rename {build/tests => tests}/combobox-select-only/index.html (100%)
rename {build/tests => tests}/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.html (100%)
rename {build/tests => tests}/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.json (100%)
rename {build/tests => tests}/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.html (100%)
rename {build/tests => tests}/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.json (100%)
rename {build/tests => tests}/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-05-navigate-forwards-to-collapsed-select-only-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-05-navigate-forwards-to-collapsed-select-only-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-06-navigate-backwards-to-collapsed-select-only-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-06-navigate-backwards-to-collapsed-select-only-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.html (100%)
rename {build/tests => tests}/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.json (100%)
rename {build/tests => tests}/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-09-read-information-about-collapsed-select-only-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-09-read-information-about-collapsed-select-only-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.html (100%)
rename {build/tests => tests}/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.json (100%)
rename {build/tests => tests}/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-12-open-collapsed-select-only-combobox-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-12-open-collapsed-select-only-combobox-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-14-open-collapsed-select-only-combobox-to-first-option-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-14-open-collapsed-select-only-combobox-to-first-option-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-16-open-collapsed-select-only-combobox-to-specific-option-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-16-open-collapsed-select-only-combobox-to-specific-option-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-18-open-collapsed-select-only-combobox-to-last-option-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-18-open-collapsed-select-only-combobox-to-last-option-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-20-read-information-about-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-20-read-information-about-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-23-navigate-forwards-to-option-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-23-navigate-forwards-to-option-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-24-navigate-backwards-to-option-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-24-navigate-backwards-to-option-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-26-navigate-to-specific-option-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-26-navigate-to-specific-option-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-29-navigate-to-first-option-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-29-navigate-to-first-option-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-30-navigate-to-last-option-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-30-navigate-to-last-option-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-33-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-33-navigate-forwards-by-ten-options-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-34-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-34-navigate-backwards-by-ten-options-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-36-select-option-in-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-36-select-option-in-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-37-close-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-37-close-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/combobox-select-only/test-38-close-listbox-popup-interaction.html (100%)
rename {build/tests => tests}/combobox-select-only/test-38-close-listbox-popup-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/commands.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/index.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-05-navigate-forwards-to-menu-button-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-05-navigate-forwards-to-menu-button-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-06-navigate-backwards-to-menu-button-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-06-navigate-backwards-to-menu-button-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-09-read-information-about-menu-button-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-09-read-information-about-menu-button-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-10-open-menu-reading.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-10-open-menu-reading.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-11-open-menu-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-11-open-menu-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-12-open-menu-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-12-open-menu-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-14-open-menu-to-last-item-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-14-open-menu-to-last-item-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-16-read-information-about-menu-item-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-16-read-information-about-menu-item-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-18-navigate-to-first-item-in-menu-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-18-navigate-to-first-item-in-menu-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-20-navigate-to-last-item-in-menu-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-20-navigate-to-last-item-in-menu-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-22-navigate-to-item-in-menu-by-typing-character-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-22-navigate-to-item-in-menu-by-typing-character-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-24-activate-menu-item-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-24-activate-menu-item-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-25-close-menu-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-25-close-menu-interaction.json (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-26-close-menu-interaction.html (100%)
rename {build/tests => tests}/menu-button-actions-active-descendant/test-26-close-menu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/commands.json (100%)
rename {build/tests => tests}/menubar-editor/index.html (100%)
rename {build/tests => tests}/menubar-editor/test-01-navigate-to-menubar-reading.html (100%)
rename {build/tests => tests}/menubar-editor/test-01-navigate-to-menubar-reading.json (100%)
rename {build/tests => tests}/menubar-editor/test-02-activate-menubar-reading.html (100%)
rename {build/tests => tests}/menubar-editor/test-02-activate-menubar-reading.json (100%)
rename {build/tests => tests}/menubar-editor/test-03-tab-to-menubar-reading.html (100%)
rename {build/tests => tests}/menubar-editor/test-03-tab-to-menubar-reading.json (100%)
rename {build/tests => tests}/menubar-editor/test-04-navigate-to-menubar-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-04-navigate-to-menubar-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-05-navigate-to-menubar-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-05-navigate-to-menubar-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.html (100%)
rename {build/tests => tests}/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.json (100%)
rename {build/tests => tests}/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-08-navigate-to-menuitem-in-menubar-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-08-navigate-to-menuitem-in-menubar-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-10-navigate-to-open-menuitem-in-menubar-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-10-navigate-to-open-menuitem-in-menubar-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-11-open-submenu-of-menubar-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-11-open-submenu-of-menubar-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-12-open-submenu-of-menubar-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-12-open-submenu-of-menubar-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-13-close-submenu-of-menubar-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-13-close-submenu-of-menubar-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-14-close-submenu-of-menubar-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-14-close-submenu-of-menubar-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-16-navigate-to-checked-menuitemradio-in-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-16-navigate-to-checked-menuitemradio-in-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-18-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-18-navigate-to-unchecked-menuitemradio-in-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-20-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-20-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-22-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-22-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-23-read-menuitem-in-menubar-reading.html (100%)
rename {build/tests => tests}/menubar-editor/test-23-read-menuitem-in-menubar-reading.json (100%)
rename {build/tests => tests}/menubar-editor/test-24-read-menuitem-in-menubar-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-24-read-menuitem-in-menubar-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-25-read-menuitem-in-menubar-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-25-read-menuitem-in-menubar-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.html (100%)
rename {build/tests => tests}/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.json (100%)
rename {build/tests => tests}/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-28-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-28-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.html (100%)
rename {build/tests => tests}/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.json (100%)
rename {build/tests => tests}/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-31-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-31-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html (100%)
rename {build/tests => tests}/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.json (100%)
rename {build/tests => tests}/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-34-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-34-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html (100%)
rename {build/tests => tests}/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.json (100%)
rename {build/tests => tests}/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-37-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-37-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.html (100%)
rename {build/tests => tests}/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.json (100%)
rename {build/tests => tests}/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.json (100%)
rename {build/tests => tests}/menubar-editor/test-40-read-disabled-menuitem-in-a-submenu-interaction.html (100%)
rename {build/tests => tests}/menubar-editor/test-40-read-disabled-menuitem-in-a-submenu-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/commands.json (100%)
rename {build/tests => tests}/modal-dialog/index.html (100%)
rename {build/tests => tests}/modal-dialog/test-01-open-modal-dialog-reading.html (100%)
rename {build/tests => tests}/modal-dialog/test-01-open-modal-dialog-reading.json (100%)
rename {build/tests => tests}/modal-dialog/test-02-open-modal-dialog-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-02-open-modal-dialog-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-03-open-modal-dialog-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-03-open-modal-dialog-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-04-close-modal-dialog-reading.html (100%)
rename {build/tests => tests}/modal-dialog/test-04-close-modal-dialog-reading.json (100%)
rename {build/tests => tests}/modal-dialog/test-05-close-modal-dialog-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-05-close-modal-dialog-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-06-close-modal-dialog-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-06-close-modal-dialog-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-07-close-modal-dialog-using-button-reading.html (100%)
rename {build/tests => tests}/modal-dialog/test-07-close-modal-dialog-using-button-reading.json (100%)
rename {build/tests => tests}/modal-dialog/test-08-close-modal-dialog-using-button-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-08-close-modal-dialog-using-button-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-09-close-modal-dialog-using-button-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-09-close-modal-dialog-using-button-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-11-navigate-to-last-focusable-element-in-modal-dialog-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-11-navigate-to-last-focusable-element-in-modal-dialog-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-13-navigate-to-first-focusable-element-in-modal-dialog-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-13-navigate-to-first-focusable-element-in-modal-dialog-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.html (100%)
rename {build/tests => tests}/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.json (100%)
rename {build/tests => tests}/modal-dialog/test-15-navigate-to-beginning-of-modal-dialog-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-15-navigate-to-beginning-of-modal-dialog-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.html (100%)
rename {build/tests => tests}/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.json (100%)
rename {build/tests => tests}/modal-dialog/test-17-navigate-to-end-of-modal-dialog-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-17-navigate-to-end-of-modal-dialog-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-18-open-nested-modal-dialog-reading.html (100%)
rename {build/tests => tests}/modal-dialog/test-18-open-nested-modal-dialog-reading.json (100%)
rename {build/tests => tests}/modal-dialog/test-19-open-nested-modal-dialog-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-19-open-nested-modal-dialog-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-20-open-nested-modal-dialog-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-20-open-nested-modal-dialog-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-21-close-nested-modal-dialog-reading.html (100%)
rename {build/tests => tests}/modal-dialog/test-21-close-nested-modal-dialog-reading.json (100%)
rename {build/tests => tests}/modal-dialog/test-22-close-nested-modal-dialog-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-22-close-nested-modal-dialog-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-23-close-nested-modal-dialog-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-23-close-nested-modal-dialog-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.html (100%)
rename {build/tests => tests}/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.json (100%)
rename {build/tests => tests}/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-26-close-nested-modal-dialog-using-button-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-26-close-nested-modal-dialog-using-button-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.html (100%)
rename {build/tests => tests}/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.json (100%)
rename {build/tests => tests}/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.json (100%)
rename {build/tests => tests}/modal-dialog/test-29-open-nested-modal-dialog-using-link-interaction.html (100%)
rename {build/tests => tests}/modal-dialog/test-29-open-nested-modal-dialog-using-link-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/commands.json (100%)
rename {build/tests => tests}/tabs-manual-activation/index.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-05-navigate-forwards-to-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-05-navigate-forwards-to-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-06-navigate-backwards-to-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-06-navigate-backwards-to-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-09-read-information-about-tab-in-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-09-read-information-about-tab-in-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-12-navigate-to-next-tab-in-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-12-navigate-to-next-tab-in-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-15-navigate-to-previous-tab-in-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-15-navigate-to-previous-tab-in-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-17-navigate-to-first-tab-in-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-17-navigate-to-first-tab-in-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-19-navigate-to-last-tab-in-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-19-navigate-to-last-tab-in-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-22-navigate-forwards-to-tab-panel-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-22-navigate-forwards-to-tab-panel-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-23-navigate-backwards-to-tab-panel-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-23-navigate-backwards-to-tab-panel-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-26-activate-tab-in-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-26-activate-tab-in-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.json (100%)
rename {build/tests => tests}/tabs-manual-activation/test-29-delete-tab-from-tab-list-interaction.html (100%)
rename {build/tests => tests}/tabs-manual-activation/test-29-delete-tab-from-tab-list-interaction.json (100%)
diff --git a/.gitattributes b/.gitattributes
deleted file mode 100644
index 558542830..000000000
--- a/.gitattributes
+++ /dev/null
@@ -1,13 +0,0 @@
-# build folder
-/build/**/*.json -diff -merge
-/build/**/*.html linguist-generated=true
-/build/*.json -diff -merge
-/build/*.html linguist-generated=true
-/build/index.html -diff -merge
-/build/index.html linguist-generated=true
-/build/review/*.html -diff -merge
-/build/review/*.html linguist-generated=true
-/build/tests/*/*.html -diff -merge
-/build/tests/*/*.html linguist-generated=true
-/build/tests/*/*.json -diff -merge
-/build/tests/*/*.json linguist-generated=true
diff --git a/.github/workflows/generate-and-commit-files.yml b/.github/workflows/generate-and-commit-files.yml
index c5218e634..3169972d7 100644
--- a/.github/workflows/generate-and-commit-files.yml
+++ b/.github/workflows/generate-and-commit-files.yml
@@ -19,14 +19,11 @@ jobs:
- name: Install dependencies
run: npm ci
- # - name: Generate test files
- # run: npm run create-all-tests
+ - name: Generate test files
+ run: npm run create-all-tests
- # - name: Generate review files
- # run: npm run review-tests
-
- - name: Generate test and review files
- run: npm run build
+ - name: Generate review files
+ run: npm run review-tests
- uses: stefanzweifel/git-auto-commit-action@v4
with:
diff --git a/.github/workflows/update-pr.yml b/.github/workflows/update-pr.yml
index 91a945610..a8c4c1450 100644
--- a/.github/workflows/update-pr.yml
+++ b/.github/workflows/update-pr.yml
@@ -11,6 +11,6 @@ jobs:
repo-token: "${{ secrets.GITHUB_TOKEN }}"
head-branch-regex: '.*'
title-template: ''
- body-template: '[Preview Tests](https://raw.githack.com/w3c/aria-at/%headbranch%/build/index.html)'
+ body-template: '[Preview Tests](https://raw.githack.com/w3c/aria-at/%headbranch%/index.html)'
body-update-action: prefix
body-uppercase-head-match: false
diff --git a/.gitignore b/.gitignore
index 0a9dad60a..4b7ecdfe3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,12 +1,5 @@
/node_modules
-.#*
-.DS_*
-# Ignore locally generated files files
-/index.html
-/review
-/tests/*/*.html
-/tests/*/*.json
+.#*
-# Preserve all the contents of /tests/resources
-!/tests/resources/*
+.DS_*
diff --git a/README.md b/README.md
index a8932f55a..1d3cff45b 100644
--- a/README.md
+++ b/README.md
@@ -21,9 +21,6 @@ You can participate by:
This project is managed by the [Authoring Practices Task Force](https://www.w3.org/WAI/ARIA/task-forces/practices/) of the [ARIA Working Group](http://www.w3.org/WAI/ARIA/). The W3C staff contact is [Michael Cooper](http://www.w3.org/People/cooper/).
-## Running Locally
-Documentation for running this locally is available at [docs/LOCAL_DEVELOPMENT.md](docs/LOCAL_DEVELOPMENT.md).
-
## Conduct
All contributors to this project are expected to adhere to the [W3C Code of Ethics and Professional Conduct](https://www.w3.org/Consortium/cepc/).
diff --git a/build/tests/checkbox-tri-state/reference/checkbox-tri-state.html b/build/tests/checkbox-tri-state/reference/checkbox-tri-state.html
deleted file mode 100644
index 4c6038f18..000000000
--- a/build/tests/checkbox-tri-state/reference/checkbox-tri-state.html
+++ /dev/null
@@ -1,81 +0,0 @@
-
-
-
-
- Tri-State Checkbox Example
-
-
-
-
-
-
-
-
-
-
-
- Tri-State Checkbox Example
-
- This example demonstrates using the Checkbox Design Pattern to create a tri-state, or mixed-state, checkbox.
- In this implementation, the mixed-state checkbox represents the state of a set of standard HTML checkboxes.
- If none of the checkboxes in the set are checked, the mixed state checkbox is not checked, and if all members of the set are checked, the mixed state checkbox is checked.
- If the set contains both some checked and unchecked checkboxes, the mixed state checkbox is partially checked.
- Activating the tri-state checkbox changes the states of the checkboxes in the set.
-
-
- This example also demonstrates use of fieldset
and Legend
elements for labeling the checkbox group.
-
-
-
-
-
\ No newline at end of file
diff --git a/build/tests/checkbox-tri-state/reference/css/checkbox.css b/build/tests/checkbox-tri-state/reference/css/checkbox.css
deleted file mode 100644
index 3eb6b7dc8..000000000
--- a/build/tests/checkbox-tri-state/reference/css/checkbox.css
+++ /dev/null
@@ -1,89 +0,0 @@
-ul.checkboxes {
- list-style: none;
- margin-left: 0;
- padding-left: 1em;
-}
-
-[role="checkbox"] {
- display: inline-block;
- position: relative;
- padding-left: 1.4em;
- cursor: default;
-}
-
-[role="checkbox"]::before,
-[role="checkbox"]::after {
- position: absolute;
- top: 50%;
- left: 7px;
- transform: translate(-50%, -50%);
- content: "";
-}
-
-[role="checkbox"]::before {
- width: 14px;
- height: 14px;
- border: 1px solid hsl(0, 0%, 66%);
- border-radius: 0.2em;
- background-image: linear-gradient(to bottom, hsl(300, 3%, 93%), #fff 30%);
-}
-
-[role="checkbox"]:active::before {
- background-image: linear-gradient(
- to bottom,
- hsl(300, 3%, 73%),
- hsl(300, 3%, 93%) 30%
- );
-}
-
-[role="checkbox"][aria-checked="mixed"]::before,
-[role="checkbox"][aria-checked="true"]::before {
- border-color: hsl(216, 80%, 50%);
- background: hsl(217, 95%, 68%);
- background-image: linear-gradient(
- to bottom,
- hsl(217, 95%, 68%),
- hsl(216, 80%, 57%)
- );
-}
-
-[role="checkbox"][aria-checked="mixed"]::after {
- display: block;
- width: 8px;
- border-bottom: 0.125em solid #fff;
- transform: translate(-50%, -50%) rotateZ(45deg);
- transform-origin: center center;
-}
-
-[role="checkbox"][aria-checked="mixed"]:active::after,
-[role="checkbox"][aria-checked="true"]::after {
- display: block;
- width: 0.25em;
- height: 0.4em;
- border: solid #fff;
- border-width: 0 0.125em 0.125em 0;
- transform: translateY(-65%) translateX(-50%) rotate(45deg);
-}
-
-[role="checkbox"][aria-checked="mixed"]:active::before,
-[role="checkbox"][aria-checked="true"]:active::before {
- background-image: linear-gradient(
- to bottom,
- hsl(216, 80%, 57%),
- hsl(217, 95%, 68%)
- );
-}
-
-[role="checkbox"]:focus {
- outline: none;
-}
-
-[role="checkbox"]:focus::before {
- width: 16px;
- height: 16px;
- box-sizing: content-box;
- border-color: hsl(216, 94%, 73%);
- border-width: 3px;
- border-radius: calc(0.2em + 3px);
- box-shadow: inset 0 0 0 1px hsl(216, 80%, 50%);
-}
diff --git a/build/tests/checkbox-tri-state/reference/js/checkboxMixed.js b/build/tests/checkbox-tri-state/reference/js/checkboxMixed.js
deleted file mode 100644
index d2ca7f9a8..000000000
--- a/build/tests/checkbox-tri-state/reference/js/checkboxMixed.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: CheckboxMixed.js
- *
- * Desc: CheckboxMixed widget that implements ARIA Authoring Practices
- * for a menu of links
- */
-
-'use strict';
-
-/*
- * @constructor CheckboxMixed
- *
- *
- */
-var CheckboxMixed = function (domNode) {
- this.domNode = domNode;
-
- this.controlledCheckboxes = [];
-
- this.keyCode = Object.freeze({
- RETURN: 13,
- SPACE: 32,
- });
-};
-
-CheckboxMixed.prototype.init = function () {
- this.domNode.tabIndex = 0;
-
- var ids = this.domNode.getAttribute('aria-controls').split(' ');
-
- for (var i = 0; i < ids.length; i++) {
- var node = document.getElementById(ids[i]);
- var ccb = new ControlledCheckbox(node, this);
- ccb.init();
- this.controlledCheckboxes.push(ccb);
- }
-
- this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
- this.domNode.addEventListener('click', this.handleClick.bind(this));
- this.domNode.addEventListener('focus', this.handleFocus.bind(this));
- this.domNode.addEventListener('blur', this.handleBlur.bind(this));
-
- this.updateCheckboxMixed();
-};
-
-CheckboxMixed.prototype.updateCheckboxMixed = function () {
- var count = 0;
-
- for (var i = 0; i < this.controlledCheckboxes.length; i++) {
- if (this.controlledCheckboxes[i].isChecked()) {
- count++;
- }
- }
-
- if (count === 0) {
- this.domNode.setAttribute('aria-checked', 'false');
- } else {
- if (count === this.controlledCheckboxes.length) {
- this.domNode.setAttribute('aria-checked', 'true');
- } else {
- this.domNode.setAttribute('aria-checked', 'mixed');
- this.updateControlledStates();
- }
- }
-};
-
-CheckboxMixed.prototype.updateControlledStates = function () {
- for (var i = 0; i < this.controlledCheckboxes.length; i++) {
- this.controlledCheckboxes[i].lastState = this.controlledCheckboxes[
- i
- ].isChecked();
- }
-};
-
-CheckboxMixed.prototype.anyLastChecked = function () {
- var count = 0;
-
- for (var i = 0; i < this.controlledCheckboxes.length; i++) {
- if (this.controlledCheckboxes[i].lastState) {
- count++;
- }
- }
-
- return count > 0;
-};
-
-CheckboxMixed.prototype.setControlledCheckboxes = function (value) {
- for (var i = 0; i < this.controlledCheckboxes.length; i++) {
- this.controlledCheckboxes[i].setChecked(value);
- }
-
- this.updateCheckboxMixed();
-};
-
-CheckboxMixed.prototype.toggleCheckboxMixed = function () {
- var state = this.domNode.getAttribute('aria-checked');
-
- if (state === 'false') {
- if (this.anyLastChecked()) {
- this.setControlledCheckboxes('last');
- } else {
- this.setControlledCheckboxes('true');
- }
- } else {
- if (state === 'mixed') {
- this.setControlledCheckboxes('true');
- } else {
- this.setControlledCheckboxes('false');
- }
- }
-
- this.updateCheckboxMixed();
-};
-
-/* EVENT HANDLERS */
-
-CheckboxMixed.prototype.handleKeydown = function (event) {
- var flag = false;
-
- switch (event.keyCode) {
- case this.keyCode.SPACE:
- this.toggleCheckboxMixed();
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-CheckboxMixed.prototype.handleClick = function (event) {
- this.toggleCheckboxMixed();
-};
-
-CheckboxMixed.prototype.handleFocus = function (event) {
- this.domNode.classList.add('focus');
-};
-
-CheckboxMixed.prototype.handleBlur = function (event) {
- this.domNode.classList.remove('focus');
-};
diff --git a/build/tests/checkbox-tri-state/reference/js/controlledCheckbox.js b/build/tests/checkbox-tri-state/reference/js/controlledCheckbox.js
deleted file mode 100644
index b44c95eeb..000000000
--- a/build/tests/checkbox-tri-state/reference/js/controlledCheckbox.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: controlledCheckbox.js
- *
- * Desc: ControlledCheckbox widget that implements ARIA Authoring Practices
- * for a mixed checkbox
- */
-
-'use strict';
-
-/*
- * @constructor ControlledCheckbox
- *
- *
- */
-var ControlledCheckbox = function (domNode, controllerObj) {
- this.domNode = domNode;
- this.controller = controllerObj;
- this.lastState = false;
-};
-
-ControlledCheckbox.prototype.init = function () {
- this.lastState = this.isChecked();
-
- console.log(this.lastState);
-
- this.domNode.addEventListener('change', this.handleChange.bind(this));
-
- this.domNode.addEventListener('keydown', this.handleKeyup.bind(this), true);
- this.domNode.addEventListener('click', this.handleClick.bind(this), true);
-};
-
-ControlledCheckbox.prototype.isChecked = function () {
- // if standard input[type=checkbox]
- if (typeof this.domNode.checked === 'boolean') {
- return this.domNode.checked;
- }
-
- // If ARIA checkbox widget
- return this.domNode.getAttribute('aria-checked') === 'true';
-};
-
-ControlledCheckbox.prototype.setChecked = function (value) {
- // if standard input[type=checkbox]
- if (typeof this.domNode.checked === 'boolean') {
- switch (value) {
- case 'true':
- this.domNode.checked = true;
- break;
-
- case 'false':
- this.domNode.checked = false;
- break;
-
- case 'last':
- this.domNode.checked = this.lastState;
- break;
-
- default:
- break;
- }
- }
-
- // If ARIA checkbox widget
- if (typeof this.domNode.getAttribute('aria-checked') === 'string') {
- switch (value) {
- case 'true':
- case 'false':
- this.domNode.setAttribute('aria-checked', value);
- break;
-
- case 'last':
- if (this.lastState) {
- this.domNode.setAttribute('aria-checked', 'true');
- } else {
- this.domNode.setAttribute('aria-checked', 'false');
- }
- break;
-
- default:
- break;
- }
- }
-};
-
-/* EVENT HANDLERS */
-
-ControlledCheckbox.prototype.handleChange = function (event) {
- this.controller.updateCheckboxMixed();
-};
-
-ControlledCheckbox.prototype.handleKeyup = function (event) {
- this.lastState = this.isChecked();
-};
-
-ControlledCheckbox.prototype.handleClick = function (event) {
- this.lastState = this.isChecked();
-};
diff --git a/build/tests/checkbox/reference/2020-11-23_175030/checkbox-1/checkbox-1.html b/build/tests/checkbox/reference/2020-11-23_175030/checkbox-1/checkbox-1.html
deleted file mode 100644
index 5aa42a3c0..000000000
--- a/build/tests/checkbox/reference/2020-11-23_175030/checkbox-1/checkbox-1.html
+++ /dev/null
@@ -1,46 +0,0 @@
-
-
-
-
- Checkbox Example (Two State) | WAI-ARIA Authoring Practices 1.2
-
-
-
-
-
-
-
-
-
-
-
-
- Checkbox Example (Two State)
-
-
-
Sandwich Condiments
-
-
- Lettuce
- Tomato
- Mustard
- Sprouts
-
-
-
-
-
-
-
-
diff --git a/build/tests/checkbox/reference/2020-11-23_175030/checkbox-1/js/checkbox.js b/build/tests/checkbox/reference/2020-11-23_175030/checkbox-1/js/checkbox.js
deleted file mode 100644
index 092727e97..000000000
--- a/build/tests/checkbox/reference/2020-11-23_175030/checkbox-1/js/checkbox.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: Checkbox.js
- *
- * Desc: Checkbox widget that implements ARIA Authoring Practices
- * for a menu of links
- *
- */
-
-'use strict';
-
-/*
- * @constructor Checkbox
- *
- *
- */
-var Checkbox = function (domNode) {
- this.domNode = domNode;
-
- this.keyCode = Object.freeze({
- RETURN: 13,
- SPACE: 32,
- });
-};
-
-Checkbox.prototype.init = function () {
- this.domNode.tabIndex = 0;
-
- if (!this.domNode.getAttribute('aria-checked')) {
- this.domNode.setAttribute('aria-checked', 'false');
- }
-
- this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
- this.domNode.addEventListener('click', this.handleClick.bind(this));
- this.domNode.addEventListener('focus', this.handleFocus.bind(this));
- this.domNode.addEventListener('blur', this.handleBlur.bind(this));
-};
-
-Checkbox.prototype.toggleCheckbox = function () {
- if (this.domNode.getAttribute('aria-checked') === 'true') {
- this.domNode.setAttribute('aria-checked', 'false');
- } else {
- this.domNode.setAttribute('aria-checked', 'true');
- }
-};
-
-/* EVENT HANDLERS */
-
-Checkbox.prototype.handleKeydown = function (event) {
- var flag = false;
-
- switch (event.keyCode) {
- case this.keyCode.SPACE:
- this.toggleCheckbox();
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-Checkbox.prototype.handleClick = function (event) {
- this.toggleCheckbox();
-};
-
-Checkbox.prototype.handleFocus = function (event) {
- this.domNode.classList.add('focus');
-};
-
-Checkbox.prototype.handleBlur = function (event) {
- this.domNode.classList.remove('focus');
-};
diff --git a/build/tests/checkbox/reference/2020-11-23_175030/checkbox-2/js/checkboxMixed.js b/build/tests/checkbox/reference/2020-11-23_175030/checkbox-2/js/checkboxMixed.js
deleted file mode 100644
index d2ca7f9a8..000000000
--- a/build/tests/checkbox/reference/2020-11-23_175030/checkbox-2/js/checkboxMixed.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: CheckboxMixed.js
- *
- * Desc: CheckboxMixed widget that implements ARIA Authoring Practices
- * for a menu of links
- */
-
-'use strict';
-
-/*
- * @constructor CheckboxMixed
- *
- *
- */
-var CheckboxMixed = function (domNode) {
- this.domNode = domNode;
-
- this.controlledCheckboxes = [];
-
- this.keyCode = Object.freeze({
- RETURN: 13,
- SPACE: 32,
- });
-};
-
-CheckboxMixed.prototype.init = function () {
- this.domNode.tabIndex = 0;
-
- var ids = this.domNode.getAttribute('aria-controls').split(' ');
-
- for (var i = 0; i < ids.length; i++) {
- var node = document.getElementById(ids[i]);
- var ccb = new ControlledCheckbox(node, this);
- ccb.init();
- this.controlledCheckboxes.push(ccb);
- }
-
- this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
- this.domNode.addEventListener('click', this.handleClick.bind(this));
- this.domNode.addEventListener('focus', this.handleFocus.bind(this));
- this.domNode.addEventListener('blur', this.handleBlur.bind(this));
-
- this.updateCheckboxMixed();
-};
-
-CheckboxMixed.prototype.updateCheckboxMixed = function () {
- var count = 0;
-
- for (var i = 0; i < this.controlledCheckboxes.length; i++) {
- if (this.controlledCheckboxes[i].isChecked()) {
- count++;
- }
- }
-
- if (count === 0) {
- this.domNode.setAttribute('aria-checked', 'false');
- } else {
- if (count === this.controlledCheckboxes.length) {
- this.domNode.setAttribute('aria-checked', 'true');
- } else {
- this.domNode.setAttribute('aria-checked', 'mixed');
- this.updateControlledStates();
- }
- }
-};
-
-CheckboxMixed.prototype.updateControlledStates = function () {
- for (var i = 0; i < this.controlledCheckboxes.length; i++) {
- this.controlledCheckboxes[i].lastState = this.controlledCheckboxes[
- i
- ].isChecked();
- }
-};
-
-CheckboxMixed.prototype.anyLastChecked = function () {
- var count = 0;
-
- for (var i = 0; i < this.controlledCheckboxes.length; i++) {
- if (this.controlledCheckboxes[i].lastState) {
- count++;
- }
- }
-
- return count > 0;
-};
-
-CheckboxMixed.prototype.setControlledCheckboxes = function (value) {
- for (var i = 0; i < this.controlledCheckboxes.length; i++) {
- this.controlledCheckboxes[i].setChecked(value);
- }
-
- this.updateCheckboxMixed();
-};
-
-CheckboxMixed.prototype.toggleCheckboxMixed = function () {
- var state = this.domNode.getAttribute('aria-checked');
-
- if (state === 'false') {
- if (this.anyLastChecked()) {
- this.setControlledCheckboxes('last');
- } else {
- this.setControlledCheckboxes('true');
- }
- } else {
- if (state === 'mixed') {
- this.setControlledCheckboxes('true');
- } else {
- this.setControlledCheckboxes('false');
- }
- }
-
- this.updateCheckboxMixed();
-};
-
-/* EVENT HANDLERS */
-
-CheckboxMixed.prototype.handleKeydown = function (event) {
- var flag = false;
-
- switch (event.keyCode) {
- case this.keyCode.SPACE:
- this.toggleCheckboxMixed();
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-CheckboxMixed.prototype.handleClick = function (event) {
- this.toggleCheckboxMixed();
-};
-
-CheckboxMixed.prototype.handleFocus = function (event) {
- this.domNode.classList.add('focus');
-};
-
-CheckboxMixed.prototype.handleBlur = function (event) {
- this.domNode.classList.remove('focus');
-};
diff --git a/build/tests/checkbox/reference/2020-11-23_175030/checkbox-2/js/controlledCheckbox.js b/build/tests/checkbox/reference/2020-11-23_175030/checkbox-2/js/controlledCheckbox.js
deleted file mode 100644
index b44c95eeb..000000000
--- a/build/tests/checkbox/reference/2020-11-23_175030/checkbox-2/js/controlledCheckbox.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: controlledCheckbox.js
- *
- * Desc: ControlledCheckbox widget that implements ARIA Authoring Practices
- * for a mixed checkbox
- */
-
-'use strict';
-
-/*
- * @constructor ControlledCheckbox
- *
- *
- */
-var ControlledCheckbox = function (domNode, controllerObj) {
- this.domNode = domNode;
- this.controller = controllerObj;
- this.lastState = false;
-};
-
-ControlledCheckbox.prototype.init = function () {
- this.lastState = this.isChecked();
-
- console.log(this.lastState);
-
- this.domNode.addEventListener('change', this.handleChange.bind(this));
-
- this.domNode.addEventListener('keydown', this.handleKeyup.bind(this), true);
- this.domNode.addEventListener('click', this.handleClick.bind(this), true);
-};
-
-ControlledCheckbox.prototype.isChecked = function () {
- // if standard input[type=checkbox]
- if (typeof this.domNode.checked === 'boolean') {
- return this.domNode.checked;
- }
-
- // If ARIA checkbox widget
- return this.domNode.getAttribute('aria-checked') === 'true';
-};
-
-ControlledCheckbox.prototype.setChecked = function (value) {
- // if standard input[type=checkbox]
- if (typeof this.domNode.checked === 'boolean') {
- switch (value) {
- case 'true':
- this.domNode.checked = true;
- break;
-
- case 'false':
- this.domNode.checked = false;
- break;
-
- case 'last':
- this.domNode.checked = this.lastState;
- break;
-
- default:
- break;
- }
- }
-
- // If ARIA checkbox widget
- if (typeof this.domNode.getAttribute('aria-checked') === 'string') {
- switch (value) {
- case 'true':
- case 'false':
- this.domNode.setAttribute('aria-checked', value);
- break;
-
- case 'last':
- if (this.lastState) {
- this.domNode.setAttribute('aria-checked', 'true');
- } else {
- this.domNode.setAttribute('aria-checked', 'false');
- }
- break;
-
- default:
- break;
- }
- }
-};
-
-/* EVENT HANDLERS */
-
-ControlledCheckbox.prototype.handleChange = function (event) {
- this.controller.updateCheckboxMixed();
-};
-
-ControlledCheckbox.prototype.handleKeyup = function (event) {
- this.lastState = this.isChecked();
-};
-
-ControlledCheckbox.prototype.handleClick = function (event) {
- this.lastState = this.isChecked();
-};
diff --git a/build/tests/checkbox/reference/2020-11-23_175030/css/checkbox.css b/build/tests/checkbox/reference/2020-11-23_175030/css/checkbox.css
deleted file mode 100644
index 3eb6b7dc8..000000000
--- a/build/tests/checkbox/reference/2020-11-23_175030/css/checkbox.css
+++ /dev/null
@@ -1,89 +0,0 @@
-ul.checkboxes {
- list-style: none;
- margin-left: 0;
- padding-left: 1em;
-}
-
-[role="checkbox"] {
- display: inline-block;
- position: relative;
- padding-left: 1.4em;
- cursor: default;
-}
-
-[role="checkbox"]::before,
-[role="checkbox"]::after {
- position: absolute;
- top: 50%;
- left: 7px;
- transform: translate(-50%, -50%);
- content: "";
-}
-
-[role="checkbox"]::before {
- width: 14px;
- height: 14px;
- border: 1px solid hsl(0, 0%, 66%);
- border-radius: 0.2em;
- background-image: linear-gradient(to bottom, hsl(300, 3%, 93%), #fff 30%);
-}
-
-[role="checkbox"]:active::before {
- background-image: linear-gradient(
- to bottom,
- hsl(300, 3%, 73%),
- hsl(300, 3%, 93%) 30%
- );
-}
-
-[role="checkbox"][aria-checked="mixed"]::before,
-[role="checkbox"][aria-checked="true"]::before {
- border-color: hsl(216, 80%, 50%);
- background: hsl(217, 95%, 68%);
- background-image: linear-gradient(
- to bottom,
- hsl(217, 95%, 68%),
- hsl(216, 80%, 57%)
- );
-}
-
-[role="checkbox"][aria-checked="mixed"]::after {
- display: block;
- width: 8px;
- border-bottom: 0.125em solid #fff;
- transform: translate(-50%, -50%) rotateZ(45deg);
- transform-origin: center center;
-}
-
-[role="checkbox"][aria-checked="mixed"]:active::after,
-[role="checkbox"][aria-checked="true"]::after {
- display: block;
- width: 0.25em;
- height: 0.4em;
- border: solid #fff;
- border-width: 0 0.125em 0.125em 0;
- transform: translateY(-65%) translateX(-50%) rotate(45deg);
-}
-
-[role="checkbox"][aria-checked="mixed"]:active::before,
-[role="checkbox"][aria-checked="true"]:active::before {
- background-image: linear-gradient(
- to bottom,
- hsl(216, 80%, 57%),
- hsl(217, 95%, 68%)
- );
-}
-
-[role="checkbox"]:focus {
- outline: none;
-}
-
-[role="checkbox"]:focus::before {
- width: 16px;
- height: 16px;
- box-sizing: content-box;
- border-color: hsl(216, 94%, 73%);
- border-width: 3px;
- border-radius: calc(0.2em + 3px);
- box-shadow: inset 0 0 0 1px hsl(216, 80%, 50%);
-}
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/combobox-autocomplete-both.html b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/combobox-autocomplete-both.html
deleted file mode 100644
index ecd3b4ba2..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/combobox-autocomplete-both.html
+++ /dev/null
@@ -1,528 +0,0 @@
-
-
-
-
-Editable Combobox With Both List and Inline Autocomplete Example | WAI-ARIA Authoring Practices 1.2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Editable Combobox With Both List and Inline Autocomplete Example
-
- The below combobox for choosing the name of a US state or territory demonstrates the
- design pattern for combobox.
- The design pattern describes four types of autocomplete behavior.
- This example illustrates the autocomplete behavior referred to in the pattern as list with inline completion.
- If the user types one or more characters in the edit box and the typed characters match the beginning of the name of one or more states or territories,
- a listbox popup appears containing the matching names, and the first match is automatically selected.
- In addition, the portion of the selected suggestion that has not been typed by the user, a completion string, appears inline after the input cursor in the textbox.
- The automatically selected suggestion becomes the value of the textbox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the textbox.
- Note that this implementation enables users to input the name of a state or territory, but it does not prevent input of any other arbitrary value.
-
- Similar examples include:
-
-
- Example
-
-
-
State
-
-
-
- Alabama
- Alaska
- American Samoa
- Arizona
- Arkansas
- California
- Colorado
- Connecticut
- Delaware
- District of Columbia
- Florida
- Georgia
- Guam
- Hawaii
- Idaho
- Illinois
- Indiana
- Iowa
- Kansas
- Kentucky
- Louisiana
- Maine
- Maryland
- Massachusetts
- Michigan
- Minnesota
- Mississippi
- Missouri
- Montana
- Nebraska
- Nevada
- New Hampshire
- New Jersey
- New Mexico
- New York
- North Carolina
- North Dakota
- Northern Marianas Islands
- Ohio
- Oklahoma
- Oregon
- Pennsylvania
- Puerto Rico
- Rhode Island
- South Carolina
- South Dakota
- Tennessee
- Texas
- Utah
- Vermont
- Virginia
- Virgin Islands
- Washington
- West Virginia
- Wisconsin
- Wyoming
-
-
-
-
-
-
-
- Keyboard Support
-
- The example combobox on this page implements the following keyboard interface.
- Other variations and options for the keyboard interface are described in the
- Keyboard Interaction section of the combobox design pattern.
-
- Textbox
-
-
-
- Key
- Function
-
-
-
-
- Down Arrow
-
-
- If the listbox is displayed and a suggestion is selected, moves visual focus to the next suggested value.
- If the textbox is empty and the listbox is not displayed, opens the listbox and moves visual focus to the first option.
- In both cases DOM focus remains on the textbox.
-
-
-
-
- Alt + Down Arrow
-
- Opens the listbox without moving focus or changing selection.
-
-
-
- Up Arrow
-
-
- If the listbox is displayed and a suggestion is selected, moves visual focus to the last suggested value.
- If the textbox is empty, first opens the listbox if it is not already displayed and then moves visual focus to the last option.
- In both cases DOM focus remains on the textbox.
-
-
-
-
- Enter
-
-
- Sets the textbox value to the content of the selected option.
- Closes the listbox.
-
-
-
-
- Escape
-
-
- If the listbox is displayed, closes it.
- If the listbox is not displayed, clears the textbox.
-
-
-
-
- Standard single line text editing keys
-
-
- Keys used for cursor movement and text manipulation, such as Delete and Shift + Right Arrow .
- An HTML input
with type="text"
is used for the textbox so the browser will provide platform-specific editing keys.
-
-
-
-
-
- Listbox Popup
-
- NOTE: When visual focus is in the listbox, DOM focus remains on the textbox and the value of aria-activedescendant
on the textbox is set to a value that refers to the listbox option that is visually indicated as focused.
- Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator.
- For more information about this focus management technique, see
- Using aria-activedescendant to Manage Focus.
-
-
-
-
- Key
- Function
-
-
-
-
- Enter
-
-
- Sets the textbox value to the content of the focused option in the listbox.
- Closes the listbox.
- Sets visual focus on the textbox.
-
-
-
-
- Escape
-
-
- Closes the listbox.
- Sets visual focus on the textbox.
-
-
-
-
- Down Arrow
-
-
- Moves visual focus to the next option.
- If visual focus is on the last option, moves visual focus to the first option.
- Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
-
-
-
-
- Up Arrow
-
-
- Moves visual focus to the previous option.
- If visual focus is on the first option, moves visual focus to the last option.
- Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
-
-
-
-
- Right Arrow
- Moves visual focus to the textbox and moves the editing cursor one character to the right.
-
-
- Left Arrow
- Moves visual focus to the textbox and moves the editing cursor one character to the left.
-
-
- Home
- Moves visual focus to the textbox and places the editing cursor at the beginning of the field.
-
-
- End
- Moves visual focus to the textbox and places the editing cursor at the end of the field.
-
-
- Printable Characters
-
-
- Moves visual focus to the textbox.
- Types the character in the textbox.
- Options in the listbox are filtered based on characters in the textbox.
-
-
-
-
-
-
-
- The button has been removed from the tab sequence of the page, but is still important to assistive technologies for mobile devices that use touch events to open the list of options.
-
-
-
-
-
- Role, Property, State, and Tabindex Attributes
-
- The example combobox on this page implements the following ARIA roles, states, and properties.
- Information about other ways of applying ARIA roles, states, and properties is available in the
- Roles, States, and Properties section of the combobox design pattern.
-
- Textbox
-
-
-
- Role
- Attribute
- Element
- Usage
-
-
-
-
-
- combobox
-
-
- input[type="text"]
- Identifies the input as a combobox.
-
-
-
-
- aria-autocomplete="both"
-
- input[type="text"]
- Indicates that the autocomplete behavior of the text input is to both show an inline completion string and suggest a list of possible values in a popup where the suggestions are related to the string that is present in the textbox.
-
-
-
-
- aria-controls="#IDREF"
-
- input[type="text"]
- Identifies the element that serves as the popup.
-
-
-
-
- aria-expanded="false"
-
- input[type="text"]
- Indicates that the popup element is not displayed.
-
-
-
-
- aria-expanded="true"
-
- input[type="text"]
- Indicates that the popup element is displayed.
-
-
-
-
- id="string"
-
- input[type="text"]
-
-
- Referenced by for
attribute of label
element to provide an accessible name.
- Recommended naming method for HTML input elements because clicking label focuses input.
-
-
-
-
-
-
- aria-activedescendant="IDREF"
-
- input[type="text"]
-
-
- When an option in the listbox is visually indicated as having keyboard focus, refers to that option.
- When navigation keys, such as Down Arrow , are pressed, the JavaScript changes the value.
- Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input
element.
-
- For more information about this focus management technique, see
- Using aria-activedescendant to Manage Focus.
-
-
-
-
-
-
- Listbox Popup
-
-
-
- Role
- Attribute
- Element
- Usage
-
-
-
-
-
- listbox
-
-
-
- ul
-
- Identifies the ul
element as a listbox
.
-
-
-
-
- aria-label="States"
-
- ul
- Provides a label for the listbox
.
-
-
-
- option
-
-
- li
-
-
- Identifies the element as a listbox
option
.
- The text content of the element provides the accessible name of the option
.
-
-
-
-
-
-
- aria-selected="true"
-
- li
-
-
- Specified on an option in the listbox when it is visually highlighted as selected.
- Occurs when an option in the list is referenced by aria-activedescendant
and when focus is in the textbox and the first option is automatically selected.
-
-
-
-
-
-
-
-
-
-
- Role
- Attribute
- Element
- Usage
-
-
-
-
-
-
- tabindex="-1"
-
- button
- Removes the button from the tab sequence of the page because its function is redundant with the keyboard operation of the combobox.
-
-
-
-
- aria-label="States"
-
- button
- Provides a label for the button
.
-
-
-
-
- aria-controls="#IDREF"
-
- button
- Identifies the element that serves as the popup.
-
-
-
-
- aria-expanded="false"
-
- button
- Indicates that the popup element is not displayed.
-
-
-
-
- aria-expanded="true"
-
- button
- Indicates that the popup element is displayed.
-
-
-
-
-
-
- Javascript and CSS Source Code
-
-
-
-
- HTML Source Code
-
-
-
-
-
-
-
-
-
-
- Combobox Design Pattern in WAI-ARIA Authoring Practices 1.2
-
-
-
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/combobox-autocomplete.css b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/combobox-autocomplete.css
deleted file mode 100644
index 297f818b5..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/combobox-autocomplete.css
+++ /dev/null
@@ -1,114 +0,0 @@
-.combobox-list {
- position: relative;
-}
-
-.combobox .group {
- display: inline-flex;
-}
-
-.combobox input,
-.combobox button {
- background-color: white;
- color: black;
- box-sizing: border-box;
- height: 1.75rem;
- padding: 0;
- margin: 0;
- vertical-align: bottom;
- border: 1px solid gray;
- position: relative;
-}
-
-.combobox input {
- width: 10.75rem;
- border-right: none;
- outline: none;
- font-size: 87.5%;
- padding: 0.1em 0.3em;
-}
-
-.combobox button {
- width: 1.25rem;
- border-left: none;
- outline: none;
-}
-
-.combobox button[aria-expanded="true"] svg {
- transform: rotate(180deg) translate(0, -1px);
-}
-
-.combobox .group.focus {
- outline: 2px solid black;
- outline-offset: 1px;
-}
-
-.combobox .group.focus input,
-.combobox .group.focus button {
- background-color: #def;
-}
-
-.combobox button polygon.outline {
- stroke: transparent;
- fill: transparent;
-}
-
-.combobox button[aria-expanded="true"] polygon.outline,
-.combobox .group.focus polygon.outline {
- stroke: white;
- fill: white;
-}
-
-.combobox polygon.arrow {
- fill: gray;
- stroke: gray;
-}
-
-ul[role="listbox"] {
- margin: 0;
- padding: 0;
- position: absolute;
- left: 0;
- top: 1.75rem;
- list-style: none;
- background-color: white;
- display: none;
- box-sizing: border-box;
- border: 1px gray solid;
- border-top: none;
- max-height: 11.4em;
- width: 12rem;
- overflow: scroll;
- overflow-x: hidden;
- font-size: 87.5%;
-}
-
-ul[role="listbox"] li[role="option"] {
- display: block;
- padding-left: 0.3em;
- padding-top: 0.2em;
- padding-bottom: 0.2em;
- margin: 0;
-}
-
-/* focus and hover styling */
-
-[role="listbox"].focus [role="option"][aria-selected="true"] {
- background-color: #def;
- padding-top: 0;
- padding-bottom: 0;
- border-top: 0.2em solid #8ccbf2;
- border-bottom: 0.2em solid #8ccbf2;
-}
-
-@media (forced-colors: active), (-ms-high-contrast: active) {
- [role="listbox"].focus [role="option"][aria-selected="true"] {
- -ms-high-contrast-adjust: none; /* disable the backgrounds that Edge puts behind text */
- background-color: highlight;
- color: highlighttext;
- border-color: currentColor;
- }
-}
-
-[role="listbox"] li[role="option"]:hover {
- background-color: #def;
-}
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/combobox-datepicker.css b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/combobox-datepicker.css
deleted file mode 100644
index 5370b4edf..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/combobox-datepicker.css
+++ /dev/null
@@ -1,249 +0,0 @@
-.combobox-datepicker {
- margin-top: 1em;
- position: relative;
-}
-
-.combobox-datepicker .group {
- display: inline-flex;
- position: relative;
- width: 12.125rem;
-}
-
-.combobox-datepicker label {
- display: block;
-}
-
-.combobox-datepicker .group input,
-.combobox-datepicker .group button {
- background-color: white;
- color: black;
- box-sizing: border-box;
- height: 1.75rem;
- padding: 0;
- margin: 0;
- vertical-align: bottom;
- border: 1px solid gray;
- position: relative;
-}
-
-.combobox-datepicker .group input {
- width: 10.75rem;
- border-right: none;
- outline: none;
- font-size: 87.5%;
- padding: 0.1em 0.3em;
-}
-
-.combobox-datepicker .group button {
- position: absolute;
- left: 10.75rem;
- padding-right: 0.125rem;
- border-left: none;
- outline: none;
-}
-
-.combobox-datepicker .group .desc {
- position: absolute;
- top: 2em;
- left: 0;
- margin-top: 0.1em;
- font-size: 90%;
- font-style: italic;
- letter-spacing: 0.025em;
-}
-
-.combobox-datepicker .group.focus {
- outline: 2px solid black;
- outline-offset: 2px;
-}
-
-.combobox-datepicker .group.focus input,
-.combobox-datepicker .group.focus button {
- background-color: #def;
-}
-
-.combobox-datepicker .group polygon {
- fill: gray;
- stroke: transparent;
-}
-
-.combobox-datepicker .group button[aria-expanded="true"] polygon,
-.combobox-datepicker .group.focus polygon {
- fill: black;
- stroke: white;
-}
-
-.combobox-datepicker .group button.open svg {
- transform: rotate(180deg) translate(0, -1px);
-}
-
-.combobox-datepicker .dialog {
- position: absolute;
- width: 320px;
- clear: both;
- border: 3px solid hsl(216, 80%, 51%);
- margin-top: 1em;
- border-radius: 5px;
- padding: 0;
- background-color: #fff;
-}
-
-.combobox-datepicker .header {
- cursor: default;
- background-color: hsl(216, 80%, 51%);
- padding: 7px;
- font-weight: bold;
- text-transform: uppercase;
- color: white;
- display: flex;
- justify-content: space-around;
-}
-
-.combobox-datepicker .dialog h2 {
- margin: 0;
- padding: 0;
- display: inline-block;
- font-size: 1em;
- color: white;
- text-transform: none;
- font-weight: bold;
-}
-
-.combobox-datepicker .dialog button {
- border-style: none;
- background: transparent;
-}
-
-.combobox-datepicker .dialog button::-moz-focus-inner {
- border: 0;
-}
-
-.combobox-datepicker .dates {
- width: 320px;
- padding-left: 1em;
- padding-right: 1em;
- padding-top: 1em;
-}
-
-.combobox-datepicker .prev-year,
-.combobox-datepicker .prev-month,
-.combobox-datepicker .next-month,
-.combobox-datepicker .next-year {
- padding: 4px;
- width: 24px;
- height: 24px;
- color: white;
-}
-
-.combobox-datepicker .prev-year:focus,
-.combobox-datepicker .prev-month:focus,
-.combobox-datepicker .next-month:focus,
-.combobox-datepicker .next-year:focus {
- padding: 2px;
- border: 2px solid white;
- border-radius: 4px;
- outline: 0;
-}
-
-.combobox-datepicker .prev-year:hover,
-.combobox-datepicker .prev-month:hover,
-.combobox-datepicker .next-month:hover,
-.combobox-datepicker .next-year:hover {
- padding: 3px;
- border: 1px solid white;
- border-radius: 4px;
- outline: 0;
-}
-
-.combobox-datepicker .dialog-ok-cancel-group {
- text-align: right;
- margin-top: 1em;
- margin-bottom: 1em;
- margin-right: 1em;
-}
-
-.combobox-datepicker .dialog-ok-cancel-group button {
- padding: 6px;
- margin-left: 1em;
- width: 5em;
- background-color: hsl(216, 80%, 92%);
- font-size: 0.85em;
- color: black;
- outline: none;
- border-radius: 5px;
-}
-
-.combobox-datepicker .dialog-button:focus {
- padding: 4px;
- border: 2px solid black;
-}
-
-.combobox-datepicker .dialog-button:hover {
- padding: 5px;
- border: 1px solid black;
-}
-
-.combobox-datepicker .fa-calendar-alt {
- color: hsl(216, 89%, 51%);
-}
-
-.combobox-datepicker .month-year {
- display: inline-block;
- width: 12em;
- text-align: center;
-}
-
-.combobox-datepicker .dates th,
-.combobox-datepicker .dates td {
- text-align: center;
-}
-
-.combobox-datepicker .dates tr {
- border: 1px solid black;
-}
-
-.combobox-datepicker .dates td {
- padding: 3px;
- margin: 0;
- line-height: inherit;
- height: 40px;
- width: 40px;
- border-radius: 5px;
- font-size: 15px;
- background: #eee;
-}
-
-.combobox-datepicker .dates td[aria-selected] {
- padding: 1px;
- border: 2px dotted black;
- background-color: hsl(216, 80%, 96%);
-}
-
-.combobox-datepicker .dates td[tabindex="0"] {
- background-color: hsl(216, 80%, 51%);
- color: white;
-}
-
-.combobox-datepicker .dates td:hover {
- padding: 0;
- background-color: hsl(216, 80%, 92%);
-}
-
-.combobox-datepicker .dates td:not(.disabled):hover {
- padding: 2px;
- border: 1px solid rgb(100, 100, 100);
-}
-
-.combobox-datepicker .dates td:focus {
- padding: 1px;
- border: 2px solid rgb(100, 100, 100);
- outline: 0;
-}
-
-.combobox-datepicker .dialog-message {
- padding-top: 0.25em;
- padding-left: 1em;
- height: 1.75em;
- background: hsl(216, 80%, 51%);
- color: white;
-}
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/grid-combo.css b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/grid-combo.css
deleted file mode 100644
index 29324bea1..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/grid-combo.css
+++ /dev/null
@@ -1,88 +0,0 @@
-.hidden {
- display: none;
-}
-
-.combobox-wrapper {
- display: inline-block;
- position: relative;
- font-size: 16px;
-}
-
-.combobox-label {
- font-size: 14px;
- font-weight: bold;
- margin-right: 5px;
-}
-
-.listbox,
-.grid {
- min-width: 230px;
- background: white;
- border: 1px solid #ccc;
- list-style: none;
- margin: 0;
- padding: 0;
- position: absolute;
- top: 1.7em;
- z-index: 1;
-}
-
-.listbox .result {
- cursor: default;
- margin: 0;
-}
-
-.grid .result-row {
- padding: 2px;
- cursor: default;
- margin: 0;
-}
-
-.listbox .result:hover,
-.grid .result-row:hover {
- background: rgb(139, 189, 225);
-}
-
-.listbox .focused,
-.grid .focused {
- background: rgb(139, 189, 225);
-}
-
-.grid .focused-cell {
- outline-style: dotted;
- outline-color: green;
-}
-
-.combobox-wrapper input {
- font-size: inherit;
- border: 1px solid #aaa;
- border-radius: 2px;
- line-height: 1.5em;
- padding-right: 30px;
- width: 200px;
-}
-
-.combobox-dropdown {
- position: absolute;
- right: 0;
- top: 0;
- padding: 0 0 2px;
- height: 1.5em;
- border-radius: 0 2px 2px 0;
- border: 1px solid #aaa;
-}
-
-.grid .result-cell {
- display: inline-block;
- cursor: default;
- margin: 0;
- padding: 0 5px;
-}
-
-.grid .result-cell:last-child {
- float: right;
- font-size: 12px;
- font-weight: 200;
- color: #333;
- line-height: 24px;
-}
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/select-only.css b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/select-only.css
deleted file mode 100644
index 1d8beb3a7..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/select-only.css
+++ /dev/null
@@ -1,103 +0,0 @@
-.combo *,
-.combo *::before,
-.combo *::after {
- box-sizing: border-box;
-}
-
-.combo {
- display: block;
- margin-bottom: 1.5em;
- max-width: 400px;
- position: relative;
-}
-
-.combo::after {
- border-bottom: 2px solid rgba(0, 0, 0, 0.75);
- border-right: 2px solid rgba(0, 0, 0, 0.75);
- content: "";
- display: block;
- height: 12px;
- pointer-events: none;
- position: absolute;
- right: 16px;
- top: 50%;
- transform: translate(0, -65%) rotate(45deg);
- width: 12px;
-}
-
-.combo-input {
- background-color: #f5f5f5;
- border: 2px solid rgba(0, 0, 0, 0.75);
- border-radius: 4px;
- display: block;
- font-size: 1em;
- min-height: calc(1.4em + 26px);
- padding: 12px 16px 14px;
- text-align: left;
- width: 100%;
-}
-
-.open .combo-input {
- border-radius: 4px 4px 0 0;
-}
-
-.combo-input:focus {
- border-color: #0067b8;
- box-shadow: 0 0 4px 2px #0067b8;
- outline: 4px solid transparent;
-}
-
-.combo-label {
- display: block;
- font-size: 20px;
- font-weight: 100;
- margin-bottom: 0.25em;
-}
-
-.combo-menu {
- background-color: #f5f5f5;
- border: 1px solid rgba(0, 0, 0, 0.75);
- border-radius: 0 0 4px 4px;
- display: none;
- max-height: 300px;
- overflow-y: scroll;
- left: 0;
- position: absolute;
- top: 100%;
- width: 100%;
- z-index: 100;
-}
-
-.open .combo-menu {
- display: block;
-}
-
-.combo-option {
- padding: 10px 12px 12px;
-}
-
-.combo-option:hover {
- background-color: rgba(0, 0, 0, 0.1);
-}
-
-.combo-option.option-current {
- outline: 3px solid #0067b8;
- outline-offset: -3px;
-}
-
-.combo-option[aria-selected="true"] {
- padding-right: 30px;
- position: relative;
-}
-
-.combo-option[aria-selected="true"]::after {
- border-bottom: 2px solid #000;
- border-right: 2px solid #000;
- content: "";
- height: 16px;
- position: absolute;
- right: 15px;
- top: 50%;
- transform: translate(0, -50%) rotate(45deg);
- width: 8px;
-}
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/combobox-autocomplete.js b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/combobox-autocomplete.js
deleted file mode 100644
index 95f013077..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/combobox-autocomplete.js
+++ /dev/null
@@ -1,573 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- */
-
-'use strict';
-
-var ComboboxAutocomplete = function (comboboxNode, buttonNode, listboxNode) {
- this.comboboxNode = comboboxNode;
- this.buttonNode = buttonNode;
- this.listboxNode = listboxNode;
-
- this.comboboxHasVisualFocus = false;
- this.listboxHasVisualFocus = false;
-
- this.hasHover = false;
-
- this.isNone = false;
- this.isList = false;
- this.isBoth = false;
-
- this.allOptions = [];
-
- this.option = null;
- this.firstOption = null;
- this.lastOption = null;
-
- this.filteredOptions = [];
- this.filter = '';
-};
-
-ComboboxAutocomplete.prototype.init = function () {
- var autocomplete = this.comboboxNode.getAttribute('aria-autocomplete');
-
- if (typeof autocomplete === 'string') {
- autocomplete = autocomplete.toLowerCase();
- this.isNone = autocomplete === 'none';
- this.isList = autocomplete === 'list';
- this.isBoth = autocomplete === 'both';
- } else {
- // default value of autocomplete
- this.isNone = true;
- }
-
- this.comboboxNode.addEventListener(
- 'keydown',
- this.handleComboboxKeyDown.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'keyup',
- this.handleComboboxKeyUp.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'click',
- this.handleComboboxClick.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'focus',
- this.handleComboboxFocus.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'blur',
- this.handleComboboxBlur.bind(this)
- );
-
- // initialize pop up menu
-
- this.listboxNode.addEventListener(
- 'mouseover',
- this.handleListboxMouseover.bind(this)
- );
- this.listboxNode.addEventListener(
- 'mouseout',
- this.handleListboxMouseout.bind(this)
- );
-
- // Traverse the element children of domNode: configure each with
- // option role behavior and store reference in.options array.
- var nodes = this.listboxNode.getElementsByTagName('LI');
-
- for (var i = 0; i < nodes.length; i++) {
- var node = nodes[i];
- this.allOptions.push(node);
-
- node.addEventListener('click', this.handleOptionClick.bind(this));
- node.addEventListener('mouseover', this.handleOptionMouseover.bind(this));
- node.addEventListener('mouseout', this.handleOptionMouseout.bind(this));
- }
-
- this.filterOptions();
-
- // Open Button
-
- var button = this.comboboxNode.nextElementSibling;
-
- if (button && button.tagName === 'BUTTON') {
- button.addEventListener('click', this.handleButtonClick.bind(this));
- }
-};
-
-ComboboxAutocomplete.prototype.getLowercaseContent = function (node) {
- return node.textContent.toLowerCase();
-};
-
-ComboboxAutocomplete.prototype.setActiveDescendant = function (option) {
- if (option && this.listboxHasVisualFocus) {
- this.comboboxNode.setAttribute('aria-activedescendant', option.id);
- } else {
- this.comboboxNode.setAttribute('aria-activedescendant', '');
- }
-};
-
-ComboboxAutocomplete.prototype.setValue = function (value) {
- this.filter = value;
- this.comboboxNode.value = this.filter;
- this.comboboxNode.setSelectionRange(this.filter.length, this.filter.length);
- this.filterOptions();
-};
-
-ComboboxAutocomplete.prototype.setOption = function (option, flag) {
- if (typeof flag !== 'boolean') {
- flag = false;
- }
-
- if (option) {
- this.option = option;
- this.setCurrentOptionStyle(this.option);
- this.setActiveDescendant(this.option);
-
- if (this.isBoth) {
- this.comboboxNode.value = this.option.textContent;
- if (flag) {
- this.comboboxNode.setSelectionRange(
- this.option.textContent.length,
- this.option.textContent.length
- );
- } else {
- this.comboboxNode.setSelectionRange(
- this.filter.length,
- this.option.textContent.length
- );
- }
- }
- }
-};
-
-ComboboxAutocomplete.prototype.setVisualFocusCombobox = function () {
- this.listboxNode.classList.remove('focus');
- this.comboboxNode.parentNode.classList.add('focus'); // set the focus class to the parent for easier styling
- this.comboboxHasVisualFocus = true;
- this.listboxHasVisualFocus = false;
- this.setActiveDescendant(false);
-};
-
-ComboboxAutocomplete.prototype.setVisualFocusListbox = function () {
- this.comboboxNode.parentNode.classList.remove('focus');
- this.comboboxHasVisualFocus = false;
- this.listboxHasVisualFocus = true;
- this.listboxNode.classList.add('focus');
- this.setActiveDescendant(this.option);
-};
-
-ComboboxAutocomplete.prototype.removeVisualFocusAll = function () {
- this.comboboxNode.parentNode.classList.remove('focus');
- this.comboboxHasVisualFocus = false;
- this.listboxHasVisualFocus = false;
- this.listboxNode.classList.remove('focus');
- this.option = null;
- this.setActiveDescendant(false);
-};
-
-// ComboboxAutocomplete Events
-
-ComboboxAutocomplete.prototype.filterOptions = function () {
- // do not filter any options if autocomplete is none
- if (this.isNone) {
- this.filter = '';
- }
-
- var option = null;
- var currentOption = this.option;
- var filter = this.filter.toLowerCase();
-
- this.filteredOptions = [];
- this.listboxNode.innerHTML = '';
-
- for (var i = 0; i < this.allOptions.length; i++) {
- option = this.allOptions[i];
- if (
- filter.length === 0 ||
- this.getLowercaseContent(option).indexOf(filter) === 0
- ) {
- this.filteredOptions.push(option);
- this.listboxNode.appendChild(option);
- }
- }
-
- // Use populated options array to initialize firstOption and lastOption.
- var numItems = this.filteredOptions.length;
- if (numItems > 0) {
- this.firstOption = this.filteredOptions[0];
- this.lastOption = this.filteredOptions[numItems - 1];
-
- if (currentOption && this.filteredOptions.indexOf(currentOption) >= 0) {
- option = currentOption;
- } else {
- option = this.firstOption;
- }
- } else {
- this.firstOption = null;
- option = null;
- this.lastOption = null;
- }
-
- return option;
-};
-
-ComboboxAutocomplete.prototype.setCurrentOptionStyle = function (option) {
- for (var i = 0; i < this.filteredOptions.length; i++) {
- var opt = this.filteredOptions[i];
- if (opt === option) {
- opt.setAttribute('aria-selected', 'true');
- if (
- this.listboxNode.scrollTop + this.listboxNode.offsetHeight <
- opt.offsetTop + opt.offsetHeight
- ) {
- this.listboxNode.scrollTop =
- opt.offsetTop + opt.offsetHeight - this.listboxNode.offsetHeight;
- } else if (this.listboxNode.scrollTop > opt.offsetTop + 2) {
- this.listboxNode.scrollTop = opt.offsetTop;
- }
- } else {
- opt.removeAttribute('aria-selected');
- }
- }
-};
-
-ComboboxAutocomplete.prototype.getPreviousOption = function (currentOption) {
- if (currentOption !== this.firstOption) {
- var index = this.filteredOptions.indexOf(currentOption);
- return this.filteredOptions[index - 1];
- }
- return this.lastOption;
-};
-
-ComboboxAutocomplete.prototype.getNextOption = function (currentOption) {
- if (currentOption !== this.lastOption) {
- var index = this.filteredOptions.indexOf(currentOption);
- return this.filteredOptions[index + 1];
- }
- return this.firstOption;
-};
-
-/* MENU DISPLAY METHODS */
-
-ComboboxAutocomplete.prototype.doesOptionHaveFocus = function () {
- return this.comboboxNode.getAttribute('aria-activedescendant') !== '';
-};
-
-ComboboxAutocomplete.prototype.isOpen = function () {
- return this.listboxNode.style.display === 'block';
-};
-
-ComboboxAutocomplete.prototype.isClosed = function () {
- return this.listboxNode.style.display !== 'block';
-};
-
-ComboboxAutocomplete.prototype.hasOptions = function () {
- return this.filteredOptions.length;
-};
-
-ComboboxAutocomplete.prototype.open = function () {
- this.listboxNode.style.display = 'block';
- this.comboboxNode.setAttribute('aria-expanded', 'true');
- this.buttonNode.setAttribute('aria-expanded', 'true');
-};
-
-ComboboxAutocomplete.prototype.close = function (force) {
- if (typeof force !== 'boolean') {
- force = false;
- }
-
- if (
- force ||
- (!this.comboboxHasVisualFocus &&
- !this.listboxHasVisualFocus &&
- !this.hasHover)
- ) {
- this.setCurrentOptionStyle(false);
- this.listboxNode.style.display = 'none';
- this.comboboxNode.setAttribute('aria-expanded', 'false');
- this.buttonNode.setAttribute('aria-expanded', 'false');
- this.setActiveDescendant(false);
- }
-};
-
-/* combobox Events */
-
-ComboboxAutocomplete.prototype.handleComboboxKeyDown = function (event) {
- var flag = false,
- char = event.key,
- altKey = event.altKey;
-
- if (event.ctrlKey || event.shiftKey) {
- return;
- }
-
- switch (event.key) {
- case 'Enter':
- if (this.listboxHasVisualFocus) {
- this.setValue(this.option.textContent);
- }
- this.close(true);
- this.setVisualFocusCombobox();
- flag = true;
- break;
-
- case 'Down':
- case 'ArrowDown':
- if (this.filteredOptions.length > 0) {
- if (altKey) {
- this.open();
- } else {
- this.open();
- if (
- this.listboxHasVisualFocus ||
- (this.isBoth && this.filteredOptions.length > 1)
- ) {
- this.setOption(this.getNextOption(this.option), true);
- this.setVisualFocusListbox();
- } else {
- this.setOption(this.firstOption, true);
- this.setVisualFocusListbox();
- }
- }
- }
- flag = true;
- break;
-
- case 'Up':
- case 'ArrowUp':
- if (this.hasOptions()) {
- if (this.listboxHasVisualFocus) {
- this.setOption(this.getPreviousOption(this.option), true);
- } else {
- this.open();
- if (!altKey) {
- this.setOption(this.lastOption, true);
- this.setVisualFocusListbox();
- }
- }
- }
- flag = true;
- break;
-
- case 'Esc':
- case 'Escape':
- if (this.isOpen()) {
- this.close(true);
- this.filter = this.comboboxNode.value;
- this.filterOptions();
- this.setVisualFocusCombobox();
- } else {
- this.setValue('');
- this.comboboxNode.value = '';
- }
- this.option = null;
- flag = true;
- break;
-
- case 'Tab':
- this.close(true);
- if (this.listboxHasVisualFocus) {
- if (this.option) {
- this.setValue(this.option.textContent);
- }
- }
- break;
-
- case 'Home':
- this.comboboxNode.setSelectionRange(0, 0);
- flag = true;
- break;
-
- case 'End':
- var length = this.comboboxNode.value.length;
- this.comboboxNode.setSelectionRange(length, length);
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxAutocomplete.prototype.isPrintableCharacter = function (str) {
- return str.length === 1 && str.match(/\S/);
-};
-
-ComboboxAutocomplete.prototype.handleComboboxKeyUp = function (event) {
- var flag = false,
- option = null,
- char = event.key;
-
- if (this.isPrintableCharacter(char)) {
- this.filter += char;
- }
-
- // this is for the case when a selection in the textbox has been deleted
- if (this.comboboxNode.value.length < this.filter.length) {
- this.filter = this.comboboxNode.value;
- this.option = null;
- this.filterOptions();
- }
-
- if (event.key === 'Escape' || event.key === 'Esc') {
- return;
- }
-
- switch (event.key) {
- case 'Backspace':
- this.setVisualFocusCombobox();
- this.setCurrentOptionStyle(false);
- this.filter = this.comboboxNode.value;
- this.option = null;
- this.filterOptions();
- flag = true;
- break;
-
- case 'Left':
- case 'ArrowLeft':
- case 'Right':
- case 'ArrowRight':
- case 'Home':
- case 'End':
- if (this.isBoth) {
- this.filter = this.comboboxNode.value;
- } else {
- this.option = null;
- this.setCurrentOptionStyle(false);
- }
- this.setVisualFocusCombobox();
- flag = true;
- break;
-
- default:
- if (this.isPrintableCharacter(char)) {
- this.setVisualFocusCombobox();
- this.setCurrentOptionStyle(false);
- flag = true;
-
- if (this.isList || this.isBoth) {
- option = this.filterOptions();
- if (option) {
- if (this.isClosed() && this.comboboxNode.value.length) {
- this.open();
- }
-
- if (
- this.getLowercaseContent(option).indexOf(
- this.comboboxNode.value.toLowerCase()
- ) === 0
- ) {
- this.option = option;
- if (this.isBoth || this.listboxHasVisualFocus) {
- this.setCurrentOptionStyle(option);
- if (this.isBoth) {
- this.setOption(option);
- }
- }
- } else {
- this.option = null;
- this.setCurrentOptionStyle(false);
- }
- } else {
- this.close();
- this.option = null;
- this.setActiveDescendant(false);
- }
- } else if (this.comboboxNode.value.length) {
- this.open();
- }
- }
-
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxAutocomplete.prototype.handleComboboxClick = function (event) {
- if (this.isOpen()) {
- this.close(true);
- } else {
- this.open();
- }
-};
-
-ComboboxAutocomplete.prototype.handleComboboxFocus = function (event) {
- this.filter = this.comboboxNode.value;
- this.filterOptions();
- this.setVisualFocusCombobox();
- this.option = null;
- this.setCurrentOptionStyle(null);
-};
-
-ComboboxAutocomplete.prototype.handleComboboxBlur = function (event) {
- this.comboboxHasVisualFocus = false;
- this.setCurrentOptionStyle(null);
- this.removeVisualFocusAll();
- setTimeout(this.close.bind(this, false), 300);
-};
-
-ComboboxAutocomplete.prototype.handleButtonClick = function (event) {
- if (this.isOpen()) {
- this.close(true);
- } else {
- this.open();
- }
- this.comboboxNode.focus();
- this.setVisualFocusCombobox();
-};
-
-/* Listbox Events */
-
-ComboboxAutocomplete.prototype.handleListboxMouseover = function (event) {
- this.hasHover = true;
-};
-
-ComboboxAutocomplete.prototype.handleListboxMouseout = function (event) {
- this.hasHover = false;
- setTimeout(this.close.bind(this, false), 300);
-};
-
-// Listbox Option Events
-
-ComboboxAutocomplete.prototype.handleOptionClick = function (event) {
- this.comboboxNode.value = event.target.textContent;
- this.close(true);
-};
-
-ComboboxAutocomplete.prototype.handleOptionMouseover = function (event) {
- this.hasHover = true;
- this.open();
-};
-
-ComboboxAutocomplete.prototype.handleOptionMouseout = function (event) {
- this.hasHover = false;
- setTimeout(this.close.bind(this, false), 300);
-};
-
-// Initialize comboboxes
-
-window.addEventListener('load', function () {
- var comboboxes = document.querySelectorAll('.combobox-list');
-
- for (var i = 0; i < comboboxes.length; i++) {
- var combobox = comboboxes[i];
- var comboboxNode = combobox.querySelector('input');
- var buttonNode = combobox.querySelector('button');
- var listboxNode = combobox.querySelector('[role="listbox"]');
- var cba = new ComboboxAutocomplete(comboboxNode, buttonNode, listboxNode);
- cba.init();
- }
-});
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/combobox-datepicker.js b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/combobox-datepicker.js
deleted file mode 100644
index c791141ea..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/combobox-datepicker.js
+++ /dev/null
@@ -1,866 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: ComboboxDatePicker.js
- */
-
-'use strict';
-
-var ComboboxDatePicker = function (cdp) {
- this.buttonLabel = 'Date';
- this.monthLabels = [
- 'January',
- 'February',
- 'March',
- 'April',
- 'May',
- 'June',
- 'July',
- 'August',
- 'September',
- 'October',
- 'November',
- 'December',
- ];
-
- this.messageCursorKeys = 'Cursor keys can navigate dates';
- this.lastMessage = '';
-
- this.comboboxNode = cdp.querySelector('input[type="text"]');
- this.buttonNode = cdp.querySelector('.group button');
- this.dialogNode = cdp.querySelector('[role="dialog"]');
- this.messageNode = this.dialogNode.querySelector('.dialog-message');
-
- this.monthYearNode = this.dialogNode.querySelector('.month-year');
-
- this.prevYearNode = this.dialogNode.querySelector('.prev-year');
- this.prevMonthNode = this.dialogNode.querySelector('.prev-month');
- this.nextMonthNode = this.dialogNode.querySelector('.next-month');
- this.nextYearNode = this.dialogNode.querySelector('.next-year');
-
- this.okButtonNode = this.dialogNode.querySelector('button[value="ok"]');
- this.cancelButtonNode = this.dialogNode.querySelector(
- 'button[value="cancel"]'
- );
-
- this.tbodyNode = this.dialogNode.querySelector('table.dates tbody');
-
- this.lastRowNode = null;
-
- this.days = [];
-
- this.focusDay = new Date();
- this.selectedDay = new Date(0, 0, 1);
-
- this.isMouseDownOnBackground = false;
-};
-
-ComboboxDatePicker.prototype.init = function () {
- this.comboboxNode.addEventListener(
- 'keydown',
- this.handleComboboxKeyDown.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'click',
- this.handleComboboxClick.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'focus',
- this.handleComboboxFocus.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'blur',
- this.handleComboboxBlur.bind(this)
- );
-
- this.buttonNode.addEventListener(
- 'keydown',
- this.handleButtonKeyDown.bind(this)
- );
- this.buttonNode.addEventListener('click', this.handleButtonClick.bind(this));
-
- this.okButtonNode.addEventListener('click', this.handleOkButton.bind(this));
- this.okButtonNode.addEventListener('keydown', this.handleOkButton.bind(this));
-
- this.cancelButtonNode.addEventListener(
- 'click',
- this.handleCancelButton.bind(this)
- );
- this.cancelButtonNode.addEventListener(
- 'keydown',
- this.handleCancelButton.bind(this)
- );
-
- this.prevMonthNode.addEventListener(
- 'click',
- this.handlePreviousMonthButton.bind(this)
- );
- this.nextMonthNode.addEventListener(
- 'click',
- this.handleNextMonthButton.bind(this)
- );
- this.prevYearNode.addEventListener(
- 'click',
- this.handlePreviousYearButton.bind(this)
- );
- this.nextYearNode.addEventListener(
- 'click',
- this.handleNextYearButton.bind(this)
- );
-
- this.prevMonthNode.addEventListener(
- 'keydown',
- this.handlePreviousMonthButton.bind(this)
- );
- this.nextMonthNode.addEventListener(
- 'keydown',
- this.handleNextMonthButton.bind(this)
- );
- this.prevYearNode.addEventListener(
- 'keydown',
- this.handlePreviousYearButton.bind(this)
- );
- this.nextYearNode.addEventListener(
- 'keydown',
- this.handleNextYearButton.bind(this)
- );
-
- document.body.addEventListener(
- 'mouseup',
- this.handleBackgroundMouseUp.bind(this),
- true
- );
-
- // Create Grid of Dates
-
- this.tbodyNode.innerHTML = '';
- for (var i = 0; i < 6; i++) {
- var row = this.tbodyNode.insertRow(i);
- this.lastRowNode = row;
- for (var j = 0; j < 7; j++) {
- var cell = document.createElement('td');
-
- cell.setAttribute('tabindex', '-1');
- cell.addEventListener('click', this.handleDayClick.bind(this));
- cell.addEventListener('keydown', this.handleDayKeyDown.bind(this));
- cell.addEventListener('focus', this.handleDayFocus.bind(this));
-
- cell.innerHTML = '-1';
-
- row.appendChild(cell);
- this.days.push(cell);
- }
- }
-
- this.updateGrid();
- this.close(false);
-};
-
-ComboboxDatePicker.prototype.isSameDay = function (day1, day2) {
- return (
- day1.getFullYear() == day2.getFullYear() &&
- day1.getMonth() == day2.getMonth() &&
- day1.getDate() == day2.getDate()
- );
-};
-
-ComboboxDatePicker.prototype.isNotSameMonth = function (day1, day2) {
- return (
- day1.getFullYear() != day2.getFullYear() ||
- day1.getMonth() != day2.getMonth()
- );
-};
-
-ComboboxDatePicker.prototype.updateGrid = function () {
- var i, flag;
- var fd = this.focusDay;
-
- this.monthYearNode.innerHTML =
- this.monthLabels[fd.getMonth()] + ' ' + fd.getFullYear();
-
- var firstDayOfMonth = new Date(fd.getFullYear(), fd.getMonth(), 1);
- var dayOfWeek = firstDayOfMonth.getDay();
-
- firstDayOfMonth.setDate(firstDayOfMonth.getDate() - dayOfWeek);
-
- var d = new Date(firstDayOfMonth);
-
- for (i = 0; i < this.days.length; i++) {
- flag = d.getMonth() != fd.getMonth();
- this.updateDate(this.days[i], flag, d, this.isSameDay(d, this.selectedDay));
- d.setDate(d.getDate() + 1);
-
- // Hide last row if all disabled dates
- if (i === 35) {
- if (flag) {
- this.lastRowNode.style.visibility = 'hidden';
- } else {
- this.lastRowNode.style.visibility = 'visible';
- }
- }
- }
-};
-
-ComboboxDatePicker.prototype.setFocusDay = function (flag) {
- if (typeof flag !== 'boolean') {
- flag = true;
- }
-
- var fd = this.focusDay;
- var getDayFromDataDateAttribute = this.getDayFromDataDateAttribute;
-
- function checkDay(domNode) {
- var d = getDayFromDataDateAttribute(domNode);
-
- domNode.setAttribute('tabindex', '-1');
- if (this.isSameDay(d, fd)) {
- domNode.setAttribute('tabindex', '0');
- if (flag) {
- domNode.focus();
- }
- }
- }
-
- this.days.forEach(checkDay.bind(this));
-};
-
-ComboboxDatePicker.prototype.open = function () {
- this.dialogNode.style.display = 'block';
- this.dialogNode.style.zIndex = 2;
-
- this.comboboxNode.setAttribute('aria-expanded', 'true');
- this.buttonNode.classList.add('open');
- this.getDateFromCombobox();
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.isOpen = function () {
- return window.getComputedStyle(this.dialogNode).display !== 'none';
-};
-
-ComboboxDatePicker.prototype.close = function (flag) {
- if (typeof flag !== 'boolean') {
- // Default is to move focus to combobox
- flag = true;
- }
-
- this.setMessage('');
- this.dialogNode.style.display = 'none';
- this.comboboxNode.setAttribute('aria-expanded', 'false');
- this.buttonNode.classList.remove('open');
-
- if (flag) {
- this.comboboxNode.focus();
- }
-};
-
-ComboboxDatePicker.prototype.handleOkButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Tab':
- if (!event.shiftKey) {
- this.prevYearNode.focus();
- flag = true;
- }
- break;
-
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
- break;
-
- case 'click':
- this.setComboboxDate();
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleCancelButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
- break;
-
- case 'click':
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleNextYearButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- case 'Enter':
- this.moveToNextYear();
- this.setFocusDay(false);
- flag = true;
- break;
- }
-
- break;
-
- case 'click':
- this.moveToNextYear();
- this.setFocusDay(false);
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handlePreviousYearButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Enter':
- this.moveToPreviousYear();
- this.setFocusDay(false);
- flag = true;
- break;
-
- case 'Tab':
- if (event.shiftKey) {
- this.okButtonNode.focus();
- flag = true;
- }
- break;
-
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
-
- break;
-
- case 'click':
- this.moveToPreviousYear();
- this.setFocusDay(false);
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleNextMonthButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- case 'Enter':
- this.moveToNextMonth();
- this.setFocusDay(false);
- flag = true;
- break;
- }
-
- break;
-
- case 'click':
- this.moveToNextMonth();
- this.setFocusDay(false);
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handlePreviousMonthButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- case 'Enter':
- this.moveToPreviousMonth();
- this.setFocusDay(false);
- flag = true;
- break;
- }
-
- break;
-
- case 'click':
- this.moveToPreviousMonth();
- this.setFocusDay(false);
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.moveFocusToDay = function (day) {
- var d = this.focusDay;
-
- this.focusDay = day;
-
- if (
- d.getMonth() != this.focusDay.getMonth() ||
- d.getYear() != this.focusDay.getYear()
- ) {
- this.updateGrid();
- }
- this.setFocusDay();
-};
-
-ComboboxDatePicker.prototype.moveToNextYear = function () {
- this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.moveToPreviousYear = function () {
- this.focusDay.setFullYear(this.focusDay.getFullYear() - 1);
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.moveToNextMonth = function () {
- this.focusDay.setMonth(this.focusDay.getMonth() + 1);
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.moveToPreviousMonth = function () {
- this.focusDay.setMonth(this.focusDay.getMonth() - 1);
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.moveFocusToNextDay = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() + 1);
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToNextWeek = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() + 7);
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToPreviousDay = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() - 1);
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToPreviousWeek = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() - 7);
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToFirstDayOfWeek = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() - d.getDay());
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToLastDayOfWeek = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() + (6 - d.getDay()));
- this.moveFocusToDay(d);
-};
-
-// Day methods
-
-ComboboxDatePicker.prototype.isDayDisabled = function (domNode) {
- return domNode.classList.contains('disabled');
-};
-
-ComboboxDatePicker.prototype.getDayFromDataDateAttribute = function (domNode) {
- var parts = domNode.getAttribute('data-date').split('-');
- return new Date(parts[0], parseInt(parts[1]) - 1, parts[2]);
-};
-
-ComboboxDatePicker.prototype.updateDate = function (
- domNode,
- disable,
- day,
- selected
-) {
- var d = day.getDate().toString();
- if (day.getDate() <= 9) {
- d = '0' + d;
- }
-
- var m = day.getMonth() + 1;
- if (day.getMonth() < 9) {
- m = '0' + m;
- }
-
- domNode.setAttribute('tabindex', '-1');
- domNode.removeAttribute('aria-selected');
- domNode.setAttribute('data-date', day.getFullYear() + '-' + m + '-' + d);
-
- if (disable) {
- domNode.classList.add('disabled');
- domNode.innerHTML = '';
- } else {
- domNode.classList.remove('disabled');
- domNode.innerHTML = day.getDate();
- if (selected) {
- domNode.setAttribute('aria-selected', 'true');
- domNode.setAttribute('tabindex', '0');
- }
- }
-};
-
-ComboboxDatePicker.prototype.updateSelected = function (domNode) {
- for (var i = 0; i < this.days.length; i++) {
- var day = this.days[i];
- if (day === domNode) {
- day.setAttribute('aria-selected', 'true');
- } else {
- day.removeAttribute('aria-selected');
- }
- }
-};
-
-ComboboxDatePicker.prototype.handleDayKeyDown = function (event) {
- var flag = false;
-
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- break;
-
- case ' ':
- this.updateSelected(event.currentTarget);
- this.setComboboxDate(event.currentTarget);
- flag = true;
- break;
-
- case 'Enter':
- this.setComboboxDate(event.currentTarget);
- this.close();
- break;
-
- case 'Tab':
- this.cancelButtonNode.focus();
- if (event.shiftKey) {
- this.nextYearNode.focus();
- }
- this.setMessage('');
- flag = true;
- break;
-
- case 'Right':
- case 'ArrowRight':
- this.moveFocusToNextDay();
- flag = true;
- break;
-
- case 'Left':
- case 'ArrowLeft':
- this.moveFocusToPreviousDay();
- flag = true;
- break;
-
- case 'Down':
- case 'ArrowDown':
- this.moveFocusToNextWeek();
- flag = true;
- break;
-
- case 'Up':
- case 'ArrowUp':
- this.moveFocusToPreviousWeek();
- flag = true;
- break;
-
- case 'PageUp':
- if (event.shiftKey) {
- this.moveToPreviousYear();
- } else {
- this.moveToPreviousMonth();
- }
- this.setFocusDay();
- flag = true;
- break;
-
- case 'PageDown':
- if (event.shiftKey) {
- this.moveToNextYear();
- } else {
- this.moveToNextMonth();
- }
- this.setFocusDay();
- flag = true;
- break;
-
- case 'Home':
- this.moveFocusToFirstDayOfWeek();
- flag = true;
- break;
-
- case 'End':
- this.moveFocusToLastDayOfWeek();
- flag = true;
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleDayClick = function (event) {
- if (!this.isDayDisabled(event.currentTarget)) {
- this.setComboboxDate(event.currentTarget);
- this.close();
- }
-
- event.stopPropagation();
- event.preventDefault();
-};
-
-ComboboxDatePicker.prototype.handleDayFocus = function () {
- this.setMessage(this.messageCursorKeys);
-};
-
-// Combobox methods
-
-ComboboxDatePicker.prototype.setComboboxDate = function (domNode) {
- var d = this.focusDay;
-
- if (domNode) {
- d = this.getDayFromDataDateAttribute(domNode);
- }
-
- this.comboboxNode.value =
- d.getMonth() + 1 + '/' + d.getDate() + '/' + d.getFullYear();
-};
-
-ComboboxDatePicker.prototype.getDateFromCombobox = function () {
- var parts = this.comboboxNode.value.split('/');
-
- if (
- parts.length === 3 &&
- Number.isInteger(parseInt(parts[0])) &&
- Number.isInteger(parseInt(parts[1])) &&
- Number.isInteger(parseInt(parts[2]))
- ) {
- this.focusDay = new Date(
- parseInt(parts[2]),
- parseInt(parts[0]) - 1,
- parseInt(parts[1])
- );
- this.selectedDay = new Date(this.focusDay);
- } else {
- // If not a valid date (MM/DD/YY) initialize with todays date
- this.focusDay = new Date();
- this.selectedDay = new Date(0, 0, 1);
- }
-};
-
-ComboboxDatePicker.prototype.setMessage = function (str) {
- function setMessageDelayed() {
- this.messageNode.textContent = str;
- }
-
- if (str !== this.lastMessage) {
- setTimeout(setMessageDelayed.bind(this), 200);
- this.lastMessage = str;
- }
-};
-
-ComboboxDatePicker.prototype.handleComboboxKeyDown = function (event) {
- var flag = false,
- char = event.key,
- altKey = event.altKey;
-
- if (event.ctrlKey || event.shiftKey) {
- return;
- }
-
- switch (event.key) {
- case 'Down':
- case 'ArrowDown':
- this.open();
- this.setFocusDay();
- flag = true;
- break;
-
- case 'Esc':
- case 'Escape':
- if (this.isOpen()) {
- this.close(false);
- } else {
- this.comboboxNode.value = '';
- }
- this.option = null;
- flag = true;
- break;
-
- case 'Tab':
- this.close(false);
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleComboboxClick = function (event) {
- if (this.isOpen()) {
- this.close(false);
- } else {
- this.open();
- }
-
- event.stopPropagation();
- event.preventDefault();
-};
-
-ComboboxDatePicker.prototype.handleComboboxFocus = function (event) {
- event.currentTarget.parentNode.classList.add('focus');
-};
-
-ComboboxDatePicker.prototype.handleComboboxBlur = function (event) {
- event.currentTarget.parentNode.classList.remove('focus');
-};
-
-ComboboxDatePicker.prototype.handleButtonKeyDown = function (event) {
- if (event.key === 'Enter' || event.key === ' ') {
- this.open();
- this.setFocusDay();
-
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleButtonClick = function (event) {
- if (this.isOpen()) {
- this.close();
- } else {
- this.open();
- this.setFocusDay();
- }
-
- event.stopPropagation();
- event.preventDefault();
-};
-
-ComboboxDatePicker.prototype.handleBackgroundMouseUp = function (event) {
- if (
- !this.comboboxNode.contains(event.target) &&
- !this.buttonNode.contains(event.target) &&
- !this.dialogNode.contains(event.target)
- ) {
- if (this.isOpen()) {
- this.close(false);
- event.stopPropagation();
- event.preventDefault();
- }
- }
-};
-
-// Initialize menu button date picker
-
-window.addEventListener('load', function () {
- var comboboxDatePickers = document.querySelectorAll('.combobox-datepicker');
-
- comboboxDatePickers.forEach(function (dp) {
- var datePicker = new ComboboxDatePicker(dp);
- datePicker.init();
- });
-});
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/grid-combo-example.js b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/grid-combo-example.js
deleted file mode 100644
index 8bc03ac77..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/grid-combo-example.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * ARIA Combobox Examples
- */
-
-'use strict';
-
-var FRUITS_AND_VEGGIES = [
- ['Apple', 'Fruit'],
- ['Artichoke', 'Vegetable'],
- ['Asparagus', 'Vegetable'],
- ['Banana', 'Fruit'],
- ['Beets', 'Vegetable'],
- ['Bell pepper', 'Vegetable'],
- ['Broccoli', 'Vegetable'],
- ['Brussels sprout', 'Vegetable'],
- ['Cabbage', 'Vegetable'],
- ['Carrot', 'Vegetable'],
- ['Cauliflower', 'Vegetable'],
- ['Celery', 'Vegetable'],
- ['Chard', 'Vegetable'],
- ['Chicory', 'Vegetable'],
- ['Corn', 'Vegetable'],
- ['Cucumber', 'Vegetable'],
- ['Daikon', 'Vegetable'],
- ['Date', 'Fruit'],
- ['Edamame', 'Vegetable'],
- ['Eggplant', 'Vegetable'],
- ['Elderberry', 'Fruit'],
- ['Fennel', 'Vegetable'],
- ['Fig', 'Fruit'],
- ['Garlic', 'Vegetable'],
- ['Grape', 'Fruit'],
- ['Honeydew melon', 'Fruit'],
- ['Iceberg lettuce', 'Vegetable'],
- ['Jerusalem artichoke', 'Vegetable'],
- ['Kale', 'Vegetable'],
- ['Kiwi', 'Fruit'],
- ['Leek', 'Vegetable'],
- ['Lemon', 'Fruit'],
- ['Mango', 'Fruit'],
- ['Mangosteen', 'Fruit'],
- ['Melon', 'Fruit'],
- ['Mushroom', 'Fungus'],
- ['Nectarine', 'Fruit'],
- ['Okra', 'Vegetable'],
- ['Olive', 'Vegetable'],
- ['Onion', 'Vegetable'],
- ['Orange', 'Fruit'],
- ['Parsnip', 'Vegetable'],
- ['Pea', 'Vegetable'],
- ['Pear', 'Fruit'],
- ['Pineapple', 'Fruit'],
- ['Potato', 'Vegetable'],
- ['Pumpkin', 'Fruit'],
- ['Quince', 'Fruit'],
- ['Radish', 'Vegetable'],
- ['Rhubarb', 'Vegetable'],
- ['Shallot', 'Vegetable'],
- ['Spinach', 'Vegetable'],
- ['Squash', 'Vegetable'],
- ['Strawberry', 'Fruit'],
- ['Sweet potato', 'Vegetable'],
- ['Tomato', 'Fruit'],
- ['Turnip', 'Vegetable'],
- ['Ugli fruit', 'Fruit'],
- ['Victoria plum', 'Fruit'],
- ['Watercress', 'Vegetable'],
- ['Watermelon', 'Fruit'],
- ['Yam', 'Vegetable'],
- ['Zucchini', 'Vegetable'],
-];
-
-function searchVeggies(searchString) {
- var results = [];
-
- for (var i = 0; i < FRUITS_AND_VEGGIES.length; i++) {
- var veggie = FRUITS_AND_VEGGIES[i][0].toLowerCase();
- if (veggie.indexOf(searchString.toLowerCase()) === 0) {
- results.push(FRUITS_AND_VEGGIES[i]);
- }
- }
-
- return results;
-}
-
-/**
- * @function onload
- * @desc Initialize the combobox examples once the page has loaded
- */
-window.addEventListener('load', function () {
- var ex1Combobox = new aria.GridCombobox(
- document.getElementById('ex1-input'),
- document.getElementById('ex1-grid'),
- searchVeggies
- );
-});
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/grid-combo.js b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/grid-combo.js
deleted file mode 100644
index 78bc5c107..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/grid-combo.js
+++ /dev/null
@@ -1,297 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- */
-
-'use strict';
-
-/**
- * @constructor
- *
- * @desc
- * Combobox object representing the state and interactions for a combobox
- * widget
- *
- * @param comboboxNode
- * The DOM node pointing to the combobox
- * @param input
- * The input node
- * @param grid
- * The grid node to load results in
- * @param searchFn
- * The search function. The function accepts a search string and returns an
- * array of results.
- */
-aria.GridCombobox = function (input, grid, searchFn) {
- this.input = input;
- this.grid = grid;
- this.searchFn = searchFn;
- this.activeRowIndex = -1;
- this.activeColIndex = 0;
- this.rowsCount = 0;
- this.colsCount = 0;
- this.gridFocused = false;
- this.shown = false;
- this.selectionCol = 0;
-
- this.setupEvents();
-};
-
-aria.GridCombobox.prototype.setupEvents = function () {
- document.body.addEventListener('click', this.handleBodyClick.bind(this));
- this.input.addEventListener('keyup', this.handleInputKeyUp.bind(this));
- this.input.addEventListener('keydown', this.handleInputKeyDown.bind(this));
- this.input.addEventListener('focus', this.handleInputFocus.bind(this));
- this.grid.addEventListener('click', this.handleGridClick.bind(this));
-};
-
-aria.GridCombobox.prototype.handleBodyClick = function (evt) {
- if (evt.target === this.input || this.grid.contains(evt.target)) {
- return;
- }
- this.hideResults();
-};
-
-aria.GridCombobox.prototype.handleInputKeyUp = function (evt) {
- var key = evt.which || evt.keyCode;
-
- switch (key) {
- case aria.KeyCode.UP:
- case aria.KeyCode.DOWN:
- case aria.KeyCode.ESC:
- case aria.KeyCode.RETURN:
- evt.preventDefault();
- return;
- case aria.KeyCode.LEFT:
- case aria.KeyCode.RIGHT:
- if (this.gridFocused) {
- evt.preventDefault();
- return;
- }
- break;
- default:
- this.updateResults();
- }
-};
-
-aria.GridCombobox.prototype.handleInputKeyDown = function (evt) {
- var key = evt.which || evt.keyCode;
- var activeRowIndex = this.activeRowIndex;
- var activeColIndex = this.activeColIndex;
-
- if (key === aria.KeyCode.ESC) {
- if (this.gridFocused) {
- this.gridFocused = false;
- this.removeFocusCell(this.activeRowIndex, this.activeColIndex);
- this.activeRowIndex = -1;
- this.activeColIndex = 0;
- this.input.setAttribute('aria-activedescendant', '');
- } else {
- if (!this.shown) {
- setTimeout(
- function () {
- // On Firefox, input does not get cleared here unless wrapped in
- // a setTimeout
- this.input.value = '';
- }.bind(this),
- 1
- );
- }
- }
- if (this.shown) {
- this.hideResults();
- }
- return;
- }
-
- if (this.rowsCount < 1) {
- return;
- }
-
- var prevActive = this.getItemAt(activeRowIndex, this.selectionCol);
- var activeItem;
-
- switch (key) {
- case aria.KeyCode.UP:
- this.gridFocused = true;
- activeRowIndex = this.getRowIndex(key);
- evt.preventDefault();
- break;
- case aria.KeyCode.DOWN:
- this.gridFocused = true;
- activeRowIndex = this.getRowIndex(key);
- evt.preventDefault();
- break;
- case aria.KeyCode.LEFT:
- if (activeColIndex <= 0) {
- activeColIndex = this.colsCount - 1;
- activeRowIndex = this.getRowIndex(key);
- } else {
- activeColIndex--;
- }
- if (this.gridFocused) {
- evt.preventDefault();
- }
- break;
- case aria.KeyCode.RIGHT:
- if (activeColIndex === -1 || activeColIndex >= this.colsCount - 1) {
- activeColIndex = 0;
- activeRowIndex = this.getRowIndex(key);
- } else {
- activeColIndex++;
- }
- if (this.gridFocused) {
- evt.preventDefault();
- }
- break;
- case aria.KeyCode.RETURN:
- activeItem = this.getItemAt(activeRowIndex, this.selectionCol);
- this.selectItem(activeItem);
- this.gridFocused = false;
- return;
- case aria.KeyCode.TAB:
- this.hideResults();
- return;
- default:
- return;
- }
-
- if (prevActive) {
- this.removeFocusCell(this.activeRowIndex, this.activeColIndex);
- prevActive.setAttribute('aria-selected', 'false');
- }
-
- activeItem = this.getItemAt(activeRowIndex, activeColIndex);
- this.activeRowIndex = activeRowIndex;
- this.activeColIndex = activeColIndex;
-
- if (activeItem) {
- this.input.setAttribute(
- 'aria-activedescendant',
- 'result-item-' + activeRowIndex + 'x' + activeColIndex
- );
- this.focusCell(activeRowIndex, activeColIndex);
- var selectedItem = this.getItemAt(activeRowIndex, this.selectionCol);
- selectedItem.setAttribute('aria-selected', 'true');
- } else {
- this.input.setAttribute('aria-activedescendant', '');
- }
-};
-
-aria.GridCombobox.prototype.handleInputFocus = function (evt) {
- this.updateResults();
-};
-
-aria.GridCombobox.prototype.handleGridClick = function (evt) {
- if (!evt.target) {
- return;
- }
-
- var row;
- if (evt.target.getAttribute('role') === 'row') {
- row = evt.target;
- } else if (evt.target.getAttribute('role') === 'gridcell') {
- row = evt.target.parentNode;
- } else {
- return;
- }
-
- var selectItem = row.querySelector('.result-cell');
- this.selectItem(selectItem);
-};
-
-aria.GridCombobox.prototype.updateResults = function () {
- var searchString = this.input.value;
- var results = this.searchFn(searchString);
-
- this.hideResults();
-
- if (!searchString) {
- results = [];
- }
-
- if (results.length) {
- for (var row = 0; row < results.length; row++) {
- var resultRow = document.createElement('div');
- resultRow.className = 'result-row';
- resultRow.setAttribute('role', 'row');
- resultRow.setAttribute('id', 'result-row-' + row);
- for (var col = 0; col < results[row].length; col++) {
- var resultCell = document.createElement('div');
- resultCell.className = 'result-cell';
- resultCell.setAttribute('role', 'gridcell');
- resultCell.setAttribute('id', 'result-item-' + row + 'x' + col);
- resultCell.innerText = results[row][col];
- resultRow.appendChild(resultCell);
- }
- this.grid.appendChild(resultRow);
- }
- aria.Utils.removeClass(this.grid, 'hidden');
- this.input.setAttribute('aria-expanded', 'true');
- this.rowsCount = results.length;
- this.colsCount = results.length ? results[0].length : 0;
- this.shown = true;
- }
-};
-
-aria.GridCombobox.prototype.getRowIndex = function (key) {
- var activeRowIndex = this.activeRowIndex;
-
- switch (key) {
- case aria.KeyCode.UP:
- case aria.KeyCode.LEFT:
- if (activeRowIndex <= 0) {
- activeRowIndex = this.rowsCount - 1;
- } else {
- activeRowIndex--;
- }
- break;
- case aria.KeyCode.DOWN:
- case aria.KeyCode.RIGHT:
- if (activeRowIndex === -1 || activeRowIndex >= this.rowsCount - 1) {
- activeRowIndex = 0;
- } else {
- activeRowIndex++;
- }
- }
-
- return activeRowIndex;
-};
-
-aria.GridCombobox.prototype.getItemAt = function (rowIndex, colIndex) {
- return document.getElementById('result-item-' + rowIndex + 'x' + colIndex);
-};
-
-aria.GridCombobox.prototype.selectItem = function (item) {
- if (item) {
- this.input.value = item.innerText;
- this.hideResults();
- }
-};
-
-aria.GridCombobox.prototype.hideResults = function () {
- this.gridFocused = false;
- this.shown = false;
- this.activeRowIndex = -1;
- this.activeColIndex = 0;
- this.grid.innerHTML = '';
- aria.Utils.addClass(this.grid, 'hidden');
- this.input.setAttribute('aria-expanded', 'false');
- this.rowsCount = 0;
- this.colsCount = 0;
- this.input.setAttribute('aria-activedescendant', '');
-};
-
-aria.GridCombobox.prototype.removeFocusCell = function (rowIndex, colIndex) {
- var row = document.getElementById('result-row-' + rowIndex);
- aria.Utils.removeClass(row, 'focused');
- var cell = this.getItemAt(rowIndex, colIndex);
- aria.Utils.removeClass(cell, 'focused-cell');
-};
-
-aria.GridCombobox.prototype.focusCell = function (rowIndex, colIndex) {
- var row = document.getElementById('result-row-' + rowIndex);
- aria.Utils.addClass(row, 'focused');
- var cell = this.getItemAt(rowIndex, colIndex);
- aria.Utils.addClass(cell, 'focused-cell');
-};
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/select-only.js b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/select-only.js
deleted file mode 100644
index f8441cfc5..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/select-only.js
+++ /dev/null
@@ -1,393 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- */
-
-'use strict';
-
-// Save a list of named combobox actions, for future readability
-const SelectActions = {
- Close: 0,
- CloseSelect: 1,
- First: 2,
- Last: 3,
- Next: 4,
- Open: 5,
- PageDown: 6,
- PageUp: 7,
- Previous: 8,
- Select: 9,
- Type: 10,
-};
-
-/*
- * Helper functions
- */
-
-// filter an array of options against an input string
-// returns an array of options that begin with the filter string, case-independent
-function filterOptions(options = [], filter, exclude = []) {
- return options.filter((option) => {
- const matches = option.toLowerCase().indexOf(filter.toLowerCase()) === 0;
- return matches && exclude.indexOf(option) < 0;
- });
-}
-
-// map a key press to an action
-function getActionFromKey(event, menuOpen) {
- const { key, altKey, ctrlKey, metaKey } = event;
- const openKeys = ['ArrowDown', 'ArrowUp', 'Enter', ' ']; // all keys that will do the default open action
- // handle opening when closed
- if (!menuOpen && openKeys.includes(key)) {
- return SelectActions.Open;
- }
-
- // home and end move the selected option when open or closed
- if (key === 'Home') {
- return SelectActions.First;
- }
- if (key === 'End') {
- return SelectActions.Last;
- }
-
- // handle typing characters when open or closed
- if (
- key === 'Backspace' ||
- key === 'Clear' ||
- (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey)
- ) {
- return SelectActions.Type;
- }
-
- // handle keys when open
- if (menuOpen) {
- if (key === 'ArrowUp' && altKey) {
- return SelectActions.CloseSelect;
- } else if (key === 'ArrowDown' && !altKey) {
- return SelectActions.Next;
- } else if (key === 'ArrowUp') {
- return SelectActions.Previous;
- } else if (key === 'PageUp') {
- return SelectActions.PageUp;
- } else if (key === 'PageDown') {
- return SelectActions.PageDown;
- } else if (key === 'Escape') {
- return SelectActions.Close;
- } else if (key === 'Enter' || key === ' ') {
- return SelectActions.CloseSelect;
- }
- }
-}
-
-// return the index of an option from an array of options, based on a search string
-// if the filter is multiple iterations of the same letter (e.g "aaa"), then cycle through first-letter matches
-function getIndexByLetter(options, filter, startIndex = 0) {
- const orderedOptions = [
- ...options.slice(startIndex),
- ...options.slice(0, startIndex),
- ];
- const firstMatch = filterOptions(orderedOptions, filter)[0];
- const allSameLetter = (array) => array.every((letter) => letter === array[0]);
-
- // first check if there is an exact match for the typed string
- if (firstMatch) {
- return options.indexOf(firstMatch);
- }
-
- // if the same letter is being repeated, cycle through first-letter matches
- else if (allSameLetter(filter.split(''))) {
- const matches = filterOptions(orderedOptions, filter[0]);
- return options.indexOf(matches[0]);
- }
-
- // if no matches, return -1
- else {
- return -1;
- }
-}
-
-// get an updated option index after performing an action
-function getUpdatedIndex(currentIndex, maxIndex, action) {
- const pageSize = 10; // used for pageup/pagedown
-
- switch (action) {
- case SelectActions.First:
- return 0;
- case SelectActions.Last:
- return maxIndex;
- case SelectActions.Previous:
- return Math.max(0, currentIndex - 1);
- case SelectActions.Next:
- return Math.min(maxIndex, currentIndex + 1);
- case SelectActions.PageUp:
- return Math.max(0, currentIndex - pageSize);
- case SelectActions.PageDown:
- return Math.min(maxIndex, currentIndex + pageSize);
- default:
- return currentIndex;
- }
-}
-
-// check if an element is currently scrollable
-function isScrollable(element) {
- return element && element.clientHeight < element.scrollHeight;
-}
-
-// ensure a given child element is within the parent's visible scroll area
-// if the child is not visible, scroll the parent
-function maintainScrollVisibility(activeElement, scrollParent) {
- const { offsetHeight, offsetTop } = activeElement;
- const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;
-
- const isAbove = offsetTop < scrollTop;
- const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
-
- if (isAbove) {
- scrollParent.scrollTo(0, offsetTop);
- } else if (isBelow) {
- scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);
- }
-}
-
-/*
- * Select Component
- * Accepts a combobox element and an array of string options
- */
-const Select = function (el, options = []) {
- // element refs
- this.el = el;
- this.comboEl = el.querySelector('[role=combobox]');
- this.listboxEl = el.querySelector('[role=listbox]');
-
- // data
- this.idBase = this.comboEl.id || 'combo';
- this.options = options;
-
- // state
- this.activeIndex = 0;
- this.open = false;
- this.searchString = '';
- this.searchTimeout = null;
-
- // init
- if (el && this.comboEl && this.listboxEl) {
- this.init();
- }
-};
-
-Select.prototype.init = function () {
- // select first option by default
- this.comboEl.innerHTML = this.options[0];
-
- // add event listeners
- this.comboEl.addEventListener('blur', this.onComboBlur.bind(this));
- this.comboEl.addEventListener('click', this.onComboClick.bind(this));
- this.comboEl.addEventListener('keydown', this.onComboKeyDown.bind(this));
-
- // create options
- this.options.map((option, index) => {
- const optionEl = this.createOption(option, index);
- this.listboxEl.appendChild(optionEl);
- });
-};
-
-Select.prototype.createOption = function (optionText, index) {
- const optionEl = document.createElement('div');
- optionEl.setAttribute('role', 'option');
- optionEl.id = `${this.idBase}-${index}`;
- optionEl.className =
- index === 0 ? 'combo-option option-current' : 'combo-option';
- optionEl.setAttribute('aria-selected', `${index === 0}`);
- optionEl.innerText = optionText;
-
- optionEl.addEventListener('click', (event) => {
- event.stopPropagation();
- this.onOptionClick(index);
- });
- optionEl.addEventListener('mousedown', this.onOptionMouseDown.bind(this));
-
- return optionEl;
-};
-
-Select.prototype.getSearchString = function (char) {
- // reset typing timeout and start new timeout
- // this allows us to make multiple-letter matches, like a native select
- if (typeof this.searchTimeout === 'number') {
- window.clearTimeout(this.searchTimeout);
- }
-
- this.searchTimeout = window.setTimeout(() => {
- this.searchString = '';
- }, 500);
-
- // add most recent letter to saved search string
- this.searchString += char;
- return this.searchString;
-};
-
-Select.prototype.onComboBlur = function () {
- // do not do blur action if ignoreBlur flag has been set
- if (this.ignoreBlur) {
- this.ignoreBlur = false;
- return;
- }
-
- // select current option and close
- if (this.open) {
- this.selectOption(this.activeIndex);
- this.updateMenuState(false, false);
- }
-};
-
-Select.prototype.onComboClick = function () {
- this.updateMenuState(!this.open, false);
-};
-
-Select.prototype.onComboKeyDown = function (event) {
- const { key } = event;
- const max = this.options.length - 1;
-
- const action = getActionFromKey(event, this.open);
-
- switch (action) {
- case SelectActions.Last:
- case SelectActions.First:
- this.updateMenuState(true);
- // intentional fallthrough
- case SelectActions.Next:
- case SelectActions.Previous:
- case SelectActions.PageUp:
- case SelectActions.PageDown:
- event.preventDefault();
- return this.onOptionChange(
- getUpdatedIndex(this.activeIndex, max, action)
- );
- case SelectActions.CloseSelect:
- event.preventDefault();
- this.selectOption(this.activeIndex);
- // intentional fallthrough
- case SelectActions.Close:
- event.preventDefault();
- return this.updateMenuState(false);
- case SelectActions.Type:
- return this.onComboType(key);
- case SelectActions.Open:
- event.preventDefault();
- return this.updateMenuState(true);
- }
-};
-
-Select.prototype.onComboType = function (letter) {
- // open the listbox if it is closed
- this.updateMenuState(true);
-
- // find the index of the first matching option
- const searchString = this.getSearchString(letter);
- const searchIndex = getIndexByLetter(
- this.options,
- searchString,
- this.activeIndex + 1
- );
-
- // if a match was found, go to it
- if (searchIndex >= 0) {
- this.onOptionChange(searchIndex);
- }
- // if no matches, clear the timeout and search string
- else {
- window.clearTimeout(this.searchTimeout);
- this.searchString = '';
- }
-};
-
-Select.prototype.onOptionChange = function (index) {
- // update state
- this.activeIndex = index;
-
- // update aria-activedescendant
- this.comboEl.setAttribute('aria-activedescendant', `${this.idBase}-${index}`);
-
- // update active option styles
- const options = this.el.querySelectorAll('[role=option]');
- [...options].forEach((optionEl) => {
- optionEl.classList.remove('option-current');
- });
- options[index].classList.add('option-current');
-
- // ensure the new option is in view
- if (isScrollable(this.listboxEl)) {
- maintainScrollVisibility(options[index], this.listboxEl);
- }
-};
-
-Select.prototype.onOptionClick = function (index) {
- this.onOptionChange(index);
- this.selectOption(index);
- this.updateMenuState(false);
-};
-
-Select.prototype.onOptionMouseDown = function () {
- // Clicking an option will cause a blur event,
- // but we don't want to perform the default keyboard blur action
- this.ignoreBlur = true;
-};
-
-Select.prototype.selectOption = function (index) {
- // update state
- this.activeIndex = index;
-
- // update displayed value
- const selected = this.options[index];
- this.comboEl.innerHTML = selected;
-
- // update aria-selected
- const options = this.el.querySelectorAll('[role=option]');
- [...options].forEach((optionEl) => {
- optionEl.setAttribute('aria-selected', 'false');
- });
- options[index].setAttribute('aria-selected', 'true');
-};
-
-Select.prototype.updateMenuState = function (open, callFocus = true) {
- if (this.open === open) {
- return;
- }
-
- // update state
- this.open = open;
-
- // update aria-expanded and styles
- this.comboEl.setAttribute('aria-expanded', `${open}`);
- open ? this.el.classList.add('open') : this.el.classList.remove('open');
-
- // update activedescendant
- const activeID = open ? `${this.idBase}-${this.activeIndex}` : '';
- this.comboEl.setAttribute('aria-activedescendant', activeID);
-
- // move focus back to the combobox, if needed
- callFocus && this.comboEl.focus();
-};
-
-// init select
-window.addEventListener('load', function () {
- const options = [
- 'Choose a Fruit',
- 'Apple',
- 'Banana',
- 'Blueberry',
- 'Boysenberry',
- 'Cherry',
- 'Cranberry',
- 'Durian',
- 'Eggplant',
- 'Fig',
- 'Grape',
- 'Guava',
- 'Huckleberry',
- ];
- const selectEls = document.querySelectorAll('.js-select');
-
- selectEls.forEach((el) => {
- new Select(el, options);
- });
-});
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/combobox-autocomplete-both.html b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/combobox-autocomplete-both.html
deleted file mode 100644
index 9dfb621b0..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/combobox-autocomplete-both.html
+++ /dev/null
@@ -1,97 +0,0 @@
-
-
-
-
-Editable Combobox With Both List and Inline Autocomplete Example | WAI-ARIA Authoring Practices 1.2
-
-
-
-
-
-
-
-
-
-
-
-
-
- Editable Combobox With Both List and Inline Autocomplete Example
-
-
-
State
-
-
-
- Alabama
- Alaska
- American Samoa
- Arizona
- Arkansas
- California
- Colorado
- Connecticut
- Delaware
- District of Columbia
- Florida
- Georgia
- Guam
- Hawaii
- Idaho
- Illinois
- Indiana
- Iowa
- Kansas
- Kentucky
- Louisiana
- Maine
- Maryland
- Massachusetts
- Michigan
- Minnesota
- Mississippi
- Missouri
- Montana
- Nebraska
- Nevada
- New Hampshire
- New Jersey
- New Mexico
- New York
- North Carolina
- North Dakota
- Northern Marianas Islands
- Ohio
- Oklahoma
- Oregon
- Pennsylvania
- Puerto Rico
- Rhode Island
- South Carolina
- South Dakota
- Tennessee
- Texas
- Utah
- Vermont
- Virginia
- Virgin Islands
- Washington
- West Virginia
- Wisconsin
- Wyoming
-
-
-
-
-
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/combobox-autocomplete.css b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/combobox-autocomplete.css
deleted file mode 100644
index 297f818b5..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/combobox-autocomplete.css
+++ /dev/null
@@ -1,114 +0,0 @@
-.combobox-list {
- position: relative;
-}
-
-.combobox .group {
- display: inline-flex;
-}
-
-.combobox input,
-.combobox button {
- background-color: white;
- color: black;
- box-sizing: border-box;
- height: 1.75rem;
- padding: 0;
- margin: 0;
- vertical-align: bottom;
- border: 1px solid gray;
- position: relative;
-}
-
-.combobox input {
- width: 10.75rem;
- border-right: none;
- outline: none;
- font-size: 87.5%;
- padding: 0.1em 0.3em;
-}
-
-.combobox button {
- width: 1.25rem;
- border-left: none;
- outline: none;
-}
-
-.combobox button[aria-expanded="true"] svg {
- transform: rotate(180deg) translate(0, -1px);
-}
-
-.combobox .group.focus {
- outline: 2px solid black;
- outline-offset: 1px;
-}
-
-.combobox .group.focus input,
-.combobox .group.focus button {
- background-color: #def;
-}
-
-.combobox button polygon.outline {
- stroke: transparent;
- fill: transparent;
-}
-
-.combobox button[aria-expanded="true"] polygon.outline,
-.combobox .group.focus polygon.outline {
- stroke: white;
- fill: white;
-}
-
-.combobox polygon.arrow {
- fill: gray;
- stroke: gray;
-}
-
-ul[role="listbox"] {
- margin: 0;
- padding: 0;
- position: absolute;
- left: 0;
- top: 1.75rem;
- list-style: none;
- background-color: white;
- display: none;
- box-sizing: border-box;
- border: 1px gray solid;
- border-top: none;
- max-height: 11.4em;
- width: 12rem;
- overflow: scroll;
- overflow-x: hidden;
- font-size: 87.5%;
-}
-
-ul[role="listbox"] li[role="option"] {
- display: block;
- padding-left: 0.3em;
- padding-top: 0.2em;
- padding-bottom: 0.2em;
- margin: 0;
-}
-
-/* focus and hover styling */
-
-[role="listbox"].focus [role="option"][aria-selected="true"] {
- background-color: #def;
- padding-top: 0;
- padding-bottom: 0;
- border-top: 0.2em solid #8ccbf2;
- border-bottom: 0.2em solid #8ccbf2;
-}
-
-@media (forced-colors: active), (-ms-high-contrast: active) {
- [role="listbox"].focus [role="option"][aria-selected="true"] {
- -ms-high-contrast-adjust: none; /* disable the backgrounds that Edge puts behind text */
- background-color: highlight;
- color: highlighttext;
- border-color: currentColor;
- }
-}
-
-[role="listbox"] li[role="option"]:hover {
- background-color: #def;
-}
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/combobox-datepicker.css b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/combobox-datepicker.css
deleted file mode 100644
index 5370b4edf..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/combobox-datepicker.css
+++ /dev/null
@@ -1,249 +0,0 @@
-.combobox-datepicker {
- margin-top: 1em;
- position: relative;
-}
-
-.combobox-datepicker .group {
- display: inline-flex;
- position: relative;
- width: 12.125rem;
-}
-
-.combobox-datepicker label {
- display: block;
-}
-
-.combobox-datepicker .group input,
-.combobox-datepicker .group button {
- background-color: white;
- color: black;
- box-sizing: border-box;
- height: 1.75rem;
- padding: 0;
- margin: 0;
- vertical-align: bottom;
- border: 1px solid gray;
- position: relative;
-}
-
-.combobox-datepicker .group input {
- width: 10.75rem;
- border-right: none;
- outline: none;
- font-size: 87.5%;
- padding: 0.1em 0.3em;
-}
-
-.combobox-datepicker .group button {
- position: absolute;
- left: 10.75rem;
- padding-right: 0.125rem;
- border-left: none;
- outline: none;
-}
-
-.combobox-datepicker .group .desc {
- position: absolute;
- top: 2em;
- left: 0;
- margin-top: 0.1em;
- font-size: 90%;
- font-style: italic;
- letter-spacing: 0.025em;
-}
-
-.combobox-datepicker .group.focus {
- outline: 2px solid black;
- outline-offset: 2px;
-}
-
-.combobox-datepicker .group.focus input,
-.combobox-datepicker .group.focus button {
- background-color: #def;
-}
-
-.combobox-datepicker .group polygon {
- fill: gray;
- stroke: transparent;
-}
-
-.combobox-datepicker .group button[aria-expanded="true"] polygon,
-.combobox-datepicker .group.focus polygon {
- fill: black;
- stroke: white;
-}
-
-.combobox-datepicker .group button.open svg {
- transform: rotate(180deg) translate(0, -1px);
-}
-
-.combobox-datepicker .dialog {
- position: absolute;
- width: 320px;
- clear: both;
- border: 3px solid hsl(216, 80%, 51%);
- margin-top: 1em;
- border-radius: 5px;
- padding: 0;
- background-color: #fff;
-}
-
-.combobox-datepicker .header {
- cursor: default;
- background-color: hsl(216, 80%, 51%);
- padding: 7px;
- font-weight: bold;
- text-transform: uppercase;
- color: white;
- display: flex;
- justify-content: space-around;
-}
-
-.combobox-datepicker .dialog h2 {
- margin: 0;
- padding: 0;
- display: inline-block;
- font-size: 1em;
- color: white;
- text-transform: none;
- font-weight: bold;
-}
-
-.combobox-datepicker .dialog button {
- border-style: none;
- background: transparent;
-}
-
-.combobox-datepicker .dialog button::-moz-focus-inner {
- border: 0;
-}
-
-.combobox-datepicker .dates {
- width: 320px;
- padding-left: 1em;
- padding-right: 1em;
- padding-top: 1em;
-}
-
-.combobox-datepicker .prev-year,
-.combobox-datepicker .prev-month,
-.combobox-datepicker .next-month,
-.combobox-datepicker .next-year {
- padding: 4px;
- width: 24px;
- height: 24px;
- color: white;
-}
-
-.combobox-datepicker .prev-year:focus,
-.combobox-datepicker .prev-month:focus,
-.combobox-datepicker .next-month:focus,
-.combobox-datepicker .next-year:focus {
- padding: 2px;
- border: 2px solid white;
- border-radius: 4px;
- outline: 0;
-}
-
-.combobox-datepicker .prev-year:hover,
-.combobox-datepicker .prev-month:hover,
-.combobox-datepicker .next-month:hover,
-.combobox-datepicker .next-year:hover {
- padding: 3px;
- border: 1px solid white;
- border-radius: 4px;
- outline: 0;
-}
-
-.combobox-datepicker .dialog-ok-cancel-group {
- text-align: right;
- margin-top: 1em;
- margin-bottom: 1em;
- margin-right: 1em;
-}
-
-.combobox-datepicker .dialog-ok-cancel-group button {
- padding: 6px;
- margin-left: 1em;
- width: 5em;
- background-color: hsl(216, 80%, 92%);
- font-size: 0.85em;
- color: black;
- outline: none;
- border-radius: 5px;
-}
-
-.combobox-datepicker .dialog-button:focus {
- padding: 4px;
- border: 2px solid black;
-}
-
-.combobox-datepicker .dialog-button:hover {
- padding: 5px;
- border: 1px solid black;
-}
-
-.combobox-datepicker .fa-calendar-alt {
- color: hsl(216, 89%, 51%);
-}
-
-.combobox-datepicker .month-year {
- display: inline-block;
- width: 12em;
- text-align: center;
-}
-
-.combobox-datepicker .dates th,
-.combobox-datepicker .dates td {
- text-align: center;
-}
-
-.combobox-datepicker .dates tr {
- border: 1px solid black;
-}
-
-.combobox-datepicker .dates td {
- padding: 3px;
- margin: 0;
- line-height: inherit;
- height: 40px;
- width: 40px;
- border-radius: 5px;
- font-size: 15px;
- background: #eee;
-}
-
-.combobox-datepicker .dates td[aria-selected] {
- padding: 1px;
- border: 2px dotted black;
- background-color: hsl(216, 80%, 96%);
-}
-
-.combobox-datepicker .dates td[tabindex="0"] {
- background-color: hsl(216, 80%, 51%);
- color: white;
-}
-
-.combobox-datepicker .dates td:hover {
- padding: 0;
- background-color: hsl(216, 80%, 92%);
-}
-
-.combobox-datepicker .dates td:not(.disabled):hover {
- padding: 2px;
- border: 1px solid rgb(100, 100, 100);
-}
-
-.combobox-datepicker .dates td:focus {
- padding: 1px;
- border: 2px solid rgb(100, 100, 100);
- outline: 0;
-}
-
-.combobox-datepicker .dialog-message {
- padding-top: 0.25em;
- padding-left: 1em;
- height: 1.75em;
- background: hsl(216, 80%, 51%);
- color: white;
-}
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/grid-combo.css b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/grid-combo.css
deleted file mode 100644
index 29324bea1..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/grid-combo.css
+++ /dev/null
@@ -1,88 +0,0 @@
-.hidden {
- display: none;
-}
-
-.combobox-wrapper {
- display: inline-block;
- position: relative;
- font-size: 16px;
-}
-
-.combobox-label {
- font-size: 14px;
- font-weight: bold;
- margin-right: 5px;
-}
-
-.listbox,
-.grid {
- min-width: 230px;
- background: white;
- border: 1px solid #ccc;
- list-style: none;
- margin: 0;
- padding: 0;
- position: absolute;
- top: 1.7em;
- z-index: 1;
-}
-
-.listbox .result {
- cursor: default;
- margin: 0;
-}
-
-.grid .result-row {
- padding: 2px;
- cursor: default;
- margin: 0;
-}
-
-.listbox .result:hover,
-.grid .result-row:hover {
- background: rgb(139, 189, 225);
-}
-
-.listbox .focused,
-.grid .focused {
- background: rgb(139, 189, 225);
-}
-
-.grid .focused-cell {
- outline-style: dotted;
- outline-color: green;
-}
-
-.combobox-wrapper input {
- font-size: inherit;
- border: 1px solid #aaa;
- border-radius: 2px;
- line-height: 1.5em;
- padding-right: 30px;
- width: 200px;
-}
-
-.combobox-dropdown {
- position: absolute;
- right: 0;
- top: 0;
- padding: 0 0 2px;
- height: 1.5em;
- border-radius: 0 2px 2px 0;
- border: 1px solid #aaa;
-}
-
-.grid .result-cell {
- display: inline-block;
- cursor: default;
- margin: 0;
- padding: 0 5px;
-}
-
-.grid .result-cell:last-child {
- float: right;
- font-size: 12px;
- font-weight: 200;
- color: #333;
- line-height: 24px;
-}
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/select-only.css b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/select-only.css
deleted file mode 100644
index 1d8beb3a7..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/select-only.css
+++ /dev/null
@@ -1,103 +0,0 @@
-.combo *,
-.combo *::before,
-.combo *::after {
- box-sizing: border-box;
-}
-
-.combo {
- display: block;
- margin-bottom: 1.5em;
- max-width: 400px;
- position: relative;
-}
-
-.combo::after {
- border-bottom: 2px solid rgba(0, 0, 0, 0.75);
- border-right: 2px solid rgba(0, 0, 0, 0.75);
- content: "";
- display: block;
- height: 12px;
- pointer-events: none;
- position: absolute;
- right: 16px;
- top: 50%;
- transform: translate(0, -65%) rotate(45deg);
- width: 12px;
-}
-
-.combo-input {
- background-color: #f5f5f5;
- border: 2px solid rgba(0, 0, 0, 0.75);
- border-radius: 4px;
- display: block;
- font-size: 1em;
- min-height: calc(1.4em + 26px);
- padding: 12px 16px 14px;
- text-align: left;
- width: 100%;
-}
-
-.open .combo-input {
- border-radius: 4px 4px 0 0;
-}
-
-.combo-input:focus {
- border-color: #0067b8;
- box-shadow: 0 0 4px 2px #0067b8;
- outline: 4px solid transparent;
-}
-
-.combo-label {
- display: block;
- font-size: 20px;
- font-weight: 100;
- margin-bottom: 0.25em;
-}
-
-.combo-menu {
- background-color: #f5f5f5;
- border: 1px solid rgba(0, 0, 0, 0.75);
- border-radius: 0 0 4px 4px;
- display: none;
- max-height: 300px;
- overflow-y: scroll;
- left: 0;
- position: absolute;
- top: 100%;
- width: 100%;
- z-index: 100;
-}
-
-.open .combo-menu {
- display: block;
-}
-
-.combo-option {
- padding: 10px 12px 12px;
-}
-
-.combo-option:hover {
- background-color: rgba(0, 0, 0, 0.1);
-}
-
-.combo-option.option-current {
- outline: 3px solid #0067b8;
- outline-offset: -3px;
-}
-
-.combo-option[aria-selected="true"] {
- padding-right: 30px;
- position: relative;
-}
-
-.combo-option[aria-selected="true"]::after {
- border-bottom: 2px solid #000;
- border-right: 2px solid #000;
- content: "";
- height: 16px;
- position: absolute;
- right: 15px;
- top: 50%;
- transform: translate(0, -50%) rotate(45deg);
- width: 8px;
-}
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/combobox-autocomplete.js b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/combobox-autocomplete.js
deleted file mode 100644
index 95f013077..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/combobox-autocomplete.js
+++ /dev/null
@@ -1,573 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- */
-
-'use strict';
-
-var ComboboxAutocomplete = function (comboboxNode, buttonNode, listboxNode) {
- this.comboboxNode = comboboxNode;
- this.buttonNode = buttonNode;
- this.listboxNode = listboxNode;
-
- this.comboboxHasVisualFocus = false;
- this.listboxHasVisualFocus = false;
-
- this.hasHover = false;
-
- this.isNone = false;
- this.isList = false;
- this.isBoth = false;
-
- this.allOptions = [];
-
- this.option = null;
- this.firstOption = null;
- this.lastOption = null;
-
- this.filteredOptions = [];
- this.filter = '';
-};
-
-ComboboxAutocomplete.prototype.init = function () {
- var autocomplete = this.comboboxNode.getAttribute('aria-autocomplete');
-
- if (typeof autocomplete === 'string') {
- autocomplete = autocomplete.toLowerCase();
- this.isNone = autocomplete === 'none';
- this.isList = autocomplete === 'list';
- this.isBoth = autocomplete === 'both';
- } else {
- // default value of autocomplete
- this.isNone = true;
- }
-
- this.comboboxNode.addEventListener(
- 'keydown',
- this.handleComboboxKeyDown.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'keyup',
- this.handleComboboxKeyUp.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'click',
- this.handleComboboxClick.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'focus',
- this.handleComboboxFocus.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'blur',
- this.handleComboboxBlur.bind(this)
- );
-
- // initialize pop up menu
-
- this.listboxNode.addEventListener(
- 'mouseover',
- this.handleListboxMouseover.bind(this)
- );
- this.listboxNode.addEventListener(
- 'mouseout',
- this.handleListboxMouseout.bind(this)
- );
-
- // Traverse the element children of domNode: configure each with
- // option role behavior and store reference in.options array.
- var nodes = this.listboxNode.getElementsByTagName('LI');
-
- for (var i = 0; i < nodes.length; i++) {
- var node = nodes[i];
- this.allOptions.push(node);
-
- node.addEventListener('click', this.handleOptionClick.bind(this));
- node.addEventListener('mouseover', this.handleOptionMouseover.bind(this));
- node.addEventListener('mouseout', this.handleOptionMouseout.bind(this));
- }
-
- this.filterOptions();
-
- // Open Button
-
- var button = this.comboboxNode.nextElementSibling;
-
- if (button && button.tagName === 'BUTTON') {
- button.addEventListener('click', this.handleButtonClick.bind(this));
- }
-};
-
-ComboboxAutocomplete.prototype.getLowercaseContent = function (node) {
- return node.textContent.toLowerCase();
-};
-
-ComboboxAutocomplete.prototype.setActiveDescendant = function (option) {
- if (option && this.listboxHasVisualFocus) {
- this.comboboxNode.setAttribute('aria-activedescendant', option.id);
- } else {
- this.comboboxNode.setAttribute('aria-activedescendant', '');
- }
-};
-
-ComboboxAutocomplete.prototype.setValue = function (value) {
- this.filter = value;
- this.comboboxNode.value = this.filter;
- this.comboboxNode.setSelectionRange(this.filter.length, this.filter.length);
- this.filterOptions();
-};
-
-ComboboxAutocomplete.prototype.setOption = function (option, flag) {
- if (typeof flag !== 'boolean') {
- flag = false;
- }
-
- if (option) {
- this.option = option;
- this.setCurrentOptionStyle(this.option);
- this.setActiveDescendant(this.option);
-
- if (this.isBoth) {
- this.comboboxNode.value = this.option.textContent;
- if (flag) {
- this.comboboxNode.setSelectionRange(
- this.option.textContent.length,
- this.option.textContent.length
- );
- } else {
- this.comboboxNode.setSelectionRange(
- this.filter.length,
- this.option.textContent.length
- );
- }
- }
- }
-};
-
-ComboboxAutocomplete.prototype.setVisualFocusCombobox = function () {
- this.listboxNode.classList.remove('focus');
- this.comboboxNode.parentNode.classList.add('focus'); // set the focus class to the parent for easier styling
- this.comboboxHasVisualFocus = true;
- this.listboxHasVisualFocus = false;
- this.setActiveDescendant(false);
-};
-
-ComboboxAutocomplete.prototype.setVisualFocusListbox = function () {
- this.comboboxNode.parentNode.classList.remove('focus');
- this.comboboxHasVisualFocus = false;
- this.listboxHasVisualFocus = true;
- this.listboxNode.classList.add('focus');
- this.setActiveDescendant(this.option);
-};
-
-ComboboxAutocomplete.prototype.removeVisualFocusAll = function () {
- this.comboboxNode.parentNode.classList.remove('focus');
- this.comboboxHasVisualFocus = false;
- this.listboxHasVisualFocus = false;
- this.listboxNode.classList.remove('focus');
- this.option = null;
- this.setActiveDescendant(false);
-};
-
-// ComboboxAutocomplete Events
-
-ComboboxAutocomplete.prototype.filterOptions = function () {
- // do not filter any options if autocomplete is none
- if (this.isNone) {
- this.filter = '';
- }
-
- var option = null;
- var currentOption = this.option;
- var filter = this.filter.toLowerCase();
-
- this.filteredOptions = [];
- this.listboxNode.innerHTML = '';
-
- for (var i = 0; i < this.allOptions.length; i++) {
- option = this.allOptions[i];
- if (
- filter.length === 0 ||
- this.getLowercaseContent(option).indexOf(filter) === 0
- ) {
- this.filteredOptions.push(option);
- this.listboxNode.appendChild(option);
- }
- }
-
- // Use populated options array to initialize firstOption and lastOption.
- var numItems = this.filteredOptions.length;
- if (numItems > 0) {
- this.firstOption = this.filteredOptions[0];
- this.lastOption = this.filteredOptions[numItems - 1];
-
- if (currentOption && this.filteredOptions.indexOf(currentOption) >= 0) {
- option = currentOption;
- } else {
- option = this.firstOption;
- }
- } else {
- this.firstOption = null;
- option = null;
- this.lastOption = null;
- }
-
- return option;
-};
-
-ComboboxAutocomplete.prototype.setCurrentOptionStyle = function (option) {
- for (var i = 0; i < this.filteredOptions.length; i++) {
- var opt = this.filteredOptions[i];
- if (opt === option) {
- opt.setAttribute('aria-selected', 'true');
- if (
- this.listboxNode.scrollTop + this.listboxNode.offsetHeight <
- opt.offsetTop + opt.offsetHeight
- ) {
- this.listboxNode.scrollTop =
- opt.offsetTop + opt.offsetHeight - this.listboxNode.offsetHeight;
- } else if (this.listboxNode.scrollTop > opt.offsetTop + 2) {
- this.listboxNode.scrollTop = opt.offsetTop;
- }
- } else {
- opt.removeAttribute('aria-selected');
- }
- }
-};
-
-ComboboxAutocomplete.prototype.getPreviousOption = function (currentOption) {
- if (currentOption !== this.firstOption) {
- var index = this.filteredOptions.indexOf(currentOption);
- return this.filteredOptions[index - 1];
- }
- return this.lastOption;
-};
-
-ComboboxAutocomplete.prototype.getNextOption = function (currentOption) {
- if (currentOption !== this.lastOption) {
- var index = this.filteredOptions.indexOf(currentOption);
- return this.filteredOptions[index + 1];
- }
- return this.firstOption;
-};
-
-/* MENU DISPLAY METHODS */
-
-ComboboxAutocomplete.prototype.doesOptionHaveFocus = function () {
- return this.comboboxNode.getAttribute('aria-activedescendant') !== '';
-};
-
-ComboboxAutocomplete.prototype.isOpen = function () {
- return this.listboxNode.style.display === 'block';
-};
-
-ComboboxAutocomplete.prototype.isClosed = function () {
- return this.listboxNode.style.display !== 'block';
-};
-
-ComboboxAutocomplete.prototype.hasOptions = function () {
- return this.filteredOptions.length;
-};
-
-ComboboxAutocomplete.prototype.open = function () {
- this.listboxNode.style.display = 'block';
- this.comboboxNode.setAttribute('aria-expanded', 'true');
- this.buttonNode.setAttribute('aria-expanded', 'true');
-};
-
-ComboboxAutocomplete.prototype.close = function (force) {
- if (typeof force !== 'boolean') {
- force = false;
- }
-
- if (
- force ||
- (!this.comboboxHasVisualFocus &&
- !this.listboxHasVisualFocus &&
- !this.hasHover)
- ) {
- this.setCurrentOptionStyle(false);
- this.listboxNode.style.display = 'none';
- this.comboboxNode.setAttribute('aria-expanded', 'false');
- this.buttonNode.setAttribute('aria-expanded', 'false');
- this.setActiveDescendant(false);
- }
-};
-
-/* combobox Events */
-
-ComboboxAutocomplete.prototype.handleComboboxKeyDown = function (event) {
- var flag = false,
- char = event.key,
- altKey = event.altKey;
-
- if (event.ctrlKey || event.shiftKey) {
- return;
- }
-
- switch (event.key) {
- case 'Enter':
- if (this.listboxHasVisualFocus) {
- this.setValue(this.option.textContent);
- }
- this.close(true);
- this.setVisualFocusCombobox();
- flag = true;
- break;
-
- case 'Down':
- case 'ArrowDown':
- if (this.filteredOptions.length > 0) {
- if (altKey) {
- this.open();
- } else {
- this.open();
- if (
- this.listboxHasVisualFocus ||
- (this.isBoth && this.filteredOptions.length > 1)
- ) {
- this.setOption(this.getNextOption(this.option), true);
- this.setVisualFocusListbox();
- } else {
- this.setOption(this.firstOption, true);
- this.setVisualFocusListbox();
- }
- }
- }
- flag = true;
- break;
-
- case 'Up':
- case 'ArrowUp':
- if (this.hasOptions()) {
- if (this.listboxHasVisualFocus) {
- this.setOption(this.getPreviousOption(this.option), true);
- } else {
- this.open();
- if (!altKey) {
- this.setOption(this.lastOption, true);
- this.setVisualFocusListbox();
- }
- }
- }
- flag = true;
- break;
-
- case 'Esc':
- case 'Escape':
- if (this.isOpen()) {
- this.close(true);
- this.filter = this.comboboxNode.value;
- this.filterOptions();
- this.setVisualFocusCombobox();
- } else {
- this.setValue('');
- this.comboboxNode.value = '';
- }
- this.option = null;
- flag = true;
- break;
-
- case 'Tab':
- this.close(true);
- if (this.listboxHasVisualFocus) {
- if (this.option) {
- this.setValue(this.option.textContent);
- }
- }
- break;
-
- case 'Home':
- this.comboboxNode.setSelectionRange(0, 0);
- flag = true;
- break;
-
- case 'End':
- var length = this.comboboxNode.value.length;
- this.comboboxNode.setSelectionRange(length, length);
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxAutocomplete.prototype.isPrintableCharacter = function (str) {
- return str.length === 1 && str.match(/\S/);
-};
-
-ComboboxAutocomplete.prototype.handleComboboxKeyUp = function (event) {
- var flag = false,
- option = null,
- char = event.key;
-
- if (this.isPrintableCharacter(char)) {
- this.filter += char;
- }
-
- // this is for the case when a selection in the textbox has been deleted
- if (this.comboboxNode.value.length < this.filter.length) {
- this.filter = this.comboboxNode.value;
- this.option = null;
- this.filterOptions();
- }
-
- if (event.key === 'Escape' || event.key === 'Esc') {
- return;
- }
-
- switch (event.key) {
- case 'Backspace':
- this.setVisualFocusCombobox();
- this.setCurrentOptionStyle(false);
- this.filter = this.comboboxNode.value;
- this.option = null;
- this.filterOptions();
- flag = true;
- break;
-
- case 'Left':
- case 'ArrowLeft':
- case 'Right':
- case 'ArrowRight':
- case 'Home':
- case 'End':
- if (this.isBoth) {
- this.filter = this.comboboxNode.value;
- } else {
- this.option = null;
- this.setCurrentOptionStyle(false);
- }
- this.setVisualFocusCombobox();
- flag = true;
- break;
-
- default:
- if (this.isPrintableCharacter(char)) {
- this.setVisualFocusCombobox();
- this.setCurrentOptionStyle(false);
- flag = true;
-
- if (this.isList || this.isBoth) {
- option = this.filterOptions();
- if (option) {
- if (this.isClosed() && this.comboboxNode.value.length) {
- this.open();
- }
-
- if (
- this.getLowercaseContent(option).indexOf(
- this.comboboxNode.value.toLowerCase()
- ) === 0
- ) {
- this.option = option;
- if (this.isBoth || this.listboxHasVisualFocus) {
- this.setCurrentOptionStyle(option);
- if (this.isBoth) {
- this.setOption(option);
- }
- }
- } else {
- this.option = null;
- this.setCurrentOptionStyle(false);
- }
- } else {
- this.close();
- this.option = null;
- this.setActiveDescendant(false);
- }
- } else if (this.comboboxNode.value.length) {
- this.open();
- }
- }
-
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxAutocomplete.prototype.handleComboboxClick = function (event) {
- if (this.isOpen()) {
- this.close(true);
- } else {
- this.open();
- }
-};
-
-ComboboxAutocomplete.prototype.handleComboboxFocus = function (event) {
- this.filter = this.comboboxNode.value;
- this.filterOptions();
- this.setVisualFocusCombobox();
- this.option = null;
- this.setCurrentOptionStyle(null);
-};
-
-ComboboxAutocomplete.prototype.handleComboboxBlur = function (event) {
- this.comboboxHasVisualFocus = false;
- this.setCurrentOptionStyle(null);
- this.removeVisualFocusAll();
- setTimeout(this.close.bind(this, false), 300);
-};
-
-ComboboxAutocomplete.prototype.handleButtonClick = function (event) {
- if (this.isOpen()) {
- this.close(true);
- } else {
- this.open();
- }
- this.comboboxNode.focus();
- this.setVisualFocusCombobox();
-};
-
-/* Listbox Events */
-
-ComboboxAutocomplete.prototype.handleListboxMouseover = function (event) {
- this.hasHover = true;
-};
-
-ComboboxAutocomplete.prototype.handleListboxMouseout = function (event) {
- this.hasHover = false;
- setTimeout(this.close.bind(this, false), 300);
-};
-
-// Listbox Option Events
-
-ComboboxAutocomplete.prototype.handleOptionClick = function (event) {
- this.comboboxNode.value = event.target.textContent;
- this.close(true);
-};
-
-ComboboxAutocomplete.prototype.handleOptionMouseover = function (event) {
- this.hasHover = true;
- this.open();
-};
-
-ComboboxAutocomplete.prototype.handleOptionMouseout = function (event) {
- this.hasHover = false;
- setTimeout(this.close.bind(this, false), 300);
-};
-
-// Initialize comboboxes
-
-window.addEventListener('load', function () {
- var comboboxes = document.querySelectorAll('.combobox-list');
-
- for (var i = 0; i < comboboxes.length; i++) {
- var combobox = comboboxes[i];
- var comboboxNode = combobox.querySelector('input');
- var buttonNode = combobox.querySelector('button');
- var listboxNode = combobox.querySelector('[role="listbox"]');
- var cba = new ComboboxAutocomplete(comboboxNode, buttonNode, listboxNode);
- cba.init();
- }
-});
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/combobox-datepicker.js b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/combobox-datepicker.js
deleted file mode 100644
index c791141ea..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/combobox-datepicker.js
+++ /dev/null
@@ -1,866 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: ComboboxDatePicker.js
- */
-
-'use strict';
-
-var ComboboxDatePicker = function (cdp) {
- this.buttonLabel = 'Date';
- this.monthLabels = [
- 'January',
- 'February',
- 'March',
- 'April',
- 'May',
- 'June',
- 'July',
- 'August',
- 'September',
- 'October',
- 'November',
- 'December',
- ];
-
- this.messageCursorKeys = 'Cursor keys can navigate dates';
- this.lastMessage = '';
-
- this.comboboxNode = cdp.querySelector('input[type="text"]');
- this.buttonNode = cdp.querySelector('.group button');
- this.dialogNode = cdp.querySelector('[role="dialog"]');
- this.messageNode = this.dialogNode.querySelector('.dialog-message');
-
- this.monthYearNode = this.dialogNode.querySelector('.month-year');
-
- this.prevYearNode = this.dialogNode.querySelector('.prev-year');
- this.prevMonthNode = this.dialogNode.querySelector('.prev-month');
- this.nextMonthNode = this.dialogNode.querySelector('.next-month');
- this.nextYearNode = this.dialogNode.querySelector('.next-year');
-
- this.okButtonNode = this.dialogNode.querySelector('button[value="ok"]');
- this.cancelButtonNode = this.dialogNode.querySelector(
- 'button[value="cancel"]'
- );
-
- this.tbodyNode = this.dialogNode.querySelector('table.dates tbody');
-
- this.lastRowNode = null;
-
- this.days = [];
-
- this.focusDay = new Date();
- this.selectedDay = new Date(0, 0, 1);
-
- this.isMouseDownOnBackground = false;
-};
-
-ComboboxDatePicker.prototype.init = function () {
- this.comboboxNode.addEventListener(
- 'keydown',
- this.handleComboboxKeyDown.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'click',
- this.handleComboboxClick.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'focus',
- this.handleComboboxFocus.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'blur',
- this.handleComboboxBlur.bind(this)
- );
-
- this.buttonNode.addEventListener(
- 'keydown',
- this.handleButtonKeyDown.bind(this)
- );
- this.buttonNode.addEventListener('click', this.handleButtonClick.bind(this));
-
- this.okButtonNode.addEventListener('click', this.handleOkButton.bind(this));
- this.okButtonNode.addEventListener('keydown', this.handleOkButton.bind(this));
-
- this.cancelButtonNode.addEventListener(
- 'click',
- this.handleCancelButton.bind(this)
- );
- this.cancelButtonNode.addEventListener(
- 'keydown',
- this.handleCancelButton.bind(this)
- );
-
- this.prevMonthNode.addEventListener(
- 'click',
- this.handlePreviousMonthButton.bind(this)
- );
- this.nextMonthNode.addEventListener(
- 'click',
- this.handleNextMonthButton.bind(this)
- );
- this.prevYearNode.addEventListener(
- 'click',
- this.handlePreviousYearButton.bind(this)
- );
- this.nextYearNode.addEventListener(
- 'click',
- this.handleNextYearButton.bind(this)
- );
-
- this.prevMonthNode.addEventListener(
- 'keydown',
- this.handlePreviousMonthButton.bind(this)
- );
- this.nextMonthNode.addEventListener(
- 'keydown',
- this.handleNextMonthButton.bind(this)
- );
- this.prevYearNode.addEventListener(
- 'keydown',
- this.handlePreviousYearButton.bind(this)
- );
- this.nextYearNode.addEventListener(
- 'keydown',
- this.handleNextYearButton.bind(this)
- );
-
- document.body.addEventListener(
- 'mouseup',
- this.handleBackgroundMouseUp.bind(this),
- true
- );
-
- // Create Grid of Dates
-
- this.tbodyNode.innerHTML = '';
- for (var i = 0; i < 6; i++) {
- var row = this.tbodyNode.insertRow(i);
- this.lastRowNode = row;
- for (var j = 0; j < 7; j++) {
- var cell = document.createElement('td');
-
- cell.setAttribute('tabindex', '-1');
- cell.addEventListener('click', this.handleDayClick.bind(this));
- cell.addEventListener('keydown', this.handleDayKeyDown.bind(this));
- cell.addEventListener('focus', this.handleDayFocus.bind(this));
-
- cell.innerHTML = '-1';
-
- row.appendChild(cell);
- this.days.push(cell);
- }
- }
-
- this.updateGrid();
- this.close(false);
-};
-
-ComboboxDatePicker.prototype.isSameDay = function (day1, day2) {
- return (
- day1.getFullYear() == day2.getFullYear() &&
- day1.getMonth() == day2.getMonth() &&
- day1.getDate() == day2.getDate()
- );
-};
-
-ComboboxDatePicker.prototype.isNotSameMonth = function (day1, day2) {
- return (
- day1.getFullYear() != day2.getFullYear() ||
- day1.getMonth() != day2.getMonth()
- );
-};
-
-ComboboxDatePicker.prototype.updateGrid = function () {
- var i, flag;
- var fd = this.focusDay;
-
- this.monthYearNode.innerHTML =
- this.monthLabels[fd.getMonth()] + ' ' + fd.getFullYear();
-
- var firstDayOfMonth = new Date(fd.getFullYear(), fd.getMonth(), 1);
- var dayOfWeek = firstDayOfMonth.getDay();
-
- firstDayOfMonth.setDate(firstDayOfMonth.getDate() - dayOfWeek);
-
- var d = new Date(firstDayOfMonth);
-
- for (i = 0; i < this.days.length; i++) {
- flag = d.getMonth() != fd.getMonth();
- this.updateDate(this.days[i], flag, d, this.isSameDay(d, this.selectedDay));
- d.setDate(d.getDate() + 1);
-
- // Hide last row if all disabled dates
- if (i === 35) {
- if (flag) {
- this.lastRowNode.style.visibility = 'hidden';
- } else {
- this.lastRowNode.style.visibility = 'visible';
- }
- }
- }
-};
-
-ComboboxDatePicker.prototype.setFocusDay = function (flag) {
- if (typeof flag !== 'boolean') {
- flag = true;
- }
-
- var fd = this.focusDay;
- var getDayFromDataDateAttribute = this.getDayFromDataDateAttribute;
-
- function checkDay(domNode) {
- var d = getDayFromDataDateAttribute(domNode);
-
- domNode.setAttribute('tabindex', '-1');
- if (this.isSameDay(d, fd)) {
- domNode.setAttribute('tabindex', '0');
- if (flag) {
- domNode.focus();
- }
- }
- }
-
- this.days.forEach(checkDay.bind(this));
-};
-
-ComboboxDatePicker.prototype.open = function () {
- this.dialogNode.style.display = 'block';
- this.dialogNode.style.zIndex = 2;
-
- this.comboboxNode.setAttribute('aria-expanded', 'true');
- this.buttonNode.classList.add('open');
- this.getDateFromCombobox();
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.isOpen = function () {
- return window.getComputedStyle(this.dialogNode).display !== 'none';
-};
-
-ComboboxDatePicker.prototype.close = function (flag) {
- if (typeof flag !== 'boolean') {
- // Default is to move focus to combobox
- flag = true;
- }
-
- this.setMessage('');
- this.dialogNode.style.display = 'none';
- this.comboboxNode.setAttribute('aria-expanded', 'false');
- this.buttonNode.classList.remove('open');
-
- if (flag) {
- this.comboboxNode.focus();
- }
-};
-
-ComboboxDatePicker.prototype.handleOkButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Tab':
- if (!event.shiftKey) {
- this.prevYearNode.focus();
- flag = true;
- }
- break;
-
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
- break;
-
- case 'click':
- this.setComboboxDate();
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleCancelButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
- break;
-
- case 'click':
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleNextYearButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- case 'Enter':
- this.moveToNextYear();
- this.setFocusDay(false);
- flag = true;
- break;
- }
-
- break;
-
- case 'click':
- this.moveToNextYear();
- this.setFocusDay(false);
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handlePreviousYearButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Enter':
- this.moveToPreviousYear();
- this.setFocusDay(false);
- flag = true;
- break;
-
- case 'Tab':
- if (event.shiftKey) {
- this.okButtonNode.focus();
- flag = true;
- }
- break;
-
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
-
- break;
-
- case 'click':
- this.moveToPreviousYear();
- this.setFocusDay(false);
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleNextMonthButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- case 'Enter':
- this.moveToNextMonth();
- this.setFocusDay(false);
- flag = true;
- break;
- }
-
- break;
-
- case 'click':
- this.moveToNextMonth();
- this.setFocusDay(false);
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handlePreviousMonthButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- case 'Enter':
- this.moveToPreviousMonth();
- this.setFocusDay(false);
- flag = true;
- break;
- }
-
- break;
-
- case 'click':
- this.moveToPreviousMonth();
- this.setFocusDay(false);
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.moveFocusToDay = function (day) {
- var d = this.focusDay;
-
- this.focusDay = day;
-
- if (
- d.getMonth() != this.focusDay.getMonth() ||
- d.getYear() != this.focusDay.getYear()
- ) {
- this.updateGrid();
- }
- this.setFocusDay();
-};
-
-ComboboxDatePicker.prototype.moveToNextYear = function () {
- this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.moveToPreviousYear = function () {
- this.focusDay.setFullYear(this.focusDay.getFullYear() - 1);
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.moveToNextMonth = function () {
- this.focusDay.setMonth(this.focusDay.getMonth() + 1);
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.moveToPreviousMonth = function () {
- this.focusDay.setMonth(this.focusDay.getMonth() - 1);
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.moveFocusToNextDay = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() + 1);
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToNextWeek = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() + 7);
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToPreviousDay = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() - 1);
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToPreviousWeek = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() - 7);
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToFirstDayOfWeek = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() - d.getDay());
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToLastDayOfWeek = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() + (6 - d.getDay()));
- this.moveFocusToDay(d);
-};
-
-// Day methods
-
-ComboboxDatePicker.prototype.isDayDisabled = function (domNode) {
- return domNode.classList.contains('disabled');
-};
-
-ComboboxDatePicker.prototype.getDayFromDataDateAttribute = function (domNode) {
- var parts = domNode.getAttribute('data-date').split('-');
- return new Date(parts[0], parseInt(parts[1]) - 1, parts[2]);
-};
-
-ComboboxDatePicker.prototype.updateDate = function (
- domNode,
- disable,
- day,
- selected
-) {
- var d = day.getDate().toString();
- if (day.getDate() <= 9) {
- d = '0' + d;
- }
-
- var m = day.getMonth() + 1;
- if (day.getMonth() < 9) {
- m = '0' + m;
- }
-
- domNode.setAttribute('tabindex', '-1');
- domNode.removeAttribute('aria-selected');
- domNode.setAttribute('data-date', day.getFullYear() + '-' + m + '-' + d);
-
- if (disable) {
- domNode.classList.add('disabled');
- domNode.innerHTML = '';
- } else {
- domNode.classList.remove('disabled');
- domNode.innerHTML = day.getDate();
- if (selected) {
- domNode.setAttribute('aria-selected', 'true');
- domNode.setAttribute('tabindex', '0');
- }
- }
-};
-
-ComboboxDatePicker.prototype.updateSelected = function (domNode) {
- for (var i = 0; i < this.days.length; i++) {
- var day = this.days[i];
- if (day === domNode) {
- day.setAttribute('aria-selected', 'true');
- } else {
- day.removeAttribute('aria-selected');
- }
- }
-};
-
-ComboboxDatePicker.prototype.handleDayKeyDown = function (event) {
- var flag = false;
-
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- break;
-
- case ' ':
- this.updateSelected(event.currentTarget);
- this.setComboboxDate(event.currentTarget);
- flag = true;
- break;
-
- case 'Enter':
- this.setComboboxDate(event.currentTarget);
- this.close();
- break;
-
- case 'Tab':
- this.cancelButtonNode.focus();
- if (event.shiftKey) {
- this.nextYearNode.focus();
- }
- this.setMessage('');
- flag = true;
- break;
-
- case 'Right':
- case 'ArrowRight':
- this.moveFocusToNextDay();
- flag = true;
- break;
-
- case 'Left':
- case 'ArrowLeft':
- this.moveFocusToPreviousDay();
- flag = true;
- break;
-
- case 'Down':
- case 'ArrowDown':
- this.moveFocusToNextWeek();
- flag = true;
- break;
-
- case 'Up':
- case 'ArrowUp':
- this.moveFocusToPreviousWeek();
- flag = true;
- break;
-
- case 'PageUp':
- if (event.shiftKey) {
- this.moveToPreviousYear();
- } else {
- this.moveToPreviousMonth();
- }
- this.setFocusDay();
- flag = true;
- break;
-
- case 'PageDown':
- if (event.shiftKey) {
- this.moveToNextYear();
- } else {
- this.moveToNextMonth();
- }
- this.setFocusDay();
- flag = true;
- break;
-
- case 'Home':
- this.moveFocusToFirstDayOfWeek();
- flag = true;
- break;
-
- case 'End':
- this.moveFocusToLastDayOfWeek();
- flag = true;
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleDayClick = function (event) {
- if (!this.isDayDisabled(event.currentTarget)) {
- this.setComboboxDate(event.currentTarget);
- this.close();
- }
-
- event.stopPropagation();
- event.preventDefault();
-};
-
-ComboboxDatePicker.prototype.handleDayFocus = function () {
- this.setMessage(this.messageCursorKeys);
-};
-
-// Combobox methods
-
-ComboboxDatePicker.prototype.setComboboxDate = function (domNode) {
- var d = this.focusDay;
-
- if (domNode) {
- d = this.getDayFromDataDateAttribute(domNode);
- }
-
- this.comboboxNode.value =
- d.getMonth() + 1 + '/' + d.getDate() + '/' + d.getFullYear();
-};
-
-ComboboxDatePicker.prototype.getDateFromCombobox = function () {
- var parts = this.comboboxNode.value.split('/');
-
- if (
- parts.length === 3 &&
- Number.isInteger(parseInt(parts[0])) &&
- Number.isInteger(parseInt(parts[1])) &&
- Number.isInteger(parseInt(parts[2]))
- ) {
- this.focusDay = new Date(
- parseInt(parts[2]),
- parseInt(parts[0]) - 1,
- parseInt(parts[1])
- );
- this.selectedDay = new Date(this.focusDay);
- } else {
- // If not a valid date (MM/DD/YY) initialize with todays date
- this.focusDay = new Date();
- this.selectedDay = new Date(0, 0, 1);
- }
-};
-
-ComboboxDatePicker.prototype.setMessage = function (str) {
- function setMessageDelayed() {
- this.messageNode.textContent = str;
- }
-
- if (str !== this.lastMessage) {
- setTimeout(setMessageDelayed.bind(this), 200);
- this.lastMessage = str;
- }
-};
-
-ComboboxDatePicker.prototype.handleComboboxKeyDown = function (event) {
- var flag = false,
- char = event.key,
- altKey = event.altKey;
-
- if (event.ctrlKey || event.shiftKey) {
- return;
- }
-
- switch (event.key) {
- case 'Down':
- case 'ArrowDown':
- this.open();
- this.setFocusDay();
- flag = true;
- break;
-
- case 'Esc':
- case 'Escape':
- if (this.isOpen()) {
- this.close(false);
- } else {
- this.comboboxNode.value = '';
- }
- this.option = null;
- flag = true;
- break;
-
- case 'Tab':
- this.close(false);
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleComboboxClick = function (event) {
- if (this.isOpen()) {
- this.close(false);
- } else {
- this.open();
- }
-
- event.stopPropagation();
- event.preventDefault();
-};
-
-ComboboxDatePicker.prototype.handleComboboxFocus = function (event) {
- event.currentTarget.parentNode.classList.add('focus');
-};
-
-ComboboxDatePicker.prototype.handleComboboxBlur = function (event) {
- event.currentTarget.parentNode.classList.remove('focus');
-};
-
-ComboboxDatePicker.prototype.handleButtonKeyDown = function (event) {
- if (event.key === 'Enter' || event.key === ' ') {
- this.open();
- this.setFocusDay();
-
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleButtonClick = function (event) {
- if (this.isOpen()) {
- this.close();
- } else {
- this.open();
- this.setFocusDay();
- }
-
- event.stopPropagation();
- event.preventDefault();
-};
-
-ComboboxDatePicker.prototype.handleBackgroundMouseUp = function (event) {
- if (
- !this.comboboxNode.contains(event.target) &&
- !this.buttonNode.contains(event.target) &&
- !this.dialogNode.contains(event.target)
- ) {
- if (this.isOpen()) {
- this.close(false);
- event.stopPropagation();
- event.preventDefault();
- }
- }
-};
-
-// Initialize menu button date picker
-
-window.addEventListener('load', function () {
- var comboboxDatePickers = document.querySelectorAll('.combobox-datepicker');
-
- comboboxDatePickers.forEach(function (dp) {
- var datePicker = new ComboboxDatePicker(dp);
- datePicker.init();
- });
-});
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/grid-combo-example.js b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/grid-combo-example.js
deleted file mode 100644
index 8bc03ac77..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/grid-combo-example.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * ARIA Combobox Examples
- */
-
-'use strict';
-
-var FRUITS_AND_VEGGIES = [
- ['Apple', 'Fruit'],
- ['Artichoke', 'Vegetable'],
- ['Asparagus', 'Vegetable'],
- ['Banana', 'Fruit'],
- ['Beets', 'Vegetable'],
- ['Bell pepper', 'Vegetable'],
- ['Broccoli', 'Vegetable'],
- ['Brussels sprout', 'Vegetable'],
- ['Cabbage', 'Vegetable'],
- ['Carrot', 'Vegetable'],
- ['Cauliflower', 'Vegetable'],
- ['Celery', 'Vegetable'],
- ['Chard', 'Vegetable'],
- ['Chicory', 'Vegetable'],
- ['Corn', 'Vegetable'],
- ['Cucumber', 'Vegetable'],
- ['Daikon', 'Vegetable'],
- ['Date', 'Fruit'],
- ['Edamame', 'Vegetable'],
- ['Eggplant', 'Vegetable'],
- ['Elderberry', 'Fruit'],
- ['Fennel', 'Vegetable'],
- ['Fig', 'Fruit'],
- ['Garlic', 'Vegetable'],
- ['Grape', 'Fruit'],
- ['Honeydew melon', 'Fruit'],
- ['Iceberg lettuce', 'Vegetable'],
- ['Jerusalem artichoke', 'Vegetable'],
- ['Kale', 'Vegetable'],
- ['Kiwi', 'Fruit'],
- ['Leek', 'Vegetable'],
- ['Lemon', 'Fruit'],
- ['Mango', 'Fruit'],
- ['Mangosteen', 'Fruit'],
- ['Melon', 'Fruit'],
- ['Mushroom', 'Fungus'],
- ['Nectarine', 'Fruit'],
- ['Okra', 'Vegetable'],
- ['Olive', 'Vegetable'],
- ['Onion', 'Vegetable'],
- ['Orange', 'Fruit'],
- ['Parsnip', 'Vegetable'],
- ['Pea', 'Vegetable'],
- ['Pear', 'Fruit'],
- ['Pineapple', 'Fruit'],
- ['Potato', 'Vegetable'],
- ['Pumpkin', 'Fruit'],
- ['Quince', 'Fruit'],
- ['Radish', 'Vegetable'],
- ['Rhubarb', 'Vegetable'],
- ['Shallot', 'Vegetable'],
- ['Spinach', 'Vegetable'],
- ['Squash', 'Vegetable'],
- ['Strawberry', 'Fruit'],
- ['Sweet potato', 'Vegetable'],
- ['Tomato', 'Fruit'],
- ['Turnip', 'Vegetable'],
- ['Ugli fruit', 'Fruit'],
- ['Victoria plum', 'Fruit'],
- ['Watercress', 'Vegetable'],
- ['Watermelon', 'Fruit'],
- ['Yam', 'Vegetable'],
- ['Zucchini', 'Vegetable'],
-];
-
-function searchVeggies(searchString) {
- var results = [];
-
- for (var i = 0; i < FRUITS_AND_VEGGIES.length; i++) {
- var veggie = FRUITS_AND_VEGGIES[i][0].toLowerCase();
- if (veggie.indexOf(searchString.toLowerCase()) === 0) {
- results.push(FRUITS_AND_VEGGIES[i]);
- }
- }
-
- return results;
-}
-
-/**
- * @function onload
- * @desc Initialize the combobox examples once the page has loaded
- */
-window.addEventListener('load', function () {
- var ex1Combobox = new aria.GridCombobox(
- document.getElementById('ex1-input'),
- document.getElementById('ex1-grid'),
- searchVeggies
- );
-});
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/grid-combo.js b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/grid-combo.js
deleted file mode 100644
index 78bc5c107..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/grid-combo.js
+++ /dev/null
@@ -1,297 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- */
-
-'use strict';
-
-/**
- * @constructor
- *
- * @desc
- * Combobox object representing the state and interactions for a combobox
- * widget
- *
- * @param comboboxNode
- * The DOM node pointing to the combobox
- * @param input
- * The input node
- * @param grid
- * The grid node to load results in
- * @param searchFn
- * The search function. The function accepts a search string and returns an
- * array of results.
- */
-aria.GridCombobox = function (input, grid, searchFn) {
- this.input = input;
- this.grid = grid;
- this.searchFn = searchFn;
- this.activeRowIndex = -1;
- this.activeColIndex = 0;
- this.rowsCount = 0;
- this.colsCount = 0;
- this.gridFocused = false;
- this.shown = false;
- this.selectionCol = 0;
-
- this.setupEvents();
-};
-
-aria.GridCombobox.prototype.setupEvents = function () {
- document.body.addEventListener('click', this.handleBodyClick.bind(this));
- this.input.addEventListener('keyup', this.handleInputKeyUp.bind(this));
- this.input.addEventListener('keydown', this.handleInputKeyDown.bind(this));
- this.input.addEventListener('focus', this.handleInputFocus.bind(this));
- this.grid.addEventListener('click', this.handleGridClick.bind(this));
-};
-
-aria.GridCombobox.prototype.handleBodyClick = function (evt) {
- if (evt.target === this.input || this.grid.contains(evt.target)) {
- return;
- }
- this.hideResults();
-};
-
-aria.GridCombobox.prototype.handleInputKeyUp = function (evt) {
- var key = evt.which || evt.keyCode;
-
- switch (key) {
- case aria.KeyCode.UP:
- case aria.KeyCode.DOWN:
- case aria.KeyCode.ESC:
- case aria.KeyCode.RETURN:
- evt.preventDefault();
- return;
- case aria.KeyCode.LEFT:
- case aria.KeyCode.RIGHT:
- if (this.gridFocused) {
- evt.preventDefault();
- return;
- }
- break;
- default:
- this.updateResults();
- }
-};
-
-aria.GridCombobox.prototype.handleInputKeyDown = function (evt) {
- var key = evt.which || evt.keyCode;
- var activeRowIndex = this.activeRowIndex;
- var activeColIndex = this.activeColIndex;
-
- if (key === aria.KeyCode.ESC) {
- if (this.gridFocused) {
- this.gridFocused = false;
- this.removeFocusCell(this.activeRowIndex, this.activeColIndex);
- this.activeRowIndex = -1;
- this.activeColIndex = 0;
- this.input.setAttribute('aria-activedescendant', '');
- } else {
- if (!this.shown) {
- setTimeout(
- function () {
- // On Firefox, input does not get cleared here unless wrapped in
- // a setTimeout
- this.input.value = '';
- }.bind(this),
- 1
- );
- }
- }
- if (this.shown) {
- this.hideResults();
- }
- return;
- }
-
- if (this.rowsCount < 1) {
- return;
- }
-
- var prevActive = this.getItemAt(activeRowIndex, this.selectionCol);
- var activeItem;
-
- switch (key) {
- case aria.KeyCode.UP:
- this.gridFocused = true;
- activeRowIndex = this.getRowIndex(key);
- evt.preventDefault();
- break;
- case aria.KeyCode.DOWN:
- this.gridFocused = true;
- activeRowIndex = this.getRowIndex(key);
- evt.preventDefault();
- break;
- case aria.KeyCode.LEFT:
- if (activeColIndex <= 0) {
- activeColIndex = this.colsCount - 1;
- activeRowIndex = this.getRowIndex(key);
- } else {
- activeColIndex--;
- }
- if (this.gridFocused) {
- evt.preventDefault();
- }
- break;
- case aria.KeyCode.RIGHT:
- if (activeColIndex === -1 || activeColIndex >= this.colsCount - 1) {
- activeColIndex = 0;
- activeRowIndex = this.getRowIndex(key);
- } else {
- activeColIndex++;
- }
- if (this.gridFocused) {
- evt.preventDefault();
- }
- break;
- case aria.KeyCode.RETURN:
- activeItem = this.getItemAt(activeRowIndex, this.selectionCol);
- this.selectItem(activeItem);
- this.gridFocused = false;
- return;
- case aria.KeyCode.TAB:
- this.hideResults();
- return;
- default:
- return;
- }
-
- if (prevActive) {
- this.removeFocusCell(this.activeRowIndex, this.activeColIndex);
- prevActive.setAttribute('aria-selected', 'false');
- }
-
- activeItem = this.getItemAt(activeRowIndex, activeColIndex);
- this.activeRowIndex = activeRowIndex;
- this.activeColIndex = activeColIndex;
-
- if (activeItem) {
- this.input.setAttribute(
- 'aria-activedescendant',
- 'result-item-' + activeRowIndex + 'x' + activeColIndex
- );
- this.focusCell(activeRowIndex, activeColIndex);
- var selectedItem = this.getItemAt(activeRowIndex, this.selectionCol);
- selectedItem.setAttribute('aria-selected', 'true');
- } else {
- this.input.setAttribute('aria-activedescendant', '');
- }
-};
-
-aria.GridCombobox.prototype.handleInputFocus = function (evt) {
- this.updateResults();
-};
-
-aria.GridCombobox.prototype.handleGridClick = function (evt) {
- if (!evt.target) {
- return;
- }
-
- var row;
- if (evt.target.getAttribute('role') === 'row') {
- row = evt.target;
- } else if (evt.target.getAttribute('role') === 'gridcell') {
- row = evt.target.parentNode;
- } else {
- return;
- }
-
- var selectItem = row.querySelector('.result-cell');
- this.selectItem(selectItem);
-};
-
-aria.GridCombobox.prototype.updateResults = function () {
- var searchString = this.input.value;
- var results = this.searchFn(searchString);
-
- this.hideResults();
-
- if (!searchString) {
- results = [];
- }
-
- if (results.length) {
- for (var row = 0; row < results.length; row++) {
- var resultRow = document.createElement('div');
- resultRow.className = 'result-row';
- resultRow.setAttribute('role', 'row');
- resultRow.setAttribute('id', 'result-row-' + row);
- for (var col = 0; col < results[row].length; col++) {
- var resultCell = document.createElement('div');
- resultCell.className = 'result-cell';
- resultCell.setAttribute('role', 'gridcell');
- resultCell.setAttribute('id', 'result-item-' + row + 'x' + col);
- resultCell.innerText = results[row][col];
- resultRow.appendChild(resultCell);
- }
- this.grid.appendChild(resultRow);
- }
- aria.Utils.removeClass(this.grid, 'hidden');
- this.input.setAttribute('aria-expanded', 'true');
- this.rowsCount = results.length;
- this.colsCount = results.length ? results[0].length : 0;
- this.shown = true;
- }
-};
-
-aria.GridCombobox.prototype.getRowIndex = function (key) {
- var activeRowIndex = this.activeRowIndex;
-
- switch (key) {
- case aria.KeyCode.UP:
- case aria.KeyCode.LEFT:
- if (activeRowIndex <= 0) {
- activeRowIndex = this.rowsCount - 1;
- } else {
- activeRowIndex--;
- }
- break;
- case aria.KeyCode.DOWN:
- case aria.KeyCode.RIGHT:
- if (activeRowIndex === -1 || activeRowIndex >= this.rowsCount - 1) {
- activeRowIndex = 0;
- } else {
- activeRowIndex++;
- }
- }
-
- return activeRowIndex;
-};
-
-aria.GridCombobox.prototype.getItemAt = function (rowIndex, colIndex) {
- return document.getElementById('result-item-' + rowIndex + 'x' + colIndex);
-};
-
-aria.GridCombobox.prototype.selectItem = function (item) {
- if (item) {
- this.input.value = item.innerText;
- this.hideResults();
- }
-};
-
-aria.GridCombobox.prototype.hideResults = function () {
- this.gridFocused = false;
- this.shown = false;
- this.activeRowIndex = -1;
- this.activeColIndex = 0;
- this.grid.innerHTML = '';
- aria.Utils.addClass(this.grid, 'hidden');
- this.input.setAttribute('aria-expanded', 'false');
- this.rowsCount = 0;
- this.colsCount = 0;
- this.input.setAttribute('aria-activedescendant', '');
-};
-
-aria.GridCombobox.prototype.removeFocusCell = function (rowIndex, colIndex) {
- var row = document.getElementById('result-row-' + rowIndex);
- aria.Utils.removeClass(row, 'focused');
- var cell = this.getItemAt(rowIndex, colIndex);
- aria.Utils.removeClass(cell, 'focused-cell');
-};
-
-aria.GridCombobox.prototype.focusCell = function (rowIndex, colIndex) {
- var row = document.getElementById('result-row-' + rowIndex);
- aria.Utils.addClass(row, 'focused');
- var cell = this.getItemAt(rowIndex, colIndex);
- aria.Utils.addClass(cell, 'focused-cell');
-};
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/select-only.js b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/select-only.js
deleted file mode 100644
index f8441cfc5..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/select-only.js
+++ /dev/null
@@ -1,393 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- */
-
-'use strict';
-
-// Save a list of named combobox actions, for future readability
-const SelectActions = {
- Close: 0,
- CloseSelect: 1,
- First: 2,
- Last: 3,
- Next: 4,
- Open: 5,
- PageDown: 6,
- PageUp: 7,
- Previous: 8,
- Select: 9,
- Type: 10,
-};
-
-/*
- * Helper functions
- */
-
-// filter an array of options against an input string
-// returns an array of options that begin with the filter string, case-independent
-function filterOptions(options = [], filter, exclude = []) {
- return options.filter((option) => {
- const matches = option.toLowerCase().indexOf(filter.toLowerCase()) === 0;
- return matches && exclude.indexOf(option) < 0;
- });
-}
-
-// map a key press to an action
-function getActionFromKey(event, menuOpen) {
- const { key, altKey, ctrlKey, metaKey } = event;
- const openKeys = ['ArrowDown', 'ArrowUp', 'Enter', ' ']; // all keys that will do the default open action
- // handle opening when closed
- if (!menuOpen && openKeys.includes(key)) {
- return SelectActions.Open;
- }
-
- // home and end move the selected option when open or closed
- if (key === 'Home') {
- return SelectActions.First;
- }
- if (key === 'End') {
- return SelectActions.Last;
- }
-
- // handle typing characters when open or closed
- if (
- key === 'Backspace' ||
- key === 'Clear' ||
- (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey)
- ) {
- return SelectActions.Type;
- }
-
- // handle keys when open
- if (menuOpen) {
- if (key === 'ArrowUp' && altKey) {
- return SelectActions.CloseSelect;
- } else if (key === 'ArrowDown' && !altKey) {
- return SelectActions.Next;
- } else if (key === 'ArrowUp') {
- return SelectActions.Previous;
- } else if (key === 'PageUp') {
- return SelectActions.PageUp;
- } else if (key === 'PageDown') {
- return SelectActions.PageDown;
- } else if (key === 'Escape') {
- return SelectActions.Close;
- } else if (key === 'Enter' || key === ' ') {
- return SelectActions.CloseSelect;
- }
- }
-}
-
-// return the index of an option from an array of options, based on a search string
-// if the filter is multiple iterations of the same letter (e.g "aaa"), then cycle through first-letter matches
-function getIndexByLetter(options, filter, startIndex = 0) {
- const orderedOptions = [
- ...options.slice(startIndex),
- ...options.slice(0, startIndex),
- ];
- const firstMatch = filterOptions(orderedOptions, filter)[0];
- const allSameLetter = (array) => array.every((letter) => letter === array[0]);
-
- // first check if there is an exact match for the typed string
- if (firstMatch) {
- return options.indexOf(firstMatch);
- }
-
- // if the same letter is being repeated, cycle through first-letter matches
- else if (allSameLetter(filter.split(''))) {
- const matches = filterOptions(orderedOptions, filter[0]);
- return options.indexOf(matches[0]);
- }
-
- // if no matches, return -1
- else {
- return -1;
- }
-}
-
-// get an updated option index after performing an action
-function getUpdatedIndex(currentIndex, maxIndex, action) {
- const pageSize = 10; // used for pageup/pagedown
-
- switch (action) {
- case SelectActions.First:
- return 0;
- case SelectActions.Last:
- return maxIndex;
- case SelectActions.Previous:
- return Math.max(0, currentIndex - 1);
- case SelectActions.Next:
- return Math.min(maxIndex, currentIndex + 1);
- case SelectActions.PageUp:
- return Math.max(0, currentIndex - pageSize);
- case SelectActions.PageDown:
- return Math.min(maxIndex, currentIndex + pageSize);
- default:
- return currentIndex;
- }
-}
-
-// check if an element is currently scrollable
-function isScrollable(element) {
- return element && element.clientHeight < element.scrollHeight;
-}
-
-// ensure a given child element is within the parent's visible scroll area
-// if the child is not visible, scroll the parent
-function maintainScrollVisibility(activeElement, scrollParent) {
- const { offsetHeight, offsetTop } = activeElement;
- const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;
-
- const isAbove = offsetTop < scrollTop;
- const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
-
- if (isAbove) {
- scrollParent.scrollTo(0, offsetTop);
- } else if (isBelow) {
- scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);
- }
-}
-
-/*
- * Select Component
- * Accepts a combobox element and an array of string options
- */
-const Select = function (el, options = []) {
- // element refs
- this.el = el;
- this.comboEl = el.querySelector('[role=combobox]');
- this.listboxEl = el.querySelector('[role=listbox]');
-
- // data
- this.idBase = this.comboEl.id || 'combo';
- this.options = options;
-
- // state
- this.activeIndex = 0;
- this.open = false;
- this.searchString = '';
- this.searchTimeout = null;
-
- // init
- if (el && this.comboEl && this.listboxEl) {
- this.init();
- }
-};
-
-Select.prototype.init = function () {
- // select first option by default
- this.comboEl.innerHTML = this.options[0];
-
- // add event listeners
- this.comboEl.addEventListener('blur', this.onComboBlur.bind(this));
- this.comboEl.addEventListener('click', this.onComboClick.bind(this));
- this.comboEl.addEventListener('keydown', this.onComboKeyDown.bind(this));
-
- // create options
- this.options.map((option, index) => {
- const optionEl = this.createOption(option, index);
- this.listboxEl.appendChild(optionEl);
- });
-};
-
-Select.prototype.createOption = function (optionText, index) {
- const optionEl = document.createElement('div');
- optionEl.setAttribute('role', 'option');
- optionEl.id = `${this.idBase}-${index}`;
- optionEl.className =
- index === 0 ? 'combo-option option-current' : 'combo-option';
- optionEl.setAttribute('aria-selected', `${index === 0}`);
- optionEl.innerText = optionText;
-
- optionEl.addEventListener('click', (event) => {
- event.stopPropagation();
- this.onOptionClick(index);
- });
- optionEl.addEventListener('mousedown', this.onOptionMouseDown.bind(this));
-
- return optionEl;
-};
-
-Select.prototype.getSearchString = function (char) {
- // reset typing timeout and start new timeout
- // this allows us to make multiple-letter matches, like a native select
- if (typeof this.searchTimeout === 'number') {
- window.clearTimeout(this.searchTimeout);
- }
-
- this.searchTimeout = window.setTimeout(() => {
- this.searchString = '';
- }, 500);
-
- // add most recent letter to saved search string
- this.searchString += char;
- return this.searchString;
-};
-
-Select.prototype.onComboBlur = function () {
- // do not do blur action if ignoreBlur flag has been set
- if (this.ignoreBlur) {
- this.ignoreBlur = false;
- return;
- }
-
- // select current option and close
- if (this.open) {
- this.selectOption(this.activeIndex);
- this.updateMenuState(false, false);
- }
-};
-
-Select.prototype.onComboClick = function () {
- this.updateMenuState(!this.open, false);
-};
-
-Select.prototype.onComboKeyDown = function (event) {
- const { key } = event;
- const max = this.options.length - 1;
-
- const action = getActionFromKey(event, this.open);
-
- switch (action) {
- case SelectActions.Last:
- case SelectActions.First:
- this.updateMenuState(true);
- // intentional fallthrough
- case SelectActions.Next:
- case SelectActions.Previous:
- case SelectActions.PageUp:
- case SelectActions.PageDown:
- event.preventDefault();
- return this.onOptionChange(
- getUpdatedIndex(this.activeIndex, max, action)
- );
- case SelectActions.CloseSelect:
- event.preventDefault();
- this.selectOption(this.activeIndex);
- // intentional fallthrough
- case SelectActions.Close:
- event.preventDefault();
- return this.updateMenuState(false);
- case SelectActions.Type:
- return this.onComboType(key);
- case SelectActions.Open:
- event.preventDefault();
- return this.updateMenuState(true);
- }
-};
-
-Select.prototype.onComboType = function (letter) {
- // open the listbox if it is closed
- this.updateMenuState(true);
-
- // find the index of the first matching option
- const searchString = this.getSearchString(letter);
- const searchIndex = getIndexByLetter(
- this.options,
- searchString,
- this.activeIndex + 1
- );
-
- // if a match was found, go to it
- if (searchIndex >= 0) {
- this.onOptionChange(searchIndex);
- }
- // if no matches, clear the timeout and search string
- else {
- window.clearTimeout(this.searchTimeout);
- this.searchString = '';
- }
-};
-
-Select.prototype.onOptionChange = function (index) {
- // update state
- this.activeIndex = index;
-
- // update aria-activedescendant
- this.comboEl.setAttribute('aria-activedescendant', `${this.idBase}-${index}`);
-
- // update active option styles
- const options = this.el.querySelectorAll('[role=option]');
- [...options].forEach((optionEl) => {
- optionEl.classList.remove('option-current');
- });
- options[index].classList.add('option-current');
-
- // ensure the new option is in view
- if (isScrollable(this.listboxEl)) {
- maintainScrollVisibility(options[index], this.listboxEl);
- }
-};
-
-Select.prototype.onOptionClick = function (index) {
- this.onOptionChange(index);
- this.selectOption(index);
- this.updateMenuState(false);
-};
-
-Select.prototype.onOptionMouseDown = function () {
- // Clicking an option will cause a blur event,
- // but we don't want to perform the default keyboard blur action
- this.ignoreBlur = true;
-};
-
-Select.prototype.selectOption = function (index) {
- // update state
- this.activeIndex = index;
-
- // update displayed value
- const selected = this.options[index];
- this.comboEl.innerHTML = selected;
-
- // update aria-selected
- const options = this.el.querySelectorAll('[role=option]');
- [...options].forEach((optionEl) => {
- optionEl.setAttribute('aria-selected', 'false');
- });
- options[index].setAttribute('aria-selected', 'true');
-};
-
-Select.prototype.updateMenuState = function (open, callFocus = true) {
- if (this.open === open) {
- return;
- }
-
- // update state
- this.open = open;
-
- // update aria-expanded and styles
- this.comboEl.setAttribute('aria-expanded', `${open}`);
- open ? this.el.classList.add('open') : this.el.classList.remove('open');
-
- // update activedescendant
- const activeID = open ? `${this.idBase}-${this.activeIndex}` : '';
- this.comboEl.setAttribute('aria-activedescendant', activeID);
-
- // move focus back to the combobox, if needed
- callFocus && this.comboEl.focus();
-};
-
-// init select
-window.addEventListener('load', function () {
- const options = [
- 'Choose a Fruit',
- 'Apple',
- 'Banana',
- 'Blueberry',
- 'Boysenberry',
- 'Cherry',
- 'Cranberry',
- 'Durian',
- 'Eggplant',
- 'Fig',
- 'Grape',
- 'Guava',
- 'Huckleberry',
- ];
- const selectEls = document.querySelectorAll('.js-select');
-
- selectEls.forEach((el) => {
- new Select(el, options);
- });
-});
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/combobox-autocomplete-both.html b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/combobox-autocomplete-both.html
deleted file mode 100644
index 9dfb621b0..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/combobox-autocomplete-both.html
+++ /dev/null
@@ -1,97 +0,0 @@
-
-
-
-
-Editable Combobox With Both List and Inline Autocomplete Example | WAI-ARIA Authoring Practices 1.2
-
-
-
-
-
-
-
-
-
-
-
-
-
- Editable Combobox With Both List and Inline Autocomplete Example
-
-
-
State
-
-
-
- Alabama
- Alaska
- American Samoa
- Arizona
- Arkansas
- California
- Colorado
- Connecticut
- Delaware
- District of Columbia
- Florida
- Georgia
- Guam
- Hawaii
- Idaho
- Illinois
- Indiana
- Iowa
- Kansas
- Kentucky
- Louisiana
- Maine
- Maryland
- Massachusetts
- Michigan
- Minnesota
- Mississippi
- Missouri
- Montana
- Nebraska
- Nevada
- New Hampshire
- New Jersey
- New Mexico
- New York
- North Carolina
- North Dakota
- Northern Marianas Islands
- Ohio
- Oklahoma
- Oregon
- Pennsylvania
- Puerto Rico
- Rhode Island
- South Carolina
- South Dakota
- Tennessee
- Texas
- Utah
- Vermont
- Virginia
- Virgin Islands
- Washington
- West Virginia
- Wisconsin
- Wyoming
-
-
-
-
-
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/combobox-autocomplete.css b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/combobox-autocomplete.css
deleted file mode 100644
index 297f818b5..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/combobox-autocomplete.css
+++ /dev/null
@@ -1,114 +0,0 @@
-.combobox-list {
- position: relative;
-}
-
-.combobox .group {
- display: inline-flex;
-}
-
-.combobox input,
-.combobox button {
- background-color: white;
- color: black;
- box-sizing: border-box;
- height: 1.75rem;
- padding: 0;
- margin: 0;
- vertical-align: bottom;
- border: 1px solid gray;
- position: relative;
-}
-
-.combobox input {
- width: 10.75rem;
- border-right: none;
- outline: none;
- font-size: 87.5%;
- padding: 0.1em 0.3em;
-}
-
-.combobox button {
- width: 1.25rem;
- border-left: none;
- outline: none;
-}
-
-.combobox button[aria-expanded="true"] svg {
- transform: rotate(180deg) translate(0, -1px);
-}
-
-.combobox .group.focus {
- outline: 2px solid black;
- outline-offset: 1px;
-}
-
-.combobox .group.focus input,
-.combobox .group.focus button {
- background-color: #def;
-}
-
-.combobox button polygon.outline {
- stroke: transparent;
- fill: transparent;
-}
-
-.combobox button[aria-expanded="true"] polygon.outline,
-.combobox .group.focus polygon.outline {
- stroke: white;
- fill: white;
-}
-
-.combobox polygon.arrow {
- fill: gray;
- stroke: gray;
-}
-
-ul[role="listbox"] {
- margin: 0;
- padding: 0;
- position: absolute;
- left: 0;
- top: 1.75rem;
- list-style: none;
- background-color: white;
- display: none;
- box-sizing: border-box;
- border: 1px gray solid;
- border-top: none;
- max-height: 11.4em;
- width: 12rem;
- overflow: scroll;
- overflow-x: hidden;
- font-size: 87.5%;
-}
-
-ul[role="listbox"] li[role="option"] {
- display: block;
- padding-left: 0.3em;
- padding-top: 0.2em;
- padding-bottom: 0.2em;
- margin: 0;
-}
-
-/* focus and hover styling */
-
-[role="listbox"].focus [role="option"][aria-selected="true"] {
- background-color: #def;
- padding-top: 0;
- padding-bottom: 0;
- border-top: 0.2em solid #8ccbf2;
- border-bottom: 0.2em solid #8ccbf2;
-}
-
-@media (forced-colors: active), (-ms-high-contrast: active) {
- [role="listbox"].focus [role="option"][aria-selected="true"] {
- -ms-high-contrast-adjust: none; /* disable the backgrounds that Edge puts behind text */
- background-color: highlight;
- color: highlighttext;
- border-color: currentColor;
- }
-}
-
-[role="listbox"] li[role="option"]:hover {
- background-color: #def;
-}
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/combobox-datepicker.css b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/combobox-datepicker.css
deleted file mode 100644
index 5370b4edf..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/combobox-datepicker.css
+++ /dev/null
@@ -1,249 +0,0 @@
-.combobox-datepicker {
- margin-top: 1em;
- position: relative;
-}
-
-.combobox-datepicker .group {
- display: inline-flex;
- position: relative;
- width: 12.125rem;
-}
-
-.combobox-datepicker label {
- display: block;
-}
-
-.combobox-datepicker .group input,
-.combobox-datepicker .group button {
- background-color: white;
- color: black;
- box-sizing: border-box;
- height: 1.75rem;
- padding: 0;
- margin: 0;
- vertical-align: bottom;
- border: 1px solid gray;
- position: relative;
-}
-
-.combobox-datepicker .group input {
- width: 10.75rem;
- border-right: none;
- outline: none;
- font-size: 87.5%;
- padding: 0.1em 0.3em;
-}
-
-.combobox-datepicker .group button {
- position: absolute;
- left: 10.75rem;
- padding-right: 0.125rem;
- border-left: none;
- outline: none;
-}
-
-.combobox-datepicker .group .desc {
- position: absolute;
- top: 2em;
- left: 0;
- margin-top: 0.1em;
- font-size: 90%;
- font-style: italic;
- letter-spacing: 0.025em;
-}
-
-.combobox-datepicker .group.focus {
- outline: 2px solid black;
- outline-offset: 2px;
-}
-
-.combobox-datepicker .group.focus input,
-.combobox-datepicker .group.focus button {
- background-color: #def;
-}
-
-.combobox-datepicker .group polygon {
- fill: gray;
- stroke: transparent;
-}
-
-.combobox-datepicker .group button[aria-expanded="true"] polygon,
-.combobox-datepicker .group.focus polygon {
- fill: black;
- stroke: white;
-}
-
-.combobox-datepicker .group button.open svg {
- transform: rotate(180deg) translate(0, -1px);
-}
-
-.combobox-datepicker .dialog {
- position: absolute;
- width: 320px;
- clear: both;
- border: 3px solid hsl(216, 80%, 51%);
- margin-top: 1em;
- border-radius: 5px;
- padding: 0;
- background-color: #fff;
-}
-
-.combobox-datepicker .header {
- cursor: default;
- background-color: hsl(216, 80%, 51%);
- padding: 7px;
- font-weight: bold;
- text-transform: uppercase;
- color: white;
- display: flex;
- justify-content: space-around;
-}
-
-.combobox-datepicker .dialog h2 {
- margin: 0;
- padding: 0;
- display: inline-block;
- font-size: 1em;
- color: white;
- text-transform: none;
- font-weight: bold;
-}
-
-.combobox-datepicker .dialog button {
- border-style: none;
- background: transparent;
-}
-
-.combobox-datepicker .dialog button::-moz-focus-inner {
- border: 0;
-}
-
-.combobox-datepicker .dates {
- width: 320px;
- padding-left: 1em;
- padding-right: 1em;
- padding-top: 1em;
-}
-
-.combobox-datepicker .prev-year,
-.combobox-datepicker .prev-month,
-.combobox-datepicker .next-month,
-.combobox-datepicker .next-year {
- padding: 4px;
- width: 24px;
- height: 24px;
- color: white;
-}
-
-.combobox-datepicker .prev-year:focus,
-.combobox-datepicker .prev-month:focus,
-.combobox-datepicker .next-month:focus,
-.combobox-datepicker .next-year:focus {
- padding: 2px;
- border: 2px solid white;
- border-radius: 4px;
- outline: 0;
-}
-
-.combobox-datepicker .prev-year:hover,
-.combobox-datepicker .prev-month:hover,
-.combobox-datepicker .next-month:hover,
-.combobox-datepicker .next-year:hover {
- padding: 3px;
- border: 1px solid white;
- border-radius: 4px;
- outline: 0;
-}
-
-.combobox-datepicker .dialog-ok-cancel-group {
- text-align: right;
- margin-top: 1em;
- margin-bottom: 1em;
- margin-right: 1em;
-}
-
-.combobox-datepicker .dialog-ok-cancel-group button {
- padding: 6px;
- margin-left: 1em;
- width: 5em;
- background-color: hsl(216, 80%, 92%);
- font-size: 0.85em;
- color: black;
- outline: none;
- border-radius: 5px;
-}
-
-.combobox-datepicker .dialog-button:focus {
- padding: 4px;
- border: 2px solid black;
-}
-
-.combobox-datepicker .dialog-button:hover {
- padding: 5px;
- border: 1px solid black;
-}
-
-.combobox-datepicker .fa-calendar-alt {
- color: hsl(216, 89%, 51%);
-}
-
-.combobox-datepicker .month-year {
- display: inline-block;
- width: 12em;
- text-align: center;
-}
-
-.combobox-datepicker .dates th,
-.combobox-datepicker .dates td {
- text-align: center;
-}
-
-.combobox-datepicker .dates tr {
- border: 1px solid black;
-}
-
-.combobox-datepicker .dates td {
- padding: 3px;
- margin: 0;
- line-height: inherit;
- height: 40px;
- width: 40px;
- border-radius: 5px;
- font-size: 15px;
- background: #eee;
-}
-
-.combobox-datepicker .dates td[aria-selected] {
- padding: 1px;
- border: 2px dotted black;
- background-color: hsl(216, 80%, 96%);
-}
-
-.combobox-datepicker .dates td[tabindex="0"] {
- background-color: hsl(216, 80%, 51%);
- color: white;
-}
-
-.combobox-datepicker .dates td:hover {
- padding: 0;
- background-color: hsl(216, 80%, 92%);
-}
-
-.combobox-datepicker .dates td:not(.disabled):hover {
- padding: 2px;
- border: 1px solid rgb(100, 100, 100);
-}
-
-.combobox-datepicker .dates td:focus {
- padding: 1px;
- border: 2px solid rgb(100, 100, 100);
- outline: 0;
-}
-
-.combobox-datepicker .dialog-message {
- padding-top: 0.25em;
- padding-left: 1em;
- height: 1.75em;
- background: hsl(216, 80%, 51%);
- color: white;
-}
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/grid-combo.css b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/grid-combo.css
deleted file mode 100644
index 29324bea1..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/grid-combo.css
+++ /dev/null
@@ -1,88 +0,0 @@
-.hidden {
- display: none;
-}
-
-.combobox-wrapper {
- display: inline-block;
- position: relative;
- font-size: 16px;
-}
-
-.combobox-label {
- font-size: 14px;
- font-weight: bold;
- margin-right: 5px;
-}
-
-.listbox,
-.grid {
- min-width: 230px;
- background: white;
- border: 1px solid #ccc;
- list-style: none;
- margin: 0;
- padding: 0;
- position: absolute;
- top: 1.7em;
- z-index: 1;
-}
-
-.listbox .result {
- cursor: default;
- margin: 0;
-}
-
-.grid .result-row {
- padding: 2px;
- cursor: default;
- margin: 0;
-}
-
-.listbox .result:hover,
-.grid .result-row:hover {
- background: rgb(139, 189, 225);
-}
-
-.listbox .focused,
-.grid .focused {
- background: rgb(139, 189, 225);
-}
-
-.grid .focused-cell {
- outline-style: dotted;
- outline-color: green;
-}
-
-.combobox-wrapper input {
- font-size: inherit;
- border: 1px solid #aaa;
- border-radius: 2px;
- line-height: 1.5em;
- padding-right: 30px;
- width: 200px;
-}
-
-.combobox-dropdown {
- position: absolute;
- right: 0;
- top: 0;
- padding: 0 0 2px;
- height: 1.5em;
- border-radius: 0 2px 2px 0;
- border: 1px solid #aaa;
-}
-
-.grid .result-cell {
- display: inline-block;
- cursor: default;
- margin: 0;
- padding: 0 5px;
-}
-
-.grid .result-cell:last-child {
- float: right;
- font-size: 12px;
- font-weight: 200;
- color: #333;
- line-height: 24px;
-}
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/select-only.css b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/select-only.css
deleted file mode 100644
index 1d8beb3a7..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/select-only.css
+++ /dev/null
@@ -1,103 +0,0 @@
-.combo *,
-.combo *::before,
-.combo *::after {
- box-sizing: border-box;
-}
-
-.combo {
- display: block;
- margin-bottom: 1.5em;
- max-width: 400px;
- position: relative;
-}
-
-.combo::after {
- border-bottom: 2px solid rgba(0, 0, 0, 0.75);
- border-right: 2px solid rgba(0, 0, 0, 0.75);
- content: "";
- display: block;
- height: 12px;
- pointer-events: none;
- position: absolute;
- right: 16px;
- top: 50%;
- transform: translate(0, -65%) rotate(45deg);
- width: 12px;
-}
-
-.combo-input {
- background-color: #f5f5f5;
- border: 2px solid rgba(0, 0, 0, 0.75);
- border-radius: 4px;
- display: block;
- font-size: 1em;
- min-height: calc(1.4em + 26px);
- padding: 12px 16px 14px;
- text-align: left;
- width: 100%;
-}
-
-.open .combo-input {
- border-radius: 4px 4px 0 0;
-}
-
-.combo-input:focus {
- border-color: #0067b8;
- box-shadow: 0 0 4px 2px #0067b8;
- outline: 4px solid transparent;
-}
-
-.combo-label {
- display: block;
- font-size: 20px;
- font-weight: 100;
- margin-bottom: 0.25em;
-}
-
-.combo-menu {
- background-color: #f5f5f5;
- border: 1px solid rgba(0, 0, 0, 0.75);
- border-radius: 0 0 4px 4px;
- display: none;
- max-height: 300px;
- overflow-y: scroll;
- left: 0;
- position: absolute;
- top: 100%;
- width: 100%;
- z-index: 100;
-}
-
-.open .combo-menu {
- display: block;
-}
-
-.combo-option {
- padding: 10px 12px 12px;
-}
-
-.combo-option:hover {
- background-color: rgba(0, 0, 0, 0.1);
-}
-
-.combo-option.option-current {
- outline: 3px solid #0067b8;
- outline-offset: -3px;
-}
-
-.combo-option[aria-selected="true"] {
- padding-right: 30px;
- position: relative;
-}
-
-.combo-option[aria-selected="true"]::after {
- border-bottom: 2px solid #000;
- border-right: 2px solid #000;
- content: "";
- height: 16px;
- position: absolute;
- right: 15px;
- top: 50%;
- transform: translate(0, -50%) rotate(45deg);
- width: 8px;
-}
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/combobox-autocomplete.js b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/combobox-autocomplete.js
deleted file mode 100644
index 95f013077..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/combobox-autocomplete.js
+++ /dev/null
@@ -1,573 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- */
-
-'use strict';
-
-var ComboboxAutocomplete = function (comboboxNode, buttonNode, listboxNode) {
- this.comboboxNode = comboboxNode;
- this.buttonNode = buttonNode;
- this.listboxNode = listboxNode;
-
- this.comboboxHasVisualFocus = false;
- this.listboxHasVisualFocus = false;
-
- this.hasHover = false;
-
- this.isNone = false;
- this.isList = false;
- this.isBoth = false;
-
- this.allOptions = [];
-
- this.option = null;
- this.firstOption = null;
- this.lastOption = null;
-
- this.filteredOptions = [];
- this.filter = '';
-};
-
-ComboboxAutocomplete.prototype.init = function () {
- var autocomplete = this.comboboxNode.getAttribute('aria-autocomplete');
-
- if (typeof autocomplete === 'string') {
- autocomplete = autocomplete.toLowerCase();
- this.isNone = autocomplete === 'none';
- this.isList = autocomplete === 'list';
- this.isBoth = autocomplete === 'both';
- } else {
- // default value of autocomplete
- this.isNone = true;
- }
-
- this.comboboxNode.addEventListener(
- 'keydown',
- this.handleComboboxKeyDown.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'keyup',
- this.handleComboboxKeyUp.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'click',
- this.handleComboboxClick.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'focus',
- this.handleComboboxFocus.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'blur',
- this.handleComboboxBlur.bind(this)
- );
-
- // initialize pop up menu
-
- this.listboxNode.addEventListener(
- 'mouseover',
- this.handleListboxMouseover.bind(this)
- );
- this.listboxNode.addEventListener(
- 'mouseout',
- this.handleListboxMouseout.bind(this)
- );
-
- // Traverse the element children of domNode: configure each with
- // option role behavior and store reference in.options array.
- var nodes = this.listboxNode.getElementsByTagName('LI');
-
- for (var i = 0; i < nodes.length; i++) {
- var node = nodes[i];
- this.allOptions.push(node);
-
- node.addEventListener('click', this.handleOptionClick.bind(this));
- node.addEventListener('mouseover', this.handleOptionMouseover.bind(this));
- node.addEventListener('mouseout', this.handleOptionMouseout.bind(this));
- }
-
- this.filterOptions();
-
- // Open Button
-
- var button = this.comboboxNode.nextElementSibling;
-
- if (button && button.tagName === 'BUTTON') {
- button.addEventListener('click', this.handleButtonClick.bind(this));
- }
-};
-
-ComboboxAutocomplete.prototype.getLowercaseContent = function (node) {
- return node.textContent.toLowerCase();
-};
-
-ComboboxAutocomplete.prototype.setActiveDescendant = function (option) {
- if (option && this.listboxHasVisualFocus) {
- this.comboboxNode.setAttribute('aria-activedescendant', option.id);
- } else {
- this.comboboxNode.setAttribute('aria-activedescendant', '');
- }
-};
-
-ComboboxAutocomplete.prototype.setValue = function (value) {
- this.filter = value;
- this.comboboxNode.value = this.filter;
- this.comboboxNode.setSelectionRange(this.filter.length, this.filter.length);
- this.filterOptions();
-};
-
-ComboboxAutocomplete.prototype.setOption = function (option, flag) {
- if (typeof flag !== 'boolean') {
- flag = false;
- }
-
- if (option) {
- this.option = option;
- this.setCurrentOptionStyle(this.option);
- this.setActiveDescendant(this.option);
-
- if (this.isBoth) {
- this.comboboxNode.value = this.option.textContent;
- if (flag) {
- this.comboboxNode.setSelectionRange(
- this.option.textContent.length,
- this.option.textContent.length
- );
- } else {
- this.comboboxNode.setSelectionRange(
- this.filter.length,
- this.option.textContent.length
- );
- }
- }
- }
-};
-
-ComboboxAutocomplete.prototype.setVisualFocusCombobox = function () {
- this.listboxNode.classList.remove('focus');
- this.comboboxNode.parentNode.classList.add('focus'); // set the focus class to the parent for easier styling
- this.comboboxHasVisualFocus = true;
- this.listboxHasVisualFocus = false;
- this.setActiveDescendant(false);
-};
-
-ComboboxAutocomplete.prototype.setVisualFocusListbox = function () {
- this.comboboxNode.parentNode.classList.remove('focus');
- this.comboboxHasVisualFocus = false;
- this.listboxHasVisualFocus = true;
- this.listboxNode.classList.add('focus');
- this.setActiveDescendant(this.option);
-};
-
-ComboboxAutocomplete.prototype.removeVisualFocusAll = function () {
- this.comboboxNode.parentNode.classList.remove('focus');
- this.comboboxHasVisualFocus = false;
- this.listboxHasVisualFocus = false;
- this.listboxNode.classList.remove('focus');
- this.option = null;
- this.setActiveDescendant(false);
-};
-
-// ComboboxAutocomplete Events
-
-ComboboxAutocomplete.prototype.filterOptions = function () {
- // do not filter any options if autocomplete is none
- if (this.isNone) {
- this.filter = '';
- }
-
- var option = null;
- var currentOption = this.option;
- var filter = this.filter.toLowerCase();
-
- this.filteredOptions = [];
- this.listboxNode.innerHTML = '';
-
- for (var i = 0; i < this.allOptions.length; i++) {
- option = this.allOptions[i];
- if (
- filter.length === 0 ||
- this.getLowercaseContent(option).indexOf(filter) === 0
- ) {
- this.filteredOptions.push(option);
- this.listboxNode.appendChild(option);
- }
- }
-
- // Use populated options array to initialize firstOption and lastOption.
- var numItems = this.filteredOptions.length;
- if (numItems > 0) {
- this.firstOption = this.filteredOptions[0];
- this.lastOption = this.filteredOptions[numItems - 1];
-
- if (currentOption && this.filteredOptions.indexOf(currentOption) >= 0) {
- option = currentOption;
- } else {
- option = this.firstOption;
- }
- } else {
- this.firstOption = null;
- option = null;
- this.lastOption = null;
- }
-
- return option;
-};
-
-ComboboxAutocomplete.prototype.setCurrentOptionStyle = function (option) {
- for (var i = 0; i < this.filteredOptions.length; i++) {
- var opt = this.filteredOptions[i];
- if (opt === option) {
- opt.setAttribute('aria-selected', 'true');
- if (
- this.listboxNode.scrollTop + this.listboxNode.offsetHeight <
- opt.offsetTop + opt.offsetHeight
- ) {
- this.listboxNode.scrollTop =
- opt.offsetTop + opt.offsetHeight - this.listboxNode.offsetHeight;
- } else if (this.listboxNode.scrollTop > opt.offsetTop + 2) {
- this.listboxNode.scrollTop = opt.offsetTop;
- }
- } else {
- opt.removeAttribute('aria-selected');
- }
- }
-};
-
-ComboboxAutocomplete.prototype.getPreviousOption = function (currentOption) {
- if (currentOption !== this.firstOption) {
- var index = this.filteredOptions.indexOf(currentOption);
- return this.filteredOptions[index - 1];
- }
- return this.lastOption;
-};
-
-ComboboxAutocomplete.prototype.getNextOption = function (currentOption) {
- if (currentOption !== this.lastOption) {
- var index = this.filteredOptions.indexOf(currentOption);
- return this.filteredOptions[index + 1];
- }
- return this.firstOption;
-};
-
-/* MENU DISPLAY METHODS */
-
-ComboboxAutocomplete.prototype.doesOptionHaveFocus = function () {
- return this.comboboxNode.getAttribute('aria-activedescendant') !== '';
-};
-
-ComboboxAutocomplete.prototype.isOpen = function () {
- return this.listboxNode.style.display === 'block';
-};
-
-ComboboxAutocomplete.prototype.isClosed = function () {
- return this.listboxNode.style.display !== 'block';
-};
-
-ComboboxAutocomplete.prototype.hasOptions = function () {
- return this.filteredOptions.length;
-};
-
-ComboboxAutocomplete.prototype.open = function () {
- this.listboxNode.style.display = 'block';
- this.comboboxNode.setAttribute('aria-expanded', 'true');
- this.buttonNode.setAttribute('aria-expanded', 'true');
-};
-
-ComboboxAutocomplete.prototype.close = function (force) {
- if (typeof force !== 'boolean') {
- force = false;
- }
-
- if (
- force ||
- (!this.comboboxHasVisualFocus &&
- !this.listboxHasVisualFocus &&
- !this.hasHover)
- ) {
- this.setCurrentOptionStyle(false);
- this.listboxNode.style.display = 'none';
- this.comboboxNode.setAttribute('aria-expanded', 'false');
- this.buttonNode.setAttribute('aria-expanded', 'false');
- this.setActiveDescendant(false);
- }
-};
-
-/* combobox Events */
-
-ComboboxAutocomplete.prototype.handleComboboxKeyDown = function (event) {
- var flag = false,
- char = event.key,
- altKey = event.altKey;
-
- if (event.ctrlKey || event.shiftKey) {
- return;
- }
-
- switch (event.key) {
- case 'Enter':
- if (this.listboxHasVisualFocus) {
- this.setValue(this.option.textContent);
- }
- this.close(true);
- this.setVisualFocusCombobox();
- flag = true;
- break;
-
- case 'Down':
- case 'ArrowDown':
- if (this.filteredOptions.length > 0) {
- if (altKey) {
- this.open();
- } else {
- this.open();
- if (
- this.listboxHasVisualFocus ||
- (this.isBoth && this.filteredOptions.length > 1)
- ) {
- this.setOption(this.getNextOption(this.option), true);
- this.setVisualFocusListbox();
- } else {
- this.setOption(this.firstOption, true);
- this.setVisualFocusListbox();
- }
- }
- }
- flag = true;
- break;
-
- case 'Up':
- case 'ArrowUp':
- if (this.hasOptions()) {
- if (this.listboxHasVisualFocus) {
- this.setOption(this.getPreviousOption(this.option), true);
- } else {
- this.open();
- if (!altKey) {
- this.setOption(this.lastOption, true);
- this.setVisualFocusListbox();
- }
- }
- }
- flag = true;
- break;
-
- case 'Esc':
- case 'Escape':
- if (this.isOpen()) {
- this.close(true);
- this.filter = this.comboboxNode.value;
- this.filterOptions();
- this.setVisualFocusCombobox();
- } else {
- this.setValue('');
- this.comboboxNode.value = '';
- }
- this.option = null;
- flag = true;
- break;
-
- case 'Tab':
- this.close(true);
- if (this.listboxHasVisualFocus) {
- if (this.option) {
- this.setValue(this.option.textContent);
- }
- }
- break;
-
- case 'Home':
- this.comboboxNode.setSelectionRange(0, 0);
- flag = true;
- break;
-
- case 'End':
- var length = this.comboboxNode.value.length;
- this.comboboxNode.setSelectionRange(length, length);
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxAutocomplete.prototype.isPrintableCharacter = function (str) {
- return str.length === 1 && str.match(/\S/);
-};
-
-ComboboxAutocomplete.prototype.handleComboboxKeyUp = function (event) {
- var flag = false,
- option = null,
- char = event.key;
-
- if (this.isPrintableCharacter(char)) {
- this.filter += char;
- }
-
- // this is for the case when a selection in the textbox has been deleted
- if (this.comboboxNode.value.length < this.filter.length) {
- this.filter = this.comboboxNode.value;
- this.option = null;
- this.filterOptions();
- }
-
- if (event.key === 'Escape' || event.key === 'Esc') {
- return;
- }
-
- switch (event.key) {
- case 'Backspace':
- this.setVisualFocusCombobox();
- this.setCurrentOptionStyle(false);
- this.filter = this.comboboxNode.value;
- this.option = null;
- this.filterOptions();
- flag = true;
- break;
-
- case 'Left':
- case 'ArrowLeft':
- case 'Right':
- case 'ArrowRight':
- case 'Home':
- case 'End':
- if (this.isBoth) {
- this.filter = this.comboboxNode.value;
- } else {
- this.option = null;
- this.setCurrentOptionStyle(false);
- }
- this.setVisualFocusCombobox();
- flag = true;
- break;
-
- default:
- if (this.isPrintableCharacter(char)) {
- this.setVisualFocusCombobox();
- this.setCurrentOptionStyle(false);
- flag = true;
-
- if (this.isList || this.isBoth) {
- option = this.filterOptions();
- if (option) {
- if (this.isClosed() && this.comboboxNode.value.length) {
- this.open();
- }
-
- if (
- this.getLowercaseContent(option).indexOf(
- this.comboboxNode.value.toLowerCase()
- ) === 0
- ) {
- this.option = option;
- if (this.isBoth || this.listboxHasVisualFocus) {
- this.setCurrentOptionStyle(option);
- if (this.isBoth) {
- this.setOption(option);
- }
- }
- } else {
- this.option = null;
- this.setCurrentOptionStyle(false);
- }
- } else {
- this.close();
- this.option = null;
- this.setActiveDescendant(false);
- }
- } else if (this.comboboxNode.value.length) {
- this.open();
- }
- }
-
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxAutocomplete.prototype.handleComboboxClick = function (event) {
- if (this.isOpen()) {
- this.close(true);
- } else {
- this.open();
- }
-};
-
-ComboboxAutocomplete.prototype.handleComboboxFocus = function (event) {
- this.filter = this.comboboxNode.value;
- this.filterOptions();
- this.setVisualFocusCombobox();
- this.option = null;
- this.setCurrentOptionStyle(null);
-};
-
-ComboboxAutocomplete.prototype.handleComboboxBlur = function (event) {
- this.comboboxHasVisualFocus = false;
- this.setCurrentOptionStyle(null);
- this.removeVisualFocusAll();
- setTimeout(this.close.bind(this, false), 300);
-};
-
-ComboboxAutocomplete.prototype.handleButtonClick = function (event) {
- if (this.isOpen()) {
- this.close(true);
- } else {
- this.open();
- }
- this.comboboxNode.focus();
- this.setVisualFocusCombobox();
-};
-
-/* Listbox Events */
-
-ComboboxAutocomplete.prototype.handleListboxMouseover = function (event) {
- this.hasHover = true;
-};
-
-ComboboxAutocomplete.prototype.handleListboxMouseout = function (event) {
- this.hasHover = false;
- setTimeout(this.close.bind(this, false), 300);
-};
-
-// Listbox Option Events
-
-ComboboxAutocomplete.prototype.handleOptionClick = function (event) {
- this.comboboxNode.value = event.target.textContent;
- this.close(true);
-};
-
-ComboboxAutocomplete.prototype.handleOptionMouseover = function (event) {
- this.hasHover = true;
- this.open();
-};
-
-ComboboxAutocomplete.prototype.handleOptionMouseout = function (event) {
- this.hasHover = false;
- setTimeout(this.close.bind(this, false), 300);
-};
-
-// Initialize comboboxes
-
-window.addEventListener('load', function () {
- var comboboxes = document.querySelectorAll('.combobox-list');
-
- for (var i = 0; i < comboboxes.length; i++) {
- var combobox = comboboxes[i];
- var comboboxNode = combobox.querySelector('input');
- var buttonNode = combobox.querySelector('button');
- var listboxNode = combobox.querySelector('[role="listbox"]');
- var cba = new ComboboxAutocomplete(comboboxNode, buttonNode, listboxNode);
- cba.init();
- }
-});
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/combobox-datepicker.js b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/combobox-datepicker.js
deleted file mode 100644
index c791141ea..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/combobox-datepicker.js
+++ /dev/null
@@ -1,866 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: ComboboxDatePicker.js
- */
-
-'use strict';
-
-var ComboboxDatePicker = function (cdp) {
- this.buttonLabel = 'Date';
- this.monthLabels = [
- 'January',
- 'February',
- 'March',
- 'April',
- 'May',
- 'June',
- 'July',
- 'August',
- 'September',
- 'October',
- 'November',
- 'December',
- ];
-
- this.messageCursorKeys = 'Cursor keys can navigate dates';
- this.lastMessage = '';
-
- this.comboboxNode = cdp.querySelector('input[type="text"]');
- this.buttonNode = cdp.querySelector('.group button');
- this.dialogNode = cdp.querySelector('[role="dialog"]');
- this.messageNode = this.dialogNode.querySelector('.dialog-message');
-
- this.monthYearNode = this.dialogNode.querySelector('.month-year');
-
- this.prevYearNode = this.dialogNode.querySelector('.prev-year');
- this.prevMonthNode = this.dialogNode.querySelector('.prev-month');
- this.nextMonthNode = this.dialogNode.querySelector('.next-month');
- this.nextYearNode = this.dialogNode.querySelector('.next-year');
-
- this.okButtonNode = this.dialogNode.querySelector('button[value="ok"]');
- this.cancelButtonNode = this.dialogNode.querySelector(
- 'button[value="cancel"]'
- );
-
- this.tbodyNode = this.dialogNode.querySelector('table.dates tbody');
-
- this.lastRowNode = null;
-
- this.days = [];
-
- this.focusDay = new Date();
- this.selectedDay = new Date(0, 0, 1);
-
- this.isMouseDownOnBackground = false;
-};
-
-ComboboxDatePicker.prototype.init = function () {
- this.comboboxNode.addEventListener(
- 'keydown',
- this.handleComboboxKeyDown.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'click',
- this.handleComboboxClick.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'focus',
- this.handleComboboxFocus.bind(this)
- );
- this.comboboxNode.addEventListener(
- 'blur',
- this.handleComboboxBlur.bind(this)
- );
-
- this.buttonNode.addEventListener(
- 'keydown',
- this.handleButtonKeyDown.bind(this)
- );
- this.buttonNode.addEventListener('click', this.handleButtonClick.bind(this));
-
- this.okButtonNode.addEventListener('click', this.handleOkButton.bind(this));
- this.okButtonNode.addEventListener('keydown', this.handleOkButton.bind(this));
-
- this.cancelButtonNode.addEventListener(
- 'click',
- this.handleCancelButton.bind(this)
- );
- this.cancelButtonNode.addEventListener(
- 'keydown',
- this.handleCancelButton.bind(this)
- );
-
- this.prevMonthNode.addEventListener(
- 'click',
- this.handlePreviousMonthButton.bind(this)
- );
- this.nextMonthNode.addEventListener(
- 'click',
- this.handleNextMonthButton.bind(this)
- );
- this.prevYearNode.addEventListener(
- 'click',
- this.handlePreviousYearButton.bind(this)
- );
- this.nextYearNode.addEventListener(
- 'click',
- this.handleNextYearButton.bind(this)
- );
-
- this.prevMonthNode.addEventListener(
- 'keydown',
- this.handlePreviousMonthButton.bind(this)
- );
- this.nextMonthNode.addEventListener(
- 'keydown',
- this.handleNextMonthButton.bind(this)
- );
- this.prevYearNode.addEventListener(
- 'keydown',
- this.handlePreviousYearButton.bind(this)
- );
- this.nextYearNode.addEventListener(
- 'keydown',
- this.handleNextYearButton.bind(this)
- );
-
- document.body.addEventListener(
- 'mouseup',
- this.handleBackgroundMouseUp.bind(this),
- true
- );
-
- // Create Grid of Dates
-
- this.tbodyNode.innerHTML = '';
- for (var i = 0; i < 6; i++) {
- var row = this.tbodyNode.insertRow(i);
- this.lastRowNode = row;
- for (var j = 0; j < 7; j++) {
- var cell = document.createElement('td');
-
- cell.setAttribute('tabindex', '-1');
- cell.addEventListener('click', this.handleDayClick.bind(this));
- cell.addEventListener('keydown', this.handleDayKeyDown.bind(this));
- cell.addEventListener('focus', this.handleDayFocus.bind(this));
-
- cell.innerHTML = '-1';
-
- row.appendChild(cell);
- this.days.push(cell);
- }
- }
-
- this.updateGrid();
- this.close(false);
-};
-
-ComboboxDatePicker.prototype.isSameDay = function (day1, day2) {
- return (
- day1.getFullYear() == day2.getFullYear() &&
- day1.getMonth() == day2.getMonth() &&
- day1.getDate() == day2.getDate()
- );
-};
-
-ComboboxDatePicker.prototype.isNotSameMonth = function (day1, day2) {
- return (
- day1.getFullYear() != day2.getFullYear() ||
- day1.getMonth() != day2.getMonth()
- );
-};
-
-ComboboxDatePicker.prototype.updateGrid = function () {
- var i, flag;
- var fd = this.focusDay;
-
- this.monthYearNode.innerHTML =
- this.monthLabels[fd.getMonth()] + ' ' + fd.getFullYear();
-
- var firstDayOfMonth = new Date(fd.getFullYear(), fd.getMonth(), 1);
- var dayOfWeek = firstDayOfMonth.getDay();
-
- firstDayOfMonth.setDate(firstDayOfMonth.getDate() - dayOfWeek);
-
- var d = new Date(firstDayOfMonth);
-
- for (i = 0; i < this.days.length; i++) {
- flag = d.getMonth() != fd.getMonth();
- this.updateDate(this.days[i], flag, d, this.isSameDay(d, this.selectedDay));
- d.setDate(d.getDate() + 1);
-
- // Hide last row if all disabled dates
- if (i === 35) {
- if (flag) {
- this.lastRowNode.style.visibility = 'hidden';
- } else {
- this.lastRowNode.style.visibility = 'visible';
- }
- }
- }
-};
-
-ComboboxDatePicker.prototype.setFocusDay = function (flag) {
- if (typeof flag !== 'boolean') {
- flag = true;
- }
-
- var fd = this.focusDay;
- var getDayFromDataDateAttribute = this.getDayFromDataDateAttribute;
-
- function checkDay(domNode) {
- var d = getDayFromDataDateAttribute(domNode);
-
- domNode.setAttribute('tabindex', '-1');
- if (this.isSameDay(d, fd)) {
- domNode.setAttribute('tabindex', '0');
- if (flag) {
- domNode.focus();
- }
- }
- }
-
- this.days.forEach(checkDay.bind(this));
-};
-
-ComboboxDatePicker.prototype.open = function () {
- this.dialogNode.style.display = 'block';
- this.dialogNode.style.zIndex = 2;
-
- this.comboboxNode.setAttribute('aria-expanded', 'true');
- this.buttonNode.classList.add('open');
- this.getDateFromCombobox();
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.isOpen = function () {
- return window.getComputedStyle(this.dialogNode).display !== 'none';
-};
-
-ComboboxDatePicker.prototype.close = function (flag) {
- if (typeof flag !== 'boolean') {
- // Default is to move focus to combobox
- flag = true;
- }
-
- this.setMessage('');
- this.dialogNode.style.display = 'none';
- this.comboboxNode.setAttribute('aria-expanded', 'false');
- this.buttonNode.classList.remove('open');
-
- if (flag) {
- this.comboboxNode.focus();
- }
-};
-
-ComboboxDatePicker.prototype.handleOkButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Tab':
- if (!event.shiftKey) {
- this.prevYearNode.focus();
- flag = true;
- }
- break;
-
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
- break;
-
- case 'click':
- this.setComboboxDate();
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleCancelButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
- break;
-
- case 'click':
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleNextYearButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- case 'Enter':
- this.moveToNextYear();
- this.setFocusDay(false);
- flag = true;
- break;
- }
-
- break;
-
- case 'click':
- this.moveToNextYear();
- this.setFocusDay(false);
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handlePreviousYearButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Enter':
- this.moveToPreviousYear();
- this.setFocusDay(false);
- flag = true;
- break;
-
- case 'Tab':
- if (event.shiftKey) {
- this.okButtonNode.focus();
- flag = true;
- }
- break;
-
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- default:
- break;
- }
-
- break;
-
- case 'click':
- this.moveToPreviousYear();
- this.setFocusDay(false);
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleNextMonthButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- case 'Enter':
- this.moveToNextMonth();
- this.setFocusDay(false);
- flag = true;
- break;
- }
-
- break;
-
- case 'click':
- this.moveToNextMonth();
- this.setFocusDay(false);
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handlePreviousMonthButton = function (event) {
- var flag = false;
-
- switch (event.type) {
- case 'keydown':
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- flag = true;
- break;
-
- case 'Enter':
- this.moveToPreviousMonth();
- this.setFocusDay(false);
- flag = true;
- break;
- }
-
- break;
-
- case 'click':
- this.moveToPreviousMonth();
- this.setFocusDay(false);
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.moveFocusToDay = function (day) {
- var d = this.focusDay;
-
- this.focusDay = day;
-
- if (
- d.getMonth() != this.focusDay.getMonth() ||
- d.getYear() != this.focusDay.getYear()
- ) {
- this.updateGrid();
- }
- this.setFocusDay();
-};
-
-ComboboxDatePicker.prototype.moveToNextYear = function () {
- this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.moveToPreviousYear = function () {
- this.focusDay.setFullYear(this.focusDay.getFullYear() - 1);
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.moveToNextMonth = function () {
- this.focusDay.setMonth(this.focusDay.getMonth() + 1);
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.moveToPreviousMonth = function () {
- this.focusDay.setMonth(this.focusDay.getMonth() - 1);
- this.updateGrid();
-};
-
-ComboboxDatePicker.prototype.moveFocusToNextDay = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() + 1);
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToNextWeek = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() + 7);
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToPreviousDay = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() - 1);
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToPreviousWeek = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() - 7);
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToFirstDayOfWeek = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() - d.getDay());
- this.moveFocusToDay(d);
-};
-
-ComboboxDatePicker.prototype.moveFocusToLastDayOfWeek = function () {
- var d = new Date(this.focusDay);
- d.setDate(d.getDate() + (6 - d.getDay()));
- this.moveFocusToDay(d);
-};
-
-// Day methods
-
-ComboboxDatePicker.prototype.isDayDisabled = function (domNode) {
- return domNode.classList.contains('disabled');
-};
-
-ComboboxDatePicker.prototype.getDayFromDataDateAttribute = function (domNode) {
- var parts = domNode.getAttribute('data-date').split('-');
- return new Date(parts[0], parseInt(parts[1]) - 1, parts[2]);
-};
-
-ComboboxDatePicker.prototype.updateDate = function (
- domNode,
- disable,
- day,
- selected
-) {
- var d = day.getDate().toString();
- if (day.getDate() <= 9) {
- d = '0' + d;
- }
-
- var m = day.getMonth() + 1;
- if (day.getMonth() < 9) {
- m = '0' + m;
- }
-
- domNode.setAttribute('tabindex', '-1');
- domNode.removeAttribute('aria-selected');
- domNode.setAttribute('data-date', day.getFullYear() + '-' + m + '-' + d);
-
- if (disable) {
- domNode.classList.add('disabled');
- domNode.innerHTML = '';
- } else {
- domNode.classList.remove('disabled');
- domNode.innerHTML = day.getDate();
- if (selected) {
- domNode.setAttribute('aria-selected', 'true');
- domNode.setAttribute('tabindex', '0');
- }
- }
-};
-
-ComboboxDatePicker.prototype.updateSelected = function (domNode) {
- for (var i = 0; i < this.days.length; i++) {
- var day = this.days[i];
- if (day === domNode) {
- day.setAttribute('aria-selected', 'true');
- } else {
- day.removeAttribute('aria-selected');
- }
- }
-};
-
-ComboboxDatePicker.prototype.handleDayKeyDown = function (event) {
- var flag = false;
-
- switch (event.key) {
- case 'Esc':
- case 'Escape':
- this.close();
- break;
-
- case ' ':
- this.updateSelected(event.currentTarget);
- this.setComboboxDate(event.currentTarget);
- flag = true;
- break;
-
- case 'Enter':
- this.setComboboxDate(event.currentTarget);
- this.close();
- break;
-
- case 'Tab':
- this.cancelButtonNode.focus();
- if (event.shiftKey) {
- this.nextYearNode.focus();
- }
- this.setMessage('');
- flag = true;
- break;
-
- case 'Right':
- case 'ArrowRight':
- this.moveFocusToNextDay();
- flag = true;
- break;
-
- case 'Left':
- case 'ArrowLeft':
- this.moveFocusToPreviousDay();
- flag = true;
- break;
-
- case 'Down':
- case 'ArrowDown':
- this.moveFocusToNextWeek();
- flag = true;
- break;
-
- case 'Up':
- case 'ArrowUp':
- this.moveFocusToPreviousWeek();
- flag = true;
- break;
-
- case 'PageUp':
- if (event.shiftKey) {
- this.moveToPreviousYear();
- } else {
- this.moveToPreviousMonth();
- }
- this.setFocusDay();
- flag = true;
- break;
-
- case 'PageDown':
- if (event.shiftKey) {
- this.moveToNextYear();
- } else {
- this.moveToNextMonth();
- }
- this.setFocusDay();
- flag = true;
- break;
-
- case 'Home':
- this.moveFocusToFirstDayOfWeek();
- flag = true;
- break;
-
- case 'End':
- this.moveFocusToLastDayOfWeek();
- flag = true;
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleDayClick = function (event) {
- if (!this.isDayDisabled(event.currentTarget)) {
- this.setComboboxDate(event.currentTarget);
- this.close();
- }
-
- event.stopPropagation();
- event.preventDefault();
-};
-
-ComboboxDatePicker.prototype.handleDayFocus = function () {
- this.setMessage(this.messageCursorKeys);
-};
-
-// Combobox methods
-
-ComboboxDatePicker.prototype.setComboboxDate = function (domNode) {
- var d = this.focusDay;
-
- if (domNode) {
- d = this.getDayFromDataDateAttribute(domNode);
- }
-
- this.comboboxNode.value =
- d.getMonth() + 1 + '/' + d.getDate() + '/' + d.getFullYear();
-};
-
-ComboboxDatePicker.prototype.getDateFromCombobox = function () {
- var parts = this.comboboxNode.value.split('/');
-
- if (
- parts.length === 3 &&
- Number.isInteger(parseInt(parts[0])) &&
- Number.isInteger(parseInt(parts[1])) &&
- Number.isInteger(parseInt(parts[2]))
- ) {
- this.focusDay = new Date(
- parseInt(parts[2]),
- parseInt(parts[0]) - 1,
- parseInt(parts[1])
- );
- this.selectedDay = new Date(this.focusDay);
- } else {
- // If not a valid date (MM/DD/YY) initialize with todays date
- this.focusDay = new Date();
- this.selectedDay = new Date(0, 0, 1);
- }
-};
-
-ComboboxDatePicker.prototype.setMessage = function (str) {
- function setMessageDelayed() {
- this.messageNode.textContent = str;
- }
-
- if (str !== this.lastMessage) {
- setTimeout(setMessageDelayed.bind(this), 200);
- this.lastMessage = str;
- }
-};
-
-ComboboxDatePicker.prototype.handleComboboxKeyDown = function (event) {
- var flag = false,
- char = event.key,
- altKey = event.altKey;
-
- if (event.ctrlKey || event.shiftKey) {
- return;
- }
-
- switch (event.key) {
- case 'Down':
- case 'ArrowDown':
- this.open();
- this.setFocusDay();
- flag = true;
- break;
-
- case 'Esc':
- case 'Escape':
- if (this.isOpen()) {
- this.close(false);
- } else {
- this.comboboxNode.value = '';
- }
- this.option = null;
- flag = true;
- break;
-
- case 'Tab':
- this.close(false);
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleComboboxClick = function (event) {
- if (this.isOpen()) {
- this.close(false);
- } else {
- this.open();
- }
-
- event.stopPropagation();
- event.preventDefault();
-};
-
-ComboboxDatePicker.prototype.handleComboboxFocus = function (event) {
- event.currentTarget.parentNode.classList.add('focus');
-};
-
-ComboboxDatePicker.prototype.handleComboboxBlur = function (event) {
- event.currentTarget.parentNode.classList.remove('focus');
-};
-
-ComboboxDatePicker.prototype.handleButtonKeyDown = function (event) {
- if (event.key === 'Enter' || event.key === ' ') {
- this.open();
- this.setFocusDay();
-
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-ComboboxDatePicker.prototype.handleButtonClick = function (event) {
- if (this.isOpen()) {
- this.close();
- } else {
- this.open();
- this.setFocusDay();
- }
-
- event.stopPropagation();
- event.preventDefault();
-};
-
-ComboboxDatePicker.prototype.handleBackgroundMouseUp = function (event) {
- if (
- !this.comboboxNode.contains(event.target) &&
- !this.buttonNode.contains(event.target) &&
- !this.dialogNode.contains(event.target)
- ) {
- if (this.isOpen()) {
- this.close(false);
- event.stopPropagation();
- event.preventDefault();
- }
- }
-};
-
-// Initialize menu button date picker
-
-window.addEventListener('load', function () {
- var comboboxDatePickers = document.querySelectorAll('.combobox-datepicker');
-
- comboboxDatePickers.forEach(function (dp) {
- var datePicker = new ComboboxDatePicker(dp);
- datePicker.init();
- });
-});
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/grid-combo-example.js b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/grid-combo-example.js
deleted file mode 100644
index 8bc03ac77..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/grid-combo-example.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * ARIA Combobox Examples
- */
-
-'use strict';
-
-var FRUITS_AND_VEGGIES = [
- ['Apple', 'Fruit'],
- ['Artichoke', 'Vegetable'],
- ['Asparagus', 'Vegetable'],
- ['Banana', 'Fruit'],
- ['Beets', 'Vegetable'],
- ['Bell pepper', 'Vegetable'],
- ['Broccoli', 'Vegetable'],
- ['Brussels sprout', 'Vegetable'],
- ['Cabbage', 'Vegetable'],
- ['Carrot', 'Vegetable'],
- ['Cauliflower', 'Vegetable'],
- ['Celery', 'Vegetable'],
- ['Chard', 'Vegetable'],
- ['Chicory', 'Vegetable'],
- ['Corn', 'Vegetable'],
- ['Cucumber', 'Vegetable'],
- ['Daikon', 'Vegetable'],
- ['Date', 'Fruit'],
- ['Edamame', 'Vegetable'],
- ['Eggplant', 'Vegetable'],
- ['Elderberry', 'Fruit'],
- ['Fennel', 'Vegetable'],
- ['Fig', 'Fruit'],
- ['Garlic', 'Vegetable'],
- ['Grape', 'Fruit'],
- ['Honeydew melon', 'Fruit'],
- ['Iceberg lettuce', 'Vegetable'],
- ['Jerusalem artichoke', 'Vegetable'],
- ['Kale', 'Vegetable'],
- ['Kiwi', 'Fruit'],
- ['Leek', 'Vegetable'],
- ['Lemon', 'Fruit'],
- ['Mango', 'Fruit'],
- ['Mangosteen', 'Fruit'],
- ['Melon', 'Fruit'],
- ['Mushroom', 'Fungus'],
- ['Nectarine', 'Fruit'],
- ['Okra', 'Vegetable'],
- ['Olive', 'Vegetable'],
- ['Onion', 'Vegetable'],
- ['Orange', 'Fruit'],
- ['Parsnip', 'Vegetable'],
- ['Pea', 'Vegetable'],
- ['Pear', 'Fruit'],
- ['Pineapple', 'Fruit'],
- ['Potato', 'Vegetable'],
- ['Pumpkin', 'Fruit'],
- ['Quince', 'Fruit'],
- ['Radish', 'Vegetable'],
- ['Rhubarb', 'Vegetable'],
- ['Shallot', 'Vegetable'],
- ['Spinach', 'Vegetable'],
- ['Squash', 'Vegetable'],
- ['Strawberry', 'Fruit'],
- ['Sweet potato', 'Vegetable'],
- ['Tomato', 'Fruit'],
- ['Turnip', 'Vegetable'],
- ['Ugli fruit', 'Fruit'],
- ['Victoria plum', 'Fruit'],
- ['Watercress', 'Vegetable'],
- ['Watermelon', 'Fruit'],
- ['Yam', 'Vegetable'],
- ['Zucchini', 'Vegetable'],
-];
-
-function searchVeggies(searchString) {
- var results = [];
-
- for (var i = 0; i < FRUITS_AND_VEGGIES.length; i++) {
- var veggie = FRUITS_AND_VEGGIES[i][0].toLowerCase();
- if (veggie.indexOf(searchString.toLowerCase()) === 0) {
- results.push(FRUITS_AND_VEGGIES[i]);
- }
- }
-
- return results;
-}
-
-/**
- * @function onload
- * @desc Initialize the combobox examples once the page has loaded
- */
-window.addEventListener('load', function () {
- var ex1Combobox = new aria.GridCombobox(
- document.getElementById('ex1-input'),
- document.getElementById('ex1-grid'),
- searchVeggies
- );
-});
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/grid-combo.js b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/grid-combo.js
deleted file mode 100644
index 78bc5c107..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/grid-combo.js
+++ /dev/null
@@ -1,297 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- */
-
-'use strict';
-
-/**
- * @constructor
- *
- * @desc
- * Combobox object representing the state and interactions for a combobox
- * widget
- *
- * @param comboboxNode
- * The DOM node pointing to the combobox
- * @param input
- * The input node
- * @param grid
- * The grid node to load results in
- * @param searchFn
- * The search function. The function accepts a search string and returns an
- * array of results.
- */
-aria.GridCombobox = function (input, grid, searchFn) {
- this.input = input;
- this.grid = grid;
- this.searchFn = searchFn;
- this.activeRowIndex = -1;
- this.activeColIndex = 0;
- this.rowsCount = 0;
- this.colsCount = 0;
- this.gridFocused = false;
- this.shown = false;
- this.selectionCol = 0;
-
- this.setupEvents();
-};
-
-aria.GridCombobox.prototype.setupEvents = function () {
- document.body.addEventListener('click', this.handleBodyClick.bind(this));
- this.input.addEventListener('keyup', this.handleInputKeyUp.bind(this));
- this.input.addEventListener('keydown', this.handleInputKeyDown.bind(this));
- this.input.addEventListener('focus', this.handleInputFocus.bind(this));
- this.grid.addEventListener('click', this.handleGridClick.bind(this));
-};
-
-aria.GridCombobox.prototype.handleBodyClick = function (evt) {
- if (evt.target === this.input || this.grid.contains(evt.target)) {
- return;
- }
- this.hideResults();
-};
-
-aria.GridCombobox.prototype.handleInputKeyUp = function (evt) {
- var key = evt.which || evt.keyCode;
-
- switch (key) {
- case aria.KeyCode.UP:
- case aria.KeyCode.DOWN:
- case aria.KeyCode.ESC:
- case aria.KeyCode.RETURN:
- evt.preventDefault();
- return;
- case aria.KeyCode.LEFT:
- case aria.KeyCode.RIGHT:
- if (this.gridFocused) {
- evt.preventDefault();
- return;
- }
- break;
- default:
- this.updateResults();
- }
-};
-
-aria.GridCombobox.prototype.handleInputKeyDown = function (evt) {
- var key = evt.which || evt.keyCode;
- var activeRowIndex = this.activeRowIndex;
- var activeColIndex = this.activeColIndex;
-
- if (key === aria.KeyCode.ESC) {
- if (this.gridFocused) {
- this.gridFocused = false;
- this.removeFocusCell(this.activeRowIndex, this.activeColIndex);
- this.activeRowIndex = -1;
- this.activeColIndex = 0;
- this.input.setAttribute('aria-activedescendant', '');
- } else {
- if (!this.shown) {
- setTimeout(
- function () {
- // On Firefox, input does not get cleared here unless wrapped in
- // a setTimeout
- this.input.value = '';
- }.bind(this),
- 1
- );
- }
- }
- if (this.shown) {
- this.hideResults();
- }
- return;
- }
-
- if (this.rowsCount < 1) {
- return;
- }
-
- var prevActive = this.getItemAt(activeRowIndex, this.selectionCol);
- var activeItem;
-
- switch (key) {
- case aria.KeyCode.UP:
- this.gridFocused = true;
- activeRowIndex = this.getRowIndex(key);
- evt.preventDefault();
- break;
- case aria.KeyCode.DOWN:
- this.gridFocused = true;
- activeRowIndex = this.getRowIndex(key);
- evt.preventDefault();
- break;
- case aria.KeyCode.LEFT:
- if (activeColIndex <= 0) {
- activeColIndex = this.colsCount - 1;
- activeRowIndex = this.getRowIndex(key);
- } else {
- activeColIndex--;
- }
- if (this.gridFocused) {
- evt.preventDefault();
- }
- break;
- case aria.KeyCode.RIGHT:
- if (activeColIndex === -1 || activeColIndex >= this.colsCount - 1) {
- activeColIndex = 0;
- activeRowIndex = this.getRowIndex(key);
- } else {
- activeColIndex++;
- }
- if (this.gridFocused) {
- evt.preventDefault();
- }
- break;
- case aria.KeyCode.RETURN:
- activeItem = this.getItemAt(activeRowIndex, this.selectionCol);
- this.selectItem(activeItem);
- this.gridFocused = false;
- return;
- case aria.KeyCode.TAB:
- this.hideResults();
- return;
- default:
- return;
- }
-
- if (prevActive) {
- this.removeFocusCell(this.activeRowIndex, this.activeColIndex);
- prevActive.setAttribute('aria-selected', 'false');
- }
-
- activeItem = this.getItemAt(activeRowIndex, activeColIndex);
- this.activeRowIndex = activeRowIndex;
- this.activeColIndex = activeColIndex;
-
- if (activeItem) {
- this.input.setAttribute(
- 'aria-activedescendant',
- 'result-item-' + activeRowIndex + 'x' + activeColIndex
- );
- this.focusCell(activeRowIndex, activeColIndex);
- var selectedItem = this.getItemAt(activeRowIndex, this.selectionCol);
- selectedItem.setAttribute('aria-selected', 'true');
- } else {
- this.input.setAttribute('aria-activedescendant', '');
- }
-};
-
-aria.GridCombobox.prototype.handleInputFocus = function (evt) {
- this.updateResults();
-};
-
-aria.GridCombobox.prototype.handleGridClick = function (evt) {
- if (!evt.target) {
- return;
- }
-
- var row;
- if (evt.target.getAttribute('role') === 'row') {
- row = evt.target;
- } else if (evt.target.getAttribute('role') === 'gridcell') {
- row = evt.target.parentNode;
- } else {
- return;
- }
-
- var selectItem = row.querySelector('.result-cell');
- this.selectItem(selectItem);
-};
-
-aria.GridCombobox.prototype.updateResults = function () {
- var searchString = this.input.value;
- var results = this.searchFn(searchString);
-
- this.hideResults();
-
- if (!searchString) {
- results = [];
- }
-
- if (results.length) {
- for (var row = 0; row < results.length; row++) {
- var resultRow = document.createElement('div');
- resultRow.className = 'result-row';
- resultRow.setAttribute('role', 'row');
- resultRow.setAttribute('id', 'result-row-' + row);
- for (var col = 0; col < results[row].length; col++) {
- var resultCell = document.createElement('div');
- resultCell.className = 'result-cell';
- resultCell.setAttribute('role', 'gridcell');
- resultCell.setAttribute('id', 'result-item-' + row + 'x' + col);
- resultCell.innerText = results[row][col];
- resultRow.appendChild(resultCell);
- }
- this.grid.appendChild(resultRow);
- }
- aria.Utils.removeClass(this.grid, 'hidden');
- this.input.setAttribute('aria-expanded', 'true');
- this.rowsCount = results.length;
- this.colsCount = results.length ? results[0].length : 0;
- this.shown = true;
- }
-};
-
-aria.GridCombobox.prototype.getRowIndex = function (key) {
- var activeRowIndex = this.activeRowIndex;
-
- switch (key) {
- case aria.KeyCode.UP:
- case aria.KeyCode.LEFT:
- if (activeRowIndex <= 0) {
- activeRowIndex = this.rowsCount - 1;
- } else {
- activeRowIndex--;
- }
- break;
- case aria.KeyCode.DOWN:
- case aria.KeyCode.RIGHT:
- if (activeRowIndex === -1 || activeRowIndex >= this.rowsCount - 1) {
- activeRowIndex = 0;
- } else {
- activeRowIndex++;
- }
- }
-
- return activeRowIndex;
-};
-
-aria.GridCombobox.prototype.getItemAt = function (rowIndex, colIndex) {
- return document.getElementById('result-item-' + rowIndex + 'x' + colIndex);
-};
-
-aria.GridCombobox.prototype.selectItem = function (item) {
- if (item) {
- this.input.value = item.innerText;
- this.hideResults();
- }
-};
-
-aria.GridCombobox.prototype.hideResults = function () {
- this.gridFocused = false;
- this.shown = false;
- this.activeRowIndex = -1;
- this.activeColIndex = 0;
- this.grid.innerHTML = '';
- aria.Utils.addClass(this.grid, 'hidden');
- this.input.setAttribute('aria-expanded', 'false');
- this.rowsCount = 0;
- this.colsCount = 0;
- this.input.setAttribute('aria-activedescendant', '');
-};
-
-aria.GridCombobox.prototype.removeFocusCell = function (rowIndex, colIndex) {
- var row = document.getElementById('result-row-' + rowIndex);
- aria.Utils.removeClass(row, 'focused');
- var cell = this.getItemAt(rowIndex, colIndex);
- aria.Utils.removeClass(cell, 'focused-cell');
-};
-
-aria.GridCombobox.prototype.focusCell = function (rowIndex, colIndex) {
- var row = document.getElementById('result-row-' + rowIndex);
- aria.Utils.addClass(row, 'focused');
- var cell = this.getItemAt(rowIndex, colIndex);
- aria.Utils.addClass(cell, 'focused-cell');
-};
diff --git a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/select-only.js b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/select-only.js
deleted file mode 100644
index f8441cfc5..000000000
--- a/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/select-only.js
+++ /dev/null
@@ -1,393 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- */
-
-'use strict';
-
-// Save a list of named combobox actions, for future readability
-const SelectActions = {
- Close: 0,
- CloseSelect: 1,
- First: 2,
- Last: 3,
- Next: 4,
- Open: 5,
- PageDown: 6,
- PageUp: 7,
- Previous: 8,
- Select: 9,
- Type: 10,
-};
-
-/*
- * Helper functions
- */
-
-// filter an array of options against an input string
-// returns an array of options that begin with the filter string, case-independent
-function filterOptions(options = [], filter, exclude = []) {
- return options.filter((option) => {
- const matches = option.toLowerCase().indexOf(filter.toLowerCase()) === 0;
- return matches && exclude.indexOf(option) < 0;
- });
-}
-
-// map a key press to an action
-function getActionFromKey(event, menuOpen) {
- const { key, altKey, ctrlKey, metaKey } = event;
- const openKeys = ['ArrowDown', 'ArrowUp', 'Enter', ' ']; // all keys that will do the default open action
- // handle opening when closed
- if (!menuOpen && openKeys.includes(key)) {
- return SelectActions.Open;
- }
-
- // home and end move the selected option when open or closed
- if (key === 'Home') {
- return SelectActions.First;
- }
- if (key === 'End') {
- return SelectActions.Last;
- }
-
- // handle typing characters when open or closed
- if (
- key === 'Backspace' ||
- key === 'Clear' ||
- (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey)
- ) {
- return SelectActions.Type;
- }
-
- // handle keys when open
- if (menuOpen) {
- if (key === 'ArrowUp' && altKey) {
- return SelectActions.CloseSelect;
- } else if (key === 'ArrowDown' && !altKey) {
- return SelectActions.Next;
- } else if (key === 'ArrowUp') {
- return SelectActions.Previous;
- } else if (key === 'PageUp') {
- return SelectActions.PageUp;
- } else if (key === 'PageDown') {
- return SelectActions.PageDown;
- } else if (key === 'Escape') {
- return SelectActions.Close;
- } else if (key === 'Enter' || key === ' ') {
- return SelectActions.CloseSelect;
- }
- }
-}
-
-// return the index of an option from an array of options, based on a search string
-// if the filter is multiple iterations of the same letter (e.g "aaa"), then cycle through first-letter matches
-function getIndexByLetter(options, filter, startIndex = 0) {
- const orderedOptions = [
- ...options.slice(startIndex),
- ...options.slice(0, startIndex),
- ];
- const firstMatch = filterOptions(orderedOptions, filter)[0];
- const allSameLetter = (array) => array.every((letter) => letter === array[0]);
-
- // first check if there is an exact match for the typed string
- if (firstMatch) {
- return options.indexOf(firstMatch);
- }
-
- // if the same letter is being repeated, cycle through first-letter matches
- else if (allSameLetter(filter.split(''))) {
- const matches = filterOptions(orderedOptions, filter[0]);
- return options.indexOf(matches[0]);
- }
-
- // if no matches, return -1
- else {
- return -1;
- }
-}
-
-// get an updated option index after performing an action
-function getUpdatedIndex(currentIndex, maxIndex, action) {
- const pageSize = 10; // used for pageup/pagedown
-
- switch (action) {
- case SelectActions.First:
- return 0;
- case SelectActions.Last:
- return maxIndex;
- case SelectActions.Previous:
- return Math.max(0, currentIndex - 1);
- case SelectActions.Next:
- return Math.min(maxIndex, currentIndex + 1);
- case SelectActions.PageUp:
- return Math.max(0, currentIndex - pageSize);
- case SelectActions.PageDown:
- return Math.min(maxIndex, currentIndex + pageSize);
- default:
- return currentIndex;
- }
-}
-
-// check if an element is currently scrollable
-function isScrollable(element) {
- return element && element.clientHeight < element.scrollHeight;
-}
-
-// ensure a given child element is within the parent's visible scroll area
-// if the child is not visible, scroll the parent
-function maintainScrollVisibility(activeElement, scrollParent) {
- const { offsetHeight, offsetTop } = activeElement;
- const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;
-
- const isAbove = offsetTop < scrollTop;
- const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
-
- if (isAbove) {
- scrollParent.scrollTo(0, offsetTop);
- } else if (isBelow) {
- scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);
- }
-}
-
-/*
- * Select Component
- * Accepts a combobox element and an array of string options
- */
-const Select = function (el, options = []) {
- // element refs
- this.el = el;
- this.comboEl = el.querySelector('[role=combobox]');
- this.listboxEl = el.querySelector('[role=listbox]');
-
- // data
- this.idBase = this.comboEl.id || 'combo';
- this.options = options;
-
- // state
- this.activeIndex = 0;
- this.open = false;
- this.searchString = '';
- this.searchTimeout = null;
-
- // init
- if (el && this.comboEl && this.listboxEl) {
- this.init();
- }
-};
-
-Select.prototype.init = function () {
- // select first option by default
- this.comboEl.innerHTML = this.options[0];
-
- // add event listeners
- this.comboEl.addEventListener('blur', this.onComboBlur.bind(this));
- this.comboEl.addEventListener('click', this.onComboClick.bind(this));
- this.comboEl.addEventListener('keydown', this.onComboKeyDown.bind(this));
-
- // create options
- this.options.map((option, index) => {
- const optionEl = this.createOption(option, index);
- this.listboxEl.appendChild(optionEl);
- });
-};
-
-Select.prototype.createOption = function (optionText, index) {
- const optionEl = document.createElement('div');
- optionEl.setAttribute('role', 'option');
- optionEl.id = `${this.idBase}-${index}`;
- optionEl.className =
- index === 0 ? 'combo-option option-current' : 'combo-option';
- optionEl.setAttribute('aria-selected', `${index === 0}`);
- optionEl.innerText = optionText;
-
- optionEl.addEventListener('click', (event) => {
- event.stopPropagation();
- this.onOptionClick(index);
- });
- optionEl.addEventListener('mousedown', this.onOptionMouseDown.bind(this));
-
- return optionEl;
-};
-
-Select.prototype.getSearchString = function (char) {
- // reset typing timeout and start new timeout
- // this allows us to make multiple-letter matches, like a native select
- if (typeof this.searchTimeout === 'number') {
- window.clearTimeout(this.searchTimeout);
- }
-
- this.searchTimeout = window.setTimeout(() => {
- this.searchString = '';
- }, 500);
-
- // add most recent letter to saved search string
- this.searchString += char;
- return this.searchString;
-};
-
-Select.prototype.onComboBlur = function () {
- // do not do blur action if ignoreBlur flag has been set
- if (this.ignoreBlur) {
- this.ignoreBlur = false;
- return;
- }
-
- // select current option and close
- if (this.open) {
- this.selectOption(this.activeIndex);
- this.updateMenuState(false, false);
- }
-};
-
-Select.prototype.onComboClick = function () {
- this.updateMenuState(!this.open, false);
-};
-
-Select.prototype.onComboKeyDown = function (event) {
- const { key } = event;
- const max = this.options.length - 1;
-
- const action = getActionFromKey(event, this.open);
-
- switch (action) {
- case SelectActions.Last:
- case SelectActions.First:
- this.updateMenuState(true);
- // intentional fallthrough
- case SelectActions.Next:
- case SelectActions.Previous:
- case SelectActions.PageUp:
- case SelectActions.PageDown:
- event.preventDefault();
- return this.onOptionChange(
- getUpdatedIndex(this.activeIndex, max, action)
- );
- case SelectActions.CloseSelect:
- event.preventDefault();
- this.selectOption(this.activeIndex);
- // intentional fallthrough
- case SelectActions.Close:
- event.preventDefault();
- return this.updateMenuState(false);
- case SelectActions.Type:
- return this.onComboType(key);
- case SelectActions.Open:
- event.preventDefault();
- return this.updateMenuState(true);
- }
-};
-
-Select.prototype.onComboType = function (letter) {
- // open the listbox if it is closed
- this.updateMenuState(true);
-
- // find the index of the first matching option
- const searchString = this.getSearchString(letter);
- const searchIndex = getIndexByLetter(
- this.options,
- searchString,
- this.activeIndex + 1
- );
-
- // if a match was found, go to it
- if (searchIndex >= 0) {
- this.onOptionChange(searchIndex);
- }
- // if no matches, clear the timeout and search string
- else {
- window.clearTimeout(this.searchTimeout);
- this.searchString = '';
- }
-};
-
-Select.prototype.onOptionChange = function (index) {
- // update state
- this.activeIndex = index;
-
- // update aria-activedescendant
- this.comboEl.setAttribute('aria-activedescendant', `${this.idBase}-${index}`);
-
- // update active option styles
- const options = this.el.querySelectorAll('[role=option]');
- [...options].forEach((optionEl) => {
- optionEl.classList.remove('option-current');
- });
- options[index].classList.add('option-current');
-
- // ensure the new option is in view
- if (isScrollable(this.listboxEl)) {
- maintainScrollVisibility(options[index], this.listboxEl);
- }
-};
-
-Select.prototype.onOptionClick = function (index) {
- this.onOptionChange(index);
- this.selectOption(index);
- this.updateMenuState(false);
-};
-
-Select.prototype.onOptionMouseDown = function () {
- // Clicking an option will cause a blur event,
- // but we don't want to perform the default keyboard blur action
- this.ignoreBlur = true;
-};
-
-Select.prototype.selectOption = function (index) {
- // update state
- this.activeIndex = index;
-
- // update displayed value
- const selected = this.options[index];
- this.comboEl.innerHTML = selected;
-
- // update aria-selected
- const options = this.el.querySelectorAll('[role=option]');
- [...options].forEach((optionEl) => {
- optionEl.setAttribute('aria-selected', 'false');
- });
- options[index].setAttribute('aria-selected', 'true');
-};
-
-Select.prototype.updateMenuState = function (open, callFocus = true) {
- if (this.open === open) {
- return;
- }
-
- // update state
- this.open = open;
-
- // update aria-expanded and styles
- this.comboEl.setAttribute('aria-expanded', `${open}`);
- open ? this.el.classList.add('open') : this.el.classList.remove('open');
-
- // update activedescendant
- const activeID = open ? `${this.idBase}-${this.activeIndex}` : '';
- this.comboEl.setAttribute('aria-activedescendant', activeID);
-
- // move focus back to the combobox, if needed
- callFocus && this.comboEl.focus();
-};
-
-// init select
-window.addEventListener('load', function () {
- const options = [
- 'Choose a Fruit',
- 'Apple',
- 'Banana',
- 'Blueberry',
- 'Boysenberry',
- 'Cherry',
- 'Cranberry',
- 'Durian',
- 'Eggplant',
- 'Fig',
- 'Grape',
- 'Guava',
- 'Huckleberry',
- ];
- const selectEls = document.querySelectorAll('.js-select');
-
- selectEls.forEach((el) => {
- new Select(el, options);
- });
-});
diff --git a/build/tests/combobox-select-only/reference/combobox-select-only.html b/build/tests/combobox-select-only/reference/combobox-select-only.html
deleted file mode 100644
index c67aa4049..000000000
--- a/build/tests/combobox-select-only/reference/combobox-select-only.html
+++ /dev/null
@@ -1,51 +0,0 @@
-
-
-
-
-Select-Only Combobox Example
-
-
-
-
-
-
-
- Select-Only Combobox Example
-
- The following example implementation of the ARIA design pattern for combobox
- demonstrates a single-select combobox widget that is functionally similar to an HTML select
element.
- Unlike the editable combobox examples, this select-only combobox is not made with an <input>
element, and it does not accept freeform user input.
- However, like an HTML <select>
, users can type characters to select matching options.
-
-
-
-
-
diff --git a/build/tests/combobox-select-only/reference/css/select-only.css b/build/tests/combobox-select-only/reference/css/select-only.css
deleted file mode 100644
index 1d8beb3a7..000000000
--- a/build/tests/combobox-select-only/reference/css/select-only.css
+++ /dev/null
@@ -1,103 +0,0 @@
-.combo *,
-.combo *::before,
-.combo *::after {
- box-sizing: border-box;
-}
-
-.combo {
- display: block;
- margin-bottom: 1.5em;
- max-width: 400px;
- position: relative;
-}
-
-.combo::after {
- border-bottom: 2px solid rgba(0, 0, 0, 0.75);
- border-right: 2px solid rgba(0, 0, 0, 0.75);
- content: "";
- display: block;
- height: 12px;
- pointer-events: none;
- position: absolute;
- right: 16px;
- top: 50%;
- transform: translate(0, -65%) rotate(45deg);
- width: 12px;
-}
-
-.combo-input {
- background-color: #f5f5f5;
- border: 2px solid rgba(0, 0, 0, 0.75);
- border-radius: 4px;
- display: block;
- font-size: 1em;
- min-height: calc(1.4em + 26px);
- padding: 12px 16px 14px;
- text-align: left;
- width: 100%;
-}
-
-.open .combo-input {
- border-radius: 4px 4px 0 0;
-}
-
-.combo-input:focus {
- border-color: #0067b8;
- box-shadow: 0 0 4px 2px #0067b8;
- outline: 4px solid transparent;
-}
-
-.combo-label {
- display: block;
- font-size: 20px;
- font-weight: 100;
- margin-bottom: 0.25em;
-}
-
-.combo-menu {
- background-color: #f5f5f5;
- border: 1px solid rgba(0, 0, 0, 0.75);
- border-radius: 0 0 4px 4px;
- display: none;
- max-height: 300px;
- overflow-y: scroll;
- left: 0;
- position: absolute;
- top: 100%;
- width: 100%;
- z-index: 100;
-}
-
-.open .combo-menu {
- display: block;
-}
-
-.combo-option {
- padding: 10px 12px 12px;
-}
-
-.combo-option:hover {
- background-color: rgba(0, 0, 0, 0.1);
-}
-
-.combo-option.option-current {
- outline: 3px solid #0067b8;
- outline-offset: -3px;
-}
-
-.combo-option[aria-selected="true"] {
- padding-right: 30px;
- position: relative;
-}
-
-.combo-option[aria-selected="true"]::after {
- border-bottom: 2px solid #000;
- border-right: 2px solid #000;
- content: "";
- height: 16px;
- position: absolute;
- right: 15px;
- top: 50%;
- transform: translate(0, -50%) rotate(45deg);
- width: 8px;
-}
diff --git a/build/tests/combobox-select-only/reference/js/select-only.js b/build/tests/combobox-select-only/reference/js/select-only.js
deleted file mode 100644
index 2398e1b9d..000000000
--- a/build/tests/combobox-select-only/reference/js/select-only.js
+++ /dev/null
@@ -1,390 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- */
-
-'use strict';
-
-// Save a list of named combobox actions, for future readability
-const SelectActions = {
- Close: 0,
- CloseSelect: 1,
- First: 2,
- Last: 3,
- Next: 4,
- Open: 5,
- PageDown: 6,
- PageUp: 7,
- Previous: 8,
- Select: 9,
- Type: 10,
-};
-
-/*
- * Helper functions
- */
-
-// filter an array of options against an input string
-// returns an array of options that begin with the filter string, case-independent
-function filterOptions(options = [], filter, exclude = []) {
- return options.filter((option) => {
- const matches = option.toLowerCase().indexOf(filter.toLowerCase()) === 0;
- return matches && exclude.indexOf(option) < 0;
- });
-}
-
-// map a key press to an action
-function getActionFromKey(event, menuOpen) {
- const { key, altKey, ctrlKey, metaKey } = event;
- const openKeys = ['ArrowDown', 'ArrowUp', 'Enter', ' ']; // all keys that will do the default open action
- // handle opening when closed
- if (!menuOpen && openKeys.includes(key)) {
- return SelectActions.Open;
- }
-
- // home and end move the selected option when open or closed
- if (key === 'Home') {
- return SelectActions.First;
- }
- if (key === 'End') {
- return SelectActions.Last;
- }
-
- // handle typing characters when open or closed
- if (
- key === 'Backspace' ||
- key === 'Clear' ||
- (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey)
- ) {
- return SelectActions.Type;
- }
-
- // handle keys when open
- if (menuOpen) {
- if (key === 'ArrowUp' && altKey) {
- return SelectActions.CloseSelect;
- } else if (key === 'ArrowDown' && !altKey) {
- return SelectActions.Next;
- } else if (key === 'ArrowUp') {
- return SelectActions.Previous;
- } else if (key === 'PageUp') {
- return SelectActions.PageUp;
- } else if (key === 'PageDown') {
- return SelectActions.PageDown;
- } else if (key === 'Escape') {
- return SelectActions.Close;
- } else if (key === 'Enter' || key === ' ') {
- return SelectActions.CloseSelect;
- }
- }
-}
-
-// return the index of an option from an array of options, based on a search string
-// if the filter is multiple iterations of the same letter (e.g "aaa"), then cycle through first-letter matches
-function getIndexByLetter(options, filter, startIndex = 0) {
- const orderedOptions = [
- ...options.slice(startIndex),
- ...options.slice(0, startIndex),
- ];
- const firstMatch = filterOptions(orderedOptions, filter)[0];
- const allSameLetter = (array) => array.every((letter) => letter === array[0]);
-
- // first check if there is an exact match for the typed string
- if (firstMatch) {
- return options.indexOf(firstMatch);
- }
-
- // if the same letter is being repeated, cycle through first-letter matches
- else if (allSameLetter(filter.split(''))) {
- const matches = filterOptions(orderedOptions, filter[0]);
- return options.indexOf(matches[0]);
- }
-
- // if no matches, return -1
- else {
- return -1;
- }
-}
-
-// get an updated option index after performing an action
-function getUpdatedIndex(currentIndex, maxIndex, action) {
- const pageSize = 10; // used for pageup/pagedown
-
- switch (action) {
- case SelectActions.First:
- return 0;
- case SelectActions.Last:
- return maxIndex;
- case SelectActions.Previous:
- return Math.max(0, currentIndex - 1);
- case SelectActions.Next:
- return Math.min(maxIndex, currentIndex + 1);
- case SelectActions.PageUp:
- return Math.max(0, currentIndex - pageSize);
- case SelectActions.PageDown:
- return Math.min(maxIndex, currentIndex + pageSize);
- default:
- return currentIndex;
- }
-}
-
-// check if an element is currently scrollable
-function isScrollable(element) {
- return element && element.clientHeight < element.scrollHeight;
-}
-
-// ensure a given child element is within the parent's visible scroll area
-// if the child is not visible, scroll the parent
-function maintainScrollVisibility(activeElement, scrollParent) {
- const { offsetHeight, offsetTop } = activeElement;
- const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;
-
- const isAbove = offsetTop < scrollTop;
- const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
-
- if (isAbove) {
- scrollParent.scrollTo(0, offsetTop);
- } else if (isBelow) {
- scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);
- }
-}
-
-/*
- * Select Component
- * Accepts a combobox element and an array of string options
- */
-const Select = function (el, options = []) {
- // element refs
- this.el = el;
- this.comboEl = el.querySelector('[role=combobox]');
- this.listboxEl = el.querySelector('[role=listbox]');
-
- // data
- this.idBase = this.comboEl.id || 'combo';
- this.options = options;
-
- // state
- this.activeIndex = 0;
- this.open = false;
- this.searchString = '';
- this.searchTimeout = null;
-
- // init
- if (el && this.comboEl && this.listboxEl) {
- this.init();
- }
-};
-
-Select.prototype.init = function () {
- // select first option by default
- this.comboEl.innerHTML = this.options[0];
-
- // add event listeners
- this.comboEl.addEventListener('blur', this.onComboBlur.bind(this));
- this.comboEl.addEventListener('click', this.onComboClick.bind(this));
- this.comboEl.addEventListener('keydown', this.onComboKeyDown.bind(this));
-
- // create options
- this.options.map((option, index) => {
- const optionEl = this.createOption(option, index);
- this.listboxEl.appendChild(optionEl);
- });
-};
-
-Select.prototype.createOption = function (optionText, index) {
- const optionEl = document.createElement('div');
- optionEl.setAttribute('role', 'option');
- optionEl.id = `${this.idBase}-${index}`;
- optionEl.className =
- index === 0 ? 'combo-option option-current' : 'combo-option';
- optionEl.setAttribute('aria-selected', `${index === 0}`);
- optionEl.innerText = optionText;
-
- optionEl.addEventListener('click', (event) => {
- event.stopPropagation();
- this.onOptionClick(index);
- });
- optionEl.addEventListener('mousedown', this.onOptionMouseDown.bind(this));
-
- return optionEl;
-};
-
-Select.prototype.getSearchString = function (char) {
- // reset typing timeout and start new timeout
- // this allows us to make multiple-letter matches, like a native select
- if (typeof this.searchTimeout === 'number') {
- window.clearTimeout(this.searchTimeout);
- }
-
- this.searchTimeout = window.setTimeout(() => {
- this.searchString = '';
- }, 500);
-
- // add most recent letter to saved search string
- this.searchString += char;
- return this.searchString;
-};
-
-Select.prototype.onComboBlur = function () {
- // do not do blur action if ignoreBlur flag has been set
- if (this.ignoreBlur) {
- this.ignoreBlur = false;
- return;
- }
-
- // select current option and close
- if (this.open) {
- this.selectOption(this.activeIndex);
- this.updateMenuState(false, false);
- }
-};
-
-Select.prototype.onComboClick = function () {
- this.updateMenuState(!this.open, false);
-};
-
-Select.prototype.onComboKeyDown = function (event) {
- const { key } = event;
- const max = this.options.length - 1;
-
- const action = getActionFromKey(event, this.open);
-
- switch (action) {
- case SelectActions.Last:
- case SelectActions.First:
- this.updateMenuState(true);
- // intentional fallthrough
- case SelectActions.Next:
- case SelectActions.Previous:
- case SelectActions.PageUp:
- case SelectActions.PageDown:
- event.preventDefault();
- return this.onOptionChange(
- getUpdatedIndex(this.activeIndex, max, action)
- );
- case SelectActions.CloseSelect:
- event.preventDefault();
- this.selectOption(this.activeIndex);
- // intentional fallthrough
- case SelectActions.Close:
- event.preventDefault();
- return this.updateMenuState(false);
- case SelectActions.Type:
- return this.onComboType(key);
- case SelectActions.Open:
- event.preventDefault();
- return this.updateMenuState(true);
- }
-};
-
-Select.prototype.onComboType = function (letter) {
- // open the listbox if it is closed
- this.updateMenuState(true);
-
- // find the index of the first matching option
- const searchString = this.getSearchString(letter);
- const searchIndex = getIndexByLetter(
- this.options,
- searchString,
- this.activeIndex + 1
- );
-
- // if a match was found, go to it
- if (searchIndex >= 0) {
- this.onOptionChange(searchIndex);
- }
- // if no matches, clear the timeout and search string
- else {
- window.clearTimeout(this.searchTimeout);
- this.searchString = '';
- }
-};
-
-Select.prototype.onOptionChange = function (index) {
- // update state
- this.activeIndex = index;
-
- // update aria-activedescendant
- this.comboEl.setAttribute('aria-activedescendant', `${this.idBase}-${index}`);
-
- // update active option styles
- const options = this.el.querySelectorAll('[role=option]');
- [...options].forEach((optionEl) => {
- optionEl.classList.remove('option-current');
- });
- options[index].classList.add('option-current');
-
- // ensure the new option is in view
- if (isScrollable(this.listboxEl)) {
- maintainScrollVisibility(options[index], this.listboxEl);
- }
-};
-
-Select.prototype.onOptionClick = function (index) {
- this.onOptionChange(index);
- this.selectOption(index);
- this.updateMenuState(false);
-};
-
-Select.prototype.onOptionMouseDown = function () {
- // Clicking an option will cause a blur event,
- // but we don't want to perform the default keyboard blur action
- this.ignoreBlur = true;
-};
-
-Select.prototype.selectOption = function (index) {
- // update state
- this.activeIndex = index;
-
- // update displayed value
- const selected = this.options[index];
- this.comboEl.innerHTML = selected;
-
- // update aria-selected
- const options = this.el.querySelectorAll('[role=option]');
- [...options].forEach((optionEl) => {
- optionEl.setAttribute('aria-selected', 'false');
- });
- options[index].setAttribute('aria-selected', 'true');
-};
-
-Select.prototype.updateMenuState = function (open, callFocus = true) {
- if (this.open === open) {
- return;
- }
-
- // update state
- this.open = open;
-
- // update aria-expanded and styles
- this.comboEl.setAttribute('aria-expanded', `${open}`);
- open ? this.el.classList.add('open') : this.el.classList.remove('open');
-
- // update activedescendant
- const activeID = open ? `${this.idBase}-${this.activeIndex}` : '';
- this.comboEl.setAttribute('aria-activedescendant', activeID);
-
- // move focus back to the combobox, if needed
- callFocus && this.comboEl.focus();
-};
-
-// init select
-window.addEventListener('load', function () {
- const options = [
- 'Choose a Fruit',
- 'Apple',
- 'Banana',
- 'Blueberry',
- 'Boysenberry',
- 'Cherry',
- 'Cranberry',
- 'Durian',
- 'Eggplant',
- 'Fig',
- 'Grape',
- 'Guava',
- 'Huckleberry',
- ];
- const selectEl = document.querySelector('.js-select');
- document.defaultView.selectController = new Select(selectEl, options);
-});
diff --git a/build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/css/menu-button-actions.css b/build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/css/menu-button-actions.css
deleted file mode 100644
index 391043fa3..000000000
--- a/build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/css/menu-button-actions.css
+++ /dev/null
@@ -1,82 +0,0 @@
-.menu-button-actions {
- margin: 0;
- padding: 0;
-}
-
-.menu-button-actions button {
- margin: 0;
- padding: 6px;
- display: inline-block;
- position: relative;
- background-color: #034575;
- border: 1px solid #034575;
- font-size: 0.9em;
- color: white;
- border-radius: 5px;
-}
-
-.menu-button-actions [role="menu"] {
- display: none;
- position: absolute;
- margin: 0;
- padding: 7px 4px;
- border: 2px solid #034575;
- border-radius: 5px;
- background-color: #eee;
-}
-
-.menu-button-actions [role="menuitem"],
-.menu-button-actions [role="separator"] {
- margin: 0;
- padding: 6px;
- display: block;
- width: 4em;
- background-color: #eee;
- color: black;
- border-radius: 5px;
-}
-
-.menu-button-actions [role="separator"] {
- padding-top: 3px;
- background-image: url("../images/separator.svg");
- background-position: center;
- background-repeat: repeat-x;
-}
-
-.menu-button-actions button svg.down {
- padding-left: 0.125em;
- fill: currentColor;
- stroke: currentColor;
-}
-
-.menu-button-actions button[aria-expanded="true"] svg.down {
- transform: rotate(180deg);
-}
-
-/* focus styling */
-
-.menu-button-actions button:hover,
-.menu-button-actions button:focus,
-.menu-button-actions button[aria-expanded="true"] {
- padding: 4px;
- border: 3px solid #034575;
- background: #eee;
- color: #222;
- outline: none;
- margin: 0;
-}
-
-.menu-button-actions [role="menuitem"].focus,
-.menu-button-actions [role="menuitem"]:focus {
- padding: 4px;
- border: 2px solid #034575;
- background: #034575;
- color: #fff;
- outline: none;
- margin: 0;
-}
-
-input.action:focus {
- outline: 2px solid #034575;
- background: #def;
-}
diff --git a/build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/js/menu-button-actions-active-descendant.js b/build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/js/menu-button-actions-active-descendant.js
deleted file mode 100644
index 685e270ef..000000000
--- a/build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/js/menu-button-actions-active-descendant.js
+++ /dev/null
@@ -1,347 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: menu-button-actives-active-descendant.js
- *
- * Desc: Creates a menu button that opens a menu of actions using aria-activedescendants
- */
-
-'use strict';
-
-class MenuButtonActionsActiveDescendant {
- constructor(domNode, performMenuAction) {
- this.domNode = domNode;
- this.performMenuAction = performMenuAction;
- this.buttonNode = domNode.querySelector('button');
- this.menuNode = domNode.querySelector('[role="menu"]');
- this.currentMenuitem = {};
- this.menuitemNodes = [];
- this.firstMenuitem = false;
- this.lastMenuitem = false;
- this.firstChars = [];
-
- this.buttonNode.addEventListener(
- 'keydown',
- this.onButtonKeydown.bind(this)
- );
-
- this.buttonNode.addEventListener('click', this.onButtonClick.bind(this));
-
- this.menuNode.addEventListener('keydown', this.onMenuKeydown.bind(this));
-
- var nodes = domNode.querySelectorAll('[role="menuitem"]');
-
- for (var i = 0; i < nodes.length; i++) {
- var menuitem = nodes[i];
- this.menuitemNodes.push(menuitem);
- menuitem.tabIndex = -1;
- this.firstChars.push(menuitem.textContent.trim()[0].toLowerCase());
-
- menuitem.addEventListener('click', this.onMenuitemClick.bind(this));
-
- menuitem.addEventListener(
- 'mouseover',
- this.onMenuitemMouseover.bind(this)
- );
-
- if (!this.firstMenuitem) {
- this.firstMenuitem = menuitem;
- }
- this.lastMenuitem = menuitem;
- }
-
- domNode.addEventListener('focusin', this.onFocusin.bind(this));
- domNode.addEventListener('focusout', this.onFocusout.bind(this));
-
- window.addEventListener(
- 'mousedown',
- this.onBackgroundMousedown.bind(this),
- true
- );
- }
-
- setFocusToMenuitem(newMenuitem) {
- for (var i = 0; i < this.menuitemNodes.length; i++) {
- var menuitem = this.menuitemNodes[i];
- if (menuitem === newMenuitem) {
- this.currentMenuitem = newMenuitem;
- menuitem.classList.add('focus');
- this.menuNode.setAttribute('aria-activedescendant', newMenuitem.id);
- } else {
- menuitem.classList.remove('focus');
- }
- }
- }
-
- setFocusToFirstMenuitem() {
- this.setFocusToMenuitem(this.firstMenuitem);
- }
-
- setFocusToLastMenuitem() {
- this.setFocusToMenuitem(this.lastMenuitem);
- }
-
- setFocusToPreviousMenuitem() {
- var newMenuitem, index;
-
- if (this.currentMenuitem === this.firstMenuitem) {
- newMenuitem = this.lastMenuitem;
- } else {
- index = this.menuitemNodes.indexOf(this.currentMenuitem);
- newMenuitem = this.menuitemNodes[index - 1];
- }
-
- this.setFocusToMenuitem(newMenuitem);
-
- return newMenuitem;
- }
-
- setFocusToNextMenuitem() {
- var newMenuitem, index;
-
- if (this.currentMenuitem === this.lastMenuitem) {
- newMenuitem = this.firstMenuitem;
- } else {
- index = this.menuitemNodes.indexOf(this.currentMenuitem);
- newMenuitem = this.menuitemNodes[index + 1];
- }
- this.setFocusToMenuitem(newMenuitem);
-
- return newMenuitem;
- }
-
- setFocusByFirstCharacter(char) {
- var start, index;
-
- if (char.length > 1) {
- return;
- }
-
- char = char.toLowerCase();
-
- // Get start index for search based on position of currentItem
- start = this.menuitemNodes.indexOf(this.currentMenuitem) + 1;
- if (start >= this.menuitemNodes.length) {
- start = 0;
- }
-
- // Check remaining slots in the menu
- index = this.firstChars.indexOf(char, start);
-
- // If not found in remaining slots, check from beginning
- if (index === -1) {
- index = this.firstChars.indexOf(char, 0);
- }
-
- // If match was found...
- if (index > -1) {
- this.setFocusToMenuitem(this.menuitemNodes[index]);
- }
- }
-
- // Utilities
-
- getIndexFirstChars(startIndex, char) {
- for (var i = startIndex; i < this.firstChars.length; i++) {
- if (char === this.firstChars[i]) {
- return i;
- }
- }
- return -1;
- }
-
- // Popup menu methods
-
- openPopup() {
- this.menuNode.style.display = 'block';
- this.buttonNode.setAttribute('aria-expanded', 'true');
- this.menuNode.focus();
- this.setFocusToFirstMenuitem();
- }
-
- closePopup() {
- if (this.isOpen()) {
- this.buttonNode.removeAttribute('aria-expanded');
- this.menuNode.setAttribute('aria-activedescendant', '');
- for (var i = 0; i < this.menuitemNodes.length; i++) {
- this.menuitemNodes[i].classList.remove('focus');
- }
- this.menuNode.style.display = 'none';
- this.buttonNode.focus();
- }
- }
-
- isOpen() {
- return this.buttonNode.getAttribute('aria-expanded') === 'true';
- }
-
- // Menu event handlers
-
- onFocusin() {
- this.domNode.classList.add('focus');
- }
-
- onFocusout() {
- this.domNode.classList.remove('focus');
- }
-
- onButtonKeydown(event) {
- var key = event.key,
- flag = false;
-
- switch (key) {
- case ' ':
- case 'Enter':
- case 'ArrowDown':
- case 'Down':
- this.openPopup();
- this.setFocusToFirstMenuitem();
- flag = true;
- break;
-
- case 'Esc':
- case 'Escape':
- this.closePopup();
- flag = true;
- break;
-
- case 'Up':
- case 'ArrowUp':
- this.openPopup();
- this.setFocusToLastMenuitem();
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
- }
-
- onButtonClick(event) {
- if (this.isOpen()) {
- this.closePopup();
- } else {
- this.openPopup();
- }
- event.stopPropagation();
- event.preventDefault();
- }
-
- onMenuKeydown(event) {
- var key = event.key,
- flag = false;
-
- function isPrintableCharacter(str) {
- return str.length === 1 && str.match(/\S/);
- }
-
- if (event.ctrlKey || event.altKey || event.metaKey) {
- return;
- }
-
- if (event.shiftKey) {
- if (isPrintableCharacter(key)) {
- this.setFocusByFirstCharacter(key);
- flag = true;
- }
-
- if (event.key === 'Tab') {
- this.closePopup();
- flag = true;
- }
- } else {
- switch (key) {
- case ' ':
- case 'Enter':
- this.closePopup();
- this.performMenuAction(this.currentMenuitem);
- flag = true;
- break;
-
- case 'Esc':
- case 'Escape':
- this.closePopup();
- flag = true;
- break;
-
- case 'Up':
- case 'ArrowUp':
- this.setFocusToPreviousMenuitem();
- flag = true;
- break;
-
- case 'ArrowDown':
- case 'Down':
- this.setFocusToNextMenuitem();
- flag = true;
- break;
-
- case 'Home':
- case 'PageUp':
- this.setFocusToFirstMenuitem();
- flag = true;
- break;
-
- case 'End':
- case 'PageDown':
- this.setFocusToLastMenuitem();
- flag = true;
- break;
-
- case 'Tab':
- this.closePopup();
- break;
-
- default:
- if (isPrintableCharacter(key)) {
- this.setFocusByFirstCharacter(key);
- flag = true;
- }
- break;
- }
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
- }
-
- onMenuitemMouseover(event) {
- var tgt = event.currentTarget;
- this.setFocusToMenuitem(tgt);
- }
-
- onMenuitemClick(event) {
- var tgt = event.currentTarget;
- this.closePopup();
- this.performMenuAction(tgt);
- }
-
- onBackgroundMousedown(event) {
- if (!this.domNode.contains(event.target)) {
- if (this.isOpen()) {
- this.closePopup();
- }
- }
- }
-}
-
-// Initialize menu buttons
-
-window.addEventListener('load', function () {
- document.getElementById('action_output').value = 'none';
-
- function performMenuAction(node) {
- document.getElementById('action_output').value = node.textContent.trim();
- }
-
- var menuButton = document.querySelector('.menu-button-actions');
- document.defaultView.menuController = new MenuButtonActionsActiveDescendant(menuButton, performMenuAction);
-});
diff --git a/build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/menu-button-actions-active-descendant.html b/build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/menu-button-actions-active-descendant.html
deleted file mode 100644
index 1fb1900c9..000000000
--- a/build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/menu-button-actions-active-descendant.html
+++ /dev/null
@@ -1,57 +0,0 @@
-
-
-
- Actions Menu Button Example Using aria-activedescendant
-
-
-
-
-
-
-
- Actions Menu Button Example Using aria-activedescendant
-
- This example demonstrates how the
- menu button design pattern
- can be used to create a button that opens an actions menu.
- In this example, choosing an action from the menu will cause the chosen action to be displayed in the Last Action edit box.
-
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/css/menubar-editor.css b/build/tests/menubar-editor/reference/2020-11-19_152059/css/menubar-editor.css
deleted file mode 100644
index 72a3f573c..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/css/menubar-editor.css
+++ /dev/null
@@ -1,200 +0,0 @@
-.menubar-editor {
- margin: 0;
- padding: 2px;
- width: 560px;
-}
-
-.menubar-editor.focus {
- padding: 0;
- border: solid 2px #034575;
-}
-
-.menubar-editor textarea {
- padding: 4px;
- margin: 0;
- border: 2px solid #eee;
- height: 400px;
- width: 548px;
- font-size: medium;
- font-family: sans-serif;
-}
-
-.menubar-editor [role="menubar"] {
- margin: 0;
- padding: 2px;
- border: 2px solid #eee;
- font-size: 110%;
- list-style: none;
- background-color: #eee;
- height: 32px;
- display: block;
-}
-
-.menubar-editor [role="menubar"] li {
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
-.menubar-editor [role="menubar"] > li {
- display: inline-block;
- position: relative;
- top: 3px;
- left: 1px;
-}
-
-.menubar-editor [role="menubar"] > li > [role="menuitem"]::after {
- content: url("../images/down-arrow.svg");
- padding-left: 0.25em;
-}
-
-.menubar-editor [role="menubar"] > li > [role="menuitem"]:focus::after {
- content: url("../images/down-arrow-focus.svg");
-}
-
-.menubar-editor
- [role="menubar"]
- > li
- > [role="menuitem"][aria-expanded="true"]::after {
- content: url("../images/up-arrow-focus.svg");
-}
-
-.menubar-editor [role="menubar"] [role="menu"] {
- display: none;
- margin: 0;
- padding: 2px;
- position: absolute;
- border: 2px solid #034575;
- background-color: #eee;
-}
-
-.menubar-editor [role="menubar"] [role="group"] {
- margin: 0;
- padding: 0;
-}
-
-.menubar-editor [role="menubar"] [role="menuitem"][aria-disabled="true"] {
- color: #666;
- text-decoration: line-through;
-}
-
-.menubar-editor [role="menubar"] [role="menuitem"],
-.menubar-editor [role="menubar"] [role="menuitemcheckbox"],
-.menubar-editor [role="menubar"] [role="menuitemradio"],
-.menubar-editor [role="menubar"] [role="separator"] {
- padding: 6px;
- background-color: #eee;
- border: 0 solid #eee;
- color: black;
-}
-
-.menubar-editor [role="menubar"] [role="menuitem"][aria-expanded="true"] {
- padding: 4px;
- border: 2px solid #034575;
- background-color: #034575;
- color: #fff;
- outline: none;
-}
-
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitem"],
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitemcheckbox"],
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitemradio"],
-.menubar-editor [role="menubar"] [role="menu"] [role="separator"] {
- padding-left: 27px;
- width: 8em;
-}
-
-.menubar-editor [role="menubar"] [role="separator"] {
- padding-top: 3px;
- background-image: url("../images/separator.svg");
- background-position: center;
- background-repeat: repeat-x;
-}
-
-.menubar-editor [role="menubar"] [role="menu"] [aria-checked="true"] {
- padding: 6px;
- padding-left: 8px;
- padding-right: 18px;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menuitemradio"][aria-checked="true"]::before {
- content: url("../images/radio-checked.svg");
- padding-right: 3px;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menuitemcheckbox"][aria-checked="true"]::before {
- content: url("../images/checkbox-checked.svg");
- padding-right: 3px;
-}
-
-/* focus and hover styling */
-
-.menubar-editor [role="menubar"] [role="menuitem"]:focus,
-.menubar-editor [role="menubar"] [role="menuitemcheckbox"]:focus,
-.menubar-editor [role="menubar"] [role="menuitemradio"]:focus {
- padding: 4px;
- border: 2px solid #034575;
- background-color: #034575;
- color: #fff;
- outline: none;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menuitemradio"][aria-checked="true"]:focus::before {
- content: url("../images/radio-checked-focus.svg");
- padding-right: 3px;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menuitemcheckbox"][aria-checked="true"]:focus::before {
- content: url("../images/checkbox-checked-focus.svg");
- padding-right: 3px;
-}
-
-.menubar-editor [role="menubar"] [role="menuitem"]:hover {
- padding: 4px;
- border: 2px solid #034575;
-}
-
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitem"]:focus,
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitemcheckbox"]:focus,
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitemradio"]:focus {
- padding-left: 25px;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menu"]
- [role="menuitem"][aria-checked="true"]:focus,
-.menubar-editor
- [role="menubar"]
- [role="menu"]
- [role="menuitemcheckbox"][aria-checked="true"]:focus,
-.menubar-editor
- [role="menubar"]
- [role="menu"]
- [role="menuitemradio"][aria-checked="true"]:focus {
- padding-left: 8px;
- padding-right: 21px;
-}
-
-/*
-* Text area styles
-*/
-.menubar-editor .italic {
- font-style: italic;
-}
-
-.menubar-editor .bold {
- font-weight: bold;
-}
-
-.menubar-editor .underline {
- text-decoration: underline;
-}
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/css/menubar-navigation.css b/build/tests/menubar-editor/reference/2020-11-19_152059/css/menubar-navigation.css
deleted file mode 100644
index dddce81d0..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/css/menubar-navigation.css
+++ /dev/null
@@ -1,114 +0,0 @@
-.menubar-navigation {
- margin: 0;
- margin-top: 0.5em;
- margin-bottom: 0.5em;
- padding: 7px;
- font-size: 110%;
- list-style: none;
- background-color: #eee;
- border: #eee solid 1px;
- border-radius: 5px;
-}
-
-.menubar-navigation li {
- margin: 0;
- padding: 0;
- border: 0 solid black;
- list-style: none;
-}
-
-.menubar-navigation > li {
- display: inline-block;
- position: relative;
-}
-
-.menubar-navigation > li li {
- display: block;
-}
-
-.menubar-navigation [role="menu"] [role="menuitem"],
-.menubar-navigation [role="menu"] [role="separator"] {
- display: block;
- width: 12em;
- margin: 0;
-}
-
-.menubar-navigation [role="menuitem"],
-.menubar-navigation [role="separator"] {
- padding: 6px;
- background-color: #eee;
- border: 0 solid #eee;
- color: black;
- border-radius: 5px;
-}
-
-.menubar-navigation [role="menuitem"] svg {
- fill: currentColor;
- stroke: currentColor;
-}
-
-.menubar-navigation [role="menuitem"] svg.down {
- padding-left: 0.125em;
-}
-
-.menubar-navigation [role="menuitem"] svg.right {
- position: absolute;
- padding-top: 0.35em;
- right: 0.75em;
-}
-
-.menubar-navigation [role="menuitem"][aria-expanded="true"] svg.down {
- transform: rotate(180deg);
-}
-
-.menubar-navigation [role="menuitem"][aria-expanded="true"] svg.right {
- transform: rotate(90deg) translate(5px, -5px);
-}
-
-.menubar-navigation > li > [role="menuitem"] {
- display: inline-block;
-}
-
-.menubar-navigation [role="menu"] {
- display: none;
- position: absolute;
- margin: 0;
- padding: 0;
- padding: 7px 4px;
- border: 2px solid #034575;
- border-radius: 5px;
- background-color: #eee;
-}
-
-.menubar-navigation [role="group"] {
- margin: 0;
- padding: 0;
-}
-
-.menubar-navigation [role="separator"] {
- padding-top: 3px;
- background-image: url("../images/separator.svg");
- background-position: center;
- background-repeat: repeat-x;
-}
-
-/* focus styling */
-
-.menubar-navigation.focus {
- padding: 6px;
- border: #034575 solid 2px;
-}
-
-.menubar-navigation [role="menuitem"][aria-expanded="true"],
-.menubar-navigation [role="menuitem"]:focus,
-.menubar-navigation [role="menuitem"]:hover {
- background: #034575;
- color: #fff;
- outline: none;
-}
-
-.menubar-navigation [role="menuitem"]:focus,
-.menubar-navigation [role="menuitem"]:hover {
- padding: 2px;
- border: 4px solid #034575;
-}
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/images/checkbox-checked-focus.svg b/build/tests/menubar-editor/reference/2020-11-19_152059/images/checkbox-checked-focus.svg
deleted file mode 100644
index af016333b..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/images/checkbox-checked-focus.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/images/checkbox-checked.svg b/build/tests/menubar-editor/reference/2020-11-19_152059/images/checkbox-checked.svg
deleted file mode 100644
index 5f64b0e3c..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/images/checkbox-checked.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/images/down-arrow-focus.svg b/build/tests/menubar-editor/reference/2020-11-19_152059/images/down-arrow-focus.svg
deleted file mode 100644
index 8f6ea6637..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/images/down-arrow-focus.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/images/down-arrow.svg b/build/tests/menubar-editor/reference/2020-11-19_152059/images/down-arrow.svg
deleted file mode 100644
index a0a2556a5..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/images/down-arrow.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/images/radio-checked-focus.svg b/build/tests/menubar-editor/reference/2020-11-19_152059/images/radio-checked-focus.svg
deleted file mode 100644
index c6250857a..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/images/radio-checked-focus.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/images/radio-checked.svg b/build/tests/menubar-editor/reference/2020-11-19_152059/images/radio-checked.svg
deleted file mode 100644
index 536bf06ad..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/images/radio-checked.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/images/separator.svg b/build/tests/menubar-editor/reference/2020-11-19_152059/images/separator.svg
deleted file mode 100644
index b4b39760b..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/images/separator.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/images/up-arrow-focus.svg b/build/tests/menubar-editor/reference/2020-11-19_152059/images/up-arrow-focus.svg
deleted file mode 100644
index ede8a5d71..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/images/up-arrow-focus.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/images/up-arrow.svg b/build/tests/menubar-editor/reference/2020-11-19_152059/images/up-arrow.svg
deleted file mode 100644
index d034dad15..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/images/up-arrow.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/js/menubar-editor.js b/build/tests/menubar-editor/reference/2020-11-19_152059/js/menubar-editor.js
deleted file mode 100644
index 905b4ce87..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/js/menubar-editor.js
+++ /dev/null
@@ -1,709 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: menubar-editor.js
- *
- * Desc: Creates a menubar to control the styling of text in a textarea element
- */
-
-'use strict';
-
-var MenubarEditor = function (domNode) {
- this.domNode = domNode;
- this.menubarNode = domNode.querySelector('[role=menubar]');
- this.textareaNode = domNode.querySelector('textarea');
- this.actionManager = new StyleManager(this.textareaNode);
-
- this.popups = [];
- this.menuitemGroups = {};
- this.menuOrientation = {};
- this.isPopup = {};
-
- this.firstChars = {}; // see Menubar init method
- this.firstMenuitem = {}; // see Menubar init method
- this.lastMenuitem = {}; // see Menubar init method
-
- this.initMenu(this.menubarNode);
- this.domNode.addEventListener('focusin', this.handleFocusin.bind(this));
- this.domNode.addEventListener('focusout', this.handleFocusout.bind(this));
-
- window.addEventListener(
- 'mousedown',
- this.handleBackgroundMousedown.bind(this),
- true
- );
-};
-
-MenubarEditor.prototype.getMenuitems = function (domNode) {
- var nodes = [];
-
- var initMenu = this.initMenu.bind(this);
- var getGroupId = this.getGroupId.bind(this);
- var menuitemGroups = this.menuitemGroups;
- var popups = this.popups;
-
- function findMenuitems(node, group) {
- var role, flag, groupId;
-
- while (node) {
- flag = true;
- role = node.getAttribute('role');
-
- switch (role) {
- case 'menu':
- node.tabIndex = -1;
- initMenu(node);
- flag = false;
- break;
-
- case 'group':
- groupId = getGroupId(node);
- menuitemGroups[groupId] = [];
- break;
-
- case 'menuitem':
- case 'menuitemradio':
- case 'menuitemcheckbox':
- if (node.getAttribute('aria-haspopup') === 'true') {
- popups.push(node);
- }
- nodes.push(node);
- if (group) {
- group.push(node);
- }
- break;
-
- default:
- break;
- }
-
- if (flag && node.firstElementChild) {
- findMenuitems(node.firstElementChild, menuitemGroups[groupId]);
- }
-
- node = node.nextElementSibling;
- }
- }
-
- findMenuitems(domNode.firstElementChild, false);
-
- return nodes;
-};
-
-MenubarEditor.prototype.initMenu = function (menu) {
- var i, menuitems, menuitem, role, nextElement;
-
- var menuId = this.getMenuId(menu);
-
- menuitems = this.getMenuitems(menu);
- this.menuOrientation[menuId] = this.getMenuOrientation(menu);
- this.isPopup[menuId] = menu.getAttribute('role') === 'menu';
-
- this.menuitemGroups[menuId] = [];
- this.firstChars[menuId] = [];
- this.firstMenuitem[menuId] = null;
- this.lastMenuitem[menuId] = null;
-
- for (i = 0; i < menuitems.length; i++) {
- menuitem = menuitems[i];
- role = menuitem.getAttribute('role');
-
- if (role.indexOf('menuitem') < 0) {
- continue;
- }
-
- menuitem.tabIndex = -1;
- this.menuitemGroups[menuId].push(menuitem);
- this.firstChars[menuId].push(menuitem.textContent[0].toLowerCase());
-
- menuitem.addEventListener('keydown', this.handleKeydown.bind(this));
- menuitem.addEventListener('click', this.handleMenuitemClick.bind(this));
-
- menuitem.addEventListener(
- 'mouseover',
- this.handleMenuitemMouseover.bind(this)
- );
-
- if (!this.firstMenuitem[menuId]) {
- if (this.hasPopup(menuitem)) {
- menuitem.tabIndex = 0;
- }
- this.firstMenuitem[menuId] = menuitem;
- }
- this.lastMenuitem[menuId] = menuitem;
- }
-};
-
-/* MenubarEditor FOCUS MANAGEMENT METHODS */
-
-MenubarEditor.prototype.setFocusToMenuitem = function (menuId, newMenuitem) {
- var isAnyPopupOpen = this.isAnyPopupOpen();
-
- this.closePopupAll(newMenuitem);
-
- if (this.hasPopup(newMenuitem)) {
- if (isAnyPopupOpen) {
- this.openPopup(newMenuitem);
- }
- } else {
- var menu = this.getMenu(newMenuitem);
- var cmi = menu.previousElementSibling;
- if (!this.isOpen(cmi)) {
- this.openPopup(cmi);
- }
- }
-
- if (this.hasPopup(newMenuitem)) {
- if (this.menuitemGroups[menuId]) {
- this.menuitemGroups[menuId].forEach(function (item) {
- item.tabIndex = -1;
- });
- }
- newMenuitem.tabIndex = 0;
- }
-
- newMenuitem.focus();
-};
-
-MenubarEditor.prototype.setFocusToFirstMenuitem = function (menuId) {
- this.setFocusToMenuitem(menuId, this.firstMenuitem[menuId]);
-};
-
-MenubarEditor.prototype.setFocusToLastMenuitem = function (menuId) {
- this.setFocusToMenuitem(menuId, this.lastMenuitem[menuId]);
-};
-
-MenubarEditor.prototype.setFocusToPreviousMenuitem = function (
- menuId,
- currentMenuitem
-) {
- var newMenuitem, index;
-
- if (currentMenuitem === this.firstMenuitem[menuId]) {
- newMenuitem = this.lastMenuitem[menuId];
- } else {
- index = this.menuitemGroups[menuId].indexOf(currentMenuitem);
- newMenuitem = this.menuitemGroups[menuId][index - 1];
- }
-
- this.setFocusToMenuitem(menuId, newMenuitem);
-
- return newMenuitem;
-};
-
-MenubarEditor.prototype.setFocusToNextMenuitem = function (
- menuId,
- currentMenuitem
-) {
- var newMenuitem, index;
-
- if (currentMenuitem === this.lastMenuitem[menuId]) {
- newMenuitem = this.firstMenuitem[menuId];
- } else {
- index = this.menuitemGroups[menuId].indexOf(currentMenuitem);
- newMenuitem = this.menuitemGroups[menuId][index + 1];
- }
- this.setFocusToMenuitem(menuId, newMenuitem);
-
- return newMenuitem;
-};
-
-MenubarEditor.prototype.setFocusByFirstCharacter = function (
- menuId,
- currentMenuitem,
- char
-) {
- var start, index;
-
- char = char.toLowerCase();
-
- // Get start index for search based on position of currentItem
- start = this.menuitemGroups[menuId].indexOf(currentMenuitem) + 1;
- if (start >= this.menuitemGroups[menuId].length) {
- start = 0;
- }
-
- // Check remaining slots in the menu
- index = this.getIndexFirstChars(menuId, start, char);
-
- // If not found in remaining slots, check from beginning
- if (index === -1) {
- index = this.getIndexFirstChars(menuId, 0, char);
- }
-
- // If match was found...
- if (index > -1) {
- this.setFocusToMenuitem(menuId, this.menuitemGroups[menuId][index]);
- }
-};
-
-// Utilities
-
-MenubarEditor.prototype.getIndexFirstChars = function (
- menuId,
- startIndex,
- char
-) {
- for (var i = startIndex; i < this.firstChars[menuId].length; i++) {
- if (char === this.firstChars[menuId][i]) {
- return i;
- }
- }
- return -1;
-};
-
-MenubarEditor.prototype.isPrintableCharacter = function (str) {
- return str.length === 1 && str.match(/\S/);
-};
-
-MenubarEditor.prototype.getIdFromAriaLabel = function (node) {
- var id = node.getAttribute('aria-label');
- if (id) {
- id = id.trim().toLowerCase().replace(' ', '-').replace('/', '-');
- }
- return id;
-};
-
-MenubarEditor.prototype.getMenuOrientation = function (node) {
- var orientation = node.getAttribute('aria-orientation');
-
- if (!orientation) {
- var role = node.getAttribute('role');
-
- switch (role) {
- case 'menubar':
- orientation = 'horizontal';
- break;
-
- case 'menu':
- orientation = 'vertical';
- break;
-
- default:
- break;
- }
- }
-
- return orientation;
-};
-
-MenubarEditor.prototype.getDataOption = function (node) {
- var option = false;
- var hasOption = node.hasAttribute('data-option');
- var role = node.hasAttribute('role');
-
- if (!hasOption) {
- while (node && !hasOption && role !== 'menu' && role !== 'menubar') {
- node = node.parentNode;
- if (node) {
- role = node.getAttribute('role');
- hasOption = node.hasAttribute('data-option');
- }
- }
- }
-
- if (node) {
- option = node.getAttribute('data-option');
- }
-
- return option;
-};
-
-MenubarEditor.prototype.getGroupId = function (node) {
- var id = false;
- var role = node.getAttribute('role');
-
- while (node && role !== 'group' && role !== 'menu' && role !== 'menubar') {
- node = node.parentNode;
- if (node) {
- role = node.getAttribute('role');
- }
- }
-
- if (node) {
- id = role + '-' + this.getIdFromAriaLabel(node);
- }
-
- return id;
-};
-
-MenubarEditor.prototype.getMenuId = function (node) {
- var id = false;
- var role = node.getAttribute('role');
-
- while (node && role !== 'menu' && role !== 'menubar') {
- node = node.parentNode;
- if (node) {
- role = node.getAttribute('role');
- }
- }
-
- if (node) {
- id = role + '-' + this.getIdFromAriaLabel(node);
- }
-
- return id;
-};
-
-MenubarEditor.prototype.getMenu = function (menuitem) {
- var id = false;
- var menu = menuitem;
- var role = menuitem.getAttribute('role');
-
- while (menu && role !== 'menu' && role !== 'menubar') {
- menu = menu.parentNode;
- if (menu) {
- role = menu.getAttribute('role');
- }
- }
-
- return menu;
-};
-
-MenubarEditor.prototype.toggleCheckbox = function (menuitem) {
- if (menuitem.getAttribute('aria-checked') === 'true') {
- menuitem.setAttribute('aria-checked', 'false');
- return false;
- }
- menuitem.setAttribute('aria-checked', 'true');
- return true;
-};
-
-MenubarEditor.prototype.setRadioButton = function (menuitem) {
- var groupId = this.getGroupId(menuitem);
- var radiogroupItems = this.menuitemGroups[groupId];
- radiogroupItems.forEach(function (item) {
- item.setAttribute('aria-checked', 'false');
- });
- menuitem.setAttribute('aria-checked', 'true');
- return menuitem.textContent;
-};
-
-MenubarEditor.prototype.updateFontSizeMenu = function (menuId) {
- var fontSizeMenuitems = this.menuitemGroups[menuId];
- var currentValue = this.actionManager.getFontSize();
-
- for (var i = 0; i < fontSizeMenuitems.length; i++) {
- var mi = fontSizeMenuitems[i];
- var dataOption = mi.getAttribute('data-option');
- var value = mi.textContent.trim().toLowerCase();
-
- switch (dataOption) {
- case 'font-smaller':
- if (currentValue === 'x-small') {
- mi.setAttribute('aria-disabled', 'true');
- } else {
- mi.removeAttribute('aria-disabled');
- }
- break;
-
- case 'font-larger':
- if (currentValue === 'x-large') {
- mi.setAttribute('aria-disabled', 'true');
- } else {
- mi.removeAttribute('aria-disabled');
- }
- break;
-
- default:
- if (currentValue === value) {
- mi.setAttribute('aria-checked', 'true');
- } else {
- mi.setAttribute('aria-checked', 'false');
- }
- break;
- }
- }
-};
-
-// Popup menu methods
-
-MenubarEditor.prototype.isAnyPopupOpen = function () {
- for (var i = 0; i < this.popups.length; i++) {
- if (this.popups[i].getAttribute('aria-expanded') === 'true') {
- return true;
- }
- }
- return false;
-};
-
-MenubarEditor.prototype.openPopup = function (menuitem) {
- // set aria-expanded attribute
- var popupMenu = menuitem.nextElementSibling;
-
- var rect = menuitem.getBoundingClientRect();
-
- // set CSS properties
- popupMenu.style.position = 'absolute';
- popupMenu.style.top = rect.height - 3 + 'px';
- popupMenu.style.left = '0px';
- popupMenu.style.zIndex = 100;
- popupMenu.style.display = 'block';
-
- menuitem.setAttribute('aria-expanded', 'true');
-
- return this.getMenuId(popupMenu);
-};
-
-MenubarEditor.prototype.closePopup = function (menuitem) {
- var menu, cmi;
-
- if (this.hasPopup(menuitem)) {
- if (this.isOpen(menuitem)) {
- menuitem.setAttribute('aria-expanded', 'false');
- menuitem.nextElementSibling.style.display = 'none';
- menuitem.nextElementSibling.style.zIndex = 0;
- }
- } else {
- menu = this.getMenu(menuitem);
- cmi = menu.previousElementSibling;
- cmi.setAttribute('aria-expanded', 'false');
- cmi.focus();
- menu.style.display = 'none';
- menu.style.zIndex = 0;
- }
- return cmi;
-};
-
-MenubarEditor.prototype.doesNotContain = function (popup, menuitem) {
- if (menuitem) {
- return !popup.nextElementSibling.contains(menuitem);
- }
- return true;
-};
-
-MenubarEditor.prototype.closePopupAll = function (menuitem) {
- if (typeof menuitem !== 'object') {
- menuitem = false;
- }
-
- for (var i = 0; i < this.popups.length; i++) {
- var popup = this.popups[i];
- if (this.isOpen(popup) && this.doesNotContain(popup, menuitem)) {
- this.closePopup(popup);
- }
- }
-};
-
-MenubarEditor.prototype.hasPopup = function (menuitem) {
- return menuitem.getAttribute('aria-haspopup') === 'true';
-};
-
-MenubarEditor.prototype.isOpen = function (menuitem) {
- return menuitem.getAttribute('aria-expanded') === 'true';
-};
-
-// Menu event handlers
-
-MenubarEditor.prototype.handleFocusin = function (event) {
- this.domNode.classList.add('focus');
-};
-
-MenubarEditor.prototype.handleFocusout = function (event) {
- this.domNode.classList.remove('focus');
-};
-
-MenubarEditor.prototype.handleBackgroundMousedown = function (event) {
- if (!this.menubarNode.contains(event.target)) {
- this.closePopupAll();
- }
-};
-
-MenubarEditor.prototype.handleKeydown = function (event) {
- var tgt = event.currentTarget,
- key = event.key,
- flag = false,
- menuId = this.getMenuId(tgt),
- id,
- popupMenuId,
- mi,
- role,
- option,
- value;
-
- switch (key) {
- case ' ':
- case 'Enter':
- if (this.hasPopup(tgt)) {
- popupMenuId = this.openPopup(tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- } else {
- role = tgt.getAttribute('role');
- option = this.getDataOption(tgt);
- switch (role) {
- case 'menuitem':
- this.actionManager.setOption(option, tgt.textContent);
- break;
-
- case 'menuitemcheckbox':
- value = this.toggleCheckbox(tgt);
- this.actionManager.setOption(option, value);
- break;
-
- case 'menuitemradio':
- value = this.setRadioButton(tgt);
- this.actionManager.setOption(option, value);
- break;
-
- default:
- break;
- }
-
- if (this.getMenuId(tgt) === 'menu-size') {
- this.updateFontSizeMenu('menu-size');
- }
- this.closePopup(tgt);
- }
- flag = true;
- break;
-
- case 'ArrowDown':
- case 'Down':
- if (this.menuOrientation[menuId] === 'vertical') {
- this.setFocusToNextMenuitem(menuId, tgt);
- flag = true;
- } else {
- if (this.hasPopup(tgt)) {
- popupMenuId = this.openPopup(tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- flag = true;
- }
- }
- break;
-
- case 'Esc':
- case 'Escape':
- this.closePopup(tgt);
- flag = true;
- break;
-
- case 'Left':
- case 'ArrowLeft':
- if (this.menuOrientation[menuId] === 'horizontal') {
- this.setFocusToPreviousMenuitem(menuId, tgt);
- flag = true;
- } else {
- mi = this.closePopup(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToPreviousMenuitem(id, mi);
- this.openPopup(mi);
- }
- break;
-
- case 'Right':
- case 'ArrowRight':
- if (this.menuOrientation[menuId] === 'horizontal') {
- this.setFocusToNextMenuitem(menuId, tgt);
- flag = true;
- } else {
- mi = this.closePopup(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToNextMenuitem(id, mi);
- this.openPopup(mi);
- }
- break;
-
- case 'Up':
- case 'ArrowUp':
- if (this.menuOrientation[menuId] === 'vertical') {
- this.setFocusToPreviousMenuitem(menuId, tgt);
- flag = true;
- } else {
- if (this.hasPopup(tgt)) {
- popupMenuId = this.openPopup(tgt);
- this.setFocusToLastMenuitem(popupMenuId);
- flag = true;
- }
- }
- break;
-
- case 'Home':
- case 'PageUp':
- this.setFocusToFirstMenuitem(menuId, tgt);
- flag = true;
- break;
-
- case 'End':
- case 'PageDown':
- this.setFocusToLastMenuitem(menuId, tgt);
- flag = true;
- break;
-
- case 'Tab':
- this.closePopup(tgt);
- break;
-
- default:
- if (this.isPrintableCharacter(key)) {
- this.setFocusByFirstCharacter(menuId, tgt, key);
- flag = true;
- }
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-MenubarEditor.prototype.handleMenuitemClick = function (event) {
- var tgt = event.currentTarget;
- var value;
-
- if (this.hasPopup(tgt)) {
- if (this.isOpen(tgt)) {
- this.closePopup(tgt);
- } else {
- var menuId = this.openPopup(tgt);
- this.setFocusToMenuitem(menuId, tgt);
- }
- } else {
- var role = tgt.getAttribute('role');
- var option = this.getDataOption(tgt);
- switch (role) {
- case 'menuitem':
- this.actionManager.setOption(option, tgt.textContent);
- break;
-
- case 'menuitemcheckbox':
- value = this.toggleCheckbox(tgt);
- this.actionManager.setOption(option, value);
- break;
-
- case 'menuitemradio':
- value = this.setRadioButton(tgt);
- this.actionManager.setOption(option, value);
- break;
-
- default:
- break;
- }
-
- if (this.getMenuId(tgt) === 'menu-size') {
- this.updateFontSizeMenu('menu-size');
- }
- this.closePopup(tgt);
- }
-
- event.stopPropagation();
- event.preventDefault();
-};
-
-MenubarEditor.prototype.handleMenuitemMouseover = function (event) {
- var tgt = event.currentTarget;
-
- if (this.isAnyPopupOpen() && this.getMenu(tgt)) {
- this.setFocusToMenuitem(this.getMenu(tgt), tgt);
- }
-};
-
-// Initialize menubar editor
-
-window.addEventListener('load', function () {
- var menubarEditors = document.querySelectorAll('.menubar-editor');
- for (var i = 0; i < menubarEditors.length; i++) {
- var menubarEditor = new MenubarEditor(menubarEditors[i]);
- }
-});
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/js/menubar-navigation.js b/build/tests/menubar-editor/reference/2020-11-19_152059/js/menubar-navigation.js
deleted file mode 100644
index ebb2dee4d..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/js/menubar-navigation.js
+++ /dev/null
@@ -1,630 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: menubar-navigation.js
- *
- * Desc: Creates a menubar of hierarchical set of links
- */
-
-'use strict';
-
-var MenubarNavigation = function (domNode) {
- this.domNode = domNode;
-
- this.popups = [];
- this.menuitemGroups = {};
- this.menuOrientation = {};
- this.isPopup = {};
- this.isPopout = {};
- this.openPopups = false;
-
- this.firstChars = {}; // see Menubar init method
- this.firstMenuitem = {}; // see Menubar init method
- this.lastMenuitem = {}; // see Menubar init method
-
- this.initMenu(domNode, 0);
-
- domNode.addEventListener('focusin', this.handleMenubarFocusin.bind(this));
- domNode.addEventListener('focusout', this.handleMenubarFocusout.bind(this));
-
- window.addEventListener(
- 'mousedown',
- this.handleBackgroundMousedown.bind(this),
- true
- );
-};
-
-MenubarNavigation.prototype.getMenuitems = function (domNode, depth) {
- var nodes = [];
-
- var initMenu = this.initMenu.bind(this);
- var menuitemGroups = this.menuitemGroups;
- var popups = this.popups;
-
- function findMenuitems(node) {
- var role, flag;
-
- while (node) {
- flag = true;
- role = node.getAttribute('role');
-
- if (role) {
- role = role.trim().toLowerCase();
- }
-
- switch (role) {
- case 'menu':
- node.tabIndex = -1;
- initMenu(node, depth + 1);
- flag = false;
- break;
-
- case 'menuitem':
- if (node.getAttribute('aria-haspopup') === 'true') {
- popups.push(node);
- }
- nodes.push(node);
- break;
-
- default:
- break;
- }
-
- if (
- flag &&
- node.firstElementChild &&
- node.firstElementChild.tagName !== 'svg'
- ) {
- findMenuitems(node.firstElementChild);
- }
-
- node = node.nextElementSibling;
- }
- }
-
- findMenuitems(domNode.firstElementChild);
-
- return nodes;
-};
-
-MenubarNavigation.prototype.initMenu = function (menu, depth) {
- var menuitems, menuitem, role, nextElement;
-
- var menuId = this.getMenuId(menu);
-
- menuitems = this.getMenuitems(menu, depth);
- this.menuOrientation[menuId] = this.getMenuOrientation(menu);
-
- this.isPopup[menuId] = menu.getAttribute('role') === 'menu' && depth === 1;
- this.isPopout[menuId] = menu.getAttribute('role') === 'menu' && depth > 1;
-
- this.menuitemGroups[menuId] = [];
- this.firstChars[menuId] = [];
- this.firstMenuitem[menuId] = null;
- this.lastMenuitem[menuId] = null;
-
- for (var i = 0; i < menuitems.length; i++) {
- menuitem = menuitems[i];
- role = menuitem.getAttribute('role');
-
- if (role.indexOf('menuitem') < 0) {
- continue;
- }
-
- menuitem.tabIndex = -1;
- this.menuitemGroups[menuId].push(menuitem);
- this.firstChars[menuId].push(menuitem.textContent.trim().toLowerCase()[0]);
-
- menuitem.addEventListener('keydown', this.handleKeydown.bind(this));
- menuitem.addEventListener('click', this.handleMenuitemClick.bind(this));
-
- menuitem.addEventListener(
- 'mouseover',
- this.handleMenuitemMouseover.bind(this)
- );
-
- if (!this.firstMenuitem[menuId]) {
- if (this.hasPopup(menuitem)) {
- menuitem.tabIndex = 0;
- }
- this.firstMenuitem[menuId] = menuitem;
- }
- this.lastMenuitem[menuId] = menuitem;
- }
-};
-
-MenubarNavigation.prototype.setFocusToMenuitem = function (
- menuId,
- newMenuitem
-) {
- this.closePopupAll(newMenuitem);
-
- if (this.menuitemGroups[menuId]) {
- this.menuitemGroups[menuId].forEach(function (item) {
- if (item === newMenuitem) {
- item.tabIndex = 0;
- newMenuitem.focus();
- } else {
- item.tabIndex = -1;
- }
- });
- }
-};
-
-MenubarNavigation.prototype.setFocusToFirstMenuitem = function (
- menuId,
- currentMenuitem
-) {
- this.setFocusToMenuitem(menuId, this.firstMenuitem[menuId]);
-};
-
-MenubarNavigation.prototype.setFocusToLastMenuitem = function (
- menuId,
- currentMenuitem
-) {
- this.setFocusToMenuitem(menuId, this.lastMenuitem[menuId]);
-};
-
-MenubarNavigation.prototype.setFocusToPreviousMenuitem = function (
- menuId,
- currentMenuitem
-) {
- var newMenuitem, index;
-
- if (currentMenuitem === this.firstMenuitem[menuId]) {
- newMenuitem = this.lastMenuitem[menuId];
- } else {
- index = this.menuitemGroups[menuId].indexOf(currentMenuitem);
- newMenuitem = this.menuitemGroups[menuId][index - 1];
- }
-
- this.setFocusToMenuitem(menuId, newMenuitem);
-
- return newMenuitem;
-};
-
-MenubarNavigation.prototype.setFocusToNextMenuitem = function (
- menuId,
- currentMenuitem
-) {
- var newMenuitem, index;
-
- if (currentMenuitem === this.lastMenuitem[menuId]) {
- newMenuitem = this.firstMenuitem[menuId];
- } else {
- index = this.menuitemGroups[menuId].indexOf(currentMenuitem);
- newMenuitem = this.menuitemGroups[menuId][index + 1];
- }
- this.setFocusToMenuitem(menuId, newMenuitem);
-
- return newMenuitem;
-};
-
-MenubarNavigation.prototype.setFocusByFirstCharacter = function (
- menuId,
- currentMenuitem,
- char
-) {
- var start, index;
-
- char = char.toLowerCase();
-
- // Get start index for search based on position of currentItem
- start = this.menuitemGroups[menuId].indexOf(currentMenuitem) + 1;
- if (start >= this.menuitemGroups[menuId].length) {
- start = 0;
- }
-
- // Check remaining slots in the menu
- index = this.getIndexFirstChars(menuId, start, char);
-
- // If not found in remaining slots, check from beginning
- if (index === -1) {
- index = this.getIndexFirstChars(menuId, 0, char);
- }
-
- // If match was found...
- if (index > -1) {
- this.setFocusToMenuitem(menuId, this.menuitemGroups[menuId][index]);
- }
-};
-
-// Utilities
-
-MenubarNavigation.prototype.getIndexFirstChars = function (
- menuId,
- startIndex,
- char
-) {
- for (var i = startIndex; i < this.firstChars[menuId].length; i++) {
- if (char === this.firstChars[menuId][i]) {
- return i;
- }
- }
- return -1;
-};
-
-MenubarNavigation.prototype.isPrintableCharacter = function (str) {
- return str.length === 1 && str.match(/\S/);
-};
-
-MenubarNavigation.prototype.getIdFromAriaLabel = function (node) {
- var id = node.getAttribute('aria-label');
- if (id) {
- id = id.trim().toLowerCase().replace(' ', '-').replace('/', '-');
- }
- return id;
-};
-
-MenubarNavigation.prototype.getMenuOrientation = function (node) {
- var orientation = node.getAttribute('aria-orientation');
-
- if (!orientation) {
- var role = node.getAttribute('role');
-
- switch (role) {
- case 'menubar':
- orientation = 'horizontal';
- break;
-
- case 'menu':
- orientation = 'vertical';
- break;
-
- default:
- break;
- }
- }
-
- return orientation;
-};
-
-MenubarNavigation.prototype.getMenuId = function (node) {
- var id = false;
- var role = node.getAttribute('role');
-
- while (node && role !== 'menu' && role !== 'menubar') {
- node = node.parentNode;
- if (node) {
- role = node.getAttribute('role');
- }
- }
-
- if (node) {
- id = role + '-' + this.getIdFromAriaLabel(node);
- }
-
- return id;
-};
-
-MenubarNavigation.prototype.getMenu = function (menuitem) {
- var id = false;
- var menu = menuitem;
- var role = menuitem.getAttribute('role');
-
- while (menu && role !== 'menu' && role !== 'menubar') {
- menu = menu.parentNode;
- if (menu) {
- role = menu.getAttribute('role');
- }
- }
-
- return menu;
-};
-
-// Popup menu methods
-
-MenubarNavigation.prototype.isAnyPopupOpen = function () {
- for (var i = 0; i < this.popups.length; i++) {
- if (this.popups[i].getAttribute('aria-expanded') === 'true') {
- return true;
- }
- }
- return false;
-};
-
-MenubarNavigation.prototype.openPopup = function (menuId, menuitem) {
- // set aria-expanded attribute
- var popupMenu = menuitem.nextElementSibling;
-
- var rect = menuitem.getBoundingClientRect();
-
- // Set CSS properties
- if (this.isPopup[menuId]) {
- popupMenu.parentNode.style.position = 'relative';
- popupMenu.style.display = 'block';
- popupMenu.style.position = 'absolute';
- popupMenu.style.left = rect.width + 6 + 'px';
- popupMenu.style.top = '0px';
- popupMenu.style.zIndex = 100;
- } else {
- popupMenu.style.display = 'block';
- popupMenu.style.position = 'absolute';
- popupMenu.style.left = '0px';
- popupMenu.style.top = rect.height + 8 + 'px';
- popupMenu.style.zIndex = 100;
- }
-
- menuitem.setAttribute('aria-expanded', 'true');
-
- return this.getMenuId(popupMenu);
-};
-
-MenubarNavigation.prototype.closePopout = function (menuitem) {
- var menu,
- menuId = this.getMenuId(menuitem),
- cmi = menuitem;
-
- while (this.isPopup[menuId] || this.isPopout[menuId]) {
- menu = this.getMenu(cmi);
- cmi = menu.previousElementSibling;
- menuId = this.getMenuId(cmi);
- cmi.setAttribute('aria-expanded', 'false');
- menu.style.display = 'none';
- }
- cmi.focus();
- return cmi;
-};
-
-MenubarNavigation.prototype.closePopup = function (menuitem) {
- var menu,
- menuId = this.getMenuId(menuitem),
- cmi = menuitem;
-
- if (this.isMenubar(menuId)) {
- if (this.isOpen(menuitem)) {
- menuitem.setAttribute('aria-expanded', 'false');
- menuitem.nextElementSibling.style.display = 'none';
- }
- } else {
- menu = this.getMenu(menuitem);
- cmi = menu.previousElementSibling;
- cmi.setAttribute('aria-expanded', 'false');
- cmi.focus();
- menu.style.display = 'none';
- }
-
- return cmi;
-};
-
-MenubarNavigation.prototype.doesNotContain = function (popup, menuitem) {
- if (menuitem) {
- return !popup.nextElementSibling.contains(menuitem);
- }
- return true;
-};
-
-MenubarNavigation.prototype.closePopupAll = function (menuitem) {
- if (typeof menuitem !== 'object') {
- menuitem = false;
- }
- for (var i = 0; i < this.popups.length; i++) {
- var popup = this.popups[i];
- if (this.doesNotContain(popup, menuitem) && this.isOpen(popup)) {
- var cmi = popup.nextElementSibling;
- if (cmi) {
- popup.setAttribute('aria-expanded', 'false');
- cmi.style.display = 'none';
- }
- }
- }
-};
-
-MenubarNavigation.prototype.hasPopup = function (menuitem) {
- return menuitem.getAttribute('aria-haspopup') === 'true';
-};
-
-MenubarNavigation.prototype.isOpen = function (menuitem) {
- return menuitem.getAttribute('aria-expanded') === 'true';
-};
-
-MenubarNavigation.prototype.isMenubar = function (menuId) {
- return !this.isPopup[menuId] && !this.isPopout[menuId];
-};
-
-MenubarNavigation.prototype.isMenuHorizontal = function (menuitem) {
- return this.menuOrientation[menuitem] === 'horizontal';
-};
-
-MenubarNavigation.prototype.hasFocus = function () {
- return this.domNode.classList.contains('focus');
-};
-
-// Menu event handlers
-
-MenubarNavigation.prototype.handleMenubarFocusin = function (event) {
- // if the menubar or any of its menus has focus, add styling hook for hover
- this.domNode.classList.add('focus');
-};
-
-MenubarNavigation.prototype.handleMenubarFocusout = function (event) {
- // remove styling hook for hover on menubar item
- this.domNode.classList.remove('focus');
-};
-
-MenubarNavigation.prototype.handleKeydown = function (event) {
- var tgt = event.currentTarget,
- key = event.key,
- flag = false,
- menuId = this.getMenuId(tgt),
- id,
- popupMenuId,
- mi,
- role,
- option,
- value;
-
- var isAnyPopupOpen = this.isAnyPopupOpen();
-
- switch (key) {
- case ' ':
- case 'Enter':
- if (this.hasPopup(tgt)) {
- this.openPopups = true;
- popupMenuId = this.openPopup(menuId, tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- } else {
- if (tgt.href !== '#') {
- this.closePopupAll();
- window.location.href = tgt.href;
- }
- }
- flag = true;
- break;
-
- case 'Esc':
- case 'Escape':
- this.openPopups = false;
- this.closePopup(tgt);
- flag = true;
- break;
-
- case 'Up':
- case 'ArrowUp':
- if (this.isMenuHorizontal(menuId)) {
- if (this.hasPopup(tgt)) {
- this.openPopups = true;
- popupMenuId = this.openPopup(menuId, tgt);
- this.setFocusToLastMenuitem(popupMenuId);
- }
- } else {
- this.setFocusToPreviousMenuitem(menuId, tgt);
- }
- flag = true;
- break;
-
- case 'ArrowDown':
- case 'Down':
- if (this.isMenuHorizontal(menuId)) {
- if (this.hasPopup(tgt)) {
- this.openPopups = true;
- popupMenuId = this.openPopup(menuId, tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- }
- } else {
- this.setFocusToNextMenuitem(menuId, tgt);
- }
- flag = true;
- break;
-
- case 'Left':
- case 'ArrowLeft':
- if (this.isMenuHorizontal(menuId)) {
- mi = this.setFocusToPreviousMenuitem(menuId, tgt);
- if (isAnyPopupOpen) {
- this.openPopup(menuId, mi);
- }
- } else {
- if (this.isPopout[menuId]) {
- mi = this.closePopup(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToMenuitem(id, mi);
- } else {
- mi = this.closePopup(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToPreviousMenuitem(id, mi);
- this.openPopup(id, mi);
- }
- }
- flag = true;
- break;
-
- case 'Right':
- case 'ArrowRight':
- if (this.isMenuHorizontal(menuId)) {
- mi = this.setFocusToNextMenuitem(menuId, tgt);
- if (isAnyPopupOpen) {
- this.openPopup(menuId, mi);
- }
- } else {
- if (this.hasPopup(tgt)) {
- popupMenuId = this.openPopup(menuId, tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- } else {
- mi = this.closePopout(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToNextMenuitem(id, mi);
- this.openPopup(id, mi);
- }
- }
- flag = true;
- break;
-
- case 'Home':
- case 'PageUp':
- this.setFocusToFirstMenuitem(menuId, tgt);
- flag = true;
- break;
-
- case 'End':
- case 'PageDown':
- this.setFocusToLastMenuitem(menuId, tgt);
- flag = true;
- break;
-
- case 'Tab':
- this.openPopups = false;
- this.closePopup(tgt);
- break;
-
- default:
- if (this.isPrintableCharacter(key)) {
- this.setFocusByFirstCharacter(menuId, tgt, key);
- flag = true;
- }
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-MenubarNavigation.prototype.handleMenuitemClick = function (event) {
- var tgt = event.currentTarget;
- var menuId = this.getMenuId(tgt);
-
- if (this.hasPopup(tgt)) {
- if (this.isOpen(tgt)) {
- this.closePopup(tgt);
- } else {
- this.closePopupAll(tgt);
- this.openPopup(menuId, tgt);
- }
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-MenubarNavigation.prototype.handleMenuitemMouseover = function (event) {
- var tgt = event.currentTarget;
- var menuId = this.getMenuId(tgt);
-
- if (this.hasFocus()) {
- this.setFocusToMenuitem(menuId, tgt);
- }
-
- if (this.isAnyPopupOpen() || this.hasFocus()) {
- this.closePopupAll(tgt);
- if (this.hasPopup(tgt)) {
- this.openPopup(menuId, tgt);
- }
- }
-};
-
-MenubarNavigation.prototype.handleBackgroundMousedown = function (event) {
- if (!this.domNode.contains(event.target)) {
- this.closePopupAll();
- }
-};
-
-// Initialize menubar editor
-
-window.addEventListener('load', function () {
- var menubarNavs = document.querySelectorAll('.menubar-navigation');
- for (var i = 0; i < menubarNavs.length; i++) {
- var menubarNav = new MenubarNavigation(menubarNavs[i]);
- }
-});
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/js/style-manager.js b/build/tests/menubar-editor/reference/2020-11-19_152059/js/style-manager.js
deleted file mode 100644
index 06e35d7c4..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/js/style-manager.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: TextStyling.js
- *
- * Desc: Styling functions for changing the style of an item
- */
-
-'use strict';
-
-var StyleManager = function (node) {
- this.node = node;
- this.fontSize = 'medium';
-};
-
-StyleManager.prototype.setFontFamily = function (value) {
- this.node.style.fontFamily = value;
-};
-
-StyleManager.prototype.setTextDecoration = function (value) {
- this.node.style.textDecoration = value;
-};
-
-StyleManager.prototype.setTextAlign = function (value) {
- this.node.style.textAlign = value;
-};
-
-StyleManager.prototype.setFontSize = function (value) {
- this.fontSize = value;
- this.node.style.fontSize = value;
-};
-
-StyleManager.prototype.setColor = function (value) {
- this.node.style.color = value;
-};
-
-StyleManager.prototype.setBold = function (flag) {
- if (flag) {
- this.node.style.fontWeight = 'bold';
- } else {
- this.node.style.fontWeight = 'normal';
- }
-};
-
-StyleManager.prototype.setItalic = function (flag) {
- if (flag) {
- this.node.style.fontStyle = 'italic';
- } else {
- this.node.style.fontStyle = 'normal';
- }
-};
-
-StyleManager.prototype.fontSmaller = function () {
- switch (this.fontSize) {
- case 'small':
- this.setFontSize('x-small');
- break;
-
- case 'medium':
- this.setFontSize('small');
- break;
-
- case 'large':
- this.setFontSize('medium');
- break;
-
- case 'x-large':
- this.setFontSize('large');
- break;
-
- default:
- break;
- } // end switch
-};
-
-StyleManager.prototype.fontLarger = function () {
- switch (this.fontSize) {
- case 'x-small':
- this.setFontSize('small');
- break;
-
- case 'small':
- this.setFontSize('medium');
- break;
-
- case 'medium':
- this.setFontSize('large');
- break;
-
- case 'large':
- this.setFontSize('x-large');
- break;
-
- default:
- break;
- } // end switch
-};
-
-StyleManager.prototype.isMinFontSize = function () {
- return this.fontSize === 'x-small';
-};
-
-StyleManager.prototype.isMaxFontSize = function () {
- return this.fontSize === 'x-large';
-};
-
-StyleManager.prototype.getFontSize = function () {
- return this.fontSize;
-};
-
-StyleManager.prototype.setOption = function (option, value) {
- option = option.toLowerCase();
- if (typeof value === 'string') {
- value = value.toLowerCase();
- }
-
- switch (option) {
- case 'font-bold':
- this.setBold(value);
- break;
-
- case 'font-color':
- this.setColor(value);
- break;
-
- case 'font-family':
- this.setFontFamily(value);
- break;
-
- case 'font-smaller':
- this.fontSmaller();
- break;
-
- case 'font-larger':
- this.fontLarger();
- break;
-
- case 'font-size':
- this.setFontSize(value);
- break;
-
- case 'font-italic':
- this.setItalic(value);
- break;
-
- case 'text-align':
- this.setTextAlign(value);
- break;
-
- case 'text-decoration':
- this.setTextDecoration(value);
- break;
-
- default:
- break;
- } // end switch
-};
diff --git a/build/tests/menubar-editor/reference/2020-11-19_152059/menubar-editor.html b/build/tests/menubar-editor/reference/2020-11-19_152059/menubar-editor.html
deleted file mode 100644
index 8f65589a1..000000000
--- a/build/tests/menubar-editor/reference/2020-11-19_152059/menubar-editor.html
+++ /dev/null
@@ -1,822 +0,0 @@
-
-
-
-
- Editor Menubar Example | WAI-ARIA Authoring Practices 1.2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Editor Menubar Example
-
- The following example demonstrates using the
- menubar design pattern
- to provide access to sets of actions.
- Each item in the below menubar identifies a category of text formatting actions that can be executed from its submenu.
- The submenus also demonstrate menuitemradio
and menuitemcheckbox
elements.
-
- Similar examples include:
-
-
-
-
-
- Accessibility Features
-
- Users of assistive technologies can identify which format settings are selected because they are represented by menu item radio and menu item checkbox elements that have a checked state.
- Disabled menu items are demonstrated in the font size menu, which includes two disabled menuitems.
- To help communicate that the arrow keys are available for directional navigation within the menubar and its submenus, a border is added to the menubar container when focus is within the menubar.
- To support operating system high contrast settings, focus is highlighted by adding and removing a border around the menu item with focus.
- The down arrow and checked icons are made compatible with operating system high contrast settings and hidden from screen readers by using the CSS content
property to render images.
-
- Like desktop menubars, submenus open on mouse hover over a parent item in the menubar only if another submenu is already open.
- That is, if all submenus are closed, a click on a parent menu item is required to display a submenu.
- Minimizing automatic popups makes exploring with a screen magnifier easier.
-
-
- In general, moving focus in response to mouse hover is avoided in accessible widgets; it causes unexpected context changes for keyboard users.
- However, like desktop menubars, there are two conditions in this example menubar where focus moves in response to hover in order to help maintain context for users who use both keyboard and mouse:
-
- After a parent menu item in the menubar has been activated and the user hovers over a different parent item in the menubar, focus will follow hover.
- When a submenu is open and the user hovers over an item in the submenu, focus follows hover.
-
-
-
-
-
-
- Keyboard Support
- Menubar
-
-
-
- Key
- Function
-
-
-
-
-
- Space Enter
-
- Opens submenu and moves focus to first item in the submenu.
-
-
-
- Escape
-
-
- If a submenu is open, closes it. Otherwise, does nothing.
-
-
-
-
- Right Arrow
-
-
-
- Moves focus to the next item in the menubar.
- If focus is on the last item, moves focus to the first item.
-
-
-
-
-
- Left Arrow
-
-
-
- Moves focus to the previous item in the menubar.
- If focus is on the first item, moves focus to the last item.
-
-
-
-
-
- Down Arrow
-
- Opens submenu and moves focus to first item in the submenu.
-
-
-
- Up Arrow
-
- Opens submenu and moves focus to last item in the submenu.
-
-
-
- Home
-
- Moves focus to first item in the menubar.
-
-
-
- End
-
- Moves focus to last item in the menubar.
-
-
-
- Character
-
-
-
- Moves focus to next item in the menubar having a name that starts with the typed character.
- If none of the items have a name starting with the typed character, focus does not move.
-
-
-
-
-
-
- Submenu
-
-
-
- Key
- Function
-
-
-
-
-
- Space Enter
-
- Activates menu item, causing action to be executed, e.g., bold text, change font.
-
-
-
- Escape
-
-
-
- Closes submenu.
- Moves focus to parent menubar item.
-
-
-
-
-
- Right Arrow
-
-
-
- Closes submenu.
- Moves focus to next item in the menubar.
- Opens submenu of newly focused menubar item, keeping focus on that parent menubar item.
-
-
-
-
-
- Left Arrow
-
-
-
- Closes submenu.
- Moves focus to previous item in the menubar.
- Opens submenu of newly focused menubar item, keeping focus on that parent menubar item.
-
-
-
-
-
- Down Arrow
-
-
-
- Moves focus to the next item in the submenu.
- If focus is on the last item, moves focus to the first item.
-
-
-
-
-
- Up Arrow
-
-
-
- Moves focus to previous item in the submenu.
- If focus is on the first item, moves focus to the last item.
-
-
-
-
-
- Home
-
- Moves focus to the first item in the submenu.
-
-
-
- End
-
- Moves focus to the last item in the submenu.
-
-
-
- Character
-
-
-
- Moves focus to the next item having a name that starts with the typed character.
- If none of the items have a name starting with the typed character, focus does not move.
-
-
-
-
-
-
-
-
- Role, Property, State, and Tabindex Attributes
- Menubar
-
-
-
- Role
- Attribute
- Element
- Usage
-
-
-
-
-
- menubar
-
-
-
- ul
-
-
-
- Identifies the element as a menubar
container for a set of menuitem
elements.
- Is not focusable because focus is managed using roving tabindex.
-
-
-
-
-
-
- aria-label="string "
-
-
-
- ul
-
-
-
-
- Defines an accessible name for the menubar
.
-
- Helps assistive technology users understand the purpose of the menubar and
- distinguish it from any other menubars or similar elements on the page.
-
-
-
-
-
- menuitem
-
-
-
- span
-
-
-
- Identifies the element as a menu item within the menubar.
- Accessible name comes from the text content.
-
-
-
-
-
-
- tabindex="-1"
-
-
- span
-
-
- Makes the menuitem
element keyboard focusable but
- not part of the Tab sequence of the page.
-
-
-
-
-
- tabindex="0"
-
-
- span
-
-
-
-
- Makes the menuitem
element keyboard focusable and
- part of the tab sequence of the page.
-
-
- Only one menuitem
in the menubar
has tabindex="0"
.
-
-
- When the page loads, the first item in the menubar has tabindex="0"
.
-
-
- Focus is managed using roving tabindex .
-
-
-
-
-
-
-
- aria-haspopup="true"
-
-
- span
-
-
- Indicates that the menuitem
has a submenu.
-
-
-
-
-
- aria-expanded="true"
-
-
- span
-
- Indicates the menu is open.
-
-
-
-
- aria-expanded="false"
-
-
- span
-
- Indicates the submenu is closed.
-
-
-
- Submenu
-
-
-
- Role
- Attribute
- Element
- Usage
-
-
-
-
-
- menu
-
-
-
- ul
-
-
-
- Identifies the element as a menu container for a set of menu items.
- Is not focusable because focus is managed using roving tabindex.
-
-
-
-
-
-
- aria-label="string "
-
-
- ul
-
-
- Defines an accessible name for the menu
.
-
-
-
-
- menuitem
-
-
-
- li
-
-
-
- Identifies the element as an item in the submenu.
- Accessible name comes from the text content.
-
-
-
-
-
-
- tabindex="-1"
-
-
- li
-
-
- Makes the item focusable but not part of the page tab sequence.
-
-
-
-
-
- aria-disabled="false"
-
-
- li
-
-
- Used on the font size "Smaller" and "Larger" options to indicate they are active.
-
-
-
-
-
- aria-disabled="true"
-
-
- li
-
-
- Used on the font size "Smaller" and "Larger" options to indicate one of the options is not active because the largest or smallest font has been selected.
-
-
-
-
- menuitemcheckbox
-
-
-
- li
-
-
-
- Identifies the element as a menuitemcheckbox
.
- Accessible name comes from the text content.
-
-
-
-
-
-
- tabindex="-1"
-
-
- li
-
-
- Makes the menuitemcheckbox focusable but not part of the page tab sequence.
-
-
-
-
-
- aria-checked="true"
-
-
- li
-
-
-
-
- Indicates that the menuitemcheckbox
is checked.
-
-
- The visual appearance of the selected state is synchronized with the aria-checked
value using CSS attribute selectors.
-
-
-
-
-
-
-
- aria-checked="false"
-
-
- li
-
-
-
-
- Indicates that the menuitemcheckbox
is NOT checked.
-
-
- The visual appearance of the selected state is synchronized with the aria-checked
value using CSS attribute selectors.
-
-
-
-
-
-
- separator
-
-
-
- li
-
-
-
- Identifies the element as a visual separator between groups of items within a menu, such as groups of menuitemradio
or menuitemcheckbox
elements.
- Is not focusable but may be perceivable by a screen reader user when using a reading cursor that does not depend on focus.
-
-
-
-
-
- group
-
-
-
- ul
-
-
-
-
- Identifies the element as a container for a set of menuitemradio
elements.
-
-
- Enables browsers to compute values of aria-setsize
and aria-posinset
.
-
-
-
-
-
-
-
- aria-label="string"
-
-
- ul
-
-
- Provides an accessible name for the group of menu items.
-
-
-
-
- menuitemradio
-
-
-
- li
-
-
-
-
- Identifies the element as a menuitemradio
element.
-
-
- When all items in a submenu are members of the same radio group,
- the group is defined by the menu
element; a group
element is not necessary.
-
-
- Accessible name is computed from the text content.
-
-
-
-
-
-
-
- tabindex="-1"
-
-
- li
-
-
- Makes the menuitemradio focusable but not part of the page tab sequence.
-
-
-
-
-
- aria-checked="true"
-
-
- li
-
-
-
-
- Indicates the menuitemradio
is checked.
-
-
- The visual appearance of the selected state is synchronized with the aria-checked
value using CSS attribute selectors.
-
-
-
-
-
-
-
- aria-checked="false"
-
-
- li
-
-
-
-
- Indicates that the menuitemradio
is NOT checked.
-
-
- The visual appearance of the selected state is synchronized with the aria-checked
value using CSS attribute selectors.
-
-
-
-
-
-
- Textarea
-
-
-
- Role
- Attribute
- Element
- Usage
-
-
-
-
-
-
- aria-label="string "
-
-
- textarea
-
-
- Defines an accessible name for the textarea
.
-
-
-
-
-
-
-
- Javascript and CSS Source Code
-
-
-
-
- HTML Source Code
-
-
-
-
-
-
-
-
-
- Menu or Menubar Design Pattern in WAI-ARIA Authoring Practices 1.2
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/css/menubar-editor.css b/build/tests/menubar-editor/reference/2020-11-20_13316/css/menubar-editor.css
deleted file mode 100644
index 72a3f573c..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/css/menubar-editor.css
+++ /dev/null
@@ -1,200 +0,0 @@
-.menubar-editor {
- margin: 0;
- padding: 2px;
- width: 560px;
-}
-
-.menubar-editor.focus {
- padding: 0;
- border: solid 2px #034575;
-}
-
-.menubar-editor textarea {
- padding: 4px;
- margin: 0;
- border: 2px solid #eee;
- height: 400px;
- width: 548px;
- font-size: medium;
- font-family: sans-serif;
-}
-
-.menubar-editor [role="menubar"] {
- margin: 0;
- padding: 2px;
- border: 2px solid #eee;
- font-size: 110%;
- list-style: none;
- background-color: #eee;
- height: 32px;
- display: block;
-}
-
-.menubar-editor [role="menubar"] li {
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
-.menubar-editor [role="menubar"] > li {
- display: inline-block;
- position: relative;
- top: 3px;
- left: 1px;
-}
-
-.menubar-editor [role="menubar"] > li > [role="menuitem"]::after {
- content: url("../images/down-arrow.svg");
- padding-left: 0.25em;
-}
-
-.menubar-editor [role="menubar"] > li > [role="menuitem"]:focus::after {
- content: url("../images/down-arrow-focus.svg");
-}
-
-.menubar-editor
- [role="menubar"]
- > li
- > [role="menuitem"][aria-expanded="true"]::after {
- content: url("../images/up-arrow-focus.svg");
-}
-
-.menubar-editor [role="menubar"] [role="menu"] {
- display: none;
- margin: 0;
- padding: 2px;
- position: absolute;
- border: 2px solid #034575;
- background-color: #eee;
-}
-
-.menubar-editor [role="menubar"] [role="group"] {
- margin: 0;
- padding: 0;
-}
-
-.menubar-editor [role="menubar"] [role="menuitem"][aria-disabled="true"] {
- color: #666;
- text-decoration: line-through;
-}
-
-.menubar-editor [role="menubar"] [role="menuitem"],
-.menubar-editor [role="menubar"] [role="menuitemcheckbox"],
-.menubar-editor [role="menubar"] [role="menuitemradio"],
-.menubar-editor [role="menubar"] [role="separator"] {
- padding: 6px;
- background-color: #eee;
- border: 0 solid #eee;
- color: black;
-}
-
-.menubar-editor [role="menubar"] [role="menuitem"][aria-expanded="true"] {
- padding: 4px;
- border: 2px solid #034575;
- background-color: #034575;
- color: #fff;
- outline: none;
-}
-
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitem"],
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitemcheckbox"],
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitemradio"],
-.menubar-editor [role="menubar"] [role="menu"] [role="separator"] {
- padding-left: 27px;
- width: 8em;
-}
-
-.menubar-editor [role="menubar"] [role="separator"] {
- padding-top: 3px;
- background-image: url("../images/separator.svg");
- background-position: center;
- background-repeat: repeat-x;
-}
-
-.menubar-editor [role="menubar"] [role="menu"] [aria-checked="true"] {
- padding: 6px;
- padding-left: 8px;
- padding-right: 18px;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menuitemradio"][aria-checked="true"]::before {
- content: url("../images/radio-checked.svg");
- padding-right: 3px;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menuitemcheckbox"][aria-checked="true"]::before {
- content: url("../images/checkbox-checked.svg");
- padding-right: 3px;
-}
-
-/* focus and hover styling */
-
-.menubar-editor [role="menubar"] [role="menuitem"]:focus,
-.menubar-editor [role="menubar"] [role="menuitemcheckbox"]:focus,
-.menubar-editor [role="menubar"] [role="menuitemradio"]:focus {
- padding: 4px;
- border: 2px solid #034575;
- background-color: #034575;
- color: #fff;
- outline: none;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menuitemradio"][aria-checked="true"]:focus::before {
- content: url("../images/radio-checked-focus.svg");
- padding-right: 3px;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menuitemcheckbox"][aria-checked="true"]:focus::before {
- content: url("../images/checkbox-checked-focus.svg");
- padding-right: 3px;
-}
-
-.menubar-editor [role="menubar"] [role="menuitem"]:hover {
- padding: 4px;
- border: 2px solid #034575;
-}
-
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitem"]:focus,
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitemcheckbox"]:focus,
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitemradio"]:focus {
- padding-left: 25px;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menu"]
- [role="menuitem"][aria-checked="true"]:focus,
-.menubar-editor
- [role="menubar"]
- [role="menu"]
- [role="menuitemcheckbox"][aria-checked="true"]:focus,
-.menubar-editor
- [role="menubar"]
- [role="menu"]
- [role="menuitemradio"][aria-checked="true"]:focus {
- padding-left: 8px;
- padding-right: 21px;
-}
-
-/*
-* Text area styles
-*/
-.menubar-editor .italic {
- font-style: italic;
-}
-
-.menubar-editor .bold {
- font-weight: bold;
-}
-
-.menubar-editor .underline {
- text-decoration: underline;
-}
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/css/menubar-navigation.css b/build/tests/menubar-editor/reference/2020-11-20_13316/css/menubar-navigation.css
deleted file mode 100644
index dddce81d0..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/css/menubar-navigation.css
+++ /dev/null
@@ -1,114 +0,0 @@
-.menubar-navigation {
- margin: 0;
- margin-top: 0.5em;
- margin-bottom: 0.5em;
- padding: 7px;
- font-size: 110%;
- list-style: none;
- background-color: #eee;
- border: #eee solid 1px;
- border-radius: 5px;
-}
-
-.menubar-navigation li {
- margin: 0;
- padding: 0;
- border: 0 solid black;
- list-style: none;
-}
-
-.menubar-navigation > li {
- display: inline-block;
- position: relative;
-}
-
-.menubar-navigation > li li {
- display: block;
-}
-
-.menubar-navigation [role="menu"] [role="menuitem"],
-.menubar-navigation [role="menu"] [role="separator"] {
- display: block;
- width: 12em;
- margin: 0;
-}
-
-.menubar-navigation [role="menuitem"],
-.menubar-navigation [role="separator"] {
- padding: 6px;
- background-color: #eee;
- border: 0 solid #eee;
- color: black;
- border-radius: 5px;
-}
-
-.menubar-navigation [role="menuitem"] svg {
- fill: currentColor;
- stroke: currentColor;
-}
-
-.menubar-navigation [role="menuitem"] svg.down {
- padding-left: 0.125em;
-}
-
-.menubar-navigation [role="menuitem"] svg.right {
- position: absolute;
- padding-top: 0.35em;
- right: 0.75em;
-}
-
-.menubar-navigation [role="menuitem"][aria-expanded="true"] svg.down {
- transform: rotate(180deg);
-}
-
-.menubar-navigation [role="menuitem"][aria-expanded="true"] svg.right {
- transform: rotate(90deg) translate(5px, -5px);
-}
-
-.menubar-navigation > li > [role="menuitem"] {
- display: inline-block;
-}
-
-.menubar-navigation [role="menu"] {
- display: none;
- position: absolute;
- margin: 0;
- padding: 0;
- padding: 7px 4px;
- border: 2px solid #034575;
- border-radius: 5px;
- background-color: #eee;
-}
-
-.menubar-navigation [role="group"] {
- margin: 0;
- padding: 0;
-}
-
-.menubar-navigation [role="separator"] {
- padding-top: 3px;
- background-image: url("../images/separator.svg");
- background-position: center;
- background-repeat: repeat-x;
-}
-
-/* focus styling */
-
-.menubar-navigation.focus {
- padding: 6px;
- border: #034575 solid 2px;
-}
-
-.menubar-navigation [role="menuitem"][aria-expanded="true"],
-.menubar-navigation [role="menuitem"]:focus,
-.menubar-navigation [role="menuitem"]:hover {
- background: #034575;
- color: #fff;
- outline: none;
-}
-
-.menubar-navigation [role="menuitem"]:focus,
-.menubar-navigation [role="menuitem"]:hover {
- padding: 2px;
- border: 4px solid #034575;
-}
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/images/checkbox-checked-focus.svg b/build/tests/menubar-editor/reference/2020-11-20_13316/images/checkbox-checked-focus.svg
deleted file mode 100644
index af016333b..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/images/checkbox-checked-focus.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/images/checkbox-checked.svg b/build/tests/menubar-editor/reference/2020-11-20_13316/images/checkbox-checked.svg
deleted file mode 100644
index 5f64b0e3c..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/images/checkbox-checked.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/images/down-arrow-focus.svg b/build/tests/menubar-editor/reference/2020-11-20_13316/images/down-arrow-focus.svg
deleted file mode 100644
index 8f6ea6637..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/images/down-arrow-focus.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/images/down-arrow.svg b/build/tests/menubar-editor/reference/2020-11-20_13316/images/down-arrow.svg
deleted file mode 100644
index a0a2556a5..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/images/down-arrow.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/images/radio-checked-focus.svg b/build/tests/menubar-editor/reference/2020-11-20_13316/images/radio-checked-focus.svg
deleted file mode 100644
index c6250857a..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/images/radio-checked-focus.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/images/radio-checked.svg b/build/tests/menubar-editor/reference/2020-11-20_13316/images/radio-checked.svg
deleted file mode 100644
index 536bf06ad..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/images/radio-checked.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/images/separator.svg b/build/tests/menubar-editor/reference/2020-11-20_13316/images/separator.svg
deleted file mode 100644
index b4b39760b..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/images/separator.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/images/up-arrow-focus.svg b/build/tests/menubar-editor/reference/2020-11-20_13316/images/up-arrow-focus.svg
deleted file mode 100644
index ede8a5d71..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/images/up-arrow-focus.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/images/up-arrow.svg b/build/tests/menubar-editor/reference/2020-11-20_13316/images/up-arrow.svg
deleted file mode 100644
index d034dad15..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/images/up-arrow.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/js/menubar-editor.js b/build/tests/menubar-editor/reference/2020-11-20_13316/js/menubar-editor.js
deleted file mode 100644
index 905b4ce87..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/js/menubar-editor.js
+++ /dev/null
@@ -1,709 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: menubar-editor.js
- *
- * Desc: Creates a menubar to control the styling of text in a textarea element
- */
-
-'use strict';
-
-var MenubarEditor = function (domNode) {
- this.domNode = domNode;
- this.menubarNode = domNode.querySelector('[role=menubar]');
- this.textareaNode = domNode.querySelector('textarea');
- this.actionManager = new StyleManager(this.textareaNode);
-
- this.popups = [];
- this.menuitemGroups = {};
- this.menuOrientation = {};
- this.isPopup = {};
-
- this.firstChars = {}; // see Menubar init method
- this.firstMenuitem = {}; // see Menubar init method
- this.lastMenuitem = {}; // see Menubar init method
-
- this.initMenu(this.menubarNode);
- this.domNode.addEventListener('focusin', this.handleFocusin.bind(this));
- this.domNode.addEventListener('focusout', this.handleFocusout.bind(this));
-
- window.addEventListener(
- 'mousedown',
- this.handleBackgroundMousedown.bind(this),
- true
- );
-};
-
-MenubarEditor.prototype.getMenuitems = function (domNode) {
- var nodes = [];
-
- var initMenu = this.initMenu.bind(this);
- var getGroupId = this.getGroupId.bind(this);
- var menuitemGroups = this.menuitemGroups;
- var popups = this.popups;
-
- function findMenuitems(node, group) {
- var role, flag, groupId;
-
- while (node) {
- flag = true;
- role = node.getAttribute('role');
-
- switch (role) {
- case 'menu':
- node.tabIndex = -1;
- initMenu(node);
- flag = false;
- break;
-
- case 'group':
- groupId = getGroupId(node);
- menuitemGroups[groupId] = [];
- break;
-
- case 'menuitem':
- case 'menuitemradio':
- case 'menuitemcheckbox':
- if (node.getAttribute('aria-haspopup') === 'true') {
- popups.push(node);
- }
- nodes.push(node);
- if (group) {
- group.push(node);
- }
- break;
-
- default:
- break;
- }
-
- if (flag && node.firstElementChild) {
- findMenuitems(node.firstElementChild, menuitemGroups[groupId]);
- }
-
- node = node.nextElementSibling;
- }
- }
-
- findMenuitems(domNode.firstElementChild, false);
-
- return nodes;
-};
-
-MenubarEditor.prototype.initMenu = function (menu) {
- var i, menuitems, menuitem, role, nextElement;
-
- var menuId = this.getMenuId(menu);
-
- menuitems = this.getMenuitems(menu);
- this.menuOrientation[menuId] = this.getMenuOrientation(menu);
- this.isPopup[menuId] = menu.getAttribute('role') === 'menu';
-
- this.menuitemGroups[menuId] = [];
- this.firstChars[menuId] = [];
- this.firstMenuitem[menuId] = null;
- this.lastMenuitem[menuId] = null;
-
- for (i = 0; i < menuitems.length; i++) {
- menuitem = menuitems[i];
- role = menuitem.getAttribute('role');
-
- if (role.indexOf('menuitem') < 0) {
- continue;
- }
-
- menuitem.tabIndex = -1;
- this.menuitemGroups[menuId].push(menuitem);
- this.firstChars[menuId].push(menuitem.textContent[0].toLowerCase());
-
- menuitem.addEventListener('keydown', this.handleKeydown.bind(this));
- menuitem.addEventListener('click', this.handleMenuitemClick.bind(this));
-
- menuitem.addEventListener(
- 'mouseover',
- this.handleMenuitemMouseover.bind(this)
- );
-
- if (!this.firstMenuitem[menuId]) {
- if (this.hasPopup(menuitem)) {
- menuitem.tabIndex = 0;
- }
- this.firstMenuitem[menuId] = menuitem;
- }
- this.lastMenuitem[menuId] = menuitem;
- }
-};
-
-/* MenubarEditor FOCUS MANAGEMENT METHODS */
-
-MenubarEditor.prototype.setFocusToMenuitem = function (menuId, newMenuitem) {
- var isAnyPopupOpen = this.isAnyPopupOpen();
-
- this.closePopupAll(newMenuitem);
-
- if (this.hasPopup(newMenuitem)) {
- if (isAnyPopupOpen) {
- this.openPopup(newMenuitem);
- }
- } else {
- var menu = this.getMenu(newMenuitem);
- var cmi = menu.previousElementSibling;
- if (!this.isOpen(cmi)) {
- this.openPopup(cmi);
- }
- }
-
- if (this.hasPopup(newMenuitem)) {
- if (this.menuitemGroups[menuId]) {
- this.menuitemGroups[menuId].forEach(function (item) {
- item.tabIndex = -1;
- });
- }
- newMenuitem.tabIndex = 0;
- }
-
- newMenuitem.focus();
-};
-
-MenubarEditor.prototype.setFocusToFirstMenuitem = function (menuId) {
- this.setFocusToMenuitem(menuId, this.firstMenuitem[menuId]);
-};
-
-MenubarEditor.prototype.setFocusToLastMenuitem = function (menuId) {
- this.setFocusToMenuitem(menuId, this.lastMenuitem[menuId]);
-};
-
-MenubarEditor.prototype.setFocusToPreviousMenuitem = function (
- menuId,
- currentMenuitem
-) {
- var newMenuitem, index;
-
- if (currentMenuitem === this.firstMenuitem[menuId]) {
- newMenuitem = this.lastMenuitem[menuId];
- } else {
- index = this.menuitemGroups[menuId].indexOf(currentMenuitem);
- newMenuitem = this.menuitemGroups[menuId][index - 1];
- }
-
- this.setFocusToMenuitem(menuId, newMenuitem);
-
- return newMenuitem;
-};
-
-MenubarEditor.prototype.setFocusToNextMenuitem = function (
- menuId,
- currentMenuitem
-) {
- var newMenuitem, index;
-
- if (currentMenuitem === this.lastMenuitem[menuId]) {
- newMenuitem = this.firstMenuitem[menuId];
- } else {
- index = this.menuitemGroups[menuId].indexOf(currentMenuitem);
- newMenuitem = this.menuitemGroups[menuId][index + 1];
- }
- this.setFocusToMenuitem(menuId, newMenuitem);
-
- return newMenuitem;
-};
-
-MenubarEditor.prototype.setFocusByFirstCharacter = function (
- menuId,
- currentMenuitem,
- char
-) {
- var start, index;
-
- char = char.toLowerCase();
-
- // Get start index for search based on position of currentItem
- start = this.menuitemGroups[menuId].indexOf(currentMenuitem) + 1;
- if (start >= this.menuitemGroups[menuId].length) {
- start = 0;
- }
-
- // Check remaining slots in the menu
- index = this.getIndexFirstChars(menuId, start, char);
-
- // If not found in remaining slots, check from beginning
- if (index === -1) {
- index = this.getIndexFirstChars(menuId, 0, char);
- }
-
- // If match was found...
- if (index > -1) {
- this.setFocusToMenuitem(menuId, this.menuitemGroups[menuId][index]);
- }
-};
-
-// Utilities
-
-MenubarEditor.prototype.getIndexFirstChars = function (
- menuId,
- startIndex,
- char
-) {
- for (var i = startIndex; i < this.firstChars[menuId].length; i++) {
- if (char === this.firstChars[menuId][i]) {
- return i;
- }
- }
- return -1;
-};
-
-MenubarEditor.prototype.isPrintableCharacter = function (str) {
- return str.length === 1 && str.match(/\S/);
-};
-
-MenubarEditor.prototype.getIdFromAriaLabel = function (node) {
- var id = node.getAttribute('aria-label');
- if (id) {
- id = id.trim().toLowerCase().replace(' ', '-').replace('/', '-');
- }
- return id;
-};
-
-MenubarEditor.prototype.getMenuOrientation = function (node) {
- var orientation = node.getAttribute('aria-orientation');
-
- if (!orientation) {
- var role = node.getAttribute('role');
-
- switch (role) {
- case 'menubar':
- orientation = 'horizontal';
- break;
-
- case 'menu':
- orientation = 'vertical';
- break;
-
- default:
- break;
- }
- }
-
- return orientation;
-};
-
-MenubarEditor.prototype.getDataOption = function (node) {
- var option = false;
- var hasOption = node.hasAttribute('data-option');
- var role = node.hasAttribute('role');
-
- if (!hasOption) {
- while (node && !hasOption && role !== 'menu' && role !== 'menubar') {
- node = node.parentNode;
- if (node) {
- role = node.getAttribute('role');
- hasOption = node.hasAttribute('data-option');
- }
- }
- }
-
- if (node) {
- option = node.getAttribute('data-option');
- }
-
- return option;
-};
-
-MenubarEditor.prototype.getGroupId = function (node) {
- var id = false;
- var role = node.getAttribute('role');
-
- while (node && role !== 'group' && role !== 'menu' && role !== 'menubar') {
- node = node.parentNode;
- if (node) {
- role = node.getAttribute('role');
- }
- }
-
- if (node) {
- id = role + '-' + this.getIdFromAriaLabel(node);
- }
-
- return id;
-};
-
-MenubarEditor.prototype.getMenuId = function (node) {
- var id = false;
- var role = node.getAttribute('role');
-
- while (node && role !== 'menu' && role !== 'menubar') {
- node = node.parentNode;
- if (node) {
- role = node.getAttribute('role');
- }
- }
-
- if (node) {
- id = role + '-' + this.getIdFromAriaLabel(node);
- }
-
- return id;
-};
-
-MenubarEditor.prototype.getMenu = function (menuitem) {
- var id = false;
- var menu = menuitem;
- var role = menuitem.getAttribute('role');
-
- while (menu && role !== 'menu' && role !== 'menubar') {
- menu = menu.parentNode;
- if (menu) {
- role = menu.getAttribute('role');
- }
- }
-
- return menu;
-};
-
-MenubarEditor.prototype.toggleCheckbox = function (menuitem) {
- if (menuitem.getAttribute('aria-checked') === 'true') {
- menuitem.setAttribute('aria-checked', 'false');
- return false;
- }
- menuitem.setAttribute('aria-checked', 'true');
- return true;
-};
-
-MenubarEditor.prototype.setRadioButton = function (menuitem) {
- var groupId = this.getGroupId(menuitem);
- var radiogroupItems = this.menuitemGroups[groupId];
- radiogroupItems.forEach(function (item) {
- item.setAttribute('aria-checked', 'false');
- });
- menuitem.setAttribute('aria-checked', 'true');
- return menuitem.textContent;
-};
-
-MenubarEditor.prototype.updateFontSizeMenu = function (menuId) {
- var fontSizeMenuitems = this.menuitemGroups[menuId];
- var currentValue = this.actionManager.getFontSize();
-
- for (var i = 0; i < fontSizeMenuitems.length; i++) {
- var mi = fontSizeMenuitems[i];
- var dataOption = mi.getAttribute('data-option');
- var value = mi.textContent.trim().toLowerCase();
-
- switch (dataOption) {
- case 'font-smaller':
- if (currentValue === 'x-small') {
- mi.setAttribute('aria-disabled', 'true');
- } else {
- mi.removeAttribute('aria-disabled');
- }
- break;
-
- case 'font-larger':
- if (currentValue === 'x-large') {
- mi.setAttribute('aria-disabled', 'true');
- } else {
- mi.removeAttribute('aria-disabled');
- }
- break;
-
- default:
- if (currentValue === value) {
- mi.setAttribute('aria-checked', 'true');
- } else {
- mi.setAttribute('aria-checked', 'false');
- }
- break;
- }
- }
-};
-
-// Popup menu methods
-
-MenubarEditor.prototype.isAnyPopupOpen = function () {
- for (var i = 0; i < this.popups.length; i++) {
- if (this.popups[i].getAttribute('aria-expanded') === 'true') {
- return true;
- }
- }
- return false;
-};
-
-MenubarEditor.prototype.openPopup = function (menuitem) {
- // set aria-expanded attribute
- var popupMenu = menuitem.nextElementSibling;
-
- var rect = menuitem.getBoundingClientRect();
-
- // set CSS properties
- popupMenu.style.position = 'absolute';
- popupMenu.style.top = rect.height - 3 + 'px';
- popupMenu.style.left = '0px';
- popupMenu.style.zIndex = 100;
- popupMenu.style.display = 'block';
-
- menuitem.setAttribute('aria-expanded', 'true');
-
- return this.getMenuId(popupMenu);
-};
-
-MenubarEditor.prototype.closePopup = function (menuitem) {
- var menu, cmi;
-
- if (this.hasPopup(menuitem)) {
- if (this.isOpen(menuitem)) {
- menuitem.setAttribute('aria-expanded', 'false');
- menuitem.nextElementSibling.style.display = 'none';
- menuitem.nextElementSibling.style.zIndex = 0;
- }
- } else {
- menu = this.getMenu(menuitem);
- cmi = menu.previousElementSibling;
- cmi.setAttribute('aria-expanded', 'false');
- cmi.focus();
- menu.style.display = 'none';
- menu.style.zIndex = 0;
- }
- return cmi;
-};
-
-MenubarEditor.prototype.doesNotContain = function (popup, menuitem) {
- if (menuitem) {
- return !popup.nextElementSibling.contains(menuitem);
- }
- return true;
-};
-
-MenubarEditor.prototype.closePopupAll = function (menuitem) {
- if (typeof menuitem !== 'object') {
- menuitem = false;
- }
-
- for (var i = 0; i < this.popups.length; i++) {
- var popup = this.popups[i];
- if (this.isOpen(popup) && this.doesNotContain(popup, menuitem)) {
- this.closePopup(popup);
- }
- }
-};
-
-MenubarEditor.prototype.hasPopup = function (menuitem) {
- return menuitem.getAttribute('aria-haspopup') === 'true';
-};
-
-MenubarEditor.prototype.isOpen = function (menuitem) {
- return menuitem.getAttribute('aria-expanded') === 'true';
-};
-
-// Menu event handlers
-
-MenubarEditor.prototype.handleFocusin = function (event) {
- this.domNode.classList.add('focus');
-};
-
-MenubarEditor.prototype.handleFocusout = function (event) {
- this.domNode.classList.remove('focus');
-};
-
-MenubarEditor.prototype.handleBackgroundMousedown = function (event) {
- if (!this.menubarNode.contains(event.target)) {
- this.closePopupAll();
- }
-};
-
-MenubarEditor.prototype.handleKeydown = function (event) {
- var tgt = event.currentTarget,
- key = event.key,
- flag = false,
- menuId = this.getMenuId(tgt),
- id,
- popupMenuId,
- mi,
- role,
- option,
- value;
-
- switch (key) {
- case ' ':
- case 'Enter':
- if (this.hasPopup(tgt)) {
- popupMenuId = this.openPopup(tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- } else {
- role = tgt.getAttribute('role');
- option = this.getDataOption(tgt);
- switch (role) {
- case 'menuitem':
- this.actionManager.setOption(option, tgt.textContent);
- break;
-
- case 'menuitemcheckbox':
- value = this.toggleCheckbox(tgt);
- this.actionManager.setOption(option, value);
- break;
-
- case 'menuitemradio':
- value = this.setRadioButton(tgt);
- this.actionManager.setOption(option, value);
- break;
-
- default:
- break;
- }
-
- if (this.getMenuId(tgt) === 'menu-size') {
- this.updateFontSizeMenu('menu-size');
- }
- this.closePopup(tgt);
- }
- flag = true;
- break;
-
- case 'ArrowDown':
- case 'Down':
- if (this.menuOrientation[menuId] === 'vertical') {
- this.setFocusToNextMenuitem(menuId, tgt);
- flag = true;
- } else {
- if (this.hasPopup(tgt)) {
- popupMenuId = this.openPopup(tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- flag = true;
- }
- }
- break;
-
- case 'Esc':
- case 'Escape':
- this.closePopup(tgt);
- flag = true;
- break;
-
- case 'Left':
- case 'ArrowLeft':
- if (this.menuOrientation[menuId] === 'horizontal') {
- this.setFocusToPreviousMenuitem(menuId, tgt);
- flag = true;
- } else {
- mi = this.closePopup(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToPreviousMenuitem(id, mi);
- this.openPopup(mi);
- }
- break;
-
- case 'Right':
- case 'ArrowRight':
- if (this.menuOrientation[menuId] === 'horizontal') {
- this.setFocusToNextMenuitem(menuId, tgt);
- flag = true;
- } else {
- mi = this.closePopup(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToNextMenuitem(id, mi);
- this.openPopup(mi);
- }
- break;
-
- case 'Up':
- case 'ArrowUp':
- if (this.menuOrientation[menuId] === 'vertical') {
- this.setFocusToPreviousMenuitem(menuId, tgt);
- flag = true;
- } else {
- if (this.hasPopup(tgt)) {
- popupMenuId = this.openPopup(tgt);
- this.setFocusToLastMenuitem(popupMenuId);
- flag = true;
- }
- }
- break;
-
- case 'Home':
- case 'PageUp':
- this.setFocusToFirstMenuitem(menuId, tgt);
- flag = true;
- break;
-
- case 'End':
- case 'PageDown':
- this.setFocusToLastMenuitem(menuId, tgt);
- flag = true;
- break;
-
- case 'Tab':
- this.closePopup(tgt);
- break;
-
- default:
- if (this.isPrintableCharacter(key)) {
- this.setFocusByFirstCharacter(menuId, tgt, key);
- flag = true;
- }
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-MenubarEditor.prototype.handleMenuitemClick = function (event) {
- var tgt = event.currentTarget;
- var value;
-
- if (this.hasPopup(tgt)) {
- if (this.isOpen(tgt)) {
- this.closePopup(tgt);
- } else {
- var menuId = this.openPopup(tgt);
- this.setFocusToMenuitem(menuId, tgt);
- }
- } else {
- var role = tgt.getAttribute('role');
- var option = this.getDataOption(tgt);
- switch (role) {
- case 'menuitem':
- this.actionManager.setOption(option, tgt.textContent);
- break;
-
- case 'menuitemcheckbox':
- value = this.toggleCheckbox(tgt);
- this.actionManager.setOption(option, value);
- break;
-
- case 'menuitemradio':
- value = this.setRadioButton(tgt);
- this.actionManager.setOption(option, value);
- break;
-
- default:
- break;
- }
-
- if (this.getMenuId(tgt) === 'menu-size') {
- this.updateFontSizeMenu('menu-size');
- }
- this.closePopup(tgt);
- }
-
- event.stopPropagation();
- event.preventDefault();
-};
-
-MenubarEditor.prototype.handleMenuitemMouseover = function (event) {
- var tgt = event.currentTarget;
-
- if (this.isAnyPopupOpen() && this.getMenu(tgt)) {
- this.setFocusToMenuitem(this.getMenu(tgt), tgt);
- }
-};
-
-// Initialize menubar editor
-
-window.addEventListener('load', function () {
- var menubarEditors = document.querySelectorAll('.menubar-editor');
- for (var i = 0; i < menubarEditors.length; i++) {
- var menubarEditor = new MenubarEditor(menubarEditors[i]);
- }
-});
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/js/menubar-navigation.js b/build/tests/menubar-editor/reference/2020-11-20_13316/js/menubar-navigation.js
deleted file mode 100644
index ebb2dee4d..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/js/menubar-navigation.js
+++ /dev/null
@@ -1,630 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: menubar-navigation.js
- *
- * Desc: Creates a menubar of hierarchical set of links
- */
-
-'use strict';
-
-var MenubarNavigation = function (domNode) {
- this.domNode = domNode;
-
- this.popups = [];
- this.menuitemGroups = {};
- this.menuOrientation = {};
- this.isPopup = {};
- this.isPopout = {};
- this.openPopups = false;
-
- this.firstChars = {}; // see Menubar init method
- this.firstMenuitem = {}; // see Menubar init method
- this.lastMenuitem = {}; // see Menubar init method
-
- this.initMenu(domNode, 0);
-
- domNode.addEventListener('focusin', this.handleMenubarFocusin.bind(this));
- domNode.addEventListener('focusout', this.handleMenubarFocusout.bind(this));
-
- window.addEventListener(
- 'mousedown',
- this.handleBackgroundMousedown.bind(this),
- true
- );
-};
-
-MenubarNavigation.prototype.getMenuitems = function (domNode, depth) {
- var nodes = [];
-
- var initMenu = this.initMenu.bind(this);
- var menuitemGroups = this.menuitemGroups;
- var popups = this.popups;
-
- function findMenuitems(node) {
- var role, flag;
-
- while (node) {
- flag = true;
- role = node.getAttribute('role');
-
- if (role) {
- role = role.trim().toLowerCase();
- }
-
- switch (role) {
- case 'menu':
- node.tabIndex = -1;
- initMenu(node, depth + 1);
- flag = false;
- break;
-
- case 'menuitem':
- if (node.getAttribute('aria-haspopup') === 'true') {
- popups.push(node);
- }
- nodes.push(node);
- break;
-
- default:
- break;
- }
-
- if (
- flag &&
- node.firstElementChild &&
- node.firstElementChild.tagName !== 'svg'
- ) {
- findMenuitems(node.firstElementChild);
- }
-
- node = node.nextElementSibling;
- }
- }
-
- findMenuitems(domNode.firstElementChild);
-
- return nodes;
-};
-
-MenubarNavigation.prototype.initMenu = function (menu, depth) {
- var menuitems, menuitem, role, nextElement;
-
- var menuId = this.getMenuId(menu);
-
- menuitems = this.getMenuitems(menu, depth);
- this.menuOrientation[menuId] = this.getMenuOrientation(menu);
-
- this.isPopup[menuId] = menu.getAttribute('role') === 'menu' && depth === 1;
- this.isPopout[menuId] = menu.getAttribute('role') === 'menu' && depth > 1;
-
- this.menuitemGroups[menuId] = [];
- this.firstChars[menuId] = [];
- this.firstMenuitem[menuId] = null;
- this.lastMenuitem[menuId] = null;
-
- for (var i = 0; i < menuitems.length; i++) {
- menuitem = menuitems[i];
- role = menuitem.getAttribute('role');
-
- if (role.indexOf('menuitem') < 0) {
- continue;
- }
-
- menuitem.tabIndex = -1;
- this.menuitemGroups[menuId].push(menuitem);
- this.firstChars[menuId].push(menuitem.textContent.trim().toLowerCase()[0]);
-
- menuitem.addEventListener('keydown', this.handleKeydown.bind(this));
- menuitem.addEventListener('click', this.handleMenuitemClick.bind(this));
-
- menuitem.addEventListener(
- 'mouseover',
- this.handleMenuitemMouseover.bind(this)
- );
-
- if (!this.firstMenuitem[menuId]) {
- if (this.hasPopup(menuitem)) {
- menuitem.tabIndex = 0;
- }
- this.firstMenuitem[menuId] = menuitem;
- }
- this.lastMenuitem[menuId] = menuitem;
- }
-};
-
-MenubarNavigation.prototype.setFocusToMenuitem = function (
- menuId,
- newMenuitem
-) {
- this.closePopupAll(newMenuitem);
-
- if (this.menuitemGroups[menuId]) {
- this.menuitemGroups[menuId].forEach(function (item) {
- if (item === newMenuitem) {
- item.tabIndex = 0;
- newMenuitem.focus();
- } else {
- item.tabIndex = -1;
- }
- });
- }
-};
-
-MenubarNavigation.prototype.setFocusToFirstMenuitem = function (
- menuId,
- currentMenuitem
-) {
- this.setFocusToMenuitem(menuId, this.firstMenuitem[menuId]);
-};
-
-MenubarNavigation.prototype.setFocusToLastMenuitem = function (
- menuId,
- currentMenuitem
-) {
- this.setFocusToMenuitem(menuId, this.lastMenuitem[menuId]);
-};
-
-MenubarNavigation.prototype.setFocusToPreviousMenuitem = function (
- menuId,
- currentMenuitem
-) {
- var newMenuitem, index;
-
- if (currentMenuitem === this.firstMenuitem[menuId]) {
- newMenuitem = this.lastMenuitem[menuId];
- } else {
- index = this.menuitemGroups[menuId].indexOf(currentMenuitem);
- newMenuitem = this.menuitemGroups[menuId][index - 1];
- }
-
- this.setFocusToMenuitem(menuId, newMenuitem);
-
- return newMenuitem;
-};
-
-MenubarNavigation.prototype.setFocusToNextMenuitem = function (
- menuId,
- currentMenuitem
-) {
- var newMenuitem, index;
-
- if (currentMenuitem === this.lastMenuitem[menuId]) {
- newMenuitem = this.firstMenuitem[menuId];
- } else {
- index = this.menuitemGroups[menuId].indexOf(currentMenuitem);
- newMenuitem = this.menuitemGroups[menuId][index + 1];
- }
- this.setFocusToMenuitem(menuId, newMenuitem);
-
- return newMenuitem;
-};
-
-MenubarNavigation.prototype.setFocusByFirstCharacter = function (
- menuId,
- currentMenuitem,
- char
-) {
- var start, index;
-
- char = char.toLowerCase();
-
- // Get start index for search based on position of currentItem
- start = this.menuitemGroups[menuId].indexOf(currentMenuitem) + 1;
- if (start >= this.menuitemGroups[menuId].length) {
- start = 0;
- }
-
- // Check remaining slots in the menu
- index = this.getIndexFirstChars(menuId, start, char);
-
- // If not found in remaining slots, check from beginning
- if (index === -1) {
- index = this.getIndexFirstChars(menuId, 0, char);
- }
-
- // If match was found...
- if (index > -1) {
- this.setFocusToMenuitem(menuId, this.menuitemGroups[menuId][index]);
- }
-};
-
-// Utilities
-
-MenubarNavigation.prototype.getIndexFirstChars = function (
- menuId,
- startIndex,
- char
-) {
- for (var i = startIndex; i < this.firstChars[menuId].length; i++) {
- if (char === this.firstChars[menuId][i]) {
- return i;
- }
- }
- return -1;
-};
-
-MenubarNavigation.prototype.isPrintableCharacter = function (str) {
- return str.length === 1 && str.match(/\S/);
-};
-
-MenubarNavigation.prototype.getIdFromAriaLabel = function (node) {
- var id = node.getAttribute('aria-label');
- if (id) {
- id = id.trim().toLowerCase().replace(' ', '-').replace('/', '-');
- }
- return id;
-};
-
-MenubarNavigation.prototype.getMenuOrientation = function (node) {
- var orientation = node.getAttribute('aria-orientation');
-
- if (!orientation) {
- var role = node.getAttribute('role');
-
- switch (role) {
- case 'menubar':
- orientation = 'horizontal';
- break;
-
- case 'menu':
- orientation = 'vertical';
- break;
-
- default:
- break;
- }
- }
-
- return orientation;
-};
-
-MenubarNavigation.prototype.getMenuId = function (node) {
- var id = false;
- var role = node.getAttribute('role');
-
- while (node && role !== 'menu' && role !== 'menubar') {
- node = node.parentNode;
- if (node) {
- role = node.getAttribute('role');
- }
- }
-
- if (node) {
- id = role + '-' + this.getIdFromAriaLabel(node);
- }
-
- return id;
-};
-
-MenubarNavigation.prototype.getMenu = function (menuitem) {
- var id = false;
- var menu = menuitem;
- var role = menuitem.getAttribute('role');
-
- while (menu && role !== 'menu' && role !== 'menubar') {
- menu = menu.parentNode;
- if (menu) {
- role = menu.getAttribute('role');
- }
- }
-
- return menu;
-};
-
-// Popup menu methods
-
-MenubarNavigation.prototype.isAnyPopupOpen = function () {
- for (var i = 0; i < this.popups.length; i++) {
- if (this.popups[i].getAttribute('aria-expanded') === 'true') {
- return true;
- }
- }
- return false;
-};
-
-MenubarNavigation.prototype.openPopup = function (menuId, menuitem) {
- // set aria-expanded attribute
- var popupMenu = menuitem.nextElementSibling;
-
- var rect = menuitem.getBoundingClientRect();
-
- // Set CSS properties
- if (this.isPopup[menuId]) {
- popupMenu.parentNode.style.position = 'relative';
- popupMenu.style.display = 'block';
- popupMenu.style.position = 'absolute';
- popupMenu.style.left = rect.width + 6 + 'px';
- popupMenu.style.top = '0px';
- popupMenu.style.zIndex = 100;
- } else {
- popupMenu.style.display = 'block';
- popupMenu.style.position = 'absolute';
- popupMenu.style.left = '0px';
- popupMenu.style.top = rect.height + 8 + 'px';
- popupMenu.style.zIndex = 100;
- }
-
- menuitem.setAttribute('aria-expanded', 'true');
-
- return this.getMenuId(popupMenu);
-};
-
-MenubarNavigation.prototype.closePopout = function (menuitem) {
- var menu,
- menuId = this.getMenuId(menuitem),
- cmi = menuitem;
-
- while (this.isPopup[menuId] || this.isPopout[menuId]) {
- menu = this.getMenu(cmi);
- cmi = menu.previousElementSibling;
- menuId = this.getMenuId(cmi);
- cmi.setAttribute('aria-expanded', 'false');
- menu.style.display = 'none';
- }
- cmi.focus();
- return cmi;
-};
-
-MenubarNavigation.prototype.closePopup = function (menuitem) {
- var menu,
- menuId = this.getMenuId(menuitem),
- cmi = menuitem;
-
- if (this.isMenubar(menuId)) {
- if (this.isOpen(menuitem)) {
- menuitem.setAttribute('aria-expanded', 'false');
- menuitem.nextElementSibling.style.display = 'none';
- }
- } else {
- menu = this.getMenu(menuitem);
- cmi = menu.previousElementSibling;
- cmi.setAttribute('aria-expanded', 'false');
- cmi.focus();
- menu.style.display = 'none';
- }
-
- return cmi;
-};
-
-MenubarNavigation.prototype.doesNotContain = function (popup, menuitem) {
- if (menuitem) {
- return !popup.nextElementSibling.contains(menuitem);
- }
- return true;
-};
-
-MenubarNavigation.prototype.closePopupAll = function (menuitem) {
- if (typeof menuitem !== 'object') {
- menuitem = false;
- }
- for (var i = 0; i < this.popups.length; i++) {
- var popup = this.popups[i];
- if (this.doesNotContain(popup, menuitem) && this.isOpen(popup)) {
- var cmi = popup.nextElementSibling;
- if (cmi) {
- popup.setAttribute('aria-expanded', 'false');
- cmi.style.display = 'none';
- }
- }
- }
-};
-
-MenubarNavigation.prototype.hasPopup = function (menuitem) {
- return menuitem.getAttribute('aria-haspopup') === 'true';
-};
-
-MenubarNavigation.prototype.isOpen = function (menuitem) {
- return menuitem.getAttribute('aria-expanded') === 'true';
-};
-
-MenubarNavigation.prototype.isMenubar = function (menuId) {
- return !this.isPopup[menuId] && !this.isPopout[menuId];
-};
-
-MenubarNavigation.prototype.isMenuHorizontal = function (menuitem) {
- return this.menuOrientation[menuitem] === 'horizontal';
-};
-
-MenubarNavigation.prototype.hasFocus = function () {
- return this.domNode.classList.contains('focus');
-};
-
-// Menu event handlers
-
-MenubarNavigation.prototype.handleMenubarFocusin = function (event) {
- // if the menubar or any of its menus has focus, add styling hook for hover
- this.domNode.classList.add('focus');
-};
-
-MenubarNavigation.prototype.handleMenubarFocusout = function (event) {
- // remove styling hook for hover on menubar item
- this.domNode.classList.remove('focus');
-};
-
-MenubarNavigation.prototype.handleKeydown = function (event) {
- var tgt = event.currentTarget,
- key = event.key,
- flag = false,
- menuId = this.getMenuId(tgt),
- id,
- popupMenuId,
- mi,
- role,
- option,
- value;
-
- var isAnyPopupOpen = this.isAnyPopupOpen();
-
- switch (key) {
- case ' ':
- case 'Enter':
- if (this.hasPopup(tgt)) {
- this.openPopups = true;
- popupMenuId = this.openPopup(menuId, tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- } else {
- if (tgt.href !== '#') {
- this.closePopupAll();
- window.location.href = tgt.href;
- }
- }
- flag = true;
- break;
-
- case 'Esc':
- case 'Escape':
- this.openPopups = false;
- this.closePopup(tgt);
- flag = true;
- break;
-
- case 'Up':
- case 'ArrowUp':
- if (this.isMenuHorizontal(menuId)) {
- if (this.hasPopup(tgt)) {
- this.openPopups = true;
- popupMenuId = this.openPopup(menuId, tgt);
- this.setFocusToLastMenuitem(popupMenuId);
- }
- } else {
- this.setFocusToPreviousMenuitem(menuId, tgt);
- }
- flag = true;
- break;
-
- case 'ArrowDown':
- case 'Down':
- if (this.isMenuHorizontal(menuId)) {
- if (this.hasPopup(tgt)) {
- this.openPopups = true;
- popupMenuId = this.openPopup(menuId, tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- }
- } else {
- this.setFocusToNextMenuitem(menuId, tgt);
- }
- flag = true;
- break;
-
- case 'Left':
- case 'ArrowLeft':
- if (this.isMenuHorizontal(menuId)) {
- mi = this.setFocusToPreviousMenuitem(menuId, tgt);
- if (isAnyPopupOpen) {
- this.openPopup(menuId, mi);
- }
- } else {
- if (this.isPopout[menuId]) {
- mi = this.closePopup(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToMenuitem(id, mi);
- } else {
- mi = this.closePopup(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToPreviousMenuitem(id, mi);
- this.openPopup(id, mi);
- }
- }
- flag = true;
- break;
-
- case 'Right':
- case 'ArrowRight':
- if (this.isMenuHorizontal(menuId)) {
- mi = this.setFocusToNextMenuitem(menuId, tgt);
- if (isAnyPopupOpen) {
- this.openPopup(menuId, mi);
- }
- } else {
- if (this.hasPopup(tgt)) {
- popupMenuId = this.openPopup(menuId, tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- } else {
- mi = this.closePopout(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToNextMenuitem(id, mi);
- this.openPopup(id, mi);
- }
- }
- flag = true;
- break;
-
- case 'Home':
- case 'PageUp':
- this.setFocusToFirstMenuitem(menuId, tgt);
- flag = true;
- break;
-
- case 'End':
- case 'PageDown':
- this.setFocusToLastMenuitem(menuId, tgt);
- flag = true;
- break;
-
- case 'Tab':
- this.openPopups = false;
- this.closePopup(tgt);
- break;
-
- default:
- if (this.isPrintableCharacter(key)) {
- this.setFocusByFirstCharacter(menuId, tgt, key);
- flag = true;
- }
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-MenubarNavigation.prototype.handleMenuitemClick = function (event) {
- var tgt = event.currentTarget;
- var menuId = this.getMenuId(tgt);
-
- if (this.hasPopup(tgt)) {
- if (this.isOpen(tgt)) {
- this.closePopup(tgt);
- } else {
- this.closePopupAll(tgt);
- this.openPopup(menuId, tgt);
- }
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-MenubarNavigation.prototype.handleMenuitemMouseover = function (event) {
- var tgt = event.currentTarget;
- var menuId = this.getMenuId(tgt);
-
- if (this.hasFocus()) {
- this.setFocusToMenuitem(menuId, tgt);
- }
-
- if (this.isAnyPopupOpen() || this.hasFocus()) {
- this.closePopupAll(tgt);
- if (this.hasPopup(tgt)) {
- this.openPopup(menuId, tgt);
- }
- }
-};
-
-MenubarNavigation.prototype.handleBackgroundMousedown = function (event) {
- if (!this.domNode.contains(event.target)) {
- this.closePopupAll();
- }
-};
-
-// Initialize menubar editor
-
-window.addEventListener('load', function () {
- var menubarNavs = document.querySelectorAll('.menubar-navigation');
- for (var i = 0; i < menubarNavs.length; i++) {
- var menubarNav = new MenubarNavigation(menubarNavs[i]);
- }
-});
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/js/style-manager.js b/build/tests/menubar-editor/reference/2020-11-20_13316/js/style-manager.js
deleted file mode 100644
index 06e35d7c4..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/js/style-manager.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: TextStyling.js
- *
- * Desc: Styling functions for changing the style of an item
- */
-
-'use strict';
-
-var StyleManager = function (node) {
- this.node = node;
- this.fontSize = 'medium';
-};
-
-StyleManager.prototype.setFontFamily = function (value) {
- this.node.style.fontFamily = value;
-};
-
-StyleManager.prototype.setTextDecoration = function (value) {
- this.node.style.textDecoration = value;
-};
-
-StyleManager.prototype.setTextAlign = function (value) {
- this.node.style.textAlign = value;
-};
-
-StyleManager.prototype.setFontSize = function (value) {
- this.fontSize = value;
- this.node.style.fontSize = value;
-};
-
-StyleManager.prototype.setColor = function (value) {
- this.node.style.color = value;
-};
-
-StyleManager.prototype.setBold = function (flag) {
- if (flag) {
- this.node.style.fontWeight = 'bold';
- } else {
- this.node.style.fontWeight = 'normal';
- }
-};
-
-StyleManager.prototype.setItalic = function (flag) {
- if (flag) {
- this.node.style.fontStyle = 'italic';
- } else {
- this.node.style.fontStyle = 'normal';
- }
-};
-
-StyleManager.prototype.fontSmaller = function () {
- switch (this.fontSize) {
- case 'small':
- this.setFontSize('x-small');
- break;
-
- case 'medium':
- this.setFontSize('small');
- break;
-
- case 'large':
- this.setFontSize('medium');
- break;
-
- case 'x-large':
- this.setFontSize('large');
- break;
-
- default:
- break;
- } // end switch
-};
-
-StyleManager.prototype.fontLarger = function () {
- switch (this.fontSize) {
- case 'x-small':
- this.setFontSize('small');
- break;
-
- case 'small':
- this.setFontSize('medium');
- break;
-
- case 'medium':
- this.setFontSize('large');
- break;
-
- case 'large':
- this.setFontSize('x-large');
- break;
-
- default:
- break;
- } // end switch
-};
-
-StyleManager.prototype.isMinFontSize = function () {
- return this.fontSize === 'x-small';
-};
-
-StyleManager.prototype.isMaxFontSize = function () {
- return this.fontSize === 'x-large';
-};
-
-StyleManager.prototype.getFontSize = function () {
- return this.fontSize;
-};
-
-StyleManager.prototype.setOption = function (option, value) {
- option = option.toLowerCase();
- if (typeof value === 'string') {
- value = value.toLowerCase();
- }
-
- switch (option) {
- case 'font-bold':
- this.setBold(value);
- break;
-
- case 'font-color':
- this.setColor(value);
- break;
-
- case 'font-family':
- this.setFontFamily(value);
- break;
-
- case 'font-smaller':
- this.fontSmaller();
- break;
-
- case 'font-larger':
- this.fontLarger();
- break;
-
- case 'font-size':
- this.setFontSize(value);
- break;
-
- case 'font-italic':
- this.setItalic(value);
- break;
-
- case 'text-align':
- this.setTextAlign(value);
- break;
-
- case 'text-decoration':
- this.setTextDecoration(value);
- break;
-
- default:
- break;
- } // end switch
-};
diff --git a/build/tests/menubar-editor/reference/2020-11-20_13316/menubar-editor.html b/build/tests/menubar-editor/reference/2020-11-20_13316/menubar-editor.html
deleted file mode 100644
index 6218e8ba6..000000000
--- a/build/tests/menubar-editor/reference/2020-11-20_13316/menubar-editor.html
+++ /dev/null
@@ -1,117 +0,0 @@
-
-
-
-
- Editor Menubar Example | WAI-ARIA Authoring Practices 1.2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Editor Menubar Example
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/css/menubar-editor.css b/build/tests/menubar-editor/reference/2020-11-23_175528/css/menubar-editor.css
deleted file mode 100644
index 72a3f573c..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/css/menubar-editor.css
+++ /dev/null
@@ -1,200 +0,0 @@
-.menubar-editor {
- margin: 0;
- padding: 2px;
- width: 560px;
-}
-
-.menubar-editor.focus {
- padding: 0;
- border: solid 2px #034575;
-}
-
-.menubar-editor textarea {
- padding: 4px;
- margin: 0;
- border: 2px solid #eee;
- height: 400px;
- width: 548px;
- font-size: medium;
- font-family: sans-serif;
-}
-
-.menubar-editor [role="menubar"] {
- margin: 0;
- padding: 2px;
- border: 2px solid #eee;
- font-size: 110%;
- list-style: none;
- background-color: #eee;
- height: 32px;
- display: block;
-}
-
-.menubar-editor [role="menubar"] li {
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
-.menubar-editor [role="menubar"] > li {
- display: inline-block;
- position: relative;
- top: 3px;
- left: 1px;
-}
-
-.menubar-editor [role="menubar"] > li > [role="menuitem"]::after {
- content: url("../images/down-arrow.svg");
- padding-left: 0.25em;
-}
-
-.menubar-editor [role="menubar"] > li > [role="menuitem"]:focus::after {
- content: url("../images/down-arrow-focus.svg");
-}
-
-.menubar-editor
- [role="menubar"]
- > li
- > [role="menuitem"][aria-expanded="true"]::after {
- content: url("../images/up-arrow-focus.svg");
-}
-
-.menubar-editor [role="menubar"] [role="menu"] {
- display: none;
- margin: 0;
- padding: 2px;
- position: absolute;
- border: 2px solid #034575;
- background-color: #eee;
-}
-
-.menubar-editor [role="menubar"] [role="group"] {
- margin: 0;
- padding: 0;
-}
-
-.menubar-editor [role="menubar"] [role="menuitem"][aria-disabled="true"] {
- color: #666;
- text-decoration: line-through;
-}
-
-.menubar-editor [role="menubar"] [role="menuitem"],
-.menubar-editor [role="menubar"] [role="menuitemcheckbox"],
-.menubar-editor [role="menubar"] [role="menuitemradio"],
-.menubar-editor [role="menubar"] [role="separator"] {
- padding: 6px;
- background-color: #eee;
- border: 0 solid #eee;
- color: black;
-}
-
-.menubar-editor [role="menubar"] [role="menuitem"][aria-expanded="true"] {
- padding: 4px;
- border: 2px solid #034575;
- background-color: #034575;
- color: #fff;
- outline: none;
-}
-
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitem"],
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitemcheckbox"],
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitemradio"],
-.menubar-editor [role="menubar"] [role="menu"] [role="separator"] {
- padding-left: 27px;
- width: 8em;
-}
-
-.menubar-editor [role="menubar"] [role="separator"] {
- padding-top: 3px;
- background-image: url("../images/separator.svg");
- background-position: center;
- background-repeat: repeat-x;
-}
-
-.menubar-editor [role="menubar"] [role="menu"] [aria-checked="true"] {
- padding: 6px;
- padding-left: 8px;
- padding-right: 18px;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menuitemradio"][aria-checked="true"]::before {
- content: url("../images/radio-checked.svg");
- padding-right: 3px;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menuitemcheckbox"][aria-checked="true"]::before {
- content: url("../images/checkbox-checked.svg");
- padding-right: 3px;
-}
-
-/* focus and hover styling */
-
-.menubar-editor [role="menubar"] [role="menuitem"]:focus,
-.menubar-editor [role="menubar"] [role="menuitemcheckbox"]:focus,
-.menubar-editor [role="menubar"] [role="menuitemradio"]:focus {
- padding: 4px;
- border: 2px solid #034575;
- background-color: #034575;
- color: #fff;
- outline: none;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menuitemradio"][aria-checked="true"]:focus::before {
- content: url("../images/radio-checked-focus.svg");
- padding-right: 3px;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menuitemcheckbox"][aria-checked="true"]:focus::before {
- content: url("../images/checkbox-checked-focus.svg");
- padding-right: 3px;
-}
-
-.menubar-editor [role="menubar"] [role="menuitem"]:hover {
- padding: 4px;
- border: 2px solid #034575;
-}
-
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitem"]:focus,
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitemcheckbox"]:focus,
-.menubar-editor [role="menubar"] [role="menu"] [role="menuitemradio"]:focus {
- padding-left: 25px;
-}
-
-.menubar-editor
- [role="menubar"]
- [role="menu"]
- [role="menuitem"][aria-checked="true"]:focus,
-.menubar-editor
- [role="menubar"]
- [role="menu"]
- [role="menuitemcheckbox"][aria-checked="true"]:focus,
-.menubar-editor
- [role="menubar"]
- [role="menu"]
- [role="menuitemradio"][aria-checked="true"]:focus {
- padding-left: 8px;
- padding-right: 21px;
-}
-
-/*
-* Text area styles
-*/
-.menubar-editor .italic {
- font-style: italic;
-}
-
-.menubar-editor .bold {
- font-weight: bold;
-}
-
-.menubar-editor .underline {
- text-decoration: underline;
-}
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/css/menubar-navigation.css b/build/tests/menubar-editor/reference/2020-11-23_175528/css/menubar-navigation.css
deleted file mode 100644
index dddce81d0..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/css/menubar-navigation.css
+++ /dev/null
@@ -1,114 +0,0 @@
-.menubar-navigation {
- margin: 0;
- margin-top: 0.5em;
- margin-bottom: 0.5em;
- padding: 7px;
- font-size: 110%;
- list-style: none;
- background-color: #eee;
- border: #eee solid 1px;
- border-radius: 5px;
-}
-
-.menubar-navigation li {
- margin: 0;
- padding: 0;
- border: 0 solid black;
- list-style: none;
-}
-
-.menubar-navigation > li {
- display: inline-block;
- position: relative;
-}
-
-.menubar-navigation > li li {
- display: block;
-}
-
-.menubar-navigation [role="menu"] [role="menuitem"],
-.menubar-navigation [role="menu"] [role="separator"] {
- display: block;
- width: 12em;
- margin: 0;
-}
-
-.menubar-navigation [role="menuitem"],
-.menubar-navigation [role="separator"] {
- padding: 6px;
- background-color: #eee;
- border: 0 solid #eee;
- color: black;
- border-radius: 5px;
-}
-
-.menubar-navigation [role="menuitem"] svg {
- fill: currentColor;
- stroke: currentColor;
-}
-
-.menubar-navigation [role="menuitem"] svg.down {
- padding-left: 0.125em;
-}
-
-.menubar-navigation [role="menuitem"] svg.right {
- position: absolute;
- padding-top: 0.35em;
- right: 0.75em;
-}
-
-.menubar-navigation [role="menuitem"][aria-expanded="true"] svg.down {
- transform: rotate(180deg);
-}
-
-.menubar-navigation [role="menuitem"][aria-expanded="true"] svg.right {
- transform: rotate(90deg) translate(5px, -5px);
-}
-
-.menubar-navigation > li > [role="menuitem"] {
- display: inline-block;
-}
-
-.menubar-navigation [role="menu"] {
- display: none;
- position: absolute;
- margin: 0;
- padding: 0;
- padding: 7px 4px;
- border: 2px solid #034575;
- border-radius: 5px;
- background-color: #eee;
-}
-
-.menubar-navigation [role="group"] {
- margin: 0;
- padding: 0;
-}
-
-.menubar-navigation [role="separator"] {
- padding-top: 3px;
- background-image: url("../images/separator.svg");
- background-position: center;
- background-repeat: repeat-x;
-}
-
-/* focus styling */
-
-.menubar-navigation.focus {
- padding: 6px;
- border: #034575 solid 2px;
-}
-
-.menubar-navigation [role="menuitem"][aria-expanded="true"],
-.menubar-navigation [role="menuitem"]:focus,
-.menubar-navigation [role="menuitem"]:hover {
- background: #034575;
- color: #fff;
- outline: none;
-}
-
-.menubar-navigation [role="menuitem"]:focus,
-.menubar-navigation [role="menuitem"]:hover {
- padding: 2px;
- border: 4px solid #034575;
-}
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/images/checkbox-checked-focus.svg b/build/tests/menubar-editor/reference/2020-11-23_175528/images/checkbox-checked-focus.svg
deleted file mode 100644
index af016333b..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/images/checkbox-checked-focus.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/images/checkbox-checked.svg b/build/tests/menubar-editor/reference/2020-11-23_175528/images/checkbox-checked.svg
deleted file mode 100644
index 5f64b0e3c..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/images/checkbox-checked.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/images/down-arrow-focus.svg b/build/tests/menubar-editor/reference/2020-11-23_175528/images/down-arrow-focus.svg
deleted file mode 100644
index 8f6ea6637..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/images/down-arrow-focus.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/images/down-arrow.svg b/build/tests/menubar-editor/reference/2020-11-23_175528/images/down-arrow.svg
deleted file mode 100644
index a0a2556a5..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/images/down-arrow.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/images/radio-checked-focus.svg b/build/tests/menubar-editor/reference/2020-11-23_175528/images/radio-checked-focus.svg
deleted file mode 100644
index c6250857a..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/images/radio-checked-focus.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/images/radio-checked.svg b/build/tests/menubar-editor/reference/2020-11-23_175528/images/radio-checked.svg
deleted file mode 100644
index 536bf06ad..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/images/radio-checked.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/images/separator.svg b/build/tests/menubar-editor/reference/2020-11-23_175528/images/separator.svg
deleted file mode 100644
index b4b39760b..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/images/separator.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/images/up-arrow-focus.svg b/build/tests/menubar-editor/reference/2020-11-23_175528/images/up-arrow-focus.svg
deleted file mode 100644
index ede8a5d71..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/images/up-arrow-focus.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/images/up-arrow.svg b/build/tests/menubar-editor/reference/2020-11-23_175528/images/up-arrow.svg
deleted file mode 100644
index d034dad15..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/images/up-arrow.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/js/menubar-editor.js b/build/tests/menubar-editor/reference/2020-11-23_175528/js/menubar-editor.js
deleted file mode 100644
index 905b4ce87..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/js/menubar-editor.js
+++ /dev/null
@@ -1,709 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: menubar-editor.js
- *
- * Desc: Creates a menubar to control the styling of text in a textarea element
- */
-
-'use strict';
-
-var MenubarEditor = function (domNode) {
- this.domNode = domNode;
- this.menubarNode = domNode.querySelector('[role=menubar]');
- this.textareaNode = domNode.querySelector('textarea');
- this.actionManager = new StyleManager(this.textareaNode);
-
- this.popups = [];
- this.menuitemGroups = {};
- this.menuOrientation = {};
- this.isPopup = {};
-
- this.firstChars = {}; // see Menubar init method
- this.firstMenuitem = {}; // see Menubar init method
- this.lastMenuitem = {}; // see Menubar init method
-
- this.initMenu(this.menubarNode);
- this.domNode.addEventListener('focusin', this.handleFocusin.bind(this));
- this.domNode.addEventListener('focusout', this.handleFocusout.bind(this));
-
- window.addEventListener(
- 'mousedown',
- this.handleBackgroundMousedown.bind(this),
- true
- );
-};
-
-MenubarEditor.prototype.getMenuitems = function (domNode) {
- var nodes = [];
-
- var initMenu = this.initMenu.bind(this);
- var getGroupId = this.getGroupId.bind(this);
- var menuitemGroups = this.menuitemGroups;
- var popups = this.popups;
-
- function findMenuitems(node, group) {
- var role, flag, groupId;
-
- while (node) {
- flag = true;
- role = node.getAttribute('role');
-
- switch (role) {
- case 'menu':
- node.tabIndex = -1;
- initMenu(node);
- flag = false;
- break;
-
- case 'group':
- groupId = getGroupId(node);
- menuitemGroups[groupId] = [];
- break;
-
- case 'menuitem':
- case 'menuitemradio':
- case 'menuitemcheckbox':
- if (node.getAttribute('aria-haspopup') === 'true') {
- popups.push(node);
- }
- nodes.push(node);
- if (group) {
- group.push(node);
- }
- break;
-
- default:
- break;
- }
-
- if (flag && node.firstElementChild) {
- findMenuitems(node.firstElementChild, menuitemGroups[groupId]);
- }
-
- node = node.nextElementSibling;
- }
- }
-
- findMenuitems(domNode.firstElementChild, false);
-
- return nodes;
-};
-
-MenubarEditor.prototype.initMenu = function (menu) {
- var i, menuitems, menuitem, role, nextElement;
-
- var menuId = this.getMenuId(menu);
-
- menuitems = this.getMenuitems(menu);
- this.menuOrientation[menuId] = this.getMenuOrientation(menu);
- this.isPopup[menuId] = menu.getAttribute('role') === 'menu';
-
- this.menuitemGroups[menuId] = [];
- this.firstChars[menuId] = [];
- this.firstMenuitem[menuId] = null;
- this.lastMenuitem[menuId] = null;
-
- for (i = 0; i < menuitems.length; i++) {
- menuitem = menuitems[i];
- role = menuitem.getAttribute('role');
-
- if (role.indexOf('menuitem') < 0) {
- continue;
- }
-
- menuitem.tabIndex = -1;
- this.menuitemGroups[menuId].push(menuitem);
- this.firstChars[menuId].push(menuitem.textContent[0].toLowerCase());
-
- menuitem.addEventListener('keydown', this.handleKeydown.bind(this));
- menuitem.addEventListener('click', this.handleMenuitemClick.bind(this));
-
- menuitem.addEventListener(
- 'mouseover',
- this.handleMenuitemMouseover.bind(this)
- );
-
- if (!this.firstMenuitem[menuId]) {
- if (this.hasPopup(menuitem)) {
- menuitem.tabIndex = 0;
- }
- this.firstMenuitem[menuId] = menuitem;
- }
- this.lastMenuitem[menuId] = menuitem;
- }
-};
-
-/* MenubarEditor FOCUS MANAGEMENT METHODS */
-
-MenubarEditor.prototype.setFocusToMenuitem = function (menuId, newMenuitem) {
- var isAnyPopupOpen = this.isAnyPopupOpen();
-
- this.closePopupAll(newMenuitem);
-
- if (this.hasPopup(newMenuitem)) {
- if (isAnyPopupOpen) {
- this.openPopup(newMenuitem);
- }
- } else {
- var menu = this.getMenu(newMenuitem);
- var cmi = menu.previousElementSibling;
- if (!this.isOpen(cmi)) {
- this.openPopup(cmi);
- }
- }
-
- if (this.hasPopup(newMenuitem)) {
- if (this.menuitemGroups[menuId]) {
- this.menuitemGroups[menuId].forEach(function (item) {
- item.tabIndex = -1;
- });
- }
- newMenuitem.tabIndex = 0;
- }
-
- newMenuitem.focus();
-};
-
-MenubarEditor.prototype.setFocusToFirstMenuitem = function (menuId) {
- this.setFocusToMenuitem(menuId, this.firstMenuitem[menuId]);
-};
-
-MenubarEditor.prototype.setFocusToLastMenuitem = function (menuId) {
- this.setFocusToMenuitem(menuId, this.lastMenuitem[menuId]);
-};
-
-MenubarEditor.prototype.setFocusToPreviousMenuitem = function (
- menuId,
- currentMenuitem
-) {
- var newMenuitem, index;
-
- if (currentMenuitem === this.firstMenuitem[menuId]) {
- newMenuitem = this.lastMenuitem[menuId];
- } else {
- index = this.menuitemGroups[menuId].indexOf(currentMenuitem);
- newMenuitem = this.menuitemGroups[menuId][index - 1];
- }
-
- this.setFocusToMenuitem(menuId, newMenuitem);
-
- return newMenuitem;
-};
-
-MenubarEditor.prototype.setFocusToNextMenuitem = function (
- menuId,
- currentMenuitem
-) {
- var newMenuitem, index;
-
- if (currentMenuitem === this.lastMenuitem[menuId]) {
- newMenuitem = this.firstMenuitem[menuId];
- } else {
- index = this.menuitemGroups[menuId].indexOf(currentMenuitem);
- newMenuitem = this.menuitemGroups[menuId][index + 1];
- }
- this.setFocusToMenuitem(menuId, newMenuitem);
-
- return newMenuitem;
-};
-
-MenubarEditor.prototype.setFocusByFirstCharacter = function (
- menuId,
- currentMenuitem,
- char
-) {
- var start, index;
-
- char = char.toLowerCase();
-
- // Get start index for search based on position of currentItem
- start = this.menuitemGroups[menuId].indexOf(currentMenuitem) + 1;
- if (start >= this.menuitemGroups[menuId].length) {
- start = 0;
- }
-
- // Check remaining slots in the menu
- index = this.getIndexFirstChars(menuId, start, char);
-
- // If not found in remaining slots, check from beginning
- if (index === -1) {
- index = this.getIndexFirstChars(menuId, 0, char);
- }
-
- // If match was found...
- if (index > -1) {
- this.setFocusToMenuitem(menuId, this.menuitemGroups[menuId][index]);
- }
-};
-
-// Utilities
-
-MenubarEditor.prototype.getIndexFirstChars = function (
- menuId,
- startIndex,
- char
-) {
- for (var i = startIndex; i < this.firstChars[menuId].length; i++) {
- if (char === this.firstChars[menuId][i]) {
- return i;
- }
- }
- return -1;
-};
-
-MenubarEditor.prototype.isPrintableCharacter = function (str) {
- return str.length === 1 && str.match(/\S/);
-};
-
-MenubarEditor.prototype.getIdFromAriaLabel = function (node) {
- var id = node.getAttribute('aria-label');
- if (id) {
- id = id.trim().toLowerCase().replace(' ', '-').replace('/', '-');
- }
- return id;
-};
-
-MenubarEditor.prototype.getMenuOrientation = function (node) {
- var orientation = node.getAttribute('aria-orientation');
-
- if (!orientation) {
- var role = node.getAttribute('role');
-
- switch (role) {
- case 'menubar':
- orientation = 'horizontal';
- break;
-
- case 'menu':
- orientation = 'vertical';
- break;
-
- default:
- break;
- }
- }
-
- return orientation;
-};
-
-MenubarEditor.prototype.getDataOption = function (node) {
- var option = false;
- var hasOption = node.hasAttribute('data-option');
- var role = node.hasAttribute('role');
-
- if (!hasOption) {
- while (node && !hasOption && role !== 'menu' && role !== 'menubar') {
- node = node.parentNode;
- if (node) {
- role = node.getAttribute('role');
- hasOption = node.hasAttribute('data-option');
- }
- }
- }
-
- if (node) {
- option = node.getAttribute('data-option');
- }
-
- return option;
-};
-
-MenubarEditor.prototype.getGroupId = function (node) {
- var id = false;
- var role = node.getAttribute('role');
-
- while (node && role !== 'group' && role !== 'menu' && role !== 'menubar') {
- node = node.parentNode;
- if (node) {
- role = node.getAttribute('role');
- }
- }
-
- if (node) {
- id = role + '-' + this.getIdFromAriaLabel(node);
- }
-
- return id;
-};
-
-MenubarEditor.prototype.getMenuId = function (node) {
- var id = false;
- var role = node.getAttribute('role');
-
- while (node && role !== 'menu' && role !== 'menubar') {
- node = node.parentNode;
- if (node) {
- role = node.getAttribute('role');
- }
- }
-
- if (node) {
- id = role + '-' + this.getIdFromAriaLabel(node);
- }
-
- return id;
-};
-
-MenubarEditor.prototype.getMenu = function (menuitem) {
- var id = false;
- var menu = menuitem;
- var role = menuitem.getAttribute('role');
-
- while (menu && role !== 'menu' && role !== 'menubar') {
- menu = menu.parentNode;
- if (menu) {
- role = menu.getAttribute('role');
- }
- }
-
- return menu;
-};
-
-MenubarEditor.prototype.toggleCheckbox = function (menuitem) {
- if (menuitem.getAttribute('aria-checked') === 'true') {
- menuitem.setAttribute('aria-checked', 'false');
- return false;
- }
- menuitem.setAttribute('aria-checked', 'true');
- return true;
-};
-
-MenubarEditor.prototype.setRadioButton = function (menuitem) {
- var groupId = this.getGroupId(menuitem);
- var radiogroupItems = this.menuitemGroups[groupId];
- radiogroupItems.forEach(function (item) {
- item.setAttribute('aria-checked', 'false');
- });
- menuitem.setAttribute('aria-checked', 'true');
- return menuitem.textContent;
-};
-
-MenubarEditor.prototype.updateFontSizeMenu = function (menuId) {
- var fontSizeMenuitems = this.menuitemGroups[menuId];
- var currentValue = this.actionManager.getFontSize();
-
- for (var i = 0; i < fontSizeMenuitems.length; i++) {
- var mi = fontSizeMenuitems[i];
- var dataOption = mi.getAttribute('data-option');
- var value = mi.textContent.trim().toLowerCase();
-
- switch (dataOption) {
- case 'font-smaller':
- if (currentValue === 'x-small') {
- mi.setAttribute('aria-disabled', 'true');
- } else {
- mi.removeAttribute('aria-disabled');
- }
- break;
-
- case 'font-larger':
- if (currentValue === 'x-large') {
- mi.setAttribute('aria-disabled', 'true');
- } else {
- mi.removeAttribute('aria-disabled');
- }
- break;
-
- default:
- if (currentValue === value) {
- mi.setAttribute('aria-checked', 'true');
- } else {
- mi.setAttribute('aria-checked', 'false');
- }
- break;
- }
- }
-};
-
-// Popup menu methods
-
-MenubarEditor.prototype.isAnyPopupOpen = function () {
- for (var i = 0; i < this.popups.length; i++) {
- if (this.popups[i].getAttribute('aria-expanded') === 'true') {
- return true;
- }
- }
- return false;
-};
-
-MenubarEditor.prototype.openPopup = function (menuitem) {
- // set aria-expanded attribute
- var popupMenu = menuitem.nextElementSibling;
-
- var rect = menuitem.getBoundingClientRect();
-
- // set CSS properties
- popupMenu.style.position = 'absolute';
- popupMenu.style.top = rect.height - 3 + 'px';
- popupMenu.style.left = '0px';
- popupMenu.style.zIndex = 100;
- popupMenu.style.display = 'block';
-
- menuitem.setAttribute('aria-expanded', 'true');
-
- return this.getMenuId(popupMenu);
-};
-
-MenubarEditor.prototype.closePopup = function (menuitem) {
- var menu, cmi;
-
- if (this.hasPopup(menuitem)) {
- if (this.isOpen(menuitem)) {
- menuitem.setAttribute('aria-expanded', 'false');
- menuitem.nextElementSibling.style.display = 'none';
- menuitem.nextElementSibling.style.zIndex = 0;
- }
- } else {
- menu = this.getMenu(menuitem);
- cmi = menu.previousElementSibling;
- cmi.setAttribute('aria-expanded', 'false');
- cmi.focus();
- menu.style.display = 'none';
- menu.style.zIndex = 0;
- }
- return cmi;
-};
-
-MenubarEditor.prototype.doesNotContain = function (popup, menuitem) {
- if (menuitem) {
- return !popup.nextElementSibling.contains(menuitem);
- }
- return true;
-};
-
-MenubarEditor.prototype.closePopupAll = function (menuitem) {
- if (typeof menuitem !== 'object') {
- menuitem = false;
- }
-
- for (var i = 0; i < this.popups.length; i++) {
- var popup = this.popups[i];
- if (this.isOpen(popup) && this.doesNotContain(popup, menuitem)) {
- this.closePopup(popup);
- }
- }
-};
-
-MenubarEditor.prototype.hasPopup = function (menuitem) {
- return menuitem.getAttribute('aria-haspopup') === 'true';
-};
-
-MenubarEditor.prototype.isOpen = function (menuitem) {
- return menuitem.getAttribute('aria-expanded') === 'true';
-};
-
-// Menu event handlers
-
-MenubarEditor.prototype.handleFocusin = function (event) {
- this.domNode.classList.add('focus');
-};
-
-MenubarEditor.prototype.handleFocusout = function (event) {
- this.domNode.classList.remove('focus');
-};
-
-MenubarEditor.prototype.handleBackgroundMousedown = function (event) {
- if (!this.menubarNode.contains(event.target)) {
- this.closePopupAll();
- }
-};
-
-MenubarEditor.prototype.handleKeydown = function (event) {
- var tgt = event.currentTarget,
- key = event.key,
- flag = false,
- menuId = this.getMenuId(tgt),
- id,
- popupMenuId,
- mi,
- role,
- option,
- value;
-
- switch (key) {
- case ' ':
- case 'Enter':
- if (this.hasPopup(tgt)) {
- popupMenuId = this.openPopup(tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- } else {
- role = tgt.getAttribute('role');
- option = this.getDataOption(tgt);
- switch (role) {
- case 'menuitem':
- this.actionManager.setOption(option, tgt.textContent);
- break;
-
- case 'menuitemcheckbox':
- value = this.toggleCheckbox(tgt);
- this.actionManager.setOption(option, value);
- break;
-
- case 'menuitemradio':
- value = this.setRadioButton(tgt);
- this.actionManager.setOption(option, value);
- break;
-
- default:
- break;
- }
-
- if (this.getMenuId(tgt) === 'menu-size') {
- this.updateFontSizeMenu('menu-size');
- }
- this.closePopup(tgt);
- }
- flag = true;
- break;
-
- case 'ArrowDown':
- case 'Down':
- if (this.menuOrientation[menuId] === 'vertical') {
- this.setFocusToNextMenuitem(menuId, tgt);
- flag = true;
- } else {
- if (this.hasPopup(tgt)) {
- popupMenuId = this.openPopup(tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- flag = true;
- }
- }
- break;
-
- case 'Esc':
- case 'Escape':
- this.closePopup(tgt);
- flag = true;
- break;
-
- case 'Left':
- case 'ArrowLeft':
- if (this.menuOrientation[menuId] === 'horizontal') {
- this.setFocusToPreviousMenuitem(menuId, tgt);
- flag = true;
- } else {
- mi = this.closePopup(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToPreviousMenuitem(id, mi);
- this.openPopup(mi);
- }
- break;
-
- case 'Right':
- case 'ArrowRight':
- if (this.menuOrientation[menuId] === 'horizontal') {
- this.setFocusToNextMenuitem(menuId, tgt);
- flag = true;
- } else {
- mi = this.closePopup(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToNextMenuitem(id, mi);
- this.openPopup(mi);
- }
- break;
-
- case 'Up':
- case 'ArrowUp':
- if (this.menuOrientation[menuId] === 'vertical') {
- this.setFocusToPreviousMenuitem(menuId, tgt);
- flag = true;
- } else {
- if (this.hasPopup(tgt)) {
- popupMenuId = this.openPopup(tgt);
- this.setFocusToLastMenuitem(popupMenuId);
- flag = true;
- }
- }
- break;
-
- case 'Home':
- case 'PageUp':
- this.setFocusToFirstMenuitem(menuId, tgt);
- flag = true;
- break;
-
- case 'End':
- case 'PageDown':
- this.setFocusToLastMenuitem(menuId, tgt);
- flag = true;
- break;
-
- case 'Tab':
- this.closePopup(tgt);
- break;
-
- default:
- if (this.isPrintableCharacter(key)) {
- this.setFocusByFirstCharacter(menuId, tgt, key);
- flag = true;
- }
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-MenubarEditor.prototype.handleMenuitemClick = function (event) {
- var tgt = event.currentTarget;
- var value;
-
- if (this.hasPopup(tgt)) {
- if (this.isOpen(tgt)) {
- this.closePopup(tgt);
- } else {
- var menuId = this.openPopup(tgt);
- this.setFocusToMenuitem(menuId, tgt);
- }
- } else {
- var role = tgt.getAttribute('role');
- var option = this.getDataOption(tgt);
- switch (role) {
- case 'menuitem':
- this.actionManager.setOption(option, tgt.textContent);
- break;
-
- case 'menuitemcheckbox':
- value = this.toggleCheckbox(tgt);
- this.actionManager.setOption(option, value);
- break;
-
- case 'menuitemradio':
- value = this.setRadioButton(tgt);
- this.actionManager.setOption(option, value);
- break;
-
- default:
- break;
- }
-
- if (this.getMenuId(tgt) === 'menu-size') {
- this.updateFontSizeMenu('menu-size');
- }
- this.closePopup(tgt);
- }
-
- event.stopPropagation();
- event.preventDefault();
-};
-
-MenubarEditor.prototype.handleMenuitemMouseover = function (event) {
- var tgt = event.currentTarget;
-
- if (this.isAnyPopupOpen() && this.getMenu(tgt)) {
- this.setFocusToMenuitem(this.getMenu(tgt), tgt);
- }
-};
-
-// Initialize menubar editor
-
-window.addEventListener('load', function () {
- var menubarEditors = document.querySelectorAll('.menubar-editor');
- for (var i = 0; i < menubarEditors.length; i++) {
- var menubarEditor = new MenubarEditor(menubarEditors[i]);
- }
-});
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/js/menubar-navigation.js b/build/tests/menubar-editor/reference/2020-11-23_175528/js/menubar-navigation.js
deleted file mode 100644
index ebb2dee4d..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/js/menubar-navigation.js
+++ /dev/null
@@ -1,630 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: menubar-navigation.js
- *
- * Desc: Creates a menubar of hierarchical set of links
- */
-
-'use strict';
-
-var MenubarNavigation = function (domNode) {
- this.domNode = domNode;
-
- this.popups = [];
- this.menuitemGroups = {};
- this.menuOrientation = {};
- this.isPopup = {};
- this.isPopout = {};
- this.openPopups = false;
-
- this.firstChars = {}; // see Menubar init method
- this.firstMenuitem = {}; // see Menubar init method
- this.lastMenuitem = {}; // see Menubar init method
-
- this.initMenu(domNode, 0);
-
- domNode.addEventListener('focusin', this.handleMenubarFocusin.bind(this));
- domNode.addEventListener('focusout', this.handleMenubarFocusout.bind(this));
-
- window.addEventListener(
- 'mousedown',
- this.handleBackgroundMousedown.bind(this),
- true
- );
-};
-
-MenubarNavigation.prototype.getMenuitems = function (domNode, depth) {
- var nodes = [];
-
- var initMenu = this.initMenu.bind(this);
- var menuitemGroups = this.menuitemGroups;
- var popups = this.popups;
-
- function findMenuitems(node) {
- var role, flag;
-
- while (node) {
- flag = true;
- role = node.getAttribute('role');
-
- if (role) {
- role = role.trim().toLowerCase();
- }
-
- switch (role) {
- case 'menu':
- node.tabIndex = -1;
- initMenu(node, depth + 1);
- flag = false;
- break;
-
- case 'menuitem':
- if (node.getAttribute('aria-haspopup') === 'true') {
- popups.push(node);
- }
- nodes.push(node);
- break;
-
- default:
- break;
- }
-
- if (
- flag &&
- node.firstElementChild &&
- node.firstElementChild.tagName !== 'svg'
- ) {
- findMenuitems(node.firstElementChild);
- }
-
- node = node.nextElementSibling;
- }
- }
-
- findMenuitems(domNode.firstElementChild);
-
- return nodes;
-};
-
-MenubarNavigation.prototype.initMenu = function (menu, depth) {
- var menuitems, menuitem, role, nextElement;
-
- var menuId = this.getMenuId(menu);
-
- menuitems = this.getMenuitems(menu, depth);
- this.menuOrientation[menuId] = this.getMenuOrientation(menu);
-
- this.isPopup[menuId] = menu.getAttribute('role') === 'menu' && depth === 1;
- this.isPopout[menuId] = menu.getAttribute('role') === 'menu' && depth > 1;
-
- this.menuitemGroups[menuId] = [];
- this.firstChars[menuId] = [];
- this.firstMenuitem[menuId] = null;
- this.lastMenuitem[menuId] = null;
-
- for (var i = 0; i < menuitems.length; i++) {
- menuitem = menuitems[i];
- role = menuitem.getAttribute('role');
-
- if (role.indexOf('menuitem') < 0) {
- continue;
- }
-
- menuitem.tabIndex = -1;
- this.menuitemGroups[menuId].push(menuitem);
- this.firstChars[menuId].push(menuitem.textContent.trim().toLowerCase()[0]);
-
- menuitem.addEventListener('keydown', this.handleKeydown.bind(this));
- menuitem.addEventListener('click', this.handleMenuitemClick.bind(this));
-
- menuitem.addEventListener(
- 'mouseover',
- this.handleMenuitemMouseover.bind(this)
- );
-
- if (!this.firstMenuitem[menuId]) {
- if (this.hasPopup(menuitem)) {
- menuitem.tabIndex = 0;
- }
- this.firstMenuitem[menuId] = menuitem;
- }
- this.lastMenuitem[menuId] = menuitem;
- }
-};
-
-MenubarNavigation.prototype.setFocusToMenuitem = function (
- menuId,
- newMenuitem
-) {
- this.closePopupAll(newMenuitem);
-
- if (this.menuitemGroups[menuId]) {
- this.menuitemGroups[menuId].forEach(function (item) {
- if (item === newMenuitem) {
- item.tabIndex = 0;
- newMenuitem.focus();
- } else {
- item.tabIndex = -1;
- }
- });
- }
-};
-
-MenubarNavigation.prototype.setFocusToFirstMenuitem = function (
- menuId,
- currentMenuitem
-) {
- this.setFocusToMenuitem(menuId, this.firstMenuitem[menuId]);
-};
-
-MenubarNavigation.prototype.setFocusToLastMenuitem = function (
- menuId,
- currentMenuitem
-) {
- this.setFocusToMenuitem(menuId, this.lastMenuitem[menuId]);
-};
-
-MenubarNavigation.prototype.setFocusToPreviousMenuitem = function (
- menuId,
- currentMenuitem
-) {
- var newMenuitem, index;
-
- if (currentMenuitem === this.firstMenuitem[menuId]) {
- newMenuitem = this.lastMenuitem[menuId];
- } else {
- index = this.menuitemGroups[menuId].indexOf(currentMenuitem);
- newMenuitem = this.menuitemGroups[menuId][index - 1];
- }
-
- this.setFocusToMenuitem(menuId, newMenuitem);
-
- return newMenuitem;
-};
-
-MenubarNavigation.prototype.setFocusToNextMenuitem = function (
- menuId,
- currentMenuitem
-) {
- var newMenuitem, index;
-
- if (currentMenuitem === this.lastMenuitem[menuId]) {
- newMenuitem = this.firstMenuitem[menuId];
- } else {
- index = this.menuitemGroups[menuId].indexOf(currentMenuitem);
- newMenuitem = this.menuitemGroups[menuId][index + 1];
- }
- this.setFocusToMenuitem(menuId, newMenuitem);
-
- return newMenuitem;
-};
-
-MenubarNavigation.prototype.setFocusByFirstCharacter = function (
- menuId,
- currentMenuitem,
- char
-) {
- var start, index;
-
- char = char.toLowerCase();
-
- // Get start index for search based on position of currentItem
- start = this.menuitemGroups[menuId].indexOf(currentMenuitem) + 1;
- if (start >= this.menuitemGroups[menuId].length) {
- start = 0;
- }
-
- // Check remaining slots in the menu
- index = this.getIndexFirstChars(menuId, start, char);
-
- // If not found in remaining slots, check from beginning
- if (index === -1) {
- index = this.getIndexFirstChars(menuId, 0, char);
- }
-
- // If match was found...
- if (index > -1) {
- this.setFocusToMenuitem(menuId, this.menuitemGroups[menuId][index]);
- }
-};
-
-// Utilities
-
-MenubarNavigation.prototype.getIndexFirstChars = function (
- menuId,
- startIndex,
- char
-) {
- for (var i = startIndex; i < this.firstChars[menuId].length; i++) {
- if (char === this.firstChars[menuId][i]) {
- return i;
- }
- }
- return -1;
-};
-
-MenubarNavigation.prototype.isPrintableCharacter = function (str) {
- return str.length === 1 && str.match(/\S/);
-};
-
-MenubarNavigation.prototype.getIdFromAriaLabel = function (node) {
- var id = node.getAttribute('aria-label');
- if (id) {
- id = id.trim().toLowerCase().replace(' ', '-').replace('/', '-');
- }
- return id;
-};
-
-MenubarNavigation.prototype.getMenuOrientation = function (node) {
- var orientation = node.getAttribute('aria-orientation');
-
- if (!orientation) {
- var role = node.getAttribute('role');
-
- switch (role) {
- case 'menubar':
- orientation = 'horizontal';
- break;
-
- case 'menu':
- orientation = 'vertical';
- break;
-
- default:
- break;
- }
- }
-
- return orientation;
-};
-
-MenubarNavigation.prototype.getMenuId = function (node) {
- var id = false;
- var role = node.getAttribute('role');
-
- while (node && role !== 'menu' && role !== 'menubar') {
- node = node.parentNode;
- if (node) {
- role = node.getAttribute('role');
- }
- }
-
- if (node) {
- id = role + '-' + this.getIdFromAriaLabel(node);
- }
-
- return id;
-};
-
-MenubarNavigation.prototype.getMenu = function (menuitem) {
- var id = false;
- var menu = menuitem;
- var role = menuitem.getAttribute('role');
-
- while (menu && role !== 'menu' && role !== 'menubar') {
- menu = menu.parentNode;
- if (menu) {
- role = menu.getAttribute('role');
- }
- }
-
- return menu;
-};
-
-// Popup menu methods
-
-MenubarNavigation.prototype.isAnyPopupOpen = function () {
- for (var i = 0; i < this.popups.length; i++) {
- if (this.popups[i].getAttribute('aria-expanded') === 'true') {
- return true;
- }
- }
- return false;
-};
-
-MenubarNavigation.prototype.openPopup = function (menuId, menuitem) {
- // set aria-expanded attribute
- var popupMenu = menuitem.nextElementSibling;
-
- var rect = menuitem.getBoundingClientRect();
-
- // Set CSS properties
- if (this.isPopup[menuId]) {
- popupMenu.parentNode.style.position = 'relative';
- popupMenu.style.display = 'block';
- popupMenu.style.position = 'absolute';
- popupMenu.style.left = rect.width + 6 + 'px';
- popupMenu.style.top = '0px';
- popupMenu.style.zIndex = 100;
- } else {
- popupMenu.style.display = 'block';
- popupMenu.style.position = 'absolute';
- popupMenu.style.left = '0px';
- popupMenu.style.top = rect.height + 8 + 'px';
- popupMenu.style.zIndex = 100;
- }
-
- menuitem.setAttribute('aria-expanded', 'true');
-
- return this.getMenuId(popupMenu);
-};
-
-MenubarNavigation.prototype.closePopout = function (menuitem) {
- var menu,
- menuId = this.getMenuId(menuitem),
- cmi = menuitem;
-
- while (this.isPopup[menuId] || this.isPopout[menuId]) {
- menu = this.getMenu(cmi);
- cmi = menu.previousElementSibling;
- menuId = this.getMenuId(cmi);
- cmi.setAttribute('aria-expanded', 'false');
- menu.style.display = 'none';
- }
- cmi.focus();
- return cmi;
-};
-
-MenubarNavigation.prototype.closePopup = function (menuitem) {
- var menu,
- menuId = this.getMenuId(menuitem),
- cmi = menuitem;
-
- if (this.isMenubar(menuId)) {
- if (this.isOpen(menuitem)) {
- menuitem.setAttribute('aria-expanded', 'false');
- menuitem.nextElementSibling.style.display = 'none';
- }
- } else {
- menu = this.getMenu(menuitem);
- cmi = menu.previousElementSibling;
- cmi.setAttribute('aria-expanded', 'false');
- cmi.focus();
- menu.style.display = 'none';
- }
-
- return cmi;
-};
-
-MenubarNavigation.prototype.doesNotContain = function (popup, menuitem) {
- if (menuitem) {
- return !popup.nextElementSibling.contains(menuitem);
- }
- return true;
-};
-
-MenubarNavigation.prototype.closePopupAll = function (menuitem) {
- if (typeof menuitem !== 'object') {
- menuitem = false;
- }
- for (var i = 0; i < this.popups.length; i++) {
- var popup = this.popups[i];
- if (this.doesNotContain(popup, menuitem) && this.isOpen(popup)) {
- var cmi = popup.nextElementSibling;
- if (cmi) {
- popup.setAttribute('aria-expanded', 'false');
- cmi.style.display = 'none';
- }
- }
- }
-};
-
-MenubarNavigation.prototype.hasPopup = function (menuitem) {
- return menuitem.getAttribute('aria-haspopup') === 'true';
-};
-
-MenubarNavigation.prototype.isOpen = function (menuitem) {
- return menuitem.getAttribute('aria-expanded') === 'true';
-};
-
-MenubarNavigation.prototype.isMenubar = function (menuId) {
- return !this.isPopup[menuId] && !this.isPopout[menuId];
-};
-
-MenubarNavigation.prototype.isMenuHorizontal = function (menuitem) {
- return this.menuOrientation[menuitem] === 'horizontal';
-};
-
-MenubarNavigation.prototype.hasFocus = function () {
- return this.domNode.classList.contains('focus');
-};
-
-// Menu event handlers
-
-MenubarNavigation.prototype.handleMenubarFocusin = function (event) {
- // if the menubar or any of its menus has focus, add styling hook for hover
- this.domNode.classList.add('focus');
-};
-
-MenubarNavigation.prototype.handleMenubarFocusout = function (event) {
- // remove styling hook for hover on menubar item
- this.domNode.classList.remove('focus');
-};
-
-MenubarNavigation.prototype.handleKeydown = function (event) {
- var tgt = event.currentTarget,
- key = event.key,
- flag = false,
- menuId = this.getMenuId(tgt),
- id,
- popupMenuId,
- mi,
- role,
- option,
- value;
-
- var isAnyPopupOpen = this.isAnyPopupOpen();
-
- switch (key) {
- case ' ':
- case 'Enter':
- if (this.hasPopup(tgt)) {
- this.openPopups = true;
- popupMenuId = this.openPopup(menuId, tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- } else {
- if (tgt.href !== '#') {
- this.closePopupAll();
- window.location.href = tgt.href;
- }
- }
- flag = true;
- break;
-
- case 'Esc':
- case 'Escape':
- this.openPopups = false;
- this.closePopup(tgt);
- flag = true;
- break;
-
- case 'Up':
- case 'ArrowUp':
- if (this.isMenuHorizontal(menuId)) {
- if (this.hasPopup(tgt)) {
- this.openPopups = true;
- popupMenuId = this.openPopup(menuId, tgt);
- this.setFocusToLastMenuitem(popupMenuId);
- }
- } else {
- this.setFocusToPreviousMenuitem(menuId, tgt);
- }
- flag = true;
- break;
-
- case 'ArrowDown':
- case 'Down':
- if (this.isMenuHorizontal(menuId)) {
- if (this.hasPopup(tgt)) {
- this.openPopups = true;
- popupMenuId = this.openPopup(menuId, tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- }
- } else {
- this.setFocusToNextMenuitem(menuId, tgt);
- }
- flag = true;
- break;
-
- case 'Left':
- case 'ArrowLeft':
- if (this.isMenuHorizontal(menuId)) {
- mi = this.setFocusToPreviousMenuitem(menuId, tgt);
- if (isAnyPopupOpen) {
- this.openPopup(menuId, mi);
- }
- } else {
- if (this.isPopout[menuId]) {
- mi = this.closePopup(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToMenuitem(id, mi);
- } else {
- mi = this.closePopup(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToPreviousMenuitem(id, mi);
- this.openPopup(id, mi);
- }
- }
- flag = true;
- break;
-
- case 'Right':
- case 'ArrowRight':
- if (this.isMenuHorizontal(menuId)) {
- mi = this.setFocusToNextMenuitem(menuId, tgt);
- if (isAnyPopupOpen) {
- this.openPopup(menuId, mi);
- }
- } else {
- if (this.hasPopup(tgt)) {
- popupMenuId = this.openPopup(menuId, tgt);
- this.setFocusToFirstMenuitem(popupMenuId);
- } else {
- mi = this.closePopout(tgt);
- id = this.getMenuId(mi);
- mi = this.setFocusToNextMenuitem(id, mi);
- this.openPopup(id, mi);
- }
- }
- flag = true;
- break;
-
- case 'Home':
- case 'PageUp':
- this.setFocusToFirstMenuitem(menuId, tgt);
- flag = true;
- break;
-
- case 'End':
- case 'PageDown':
- this.setFocusToLastMenuitem(menuId, tgt);
- flag = true;
- break;
-
- case 'Tab':
- this.openPopups = false;
- this.closePopup(tgt);
- break;
-
- default:
- if (this.isPrintableCharacter(key)) {
- this.setFocusByFirstCharacter(menuId, tgt, key);
- flag = true;
- }
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-MenubarNavigation.prototype.handleMenuitemClick = function (event) {
- var tgt = event.currentTarget;
- var menuId = this.getMenuId(tgt);
-
- if (this.hasPopup(tgt)) {
- if (this.isOpen(tgt)) {
- this.closePopup(tgt);
- } else {
- this.closePopupAll(tgt);
- this.openPopup(menuId, tgt);
- }
- event.stopPropagation();
- event.preventDefault();
- }
-};
-
-MenubarNavigation.prototype.handleMenuitemMouseover = function (event) {
- var tgt = event.currentTarget;
- var menuId = this.getMenuId(tgt);
-
- if (this.hasFocus()) {
- this.setFocusToMenuitem(menuId, tgt);
- }
-
- if (this.isAnyPopupOpen() || this.hasFocus()) {
- this.closePopupAll(tgt);
- if (this.hasPopup(tgt)) {
- this.openPopup(menuId, tgt);
- }
- }
-};
-
-MenubarNavigation.prototype.handleBackgroundMousedown = function (event) {
- if (!this.domNode.contains(event.target)) {
- this.closePopupAll();
- }
-};
-
-// Initialize menubar editor
-
-window.addEventListener('load', function () {
- var menubarNavs = document.querySelectorAll('.menubar-navigation');
- for (var i = 0; i < menubarNavs.length; i++) {
- var menubarNav = new MenubarNavigation(menubarNavs[i]);
- }
-});
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/js/style-manager.js b/build/tests/menubar-editor/reference/2020-11-23_175528/js/style-manager.js
deleted file mode 100644
index 06e35d7c4..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/js/style-manager.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * File: TextStyling.js
- *
- * Desc: Styling functions for changing the style of an item
- */
-
-'use strict';
-
-var StyleManager = function (node) {
- this.node = node;
- this.fontSize = 'medium';
-};
-
-StyleManager.prototype.setFontFamily = function (value) {
- this.node.style.fontFamily = value;
-};
-
-StyleManager.prototype.setTextDecoration = function (value) {
- this.node.style.textDecoration = value;
-};
-
-StyleManager.prototype.setTextAlign = function (value) {
- this.node.style.textAlign = value;
-};
-
-StyleManager.prototype.setFontSize = function (value) {
- this.fontSize = value;
- this.node.style.fontSize = value;
-};
-
-StyleManager.prototype.setColor = function (value) {
- this.node.style.color = value;
-};
-
-StyleManager.prototype.setBold = function (flag) {
- if (flag) {
- this.node.style.fontWeight = 'bold';
- } else {
- this.node.style.fontWeight = 'normal';
- }
-};
-
-StyleManager.prototype.setItalic = function (flag) {
- if (flag) {
- this.node.style.fontStyle = 'italic';
- } else {
- this.node.style.fontStyle = 'normal';
- }
-};
-
-StyleManager.prototype.fontSmaller = function () {
- switch (this.fontSize) {
- case 'small':
- this.setFontSize('x-small');
- break;
-
- case 'medium':
- this.setFontSize('small');
- break;
-
- case 'large':
- this.setFontSize('medium');
- break;
-
- case 'x-large':
- this.setFontSize('large');
- break;
-
- default:
- break;
- } // end switch
-};
-
-StyleManager.prototype.fontLarger = function () {
- switch (this.fontSize) {
- case 'x-small':
- this.setFontSize('small');
- break;
-
- case 'small':
- this.setFontSize('medium');
- break;
-
- case 'medium':
- this.setFontSize('large');
- break;
-
- case 'large':
- this.setFontSize('x-large');
- break;
-
- default:
- break;
- } // end switch
-};
-
-StyleManager.prototype.isMinFontSize = function () {
- return this.fontSize === 'x-small';
-};
-
-StyleManager.prototype.isMaxFontSize = function () {
- return this.fontSize === 'x-large';
-};
-
-StyleManager.prototype.getFontSize = function () {
- return this.fontSize;
-};
-
-StyleManager.prototype.setOption = function (option, value) {
- option = option.toLowerCase();
- if (typeof value === 'string') {
- value = value.toLowerCase();
- }
-
- switch (option) {
- case 'font-bold':
- this.setBold(value);
- break;
-
- case 'font-color':
- this.setColor(value);
- break;
-
- case 'font-family':
- this.setFontFamily(value);
- break;
-
- case 'font-smaller':
- this.fontSmaller();
- break;
-
- case 'font-larger':
- this.fontLarger();
- break;
-
- case 'font-size':
- this.setFontSize(value);
- break;
-
- case 'font-italic':
- this.setItalic(value);
- break;
-
- case 'text-align':
- this.setTextAlign(value);
- break;
-
- case 'text-decoration':
- this.setTextDecoration(value);
- break;
-
- default:
- break;
- } // end switch
-};
diff --git a/build/tests/menubar-editor/reference/2020-11-23_175528/menubar-editor.html b/build/tests/menubar-editor/reference/2020-11-23_175528/menubar-editor.html
deleted file mode 100644
index 6218e8ba6..000000000
--- a/build/tests/menubar-editor/reference/2020-11-23_175528/menubar-editor.html
+++ /dev/null
@@ -1,117 +0,0 @@
-
-
-
-
- Editor Menubar Example | WAI-ARIA Authoring Practices 1.2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Editor Menubar Example
-
-
-
-
diff --git a/build/tests/modal-dialog/reference/2020-12-17_13353/css/dialog.css b/build/tests/modal-dialog/reference/2020-12-17_13353/css/dialog.css
deleted file mode 100644
index 58b6d54f1..000000000
--- a/build/tests/modal-dialog/reference/2020-12-17_13353/css/dialog.css
+++ /dev/null
@@ -1,165 +0,0 @@
-.hidden {
- display: none;
-}
-
-[role="alertdialog"],
-[role="dialog"] {
- box-sizing: border-box;
- padding: 15px;
- border: 1px solid #000;
- background-color: #fff;
- min-height: 100vh;
-}
-
-@media screen and (min-width: 640px) {
- [role="alertdialog"],
- [role="dialog"] {
- position: absolute;
- top: 2rem;
- left: 50vw; /* move to the middle of the screen (assumes relative parent is the body/viewport) */
- transform: translateX(
- -50%
- ); /* move backwards 50% of this element's width */
-
- min-width: calc(640px - (15px * 2)); /* == breakpoint - left+right margin */
- min-height: auto;
- box-shadow: 0 19px 38px rgba(0, 0, 0, 0.12), 0 15px 12px rgba(0, 0, 0, 0.22);
- }
-}
-
-.dialog_label {
- text-align: center;
-}
-
-.dialog_form {
- margin: 15px;
-}
-
-.dialog_form .label_text {
- box-sizing: border-box;
- padding-right: 0.5em;
- display: inline-block;
- font-size: 16px;
- font-weight: bold;
- width: 30%;
- text-align: right;
-}
-
-.dialog_form .label_info {
- box-sizing: border-box;
- padding-right: 0.5em;
- font-size: 12px;
- width: 30%;
- text-align: right;
- display: inline-block;
-}
-
-.dialog_form_item {
- margin: 10px 0;
- font-size: 0;
-}
-
-.dialog_form_item .wide_input {
- box-sizing: border-box;
- max-width: 70%;
- width: 27em;
-}
-
-.dialog_form_item .city_input {
- box-sizing: border-box;
- max-width: 70%;
- width: 17em;
-}
-
-.dialog_form_item .state_input {
- box-sizing: border-box;
- max-width: 70%;
- width: 15em;
-}
-
-.dialog_form_item .zip_input {
- box-sizing: border-box;
- max-width: 70%;
- width: 9em;
-}
-
-.dialog_form_actions {
- text-align: right;
- padding: 0 20px 20px;
-}
-
-.dialog_close_button {
- float: right;
- position: absolute;
- top: 10px;
- left: 92%;
- height: 25px;
-}
-
-.dialog_close_button img {
- border: 0;
-}
-
-.dialog_desc {
- padding: 10px 20px;
-}
-
-/* native element uses the ::backdrop pseudo-element */
-
-/* dialog::backdrop, */
-.dialog-backdrop {
- display: none;
- position: fixed;
- overflow-y: auto;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-}
-
-@media screen and (min-width: 640px) {
- .dialog-backdrop {
- background: rgba(0, 0, 0, 0.3);
- }
-}
-
-.dialog-backdrop.active {
- display: block;
-}
-
-.no-scroll {
- overflow-y: auto !important;
-}
-
-/* this is added to the body when a dialog is open */
-.has-dialog {
- overflow: hidden;
-}
-
-/* styling for alert-dialog example */
-.notes {
- display: block;
- font-size: 1rem;
- line-height: 1.3;
- min-width: 400px;
- max-width: 100%;
- width: 33%;
-}
-
-.toast {
- background-color: rgba(0, 0, 0, 0.9);
- color: #fff;
- padding: 1rem;
- border: none;
- border-radius: 0.25rem;
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
- position: fixed;
- top: 1rem;
- right: 1rem;
- transform: translateY(-150%);
- transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.toast.active {
- transform: translateY(0);
-}
diff --git a/build/tests/modal-dialog/reference/2020-12-17_13353/dialog.html b/build/tests/modal-dialog/reference/2020-12-17_13353/dialog.html
deleted file mode 100644
index 69879ed9c..000000000
--- a/build/tests/modal-dialog/reference/2020-12-17_13353/dialog.html
+++ /dev/null
@@ -1,171 +0,0 @@
-
-
-
-
-Modal Dialog Example
-
-
-
-
-
-
-
-
-
-
-
- Modal Dialog Example
-
- Following is an example implementation of the
- design pattern for modal dialogs.
- The below Add Delivery Address button opens a modal dialog that contains two buttons that open other dialogs.
- The accessibility features section explains the rationale for initial focus placement and use of aria-describedby
in each dialog.
-
-
-
-
- Navigate forwards from here
-
-
Add Delivery Address
-
-
-
Add Delivery Address
-
-
- Verify Address
- Add
- Cancel
-
-
-
-
-
-
Verification Result
-
-
This is just a demonstration. If it were a real application, it would
- provide a message telling whether the entered address is valid.
-
- For demonstration purposes, this dialog has a lot of text. It demonstrates a
- scenario where:
-
-
- The first interactive element, the help link, is at the bottom of the dialog.
- If focus is placed on the first interactive element when the dialog opens, the
- validation message may not be visible.
- If the validation message is visible and the focus is on the help link, then
- the focus may not be visible.
-
- When the dialog opens, it is important that both:
-
- The beginning of the text is visible so users do not have to scroll back to
- start reading.
- The keyboard focus always remains visible.
-
-
-
-
There are several ways to resolve this issue:
-
- Place an interactive element at the top of the dialog, e.g., a button or link.
- Make a static element focusable, e.g., the dialog title or the first block of
- text.
-
-
- Please DO NOT make the element with role dialog focusable!
-
-
- The larger a focusable element is, the more difficult it is to visually
- identify the location of focus, especially for users with a narrow field of view.
- The dialog has a visual border, so creating a clear visual indicator of focus
- when the entire dialog has focus is not very feasible.
- Screen readers read the label and content of focusable elements. The dialog
- contains its label and a lot of content! If a dialog like this one has focus, the
- actual focus is difficult to comprehend.
-
-
- In this dialog, the first paragraph has tabindex=-1
. The first
- paragraph is also contained inside the element that provides the dialog description, i.e., the element that is referenced
- by aria-describedby
. With some screen readers, this may have one negative
- but relatively insignificant side effect when the dialog opens -- the first paragraph
- may be announced twice. Nonetheless, making the first paragraph focusable and setting
- the initial focus on it is the most broadly accessible option.
-
-
-
-
-
-
-
-
Address Added
-
- The address you provided has been added to your list of delivery addresses. It is ready
- for immediate use. If you wish to remove it, you can do so from
- your profile.
-
-
- OK
-
-
-
-
-
End of the Road!
-
- You activated a fake link or button that goes nowhere!
- The link or button is present for demonstration purposes only.
-
-
- Close
-
-
-
-
- Navigate backwards from here
-
-
-
-
-
diff --git a/build/tests/modal-dialog/reference/2020-12-17_13353/js/dialog.js b/build/tests/modal-dialog/reference/2020-12-17_13353/js/dialog.js
deleted file mode 100644
index 0d2242e5e..000000000
--- a/build/tests/modal-dialog/reference/2020-12-17_13353/js/dialog.js
+++ /dev/null
@@ -1,336 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- */
-
-'use strict';
-
-var aria = aria || {};
-
-aria.Utils = aria.Utils || {};
-
-(function () {
- /*
- * When util functions move focus around, set this true so the focus listener
- * can ignore the events.
- */
- aria.Utils.IgnoreUtilFocusChanges = false;
-
- aria.Utils.dialogOpenClass = 'has-dialog';
-
- /**
- * @desc Set focus on descendant nodes until the first focusable element is
- * found.
- * @param element
- * DOM node for which to find the first focusable descendant.
- * @returns
- * true if a focusable element is found and focus is set.
- */
- aria.Utils.focusFirstDescendant = function (element) {
- for (var i = 0; i < element.childNodes.length; i++) {
- var child = element.childNodes[i];
- if (
- aria.Utils.attemptFocus(child) ||
- aria.Utils.focusFirstDescendant(child)
- ) {
- return true;
- }
- }
- return false;
- }; // end focusFirstDescendant
-
- /**
- * @desc Find the last descendant node that is focusable.
- * @param element
- * DOM node for which to find the last focusable descendant.
- * @returns
- * true if a focusable element is found and focus is set.
- */
- aria.Utils.focusLastDescendant = function (element) {
- for (var i = element.childNodes.length - 1; i >= 0; i--) {
- var child = element.childNodes[i];
- if (
- aria.Utils.attemptFocus(child) ||
- aria.Utils.focusLastDescendant(child)
- ) {
- return true;
- }
- }
- return false;
- }; // end focusLastDescendant
-
- /**
- * @desc Set Attempt to set focus on the current node.
- * @param element
- * The node to attempt to focus on.
- * @returns
- * true if element is focused.
- */
- aria.Utils.attemptFocus = function (element) {
- if (!aria.Utils.isFocusable(element)) {
- return false;
- }
-
- aria.Utils.IgnoreUtilFocusChanges = true;
- try {
- element.focus();
- } catch (e) {
- // continue regardless of error
- }
- aria.Utils.IgnoreUtilFocusChanges = false;
- return document.activeElement === element;
- }; // end attemptFocus
-
- /* Modals can open modals. Keep track of them with this array. */
- aria.OpenDialogList = aria.OpenDialogList || new Array(0);
-
- /**
- * @returns the last opened dialog (the current dialog)
- */
- aria.getCurrentDialog = function () {
- if (aria.OpenDialogList && aria.OpenDialogList.length) {
- return aria.OpenDialogList[aria.OpenDialogList.length - 1];
- }
- };
-
- aria.closeCurrentDialog = function () {
- var currentDialog = aria.getCurrentDialog();
- if (currentDialog) {
- currentDialog.close();
- return true;
- }
-
- return false;
- };
-
- aria.handleEscape = function (event) {
- var key = event.which || event.keyCode;
-
- if (key === aria.KeyCode.ESC && aria.closeCurrentDialog()) {
- event.stopPropagation();
- }
- };
-
- document.addEventListener('keyup', aria.handleEscape);
-
- /**
- * @constructor
- * @desc Dialog object providing modal focus management.
- *
- * Assumptions: The element serving as the dialog container is present in the
- * DOM and hidden. The dialog container has role='dialog'.
- *
- * @param dialogId
- * The ID of the element serving as the dialog container.
- * @param focusAfterClosed
- * Either the DOM node or the ID of the DOM node to focus when the
- * dialog closes.
- * @param focusFirst
- * Optional parameter containing either the DOM node or the ID of the
- * DOM node to focus when the dialog opens. If not specified, the
- * first focusable element in the dialog will receive focus.
- */
- aria.Dialog = function (dialogId, focusAfterClosed, focusFirst) {
- this.dialogNode = document.getElementById(dialogId);
- if (this.dialogNode === null) {
- throw new Error('No element found with id="' + dialogId + '".');
- }
-
- var validRoles = ['dialog', 'alertdialog'];
- var isDialog = (this.dialogNode.getAttribute('role') || '')
- .trim()
- .split(/\s+/g)
- .some(function (token) {
- return validRoles.some(function (role) {
- return token === role;
- });
- });
- if (!isDialog) {
- throw new Error(
- 'Dialog() requires a DOM element with ARIA role of dialog or alertdialog.'
- );
- }
-
- // Wrap in an individual backdrop element if one doesn't exist
- // Native elements use the ::backdrop pseudo-element, which
- // works similarly.
- var backdropClass = 'dialog-backdrop';
- if (this.dialogNode.parentNode.classList.contains(backdropClass)) {
- this.backdropNode = this.dialogNode.parentNode;
- } else {
- this.backdropNode = document.createElement('div');
- this.backdropNode.className = backdropClass;
- this.dialogNode.parentNode.insertBefore(
- this.backdropNode,
- this.dialogNode
- );
- this.backdropNode.appendChild(this.dialogNode);
- }
- this.backdropNode.classList.add('active');
-
- // Disable scroll on the body element
- document.body.classList.add(aria.Utils.dialogOpenClass);
-
- if (typeof focusAfterClosed === 'string') {
- this.focusAfterClosed = document.getElementById(focusAfterClosed);
- } else if (typeof focusAfterClosed === 'object') {
- this.focusAfterClosed = focusAfterClosed;
- } else {
- throw new Error(
- 'the focusAfterClosed parameter is required for the aria.Dialog constructor.'
- );
- }
-
- if (typeof focusFirst === 'string') {
- this.focusFirst = document.getElementById(focusFirst);
- } else if (typeof focusFirst === 'object') {
- this.focusFirst = focusFirst;
- } else {
- this.focusFirst = null;
- }
-
- // Bracket the dialog node with two invisible, focusable nodes.
- // While this dialog is open, we use these to make sure that focus never
- // leaves the document even if dialogNode is the first or last node.
- var preDiv = document.createElement('div');
- this.preNode = this.dialogNode.parentNode.insertBefore(
- preDiv,
- this.dialogNode
- );
- this.preNode.tabIndex = 0;
- var postDiv = document.createElement('div');
- this.postNode = this.dialogNode.parentNode.insertBefore(
- postDiv,
- this.dialogNode.nextSibling
- );
- this.postNode.tabIndex = 0;
-
- // If this modal is opening on top of one that is already open,
- // get rid of the document focus listener of the open dialog.
- if (aria.OpenDialogList.length > 0) {
- aria.getCurrentDialog().removeListeners();
- }
-
- this.addListeners();
- aria.OpenDialogList.push(this);
- this.clearDialog();
- this.dialogNode.className = 'default_dialog'; // make visible
-
- if (this.focusFirst) {
- this.focusFirst.focus();
- } else {
- aria.Utils.focusFirstDescendant(this.dialogNode);
- }
-
- this.lastFocus = document.activeElement;
- }; // end Dialog constructor
-
- aria.Dialog.prototype.clearDialog = function () {
- Array.prototype.map.call(
- this.dialogNode.querySelectorAll('input'),
- function (input) {
- input.value = '';
- }
- );
- };
-
- /**
- * @desc
- * Hides the current top dialog,
- * removes listeners of the top dialog,
- * restore listeners of a parent dialog if one was open under the one that just closed,
- * and sets focus on the element specified for focusAfterClosed.
- */
- aria.Dialog.prototype.close = function () {
- aria.OpenDialogList.pop();
- this.removeListeners();
- aria.Utils.remove(this.preNode);
- aria.Utils.remove(this.postNode);
- this.dialogNode.className = 'hidden';
- this.backdropNode.classList.remove('active');
- this.focusAfterClosed.focus();
-
- // If a dialog was open underneath this one, restore its listeners.
- if (aria.OpenDialogList.length > 0) {
- aria.getCurrentDialog().addListeners();
- } else {
- document.body.classList.remove(aria.Utils.dialogOpenClass);
- }
- }; // end close
-
- /**
- * @desc
- * Hides the current dialog and replaces it with another.
- *
- * @param newDialogId
- * ID of the dialog that will replace the currently open top dialog.
- * @param newFocusAfterClosed
- * Optional ID or DOM node specifying where to place focus when the new dialog closes.
- * If not specified, focus will be placed on the element specified by the dialog being replaced.
- * @param newFocusFirst
- * Optional ID or DOM node specifying where to place focus in the new dialog when it opens.
- * If not specified, the first focusable element will receive focus.
- */
- aria.Dialog.prototype.replace = function (
- newDialogId,
- newFocusAfterClosed,
- newFocusFirst
- ) {
- var closedDialog = aria.getCurrentDialog();
- aria.OpenDialogList.pop();
- this.removeListeners();
- aria.Utils.remove(this.preNode);
- aria.Utils.remove(this.postNode);
- this.dialogNode.className = 'hidden';
- this.backdropNode.classList.remove('active');
-
- var focusAfterClosed = newFocusAfterClosed || this.focusAfterClosed;
- var dialog = new aria.Dialog(newDialogId, focusAfterClosed, newFocusFirst);
- }; // end replace
-
- aria.Dialog.prototype.addListeners = function () {
- document.addEventListener('focus', this.trapFocus, true);
- }; // end addListeners
-
- aria.Dialog.prototype.removeListeners = function () {
- document.removeEventListener('focus', this.trapFocus, true);
- }; // end removeListeners
-
- aria.Dialog.prototype.trapFocus = function (event) {
- if (aria.Utils.IgnoreUtilFocusChanges) {
- return;
- }
- var currentDialog = aria.getCurrentDialog();
- if (currentDialog.dialogNode.contains(event.target)) {
- currentDialog.lastFocus = event.target;
- } else {
- aria.Utils.focusFirstDescendant(currentDialog.dialogNode);
- if (currentDialog.lastFocus == document.activeElement) {
- aria.Utils.focusLastDescendant(currentDialog.dialogNode);
- }
- currentDialog.lastFocus = document.activeElement;
- }
- }; // end trapFocus
-
- window.openDialog = function (dialogId, focusAfterClosed, focusFirst) {
- var dialog = new aria.Dialog(dialogId, focusAfterClosed, focusFirst);
- };
-
- window.closeDialog = function (closeButton) {
- var topDialog = aria.getCurrentDialog();
- if (topDialog.dialogNode.contains(closeButton)) {
- topDialog.close();
- }
- }; // end closeDialog
-
- window.replaceDialog = function (
- newDialogId,
- newFocusAfterClosed,
- newFocusFirst
- ) {
- var topDialog = aria.getCurrentDialog();
- if (topDialog.dialogNode.contains(document.activeElement)) {
- topDialog.replace(newDialogId, newFocusAfterClosed, newFocusFirst);
- }
- }; // end replaceDialog
-})();
diff --git a/build/tests/modal-dialog/reference/2020-12-17_13353/js/utils.js b/build/tests/modal-dialog/reference/2020-12-17_13353/js/utils.js
deleted file mode 100644
index adb0e2b74..000000000
--- a/build/tests/modal-dialog/reference/2020-12-17_13353/js/utils.js
+++ /dev/null
@@ -1,131 +0,0 @@
-'use strict';
-/**
- * @namespace aria
- */
-
-var aria = aria || {};
-
-/**
- * @desc
- * Key code constants
- */
-aria.KeyCode = {
- BACKSPACE: 8,
- TAB: 9,
- RETURN: 13,
- SHIFT: 16,
- ESC: 27,
- SPACE: 32,
- PAGE_UP: 33,
- PAGE_DOWN: 34,
- END: 35,
- HOME: 36,
- LEFT: 37,
- UP: 38,
- RIGHT: 39,
- DOWN: 40,
- DELETE: 46,
-};
-
-aria.Utils = aria.Utils || {};
-
-// Polyfill src https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
-aria.Utils.matches = function (element, selector) {
- if (!Element.prototype.matches) {
- Element.prototype.matches =
- Element.prototype.matchesSelector ||
- Element.prototype.mozMatchesSelector ||
- Element.prototype.msMatchesSelector ||
- Element.prototype.oMatchesSelector ||
- Element.prototype.webkitMatchesSelector ||
- function (s) {
- var matches = element.parentNode.querySelectorAll(s);
- var i = matches.length;
- while (--i >= 0 && matches.item(i) !== this) {
- // empty
- }
- return i > -1;
- };
- }
-
- return element.matches(selector);
-};
-
-aria.Utils.remove = function (item) {
- if (item.remove && typeof item.remove === 'function') {
- return item.remove();
- }
- if (
- item.parentNode &&
- item.parentNode.removeChild &&
- typeof item.parentNode.removeChild === 'function'
- ) {
- return item.parentNode.removeChild(item);
- }
- return false;
-};
-
-aria.Utils.isFocusable = function (element) {
- if (element.tabIndex < 0) {
- return false;
- }
-
- if (element.disabled) {
- return false;
- }
-
- switch (element.nodeName) {
- case 'A':
- return !!element.href && element.rel != 'ignore';
- case 'INPUT':
- return element.type != 'hidden';
- case 'BUTTON':
- case 'SELECT':
- case 'TEXTAREA':
- return true;
- default:
- return false;
- }
-};
-
-aria.Utils.getAncestorBySelector = function (element, selector) {
- if (!aria.Utils.matches(element, selector + ' ' + element.tagName)) {
- // Element is not inside an element that matches selector
- return null;
- }
-
- // Move up the DOM tree until a parent matching the selector is found
- var currentNode = element;
- var ancestor = null;
- while (ancestor === null) {
- if (aria.Utils.matches(currentNode.parentNode, selector)) {
- ancestor = currentNode.parentNode;
- } else {
- currentNode = currentNode.parentNode;
- }
- }
-
- return ancestor;
-};
-
-aria.Utils.hasClass = function (element, className) {
- return new RegExp('(\\s|^)' + className + '(\\s|$)').test(element.className);
-};
-
-aria.Utils.addClass = function (element, className) {
- if (!aria.Utils.hasClass(element, className)) {
- element.className += ' ' + className;
- }
-};
-
-aria.Utils.removeClass = function (element, className) {
- var classRegex = new RegExp('(\\s|^)' + className + '(\\s|$)');
- element.className = element.className.replace(classRegex, ' ').trim();
-};
-
-aria.Utils.bindMethods = function (object /* , ...methodNames */) {
- var methodNames = Array.prototype.slice.call(arguments, 1);
- methodNames.forEach(function (method) {
- object[method] = object[method].bind(object);
- });
-};
diff --git a/build/tests/resources/EXAMPLE_RESULT.html b/build/tests/resources/EXAMPLE_RESULT.html
deleted file mode 100644
index d526405ca..000000000
--- a/build/tests/resources/EXAMPLE_RESULT.html
+++ /dev/null
@@ -1,191 +0,0 @@
-
-
- Checkbox role, name and state are communicated when navigating to a checkbox.
-
-
-Checkbox role, name and state are communicated when navigating to a checkbox.
-Test result: FAIL
-After user performs task "read the first checkbox" in reading mode, the following behavior was observed:
-
-
-
-
- PASS
- The role 'checkbox' is spoken
-
-
- Passed for commands: X / Shift+X, Tab / Shift+Tab, Control+Insert+X to see a list of checkboxes; then use the Up/Down arrows to select a checkbox; then press Enter to navigate to that checkbox, Insert+Tab (or CapsLock+Tab), Insert+Up (or CapsLock+I).
- Incomplete or no information supplied for commands: Up Arrow / Down Arrow, Left Arrow / Right Arrow (with Smart Navigation on).
-
-
-
-
- PASS
- The name 'Lettuce' is spoken
-
-
- Passed for commands: X / Shift+X, Tab / Shift+Tab, Up Arrow / Down Arrow, Left Arrow / Right Arrow (with Smart Navigation on), Control+Insert+X to see a list of checkboxes; then use the Up/Down arrows to select a checkbox; then press Enter to navigate to that checkbox, Insert+Tab (or CapsLock+Tab), Insert+Up (or CapsLock+I).
-
-
-
-
- PASS
- The state of the checkbox (not checked) is conveyed
-
-
- Passed for commands: X / Shift+X, Tab / Shift+Tab, Up Arrow / Down Arrow, Left Arrow / Right Arrow (with Smart Navigation on), Control+Insert+X to see a list of checkboxes; then use the Up/Down arrows to select a checkbox; then press Enter to navigate to that checkbox, Insert+Tab (or CapsLock+Tab), Insert+Up (or CapsLock+I).
-
-
-
-
- FAIL
- After command, JAWS is in Forms Mode
-
-
- Incorrect information supplied after commands: Tab / Shift+Tab.
-
-
-
-
-
-The following unwanted behaviors were observed:
-
-
-
-
- Assistive technology produced irrelevent and distracting output.
- This behavior occured after the following commands: Insert+Up (or CapsLock+I)
-
-
-
-After user performs task "read the first checkbox" in interaction mode, the following behavior was observed:
-
-
-
-
- FAIL
- The role 'checkbox' is spoken
-
-
- Incorrect information supplied after commands: Tab / Shift+Tab, Insert+Tab (or CapsLock+Tab), Insert+Up (or CapsLock+I).
-
-
-
-
- PASS
- The name 'Lettuce' is spoken
-
-
- Passed for commands: Tab / Shift+Tab, Insert+Tab (or CapsLock+Tab), Insert+Up (or CapsLock+I).
-
-
-
-
- PASS
- The state of the checkbox (not checked) is conveyed
-
-
- Passed for commands: Tab / Shift+Tab, Insert+Tab (or CapsLock+Tab), Insert+Up (or CapsLock+I).
-
-
-
-
-
-The following unwanted behaviors were observed:
-
-
-
-
- Assistive technology produced irrelevent and distracting output.
- This behavior occured after the following commands: Insert+Up (or CapsLock+I)
-
-
-
-After user performs task "navigate to the first checkbox (which is now checked)" in reading mode, the following behavior was observed:
-
-
-
-
- PASS
- The role 'checkbox' is spoken
-
-
- Passed for commands: X / Shift+X, Tab / Shift+Tab, Up Arrow / Down Arrow, Left Arrow / Right Arrow (with Smart Navigation on), Control+Insert+X to see a list of checkboxes; then use the Up/Down arrows to select a checkbox; then press Enter to navigate to that checkbox, Insert+Tab (or CapsLock+Tab), Insert+Up (or CapsLock+I).
-
-
-
-
- PASS
- The name 'Lettuce' is spoken
-
-
- Passed for commands: X / Shift+X, Tab / Shift+Tab, Up Arrow / Down Arrow, Left Arrow / Right Arrow (with Smart Navigation on), Control+Insert+X to see a list of checkboxes; then use the Up/Down arrows to select a checkbox; then press Enter to navigate to that checkbox, Insert+Tab (or CapsLock+Tab), Insert+Up (or CapsLock+I).
-
-
-
-
- PASS
- The state of the checkbox (checked) is conveyed
-
-
- Passed for commands: X / Shift+X, Tab / Shift+Tab, Up Arrow / Down Arrow, Left Arrow / Right Arrow (with Smart Navigation on), Control+Insert+X to see a list of checkboxes; then use the Up/Down arrows to select a checkbox; then press Enter to navigate to that checkbox, Insert+Tab (or CapsLock+Tab), Insert+Up (or CapsLock+I).
-
-
-
-
- FAIL
- After command, JAWS is in Forms Mode
-
-
- Incorrect information supplied after commands: Tab / Shift+Tab.
-
-
-
-
-
-After user performs task "navigate to the first checkbox (which is now checked)" in interaction mode, the following behavior was observed:
-
-
-
-
- PASS
- The role 'checkbox' is spoken
-
-
- Passed for commands: Tab / Shift+Tab, Insert+Tab (or CapsLock+Tab), Insert+Up (or CapsLock+I).
-
-
-
-
- PASS
- The name 'Lettuce' is spoken
-
-
- Passed for commands: Tab / Shift+Tab, Insert+Tab (or CapsLock+Tab), Insert+Up (or CapsLock+I).
-
-
-
-
- PASS
- The state of the checkbox (checked) is conveyed
-
-
- Passed for commands: Tab / Shift+Tab, Insert+Tab (or CapsLock+Tab), Insert+Up (or CapsLock+I).
-
-
-
-
-
-
-
diff --git a/build/tests/resources/TEMPLATE_TEST_FILE.html b/build/tests/resources/TEMPLATE_TEST_FILE.html
deleted file mode 100644
index eacdf3c5a..000000000
--- a/build/tests/resources/TEMPLATE_TEST_FILE.html
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-WEB AUTHOR FRIENDLY DESCRIPTION OF TEST.
-
-
-
-
-
diff --git a/build/tests/resources/aria-at-harness.mjs b/build/tests/resources/aria-at-harness.mjs
deleted file mode 100644
index a47e1a1d0..000000000
--- a/build/tests/resources/aria-at-harness.mjs
+++ /dev/null
@@ -1,860 +0,0 @@
-import {commandsAPI} from './at-commands.mjs';
-
-const UNDESIRABLES = [
- "Output is excessively verbose, e.g., includes redundant and/or irrelevant speech",
- "Reading cursor position changed in an unexpected manner",
- "Screen reader became extremely sluggish",
- "Screen reader crashed",
- "Browser crashed"
-];
-
-const TEST_HTML_OUTLINE = `
-
-
Test cannot be performed due to error(s)!
-
-
-
-`;
-const PAGE_STYLES = `
- table {
- border-collapse: collapse;
- margin-bottom: 1em;
- }
-
- table, td, th {
- border: 1px solid black;
- }
-
- td {
- padding: .5em;
- }
-
- table.record-results tr:first-child {
- font-weight: bold;
- }
-
- textarea {
- width: 100%
- }
-
- fieldset.problem-select {
- margin-top: 1em;
- margin-left: 1em;
- }
-
- .required:not(.highlight-required) {
- display: none;
- }
-
- .required-other:not(.highlight-required) {
- display: none;
- }
-
- .required.highlight-required {
- color: red;
- }
-
- fieldset.highlight-required {
- border-color: red;
- }
-
- fieldset .highlight-required {
- color: red;
- }
-
- .off-screen {
- position: absolute !important;
- height: 1px;
- width: 1px;
- overflow: hidden;
- clip: rect(1px, 1px, 1px, 1px);
- white-space: nowrap;
- }
-`;
-
-let behavior;
-let behaviorResults;
-let overallStatus;
-const errors = [];
-let testPageUri;
-let testPageWindow;
-let showResults = true;
-let showSubmitButton = true;
-
-let at;
-let commandsData;
-let commapi;
-let support;
-
-export function initialize(newSupport, newCommandsData) {
- support = newSupport;
- commandsData = newCommandsData;
- commapi = new commandsAPI(commandsData, support);
-
- // Get the AT under test from the URL search params
- // set the showResults flag from the URL search params
- let params = (new URL(document.location)).searchParams;
- at = support.ats[0];
- for (const [key, value] of params) {
- if (key === 'at') {
- let requestedAT = value;
- if (commapi.isKnownAT(requestedAT)) {
- at = commapi.isKnownAT(requestedAT);
- }
- else {
- errors.push(`Harness does not have commands for the requested assistive technology ('${requestedAT}'), showing commands for assistive technology '${at.name}' instead. To test '${requestedAT}', please contribute command mappings to this project.`);
- }
- }
- if (key === 'showResults') {
- if (value === 'true') {
- showResults = true;
- } else if (value === 'false') {
- showResults = false;
- }
- }
- if (key === 'showSubmitButton') {
- if (value === 'true') {
- showSubmitButton = true;
- } else if (value === 'false') {
- showSubmitButton = false;
- }
- }
- }
-}
-
-function openTestPagePopup() {
- testPageWindow = window.open(testPageUri, '_blank', 'toolbar=0,location=0,menubar=0,width=400,height=400');
-
- document.getElementById('open-test-page').disabled = true;
-
- // If the window is closed, re-enable open popup button
- testPageWindow.onunload = function(event) {
- window.setTimeout(() => {
- if (testPageWindow.closed) {
- testPageWindow = undefined;
- document.getElementById('open-test-page').disabled = false;
- }
- }, 100);
-
- };
-
- executeScriptInTestPage();
-}
-
-function putTestPageWindowIntoCorrectState() {
- // testPageWindow.location.reload(); // TODO: Address the race condition this causes with script execution.
- executeScriptInTestPage();
-}
-
-function executeScriptInTestPage() {
- let setupTestPage = behavior.setupTestPage;
- if (setupTestPage) {
- if (testPageWindow.location.origin !== window.location.origin // make sure the origin is the same, and prevent this from firing on an 'about' page
- || testPageWindow.document.readyState !== 'complete'
- ) {
- window.setTimeout(() => {
- executeScriptInTestPage();
- }, 100);
- return;
- }
-
- scripts[behavior.setupTestPage](testPageWindow.document);
- }
-}
-
-export function verifyATBehavior(atBehavior) {
- // This is temporary until transition is complete from multiple modes to one mode
- let mode = typeof atBehavior.mode === 'string' ? atBehavior.mode : atBehavior.mode[0];
-
- let newBehavior = Object.assign({}, atBehavior, { mode: mode });
- newBehavior.commands = commapi.getATCommands(mode, atBehavior.task, at);
-
- newBehavior.output_assertions = newBehavior.output_assertions ? newBehavior.output_assertions : [];
- newBehavior.additional_assertions = newBehavior.additional_assertions
- ? atBehavior.additional_assertions[at.key] || []
- : [];
- if (!behavior && newBehavior.commands.length) {
- behavior = newBehavior;
- } else {
- throw new Error('Test files should only contain one verifyATBehavior call.');
- }
-}
-
-export function displayTestPageAndInstructions(testPage) {
- testPageUri = testPage;
-
- if (document.readyState !== 'complete') {
- window.setTimeout(() => {
- displayTestPageAndInstructions(testPage);
- }, 100);
- return;
- }
-
- document.querySelector('html').setAttribute('lang', 'en');
- document.body.innerHTML = (TEST_HTML_OUTLINE);
- var style = document.createElement('style');
- style.innerHTML = PAGE_STYLES;
- document.head.appendChild(style);
-
- showUserError();
-
- displayInstructionsForBehaviorTest();
-}
-
-function displayInstructionsForBehaviorTest() {
-
- function getSetupInstructions() {
- let html = '';
- for (let i = 0; i < (userInstructions.length - 1); i++) {
- html += `${userInstructions[i]} `;
- }
- return html;
- }
-
- // First, execute necesary set up script in test page if the test page is open from a previous behavior test
- if (testPageWindow) {
- putTestPageWindowIntoCorrectState();
- }
-
- const mode = behavior.mode;
- const modeInstructions = commapi.getModeInstructions(mode, at);
- const userInstructions = behavior.specific_user_instruction.split('|');
- const lastInstruction = userInstructions[userInstructions.length-1];
- const commands = behavior.commands;
- const assertions = behavior.output_assertions.map((a) => a[1]);
- const additionalBehaviorAssertions = behavior.additional_assertions;
- const setupScriptDescription = behavior.setup_script_description ? ` and runs a script that ${behavior.setup_script_description}.` : behavior.setup_script_description;
- // As a hack, special case mode instructions for VoiceOver for macOS until we support modeless tests.
- // ToDo: remove this when resolving issue #194
- const modePhrase = at.name === "VoiceOver for macOS" ? "Describe " : `With ${at.name} in ${mode} mode, describe `;
-
- let instructionsEl = document.getElementById('instructions');
- instructionsEl.innerHTML = `
-
-${modePhrase} how ${at.name} behaves when performing task "${lastInstruction}"
-Test instructions
-
- Restore default settings for ${at.name}. For help, read Configuring Screen Readers for Testing .
- Activate the "Open test page" button below, which opens the example to test in a new window${setupScriptDescription}
- ${modeInstructions}
- ${getSetupInstructions()}
- Using the following commands, ${lastInstruction}
-
-
-
-Success Criteria
-To pass this test, ${at.name} needs to meet all the following assertions when each specified command is executed:
-
-`;
-
- // Hack to remove mode instructions for VoiceOver for macOS to get us by until we support modeless screen readers.
- // ToDo: remove this when resolving issue #194
- if (at.name === "VoiceOver for macOS") {
- let modeInstructionsEl= document.getElementById('mode-instructions-li');
- modeInstructionsEl.parentNode.removeChild(modeInstructionsEl);
- }
-
- for (let command of commands) {
- let commandEl = document.createElement('li');
- commandEl.innerHTML = `${command}`;
- document.getElementById('at_controls').append(commandEl);
- }
-
- for (let assertion of assertions) {
- let el = document.createElement('li');
- el.innerHTML = `${assertion} `;
- document.getElementById('assertions').append(el);
- }
-
- for (let additional of additionalBehaviorAssertions) {
- let el = document.createElement('li');
- el.innerHTML = `${additional[1]} `;
- document.getElementById('assertions').append(el);
- }
-
- let openButton = document.createElement('button');
- openButton.id = 'open-test-page';
- openButton.innerText = "Open Test Page";
- openButton.addEventListener('click', openTestPagePopup);
- if (testPageWindow) {
- openButton.disabled = true;
- }
- document.getElementById('instructions').append(openButton);
-
- let recordResults = `Record Results ${document.title}
`;
-
- for (let c = 0; c < commands.length; c++) {
- recordResults += ``;
- }
-
- let recordEl = document.getElementById('record-results');
- recordEl.innerHTML = recordResults;
-
- let radios = document.querySelectorAll('input[type="radio"]');
- for (let radio of radios) {
- radio.onclick = handleRadioClick;
- }
-
- let checkboxes = document.querySelectorAll('input[type=checkbox]');
- for (let checkbox of checkboxes) {
- checkbox.onchange = handleUndesirableSelect;
- checkbox.addEventListener('keydown', handleUndesirableKeydown);
- }
-
- let otherUndesirableInput = document.querySelectorAll('.undesirable-other-input');
- for (let otherInput of otherUndesirableInput) {
- otherInput.addEventListener('change', handleOtherUndesirableInput);
- }
-
- if (showSubmitButton) {
- // Submit button
- let el = document.createElement('button');
- el.id = 'submit-results';
- el.innerText = 'Submit Results';
- el.addEventListener('click', submitResult);
- recordEl.append(el);
- }
-
- document.querySelector('#behavior-header').focus();
-
- // if test is loaded in iFrame
- if (window.parent && window.parent.postMessage) {
- // results can be submitted by parent posting a message to the
- // iFrame with a data.type property of 'submit'
- window.addEventListener('message', function(message) {
- if (!validateMessage(message, 'submit')) return;
- submitResult();
- });
-
- // send message to parent that test has loaded
- window.parent.postMessage({
- type: 'loaded',
- data: {
- testPageUri: testPageUri
- }
- }, '*');
- }
-}
-
-function validateMessage(message, type) {
- if (window.location.origin !== message.origin) {
- return false;
- }
- if (!message.data || typeof message.data !== 'object') {
- return false;
- }
- if (message.data.type !== type) {
- return false;
- }
- return true;
-}
-
-function handleUndesirableSelect(event) {
- let radioId = event.target.id;
- let cmdId, otherSelected;
- if (radioId) {
- cmdId = Number(radioId.split('-')[1]);
- otherSelected = document.querySelector(`#undesirable-${cmdId}-other`);
- if (otherSelected && otherSelected.checked == true) {
- document.querySelector(`#undesirable-${cmdId}-other-input`).disabled = false;
- } else {
- document.querySelector(`#undesirable-${cmdId}-other-input`).disabled = true;
- document.querySelector(`#undesirable-${cmdId}-other-input`).value = '';
- }
- }
-
- // Handle any checkbox selected
- let radioName = event.target.name;
- if (radioName) {
- cmdId = Number(radioName.split('-')[1]);
- document.querySelector(`#problem-${cmdId}-true`).checked = true;
- }
-}
-
-function handleOtherUndesirableInput(event) {
- let inputId = event.target.id;
- let cmd = inputId.split('-')[1];
-
- let otherCheckbox = document.querySelector(`#undesirable-${cmd}-other`);
- if (event.target.value) {
- otherCheckbox.checked = true;
- }
- else {
- otherCheckbox.checked = false;
- }
-}
-
-function handleRadioClick(event) {
- let radioId = event.target.id;
- let cmdId = Number(radioId.split('-')[1]);
-
- let markedAs = radioId.split('-')[2];
- let checkboxes = document.querySelectorAll(`.undesirable-${cmdId}`);
- let otherInput = document.querySelector(`#undesirable-${cmdId}-other-input`);
- if (markedAs === 'true') {
- checkboxes[0].tabIndex = 0;
- for (let checkbox of checkboxes) {
- checkbox.disabled = false;
- }
- otherInput.disabled = false;
- } else {
- for (let checkbox of checkboxes) {
- checkbox.disabled = true;
- checkbox.checked = false;
- }
- otherInput.disabled = true;
- otherInput.value = '';
- }
-}
-
-function handleUndesirableKeydown(event) {
- var checkbox = event.currentTarget,
- flag = false;
-
- switch (event.key) {
- case 'Up':
- case 'ArrowUp':
- case 'Left':
- case 'ArrowLeft':
- setFocusToPreviousItem(checkbox);
- flag = true;
- break;
-
- case 'Down':
- case 'ArrowDown':
- case 'Right':
- case 'ArrowRight':
- setFocusToNextItem(checkbox);
- flag = true;
- break;
-
- default:
- break;
- }
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
-}
-
-function setFocusToPreviousItem(checkbox) {
- let cmd = checkbox.parentElement.id.split('-')[1];
- let checkboxNodes = document.querySelectorAll(`#cmd-${cmd}-problem input[type=checkbox]`);
- let checkboxes = Array.from(checkboxNodes);
-
- let checkboxIds = checkboxes.map(c => c.id);
- let index = checkboxIds.indexOf(checkbox.id);
-
- checkboxNodes[index].tabIndex = -1;
-
- if (index === 0) {
- checkboxNodes[checkboxes.length - 1].tabIndex = 0;
- checkboxNodes[checkboxes.length - 1].focus();
- }
- else {
- checkboxNodes[index - 1].tabIndex = 0;
- checkboxNodes[index - 1].focus();
- }
-}
-
-function setFocusToNextItem(checkbox) {
- let cmd = checkbox.parentElement.id.split('-')[1];
- let checkboxNodes = document.querySelectorAll(`#cmd-${cmd}-problem input[type=checkbox]`);
- let checkboxes = Array.from(checkboxNodes);
-
- let checkboxIds = checkboxes.map(c => c.id);
- let index = checkboxIds.indexOf(checkbox.id);
-
- checkboxNodes[index].tabIndex = -1;
- index++;
-
- if (index === checkboxes.length) {
- checkboxNodes[0].tabIndex = 0;
- checkboxNodes[0].focus();
- }
- else {
- checkboxNodes[index].tabIndex = 0;
- checkboxNodes[index].focus();
- }
-}
-
-function validateResults() {
-
- let focusEl;
- for (let c = 0; c < behavior.commands.length; c++) {
-
- // If there is no output recorded, mark the screen reader output as required
- let outputParagraph = document.getElementById(`cmd-${c}-output`);
- let cmdInput = outputParagraph.querySelector('textarea');
- if (!cmdInput.value) {
- focusEl = focusEl || cmdInput;
- outputParagraph.querySelector('.required').classList.add('highlight-required');
- } else {
- outputParagraph.querySelector('.required').classList.remove('highlight-required');
- }
-
- // If "all pass" is selected, remove "required" mark any remaining assertions (because they will
- // all have been marked as passing, now) and move to the next command
-
- let numAssertions = document.getElementById(`cmd-${c}`).rows.length - 1;
- let undesirableFieldset = document.getElementById(`cmd-${c}-problem`);
-
- // Otherwise, we must go though each assertion and add or remove the "required" mark
- for (let a = 0; a < numAssertions; a++) {
- let selectedRadio = document.querySelector(`input[name="result-${c}-${a}"]:checked`);
- if (!selectedRadio) {
- document.querySelector(`#assertion-${c}-${a} .required`).classList.add('highlight-required');
- focusEl = focusEl || document.getElementById(`pass-${c}-${a}`);
- }
- else {
- document.querySelector(`#assertion-${c}-${a} .required`).classList.remove('highlight-required');
- }
- }
-
-
- // Check that the "unexpected/additional problems" fieldset is filled out
- let problemRadio = document.querySelector(`input[name="problem-${c}"]:checked`);
- let problemSelected = document.querySelectorAll(`.undesirable-${c}:checked`);
- let otherSelected = document.querySelector(`#undesirable-${c}-other:checked`);
- let otherText = document.querySelector(`#undesirable-${c}-other-input`).value;
- if (!problemRadio || (problemRadio.classList.contains('fail') && problemSelected.length === 0 && !otherSelected)) {
- undesirableFieldset.classList.add('highlight-required');
- }
- if (!problemRadio || (problemRadio.classList.contains('fail') && problemSelected.length === 0 && !otherSelected)) {
- document.querySelector(`#cmd-${c}-problem legend .required`).classList.add('highlight-required');
- focusEl = focusEl || document.querySelector(`#cmd-${c}-problem input[type="checkbox"]`);
- }
- else if (document.querySelector(`input#problem-${c}-false:checked`) || (problemRadio && problemSelected.length > 0) || (otherSelected && otherText)) {
- document.querySelector(`#cmd-${c}-problem legend .required`).classList.remove('highlight-required');
- undesirableFieldset.classList.remove('highlight-required');
- }
-
- if (otherSelected) {
- if (!otherText) {
- document.querySelector(`#cmd-${c}-problem .required-other`).classList.add('highlight-required');
- undesirableFieldset.classList.add('highlight-required');
- focusEl = focusEl || document.querySelector(`#undesirable-${c}-other-input`);
- }
- else {
- document.querySelector(`#cmd-${c}-problem .required-other`).classList.remove('highlight-required');
- undesirableFieldset.classList.remove('highlight-required');
- }
- }
- }
-
- if (focusEl) {
- focusEl.focus();
- return false;
- }
- return true;
-}
-
-
-function submitResult(event) {
- if (!validateResults()) {
- return;
- }
-
- const assertionPriority = {};
- for (let a = 0; a < behavior.output_assertions.length; a++) {
- const assertion = behavior.output_assertions[a];
- assertionPriority[assertion[1]] = assertion[0];
- }
-
- for (let a = 0; a < behavior.additional_assertions.length; a++) {
- const assertion = behavior.additional_assertions[a];
- assertionPriority[assertion[1]] = assertion[0];
- }
-
- const summary = {
- 1: {pass: 0, fail: 0},
- 2: {pass: 0, fail: 0},
- unexpectedCount: 0
- };
-
- overallStatus = 'PASS';
-
- const commandResults = [];
-
- for (let c = 0; c < behavior.commands.length; c++) {
-
- let assertions = [];
- let support = 'FULL';
- let totalAssertions = document.querySelectorAll(`#cmd-${c} tr`).length - 1;
-
- for (let a = 0; a < totalAssertions; a++) {
- const assertion = document.querySelector(`#assertion-${c}-${a} .assertion`).innerHTML;
- const resultEl = document.querySelector(`input[name="result-${c}-${a}"]:checked`);
- const resultId = resultEl.id;
- const pass = resultEl.classList.contains('pass');
- const result = document.querySelector(`#${resultId}-label`).innerHTML.split('1 assertion fails, then this test meets the all required pass case
- else if (support !== 'FAILING') {
- support = 'ALL REQUIRED';
- }
- }
-
- assertions.push(assertionResult);
- }
-
- const unexpected = [];
- for (let problemEl of document.querySelectorAll(`#cmd-${c}-problem fieldset input:checked`)) {
- support = 'FAILING';
- overallStatus = 'FAIL';
- summary.unexpectedCount++;
- if (problemEl.value === 'Other') {
- unexpected.push(document.querySelector(`#undesirable-${c}-other-input`).value);
- }
- else {
- unexpected.push(problemEl.value);
- }
- }
-
- commandResults.push({
- command: behavior.commands[c],
- output: document.querySelector(`#speechoutput-${c}`).value,
- unexpected_behaviors: unexpected,
- support,
- assertions
- });
- }
-
- behaviorResults = {
- name: document.title,
- specific_user_instruction: behavior.specific_user_instruction,
- task: behavior.task,
- commands: commandResults,
- summary
- };
-
- let data = {
- test: document.title,
- details: behaviorResults,
- status: overallStatus
- };
-
- // send message to parent if test is loaded in iFrame
- if (window.parent && window.parent.postMessage) {
- window.parent.postMessage({
- type: 'results',
- data: data
- }, '*');
- }
-
- endTest();
-
- if (showResults) {
- showResultsTable();
- }
-
- appendJSONResults(data);
-}
-
-
-function showResultsTable() {
- let resulthtml = `${document.title} `;
-
- resulthtml += `
-
- Command
- Support
- Details
-
- `;
-
- for (let command of behaviorResults.commands) {
-
- let passingAssertions = '';
- let failingAssertions = '';
- for (let assertion of command.assertions) {
- if (assertion.pass) {
- passingAssertions += `${assertion.assertion} `;
- }
- if (assertion.fail) {
- failingAssertions += `${assertion.assertion} `;
- }
- }
- let unexpectedBehaviors = '';
- for (let unexpected of command.unexpected_behaviors) {
- unexpectedBehaviors += `${unexpected} `;
- }
- passingAssertions = passingAssertions === '' ? 'No passing assertions. ' : passingAssertions;
- failingAssertions = failingAssertions === '' ? 'No failing assertions. ' : failingAssertions;
- unexpectedBehaviors = unexpectedBehaviors === '' ? 'No unexpect behaviors. ' : unexpectedBehaviors;
-
-
- resulthtml+= `
-
- ${command.command}
- ${command.support}
-
- ${at.name} output: "${command.output.replace(/(?:\r\n|\r|\n)/g, ' ')}"
-
-
- Unexpected Behavior:
-
- ${unexpectedBehaviors}
-
-
-
-
-`;
-
- }
-
- resulthtml += `
`;
-
- document.body.innerHTML = resulthtml;
- document.querySelector('#overallstatus').innerHTML = `Test result: ${overallStatus}`;
-}
-
-function endTest() {
- if (typeof testPageWindow !== 'undefined') {
- testPageWindow.close();
- }
-}
-
-function showUserError() {
- if (errors.length) {
- document.getElementById('errors').style.display = "block";
- let errorListEl = document.querySelector('#errors ul');
- for (let error of errors) {
- let errorMsgEl = document.createElement('li');
- errorMsgEl.innerText = error;
- errorListEl.append(errorMsgEl);
- }
- }
-}
-
-function appendJSONResults(data) {
- var results_element = document.createElement("script");
- results_element.type = "text/json";
- results_element.id = "__ariaatharness__results__";
- results_element.textContent = JSON.stringify(data);
-
- document.body.appendChild(results_element);
-}
diff --git a/build/tests/resources/at-commands.mjs b/build/tests/resources/at-commands.mjs
deleted file mode 100644
index c17168871..000000000
--- a/build/tests/resources/at-commands.mjs
+++ /dev/null
@@ -1,105 +0,0 @@
-import * as keys from './keys.mjs';
-
-/** Class for getting AT-specific instructions for a test against a design pattern. */
-export class commandsAPI {
- /**
- * Creates an API to get AT-specific instructions for a design pattern.
- * @param {object} commands - A data structure which is a nested object with the following format:
- * {
- * task: {
- * mode: {
- * at: [
- * key-command (string corresponding to export in keys.mjs),
- * optional additional instructions to list after key command (string),
- * ]
- * }
- * }
- * }
- */
-constructor(commands, support) {
- if (!commands) {
- throw new Error("You must initialize commandsAPI with a commands data object");
- }
-
- if (!support) {
- throw new Error("You must initialize commandsAPI with a support data object");
- }
-
- this.AT_COMMAND_MAP = commands;
-
- this.MODE_INSTRUCTIONS = {
- reading: {
- jaws: `Verify the Virtual Cursor is active by pressing ${keys.ALT_DELETE}. If it is not, turn on the Virtual Cursor by pressing ${keys.INS_Z}.`,
- nvda: `Insure NVDA is in browse mode by pressing ${keys.ESC}. Note: This command has no effect if NVDA is already in browse mode.`,
- voiceover_macos: `Toggle Quick Nav ON by pressing the ${keys.LEFT} and ${keys.RIGHT} keys at the same time.`
- },
- interaction: {
- jaws: `Verify the PC Cursor is active by pressing ${keys.ALT_DELETE}. If it is not, turn off the Virtual Cursor by pressing ${keys.INS_Z}.`,
- nvda: `If NVDA did not make the focus mode sound when the test page loaded, press ${keys.INS_SPACE} to turn focus mode on.`,
- voiceover_macos: `Toggle Quick Nav OFF by pressing the ${keys.LEFT} and ${keys.RIGHT} keys at the same time.`
- }
- };
-
- this.support = support;
- }
-
-
- /**
- * Get AT-specific instruction
- * @param {string} mode - The mode of the screen reader, "reading" or "interaction"
- * @param {string} task - The task of the test.
- * @param {string} assitiveTech - The assistive technology.
- * @return {Array} - A list of commands (strings)
- */
- getATCommands(mode, task, assistiveTech) {
- if (!this.AT_COMMAND_MAP[task]) {
- throw new Error(`Task "${task}" does not exist, please add to at-commands or correct your spelling.`);
- }
- else if (!this.AT_COMMAND_MAP[task][mode]) {
- throw new Error(`Mode "${mode}" instructions for task "${task}" does not exist, please add to at-commands or correct your spelling.`);
- }
-
- let commandsData = this.AT_COMMAND_MAP[task][mode][assistiveTech.key] || [];
- let commands = [];
-
- for (let c of commandsData) {
- let innerCommands = [];
- let commandSequence = c[0].split(',');
- for (let command of commandSequence) {
- command = keys[command];
- if (typeof command === 'undefined') {
- throw new Error(`Key instruction identifier "${c}" for AT "${assistiveTech.name}", mode "${mode}", task "${task}" is not an available identified. Update you commands.json file to the correct identifier or add your identifier to resources/keys.mjs.`);
- }
-
- let furtherInstruction = c[1];
- command = furtherInstruction ? `${command} ${furtherInstruction}` : command;
- innerCommands.push(command);
- }
- commands.push(innerCommands.join(", then "));
- }
-
- return commands;
- }
-
- /**
- * Get AT-specific mode switching instructions
- * @param {string} mode - The mode of the screen reader, "reading" or "interaction"
- * @param {string} assistiveTech - The assistive technology.
- * @return {string} - Instructions for switching into the correct mode.
- */
- getModeInstructions(mode, assistiveTech) {
- if (this.MODE_INSTRUCTIONS[mode] && this.MODE_INSTRUCTIONS[mode][assistiveTech.key]) {
- return this.MODE_INSTRUCTIONS[mode][assistiveTech.key];
- }
- return '';
- }
-
- /**
- * Get AT-specific instruction
- * @param {string} at - an assitve technology with any capitalization
- * @return {string} - if this API knows instructions for `at`, it will return the `at` with proper capitalization
- */
- isKnownAT(at) {
- return this.support.ats.find(o => o.key === at.toLowerCase());
- }
-}
diff --git a/build/tests/resources/at-commands.mjs.bak b/build/tests/resources/at-commands.mjs.bak
deleted file mode 100644
index 0ec4d3894..000000000
--- a/build/tests/resources/at-commands.mjs.bak
+++ /dev/null
@@ -1,249 +0,0 @@
-import * as keys from './keys.mjs';
-
-const KNOWN_ATS = {
- jaws: 'JAWS',
- nvda: 'NVDA',
- voiceover: 'VoiceOver'
-}
-
-/* Add new commands here */
-
-const AT_COMMAND_MAP = {
- "navigate to combobox": {
- reading: {
- jaws: [
- keys.C_AND_SHIFT_C,
- keys.F_AND_SHIFT_F,
- keys.UP_AND_DOWN,
- `${keys.LEFT_AND_RIGHT} (with Smart Navigation set to Controls and Tables)`
- ]
- },
- interaction: {
- jaws: [
- keys.TAB_AND_SHIFT_TAB
- ]
- }
- },
- "read combobox": {
- reading: {
- jaws: [
- keys.INS_TAB,
- keys.INS_UP
- ]
- },
- interaction: {
- jaws: [
- keys.INS_TAB,
- keys.INS_UP
- ]
- }
- },
- "navigate to combobox with keys that switch modes": {
- reading: {
- jaws: [
- keys.TAB_AND_SHIFT_TAB
- ]
- }
- },
- "activate combobox": {
- reading: {
- jaws: [
- keys.ENTER
- ]
- }
- },
- "open combobox from input": {
- interaction: {
- jaws: [
- keys.DOWN,
- keys.UP
- ]
- }
- },
- "navigate to checkbox": {
- reading: {
- jaws: [
- keys.X_AND_SHIFT_X,
- keys.TAB_AND_SHIFT_TAB,
- keys.UP_AND_DOWN,
- `${keys.LEFT_AND_RIGHT} (with Smart Navigation on)`,
- `${keys.CTRL_INS_X} to see a list of checkboxes; then use the Up/Down arrows to select a checkbox; then press Enter to navigate to that checkbox`
- ],
- nvda: [
- keys.X_AND_SHIFT_X,
- keys.TAB_AND_SHIFT_TAB,
- keys.UP_AND_DOWN,
- keys.INS_DOWN_OR_CAPS_DOWN,
- `${keys.INS_F7_OR_CAPS_F7} to access list of elements on the page; then select ‘type’ = ‘form fields’; then select a checkbox in the list of form controls; then press ‘Enter’ to navigate to that checkbox`
- ],
- voiceover: [
- ]
- },
- interaction: {
- jaws: [
- keys.TAB_AND_SHIFT_TAB
- ],
- nvda: [
- keys.TAB_AND_SHIFT_TAB
- ],
- voiceover: [
- keys.TAB_AND_SHIFT_TAB,
- keys.CTRL_OPT_RIGHT_AND_CTRL_OPT_LEFT,
- keys.CTRL_OPT_A,
- keys.CTRL_OPT_CMD_J_AND_SHIFT_CTRL_OPT_CMD_J,
- keys.CTRL_OPT_CMD_C_AND_SHIFT_CTRL_OPT_CMD_C,
- `${keys.CTRL_U} to open the ‘Rotor’ menu; then press the Right arrow until the list of 'Form Controls’ appears; then select a checkbox in the list of form controls using the Up/Down arrow keys; then press ‘Enter’ to navigate to that checkbox`
- ]
- }
- },
- "read checkbox": {
- reading: {
- jaws: [
- keys.INS_TAB_OR_CAPS_TAB,
- keys.INS_UP_OR_CAPS_I
- ],
- nvda: [
- keys.INS_TAB_OR_CAPS_TAB,
- keys.INS_UP_OR_CAPS_UP
- ],
- voiceover: [
- ]
- },
- interaction: {
- jaws: [
- keys.INS_TAB_OR_CAPS_TAB,
- keys.INS_UP_OR_CAPS_I
- ],
- nvda: [
- keys.INS_TAB_OR_CAPS_TAB,
- keys.INS_UP_OR_CAPS_UP
- ],
- voiceover: [
- ]
- }
- },
- "operate checkbox": {
- reading: {
- jaws: [
- keys.ENTER,
- keys.SPACE
- ],
- nvda: [
- keys.ENTER,
- keys.SPACE
- ],
- voiceover: [
- ]
- },
- interaction: {
- jaws: [
- keys.SPACE
- ],
- nvda: [
- keys.SPACE
- ],
- voiceover: [
- keys.CTRL_OPT_SPACE,
- keys.SPACE
- ]
- }
- },
- "navigate to checkbox group": {
- reading: {
- jaws: [
- keys.UP_AND_DOWN,
- keys.TAB_AND_SHIFT_TAB,
- `${keys.CTRL_INS_X} to see a list of checkboxes; then use the Up/Down arrows to select a checkbox; then press Enter to navigate to that checkbox`
- ],
- nvda: [
- keys.X_AND_SHIFT_X,
- keys.UP_AND_DOWN,
- keys.TAB_AND_SHIFT_TAB,
- keys.INS_DOWN_OR_CAPS_DOWN,
- `${keys.INS_F7_OR_CAPS_F7} to access list of elements on the page; then select ‘type’ = ‘form fields’; then select a checkbox in the list of form controls; then press ‘Enter’ to navigate to that checkbox`
- ],
- voiceover: [
- ]
- },
- interaction: {
- jaws: [
- keys.TAB_AND_SHIFT_TAB
- ],
- nvda: [
- keys.TAB_AND_SHIFT_TAB
- ],
- voiceover: [
- keys.TAB_AND_SHIFT_TAB,
- keys.CTRL_OPT_RIGHT_AND_CTRL_OPT_LEFT,
- keys.CTRL_OPT_A,
- keys.CTRL_OPT_CMD_J_AND_SHIFT_CTRL_OPT_CMD_J,
- keys.CTRL_OPT_CMD_C_AND_SHIFT_CTRL_OPT_CMD_C,
- `${keys.CTRL_U} to open the ‘Rotor’ menu; then press the Right arrow until the list of 'Form Controls’ appears; then select a checkbox in the list of form controls using the Up/Down arrow keys; then press ‘Enter’ to navigate to that checkbox`
- ]
- },
- },
- "read the checkbox group": {
- reading: {
- jaws: [
- keys.INS_TAB_OR_CAPS_TAB,
- keys.INS_UP_OR_CAPS_I
- ],
- nvda: [
- keys.INS_TAB_OR_CAPS_TAB,
- keys.INS_UP_OR_CAPS_UP
- ],
- voiceover: [
- ]
- },
- interaction: {
- jaws: [
- keys.INS_TAB_OR_CAPS_TAB,
- keys.INS_UP_OR_CAPS_I
- ],
- nvda: [
- keys.INS_TAB_OR_CAPS_TAB,
- keys.INS_UP_OR_CAPS_UP
- ],
- voiceover: [
- ]
- }
- }
-};
-
-const MODE_INSTRUCTIONS = {
- reading: {
- jaws: `Put JAWS into Virtual Cursor Mode using ${keys.INS_Z}`,
- nvda: `Put NVDA into Browser Mode using ${keys.ESC}`,
- voiceover: ""
- },
- interaction: {
- jaws: `Put JAWS into Forms Mode by turning Virual Cursor off using ${keys.INS_Z}`,
- nvda: "Put NVDA into Focus Mode using NVDA+Space",
- voiceover: `Turn Quick Nav off by pressing the ${keys.LEFT} and ${keys.RIGHT} keys at the same time.`
- }
-};
-
-export function getATCommands(mode, task, assistiveTech) {
- const at = assistiveTech.toLowerCase();
-
- if (!AT_COMMAND_MAP[task]) {
- throw new Error(`Task "${task}" does not exist, please add to at-commands or correct your spelling.`);
- }
- else if (!AT_COMMAND_MAP[task][mode]) {
- throw new Error(`Mode "${mode}" instructions for task "${task}" does not exist, please add to at-commands or correct your spelling.`);
- }
-
- return AT_COMMAND_MAP[task][mode][at] || [];
-}
-
-export function getModeInstructions(mode, assistiveTech) {
- const at = assistiveTech.toLowerCase();
- if (MODE_INSTRUCTIONS[mode] && MODE_INSTRUCTIONS[mode][at]) {
- return MODE_INSTRUCTIONS[mode][at];
- }
- return '';
-}
-
-export function isKnownAT(at) {
- return KNOWN_ATS[at.toLowerCase()];
-}
diff --git a/build/tests/resources/keys.mjs b/build/tests/resources/keys.mjs
deleted file mode 100644
index 269ab2f98..000000000
--- a/build/tests/resources/keys.mjs
+++ /dev/null
@@ -1,97 +0,0 @@
-// Keys
-
-export const CTRL_HOME = "Control+Home";
-export const CTRL_OPT_HOME = "Control+Option+Home";
-export const CTRL_END = "Control+End";
-export const CTRL_OPT_END = "Control+Option+End";
-export const CTRL_HOME_THEN_DOWN = "Control+Home followed by Down Arrow";
-export const DELETE = "Delete";
-export const ALT_DELETE = "Alt+Delete";
-export const ALT_DOWN = "Alt+Down";
-export const ALT_UP = "Alt+Up";
-export const C_AND_SHIFT_C = "C / Shift+C";
-export const SHIFT_C = "Shift+C";
-export const CTRL_INS_X = "Control+Insert+X";
-export const OPT_DOWN = "Option+Down";
-export const OPT_UP = "Option+Up";
-export const CTRL_OPT_LEFT = "Ctrl+Option+Left";
-export const CTRL_OPT_RIGHT = "Control+Option+Right";
-export const CTRL_OPT_UP = "Control+Option+Up";
-export const CTRL_OPT_DOWN = "Control+Option+Down";
-export const CTRL_OPT_RIGHT_AND_CTRL_OPT_LEFT = "Control+Option+Right / Ctrl+Option+Left";
-export const CTRL_OPT_A = "Control+Option+A";
-export const CTRL_OPT_CMD_J = "Control+Option+Command+J";
-export const SHIFT_CTRL_OPT_CMD_J = "Shift+Control+Option+Command+J";
-export const CTRL_OPT_CMD_J_AND_SHIFT_CTRL_OPT_CMD_J = "Control+Option+Command+J / Shift+Control+Option+Command+J";
-export const CTRL_OPT_CMD_C_AND_SHIFT_CTRL_OPT_CMD_C = "Control+Option+Command+C / Shift+Control+Option+Command+C";
-export const CTRL_OPT_F3 = "Control+Option+F3";
-export const CTRL_OPT_F4 = "Control+Option+F4";
-export const CTRL_OPT_SPACE = "Control+Option+Space";
-export const CTRL_OPT_SPACE_THEN_CTRL_OPT_RIGHT = "Control+Option+Space followed by Control+Option+Right";
-export const CTRL_U = "Control+U";
-export const CMD = "Command";
-export const CMD_LEFT = "Command+Left";
-export const CMD_RIGHT = "Command+Right";
-export const CMD_DOWN = "Command+Down";
-export const CMD_UP = "Command+Up";
-export const DOWN = "Down Arrow";
-export const END = "End";
-export const ENTER = "Enter";
-export const E_AND_SHIFT_E = "E / Shift+E";
-export const ESC = "Escape";
-export const F_AND_SHIFT_F = "F / Shift+F";
-export const SHIFT_F = "Shift+F";
-export const HOME = "Home";
-export const INS_DOWN_OR_CAPS_DOWN = "Insert+Down (or CapsLock+Down)";
-export const INS_F7_OR_CAPS_F7 = "Insert+F7 (or CapsLock+F7)";
-export const INS_SPACE = "Insert+Space";
-export const INS_TAB = "Insert+Tab";
-export const INS_TAB_OR_CAPS_TAB = "Insert+Tab (or CapsLock+Tab)";
-export const INS_UP_OR_CAPS_I = "Insert+Up (or CapsLock+I)";
-export const INS_UP = "Insert+Up";
-export const INS_UP_OR_CAPS_UP = "Insert+Up (or CapsLock+Up)";
-export const INS_Z = "Insert+Z";
-export const LEFT_AND_RIGHT = "Left Arrow / Right Arrow";
-export const LEFT = "Left Arrow";
-export const NUMPAD_5 = "Numpad 5";
-export const INS_NUMPAD_5 = "Insert+Numpad 5 (or CapsLock+Numpad 5)";
-export const INS_NUMPAD_6 = "Insert+Numpad 6 (or CapsLock+Numpad 6)";
-export const NUMPAD_PLUS = "Numpad Plus";
-export const RIGHT = "Right Arrow";
-export const SPACE = "Space";
-export const TAB = "Tab";
-export const SHIFT_TAB = "Shift+Tab";
-export const TAB_AND_SHIFT_TAB = "Tab / Shift+Tab";
-export const UP = "Up Arrow";
-export const UP_AND_DOWN = "Up Arrow / Down Arrow";
-export const SHIFT_X = "Shift+X";
-export const X_AND_SHIFT_X = "X / Shift+X";
-export const A = "A";
-export const B = "B";
-export const SHIFT_B = "Shift+B";
-export const C = "C";
-export const D = "D";
-export const E = "E";
-export const F = "F";
-export const G = "G";
-export const H = "H";
-export const I = "I";
-export const J = "J";
-export const K = "K";
-export const L = "L";
-export const M = "M";
-export const N = "N";
-export const O = "O";
-export const P = "P";
-export const Q = "Q";
-export const R = "R";
-export const S = "S";
-export const T = "T";
-export const U = "U";
-export const V = "V";
-export const W = "W";
-export const X = "X";
-export const Y = "Y";
-export const Z = "Z";
-export const PAGE_DOWN = "Page Down";
-export const PAGE_UP = "Page Up";
diff --git a/build/tests/support.json b/build/tests/support.json
deleted file mode 100644
index 358ad9787..000000000
--- a/build/tests/support.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
- "ats": [
- {
- "name": "JAWS",
- "key": "jaws"
- },
- {
- "name": "NVDA",
- "key": "nvda"
- },
- {
- "name": "VoiceOver for macOS",
- "key": "voiceover_macos"
- }
- ],
- "applies_to": {
- "Desktop Screen Readers": [
- "VoiceOver for macOS",
- "NVDA",
- "JAWS"
- ],
- "Screen Readers": [
- "VoiceOver for macOS",
- "NVDA",
- "JAWS"
- ]
- },
- "examples": [
- {
- "directory": "checkbox",
- "name": "Checkbox Example (Two State)"
- },
- {
- "directory": "menubar-editor",
- "name": "Editor Menubar Example"
- },
- {
- "directory": "combobox-autocomplete-both",
- "name": "(NOT READY! DO NOT TEST!) Editable Combobox With Both List and Inline Autocomplete Example"
- }
- ]
-}
diff --git a/build/tests/tabs-manual-activation/reference/2021-2-15_124757/css/tabs.css b/build/tests/tabs-manual-activation/reference/2021-2-15_124757/css/tabs.css
deleted file mode 100644
index 405b4b965..000000000
--- a/build/tests/tabs-manual-activation/reference/2021-2-15_124757/css/tabs.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.tabs {
- width: 20em;
- font-family: "lucida grande", sans-serif;
-}
-
-[role="tablist"] {
- margin: 0 0 -0.1em;
- overflow: visible;
-}
-
-[role="tab"] {
- position: relative;
- margin: 0;
- padding: 0.3em 0.5em 0.4em;
- border: 1px solid hsl(219, 1%, 72%);
- border-radius: 0.2em 0.2em 0 0;
- box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
- overflow: visible;
- font-family: inherit;
- font-size: inherit;
- background: hsl(220, 20%, 94%);
-}
-
-[role="tab"]:hover::before,
-[role="tab"]:focus::before,
-[role="tab"][aria-selected="true"]::before {
- position: absolute;
- bottom: 100%;
- right: -1px;
- left: -1px;
- border-radius: 0.2em 0.2em 0 0;
- border-top: 3px solid hsl(20, 96%, 48%);
- content: "";
-}
-
-[role="tab"][aria-selected="true"] {
- border-radius: 0;
- background: hsl(220, 43%, 99%);
- outline: 0;
-}
-
-[role="tab"][aria-selected="true"]:not(:focus):not(:hover)::before {
- border-top: 5px solid hsl(218, 96%, 48%);
-}
-
-[role="tab"][aria-selected="true"]::after {
- position: absolute;
- z-index: 3;
- bottom: -1px;
- right: 0;
- left: 0;
- height: 0.3em;
- background: hsl(220, 43%, 99%);
- box-shadow: none;
- content: "";
-}
-
-[role="tab"]:hover,
-[role="tab"]:focus,
-[role="tab"]:active {
- outline: 0;
- border-radius: 0;
- color: inherit;
-}
-
-[role="tab"]:hover::before,
-[role="tab"]:focus::before {
- border-color: hsl(20, 96%, 48%);
-}
-
-[role="tabpanel"] {
- position: relative;
- z-index: 2;
- padding: 0.5em 0.5em 0.7em;
- border: 1px solid hsl(219, 1%, 72%);
- border-radius: 0 0.2em 0.2em 0.2em;
- box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
- background: hsl(220, 43%, 99%);
-}
-
-[role="tabpanel"].is-hidden {
- display: none;
-}
-
-[role="tabpanel"]:focus {
- border-color: hsl(20, 96%, 48%);
- box-shadow: 0 0 0.2em hsl(20, 96%, 48%);
- outline: 0;
-}
-
-[role="tabpanel"]:focus::after {
- position: absolute;
- bottom: 0;
- right: -1px;
- left: -1px;
- border-bottom: 3px solid hsl(20, 96%, 48%);
- border-radius: 0 0 0.2em 0.2em;
- content: "";
-}
-
-[role="tabpanel"] p {
- margin: 0;
-}
-
-[role="tabpanel"] * + p {
- margin-top: 1em;
-}
diff --git a/build/tests/tabs-manual-activation/reference/2021-2-15_124757/js/tabs.js b/build/tests/tabs-manual-activation/reference/2021-2-15_124757/js/tabs.js
deleted file mode 100644
index 8c8d351aa..000000000
--- a/build/tests/tabs-manual-activation/reference/2021-2-15_124757/js/tabs.js
+++ /dev/null
@@ -1,222 +0,0 @@
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- */
-
-'use strict';
-
-(function () {
- var tablist = document.querySelectorAll('[role="tablist"]')[0];
- var tabs;
- var panels;
-
- generateArrays();
-
- function generateArrays() {
- tabs = document.querySelectorAll('[role="tab"]');
- panels = document.querySelectorAll('[role="tabpanel"]');
- }
-
- // For easy reference
- var keys = {
- end: 35,
- home: 36,
- left: 37,
- up: 38,
- right: 39,
- down: 40,
- delete: 46,
- enter: 13,
- space: 32,
- };
-
- // Add or subtract depending on key pressed
- var direction = {
- 37: -1,
- 38: -1,
- 39: 1,
- 40: 1,
- };
-
- // Bind listeners
- for (var i = 0; i < tabs.length; ++i) {
- addListeners(i);
- }
-
- function addListeners(index) {
- tabs[index].addEventListener('click', clickEventListener);
- tabs[index].addEventListener('keydown', keydownEventListener);
- tabs[index].addEventListener('keyup', keyupEventListener);
-
- // Build an array with all tabs (s) in it
- tabs[index].index = index;
- }
-
- // When a tab is clicked, activateTab is fired to activate it
- function clickEventListener(event) {
- var tab = event.target;
- activateTab(tab, false);
- }
-
- // Handle keydown on tabs
- function keydownEventListener(event) {
- var key = event.keyCode;
-
- switch (key) {
- case keys.end:
- event.preventDefault();
- // Activate last tab
- focusLastTab();
- break;
- case keys.home:
- event.preventDefault();
- // Activate first tab
- focusFirstTab();
- break;
-
- // Up and down are in keydown
- // because we need to prevent page scroll >:)
- case keys.up:
- case keys.down:
- determineOrientation(event);
- break;
- }
- }
-
- // Handle keyup on tabs
- function keyupEventListener(event) {
- var key = event.keyCode;
-
- switch (key) {
- case keys.left:
- case keys.right:
- determineOrientation(event);
- break;
- case keys.delete:
- determineDeletable(event);
- break;
- case keys.enter:
- case keys.space:
- activateTab(event.target);
- break;
- }
- }
-
- // When a tablist’s aria-orientation is set to vertical,
- // only up and down arrow should function.
- // In all other cases only left and right arrow function.
- function determineOrientation(event) {
- var key = event.keyCode;
- var vertical = tablist.getAttribute('aria-orientation') == 'vertical';
- var proceed = false;
-
- if (vertical) {
- if (key === keys.up || key === keys.down) {
- event.preventDefault();
- proceed = true;
- }
- } else {
- if (key === keys.left || key === keys.right) {
- proceed = true;
- }
- }
-
- if (proceed) {
- switchTabOnArrowPress(event);
- }
- }
-
- // Either focus the next, previous, first, or last tab
- // depending on key pressed
- function switchTabOnArrowPress(event) {
- var pressed = event.keyCode;
-
- if (direction[pressed]) {
- var target = event.target;
- if (target.index !== undefined) {
- if (tabs[target.index + direction[pressed]]) {
- tabs[target.index + direction[pressed]].focus();
- } else if (pressed === keys.left || pressed === keys.up) {
- focusLastTab();
- } else if (pressed === keys.right || pressed == keys.down) {
- focusFirstTab();
- }
- }
- }
- }
-
- // Activates any given tab panel
- function activateTab(tab, setFocus) {
- setFocus = setFocus || true;
- // Deactivate all other tabs
- deactivateTabs();
-
- // Remove tabindex attribute
- tab.removeAttribute('tabindex');
-
- // Set the tab as selected
- tab.setAttribute('aria-selected', 'true');
-
- // Get the value of aria-controls (which is an ID)
- var controls = tab.getAttribute('aria-controls');
-
- // Remove is-hidden class from tab panel to make it visible
- document.getElementById(controls).classList.remove('is-hidden');
-
- // Set focus when required
- if (setFocus) {
- tab.focus();
- }
- }
-
- // Deactivate all tabs and tab panels
- function deactivateTabs() {
- for (var t = 0; t < tabs.length; t++) {
- tabs[t].setAttribute('tabindex', '-1');
- tabs[t].setAttribute('aria-selected', 'false');
- }
-
- for (var p = 0; p < panels.length; p++) {
- panels[p].classList.add('is-hidden');
- }
- }
-
- // Make a guess
- function focusFirstTab() {
- tabs[0].focus();
- }
-
- // Make a guess
- function focusLastTab() {
- tabs[tabs.length - 1].focus();
- }
-
- // Detect if a tab is deletable
- function determineDeletable(event) {
- var target = event.target;
-
- if (target.getAttribute('data-deletable') !== null) {
- // Delete target tab
- deleteTab(event, target);
-
- // Update arrays related to tabs widget
- generateArrays();
-
- // Activate the closest tab to the one that was just deleted
- if (target.index - 1 < 0) {
- activateTab(tabs[0]);
- } else {
- activateTab(tabs[target.index - 1]);
- }
- }
- }
-
- // Deletes a tab and its panel
- function deleteTab(event) {
- var target = event.target;
- var panel = document.getElementById(target.getAttribute('aria-controls'));
-
- target.parentElement.removeChild(target);
- panel.parentElement.removeChild(panel);
- }
-})();
diff --git a/build/tests/tabs-manual-activation/reference/2021-2-15_124757/tabs.html b/build/tests/tabs-manual-activation/reference/2021-2-15_124757/tabs.html
deleted file mode 100644
index 5285a9860..000000000
--- a/build/tests/tabs-manual-activation/reference/2021-2-15_124757/tabs.html
+++ /dev/null
@@ -1,54 +0,0 @@
-
-
-
-
- Example of Tabs with Manual Activation
-
-
-
-
-
-
- Example of Tabs with Manual Activation
-
- The below example section demonstrates a tabs widget that implements the tabs design pattern .
- In this example, a new panel is displayed only after the user activates a tab with either Space , Enter , or a mouse click.
- Typically, manual activation of tabs is only necessary when panels cannot be displayed instantly, i.e., not all the panel content is present in the DOM.
-
-
-
-
-
- Navigate forwards from here
-
-
-
- Nils Frahm
- Agnes Obel
- Joke
-
-
-
-
Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.
-
-
-
-
Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.
-
-
-
-
Fear of complicated buildings:
-
A complex complex complex.
-
-
-
- Navigate backwards from here
-
-
-
-
-
-
-
diff --git a/docs/LOCAL_DEVELOPMENT.md b/docs/LOCAL_DEVELOPMENT.md
deleted file mode 100644
index b493bc1cd..000000000
--- a/docs/LOCAL_DEVELOPMENT.md
+++ /dev/null
@@ -1,100 +0,0 @@
-# Local Development
-
-## Getting Started
-
-1. Install the dependencies.
- ```
- npm install
- ```
-1. Review test contributions as detailed by
- the ["How to contribute tests" Wiki Page](https://github.com/w3c/aria-at/wiki/How-to-contribute-tests).
-1. Create a branch dedicated to the upcoming contributions.
- ```
- git checkout -b
- ```
-1. Commit and push your changes.
- ```
- git commit add
- git commit -m
- git push -u
- ```
-1. Create a Pull Request with the changes from your branch with relevant details associated with it. Ensure the base
- branch is `master`. GitHub Actions should then generate review pages and append a 'Preview Link' to your Pull
- Request's description, so it may be properly reviewed.
-1. **NOTE: If any changes were committed to `master` after branching off to a contribution branch, be sure to merge
- those changes back into your branch before submitting your Pull Request for review.**
-
-## Scripts
-
-Scripts and commands available to help with your workflow.
-
-### `npm run create-all-tests`
-
-Generate tests' html and json files as determined by using the files in `/tests//`. The generated
-files are written to `/build/tests//`.
-
-### `npm run create-all-tests -- --verbose`
-
-Generate tests' html and json files as determined by using the files in `/tests//`. The script output
-is more detailed as it describes files being referenced, tests being processed and the absolute paths of the files being
-saved. The generated files are written to `/build/tests//`.
-
-### `npm run review-tests`
-
-Generate review pages based on the previously generated tests' html and json files. Used to navigate the tests. The
-generated files are written to `/build/index.html` and `/build/tests/review/`.
-
-### `npm run build`
-
-Creates or updates the `/build` folder. Runs `npm run create-all-tests` and `npm run review-tests`.
-
-### `npm run build --testplan=`
-
-Creates or updates the `/build` folder for a specific test plan. Runs `npm run create-all-tests`
-and `npm run review-tests` for a specific test plan.
-
-### `npm run validate`
-
-Run to confirm that the test plans currently drafted within the project have no validation errors.
-
-### `npm run validate --testplan=`
-
-Run to confirm that a specific test plan currently drafted within the project has no validation errors.
-
-### `npm run cleanup`
-
-Removes the `/build` folder from the project. **Note. Will be regenerated by the GitHub Action, or you can
-run `npm run build` to do so manually.**
-
-### `npm run update-reference`
-
-It will copy the latest example html from the aria-practices repo into the project.
-
-## Viewing review pages
-
-1. Run `npm run build` or `npm run build `.
-1. Open `/build/index.html`.
-1. **NOTE: You may revert your local changes, or remove the build folder altogether before pushing if that's preferred.
- The 'Generate and Commit Files' GitHub Action will regenerate
- it. ([See GitHub Action description at Project Structure > .github > workflows > generate-and-commit-files.yml](#project-structure))**
-
-## Project Structure
-
-```
-├── .github
-│  ├── workflows - contains GitHub Actions
-│  │  ├── generate-and-commit-files.yml - generates the test and review pages that are used for the PRs' preview links, which is set by the `update-pr.yml` GitHub Action
-│  │  ├── js-lint.yml - automatially lints the repository on a push or pull request if certain files are changed
-│  │  ├── update-pr.yml - updates PR descriptions with a preview link to view the generated test and review pages created by the `generate-and-commit-files.yml` GitHub Action
-├── build
-│  ├── review - generated review pages
-│  ├── tests - generated tests
-│  ├── index.html - entry point for review pages
-├── scripts - stores the scripts used for running the project
-├── tests - a collection of test plan contributions. Tests and review pages are generated from the test plans written here
-│  ├── test_plan_module (eg. checkbox)
-│  ├── resources - various utilities useful for generating and interacting with the generated tests and review pages
-│  ├── support.json
-├── .gitattributes
-├── w3c.json
-```
diff --git a/build/index.html b/index.html
similarity index 69%
rename from build/index.html
rename to index.html
index da80f6112..7f25dee79 100644
--- a/build/index.html
+++ b/index.html
@@ -40,7 +40,7 @@ Test Patterns for Review
Index
Review
26
- 28a5211 Merge branch 'master' into develop
+ 5311dde Use 'then' instead of 'followed by'
@@ -48,7 +48,7 @@ Test Patterns for Review
Index
Review
24
- 28a5211 Merge branch 'master' into develop
+ 5311dde Use 'then' instead of 'followed by'
@@ -56,7 +56,7 @@ Test Patterns for Review
Index
Review
30
- 28a5211 Merge branch 'master' into develop
+ 5311dde Use 'then' instead of 'followed by'
@@ -64,7 +64,7 @@ Test Patterns for Review
Index
Review
38
- 28a5211 Merge branch 'master' into develop
+ 5311dde Use 'then' instead of 'followed by'
@@ -72,7 +72,7 @@ Test Patterns for Review
Index
Review
26
- 28a5211 Merge branch 'master' into develop
+ 5311dde Use 'then' instead of 'followed by'
@@ -80,7 +80,7 @@ Test Patterns for Review
Index
Review
40
- 28a5211 Merge branch 'master' into develop
+ 5311dde Use 'then' instead of 'followed by'
@@ -88,7 +88,7 @@ Test Patterns for Review
Index
Review
29
- 28a5211 Merge branch 'master' into develop
+ 5311dde Use 'then' instead of 'followed by'
@@ -96,7 +96,7 @@ Test Patterns for Review
Index
Review
29
- 28a5211 Merge branch 'master' into develop
+ 5311dde Use 'then' instead of 'followed by'
diff --git a/package.json b/package.json
index bc1e48aa4..c622e1b12 100644
--- a/package.json
+++ b/package.json
@@ -5,11 +5,8 @@
"private": true,
"scripts": {
"lint": "eslint .",
- "build": "npm run create-all-tests -- --testplan=$npm_config_testplan; npm run review-tests -- --testplan=$npm_config_testplan",
- "validate": "npm run create-all-tests -- --validate --testplan=$npm_config_testplan",
- "cleanup": "rm -fr ./build",
- "create-all-tests": "node ./scripts/create-all-tests.js",
"review-tests": "node --experimental-modules ./scripts/test-reviewer.mjs",
+ "create-all-tests": "node ./scripts/create-all-tests.js",
"update-reference": "node ./scripts/update-reference.js"
},
"dependencies": {
diff --git a/review/checkbox-1.html b/review/checkbox-1.html
new file mode 100644
index 000000000..037888084
--- /dev/null
+++ b/review/checkbox-1.html
@@ -0,0 +1,1829 @@
+
+
+
+
+ Test plan review for pattern: checkbox-1
+
+
+
+
+
+ Test plan review for pattern: checkbox-1 (26 tests)
+
+
+ Filter tests by assistive technology
+ All assistive technologies
+ JAWS
+ NVDA
+ VoiceOver for macOS
+
+
+ Test 1: Navigate to an unchecked checkbox in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 1 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+
+ X / Shift+X
+ F / Shift+F
+ Tab / Shift+Tab
+ Up Arrow / Down Arrow
+ Left Arrow / Right Arrow (with Smart Navigation on)
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+
+ X / Shift+X
+ F / Shift+F
+ Tab / Shift+Tab
+ Up Arrow / Down Arrow
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+ Test 2: Navigate to an unchecked checkbox in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 2 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+ Test 3: Navigate to an unchecked checkbox
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 3 Page
+
+
+
VoiceOver for macOS
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+
+ Tab / Shift+Tab
+ Control+Option+Right / Ctrl+Option+Left
+ Control+Option+Command+J / Shift+Control+Option+Command+J
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+ Test 4: Navigate to a checked checkbox in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 4 Page
+
+
+
JAWS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets the state of the first checkbox to checked
+
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ X / Shift+X
+ F / Shift+F
+ Tab / Shift+Tab
+ Up Arrow / Down Arrow
+ Left Arrow / Right Arrow (with Smart Navigation on)
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+
+
NVDA
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets the state of the first checkbox to checked
+
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ X / Shift+X
+ F / Shift+F
+ Tab / Shift+Tab
+ Up Arrow / Down Arrow
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+ Test 5: Navigate to a checked checkbox in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 5 Page
+
+
+
JAWS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets the state of the first checkbox to checked
+
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+
+
NVDA
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets the state of the first checkbox to checked
+
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+ Test 6: Navigate to a checked checkbox
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 6 Page
+
+
+
VoiceOver for macOS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets the state of the first checkbox to checked
+
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ Tab / Shift+Tab
+ Control+Option+Right / Ctrl+Option+Left
+ Control+Option+Command+J / Shift+Control+Option+Command+J
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+ Test 7: Operate a checkbox in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 7 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ Check and uncheck the first checkbox. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Change in state is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ Check and uncheck the first checkbox. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Change in state is conveyed
+
+
+ Test 8: Operate a checkbox in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 8 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ Check and uncheck the first checkbox. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Change in state is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ Check and uncheck the first checkbox. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Change in state is conveyed
+
+
+ Test 9: Operate a checkbox
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 9 Page
+
+
+
VoiceOver for macOS
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ Check and uncheck the first checkbox. using the following commands:
+
+ Control+Option+Space
+ Space
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Change in state is conveyed
+
+
+ Test 10: Read an unchecked checkbox in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 10 Page
+
+
+
JAWS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox
+
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ When the reading cursor is on the first checkbox, read the first checkbox using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+
+
NVDA
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox
+
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ When the reading cursor is on the first checkbox, read the first checkbox using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+ Test 11: Read an unchecked checkbox in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 11 Page
+
+
+
JAWS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox
+
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ When the focus is on the first checkbox, read the first checkbox using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+
+
NVDA
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox
+
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ When the focus is on the first checkbox, read the first checkbox using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+ Test 12: Read an unchecked checkbox
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 12 Page
+
+
+
VoiceOver for macOS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox
+
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ When the focus is on the first checkbox, read the first checkbox using the following commands:
+
+ Control+Option+F3
+ Control+Option+F4
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+ Test 13: Read a checked checkbox in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 13 Page
+
+
+
JAWS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox and sets its state to checked
+
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ When the reading cursor is on the first checkbox, read the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox ( checked) is conveyed
+
+
+
+
NVDA
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox and sets its state to checked
+
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ When the reading cursor is on the first checkbox, read the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox ( checked) is conveyed
+
+
+ Test 14: Read a checked checkbox in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 14 Page
+
+
+
JAWS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox and sets its state to checked
+
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ When the focus is on the first checkbox, read the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+
+
NVDA
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox and sets its state to checked
+
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ When the focus is on the first checkbox, read the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+ Test 15: Read a checked checkbox
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 15 Page
+
+
+
VoiceOver for macOS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox and sets its state to checked
+
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ When the focus is on the first checkbox, read the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ Control+Option+F3
+ Control+Option+F4
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+ Test 16: Read grouping information of a grouped checkbox in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 16 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ When reading cursor is on a checkbox, read its grouping information using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ When reading cursor is on a checkbox, read its grouping information using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+
+
+ Test 17: Read grouping information of a grouped checkbox in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 17 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ When focus is on a checkbox, read its grouping information using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ When focus is on a checkbox, read its grouping information using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+
+
+ Test 18: Read grouping information of a grouped checkbox
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 18 Page
+
+
+
VoiceOver for macOS
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ When focus is on a checkbox, read its grouping information using the following commands:
+
+ Control+Option+F3
+ Control+Option+F4
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+
+
+ Test 19: Navigate sequentially through a checkbox group in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 19 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ Navigate both forward and backward into and out of the checkbox group. using the following commands:
+
+ Up Arrow
+ Down Arrow
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ required Group boundaries at start and end of group are conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ Navigate both forward and backward into and out of the checkbox group. using the following commands:
+
+ Up Arrow
+ Down Arrow
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ required Group boundaries at start and end of group are conveyed
+
+
+ Test 20: Navigate sequentially through a checkbox group
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 20 Page
+
+
+
VoiceOver for macOS
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ Navigate both forward and backward into and out of the checkbox group. using the following commands:
+
+ Control+Option+Right
+ Ctrl+Option+Left
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ required Group boundaries at start and end of group are conveyed
+
+
+ Test 21: Navigate into a checkbox group in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 21 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ Navigate from outside the checkbox group to a checkbox inside the group. Test both navigating forward into the start and backward into the end. using the following commands:
+
+ X
+ Shift+X
+ F
+ F / Shift+F
+ Tab
+ Shift+Tab
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ Navigate from outside the checkbox group to a checkbox inside the group. Test both navigating forward into the start and backward into the end. using the following commands:
+
+ X
+ Shift+X
+ F
+ F / Shift+F
+ Tab
+ Shift+Tab
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+ Test 22: Navigate into a checkbox group in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 22 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ Navigate from outside the checkbox group to a checkbox inside the group. Test both navigating forward into the start and backward into the end. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ Navigate from outside the checkbox group to a checkbox inside the group. Test both navigating forward into the start and backward into the end. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+ Test 23: Navigate into a checkbox group
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 23 Page
+
+
+
VoiceOver for macOS
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ Navigate from outside the checkbox group to a checkbox inside the group. Test both navigating forward into the start and backward into the end. using the following commands:
+
+ Tab
+ Shift+Tab
+ Control+Option+Right
+ Ctrl+Option+Left
+ Control+Option+Command+J
+ Shift+Control+Option+Command+J
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+ Test 24: Navigate out of a checkbox group in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 24 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ Navigate from a checkbox inside the checkbox group to an element outside the checkbox group. Test both navigating forward out of the end and backward out of the start. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ optional Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ Navigate from a checkbox inside the checkbox group to an element outside the checkbox group. Test both navigating forward out of the end and backward out of the start. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ optional Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+ Test 25: Navigate out of a checkbox group in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 25 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ Navigate from a checkbox inside the checkbox group to an element outside the checkbox group. Test both navigating forward out of the end and backward out of the start. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ optional Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ Navigate from a checkbox inside the checkbox group to an element outside the checkbox group. Test both navigating forward out of the end and backward out of the start. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ optional Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+ Test 26: Navigate out of a checkbox group
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited: Thu Nov 19 16:28:06 2020 -0500
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 26 Page
+
+
+
VoiceOver for macOS
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ Navigate from a checkbox inside the checkbox group to an element outside the checkbox group. Test both navigating forward out of the end and backward out of the start. using the following commands:
+
+ Tab
+ Shift+Tab
+ Control+Option+Right
+ Ctrl+Option+Left
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ optional Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+
+
+
diff --git a/review/checkbox-1.html~HEAD b/review/checkbox-1.html~HEAD
new file mode 100644
index 000000000..5290e560e
--- /dev/null
+++ b/review/checkbox-1.html~HEAD
@@ -0,0 +1,1829 @@
+
+
+
+
+ Test plan review for pattern: checkbox-1
+
+
+
+
+
+ Test plan review for pattern: checkbox-1 (26 tests)
+
+
+ Filter tests by assistive technology
+ All assistive technologies
+ JAWS
+ NVDA
+ VoiceOver for macOS
+
+
+ Test 1: Navigate to an unchecked checkbox in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 1 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+
+ X / Shift+X
+ F / Shift+F
+ Tab / Shift+Tab
+ Up Arrow / Down Arrow
+ Left Arrow / Right Arrow (with Smart Navigation on)
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+
+ X / Shift+X
+ F / Shift+F
+ Tab / Shift+Tab
+ Up Arrow / Down Arrow
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+ Test 2: Navigate to an unchecked checkbox in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 2 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+ Test 3: Navigate to an unchecked checkbox
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 3 Page
+
+
+
VoiceOver for macOS
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+
+ Tab / Shift+Tab
+ Control+Option+Right / Ctrl+Option+Left
+ Control+Option+Command+J / Shift+Control+Option+Command+J
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+ Test 4: Navigate to a checked checkbox in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 4 Page
+
+
+
JAWS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets the state of the first checkbox to checked
+
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ X / Shift+X
+ F / Shift+F
+ Tab / Shift+Tab
+ Up Arrow / Down Arrow
+ Left Arrow / Right Arrow (with Smart Navigation on)
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+
+
NVDA
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets the state of the first checkbox to checked
+
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ X / Shift+X
+ F / Shift+F
+ Tab / Shift+Tab
+ Up Arrow / Down Arrow
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+ Test 5: Navigate to a checked checkbox in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 5 Page
+
+
+
JAWS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets the state of the first checkbox to checked
+
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+
+
NVDA
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets the state of the first checkbox to checked
+
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+ Test 6: Navigate to a checked checkbox
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 6 Page
+
+
+
VoiceOver for macOS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets the state of the first checkbox to checked
+
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ Tab / Shift+Tab
+ Control+Option+Right / Ctrl+Option+Left
+ Control+Option+Command+J / Shift+Control+Option+Command+J
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+ Test 7: Operate a checkbox in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 7 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ Check and uncheck the first checkbox. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Change in state is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ Check and uncheck the first checkbox. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Change in state is conveyed
+
+
+ Test 8: Operate a checkbox in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 8 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ Check and uncheck the first checkbox. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Change in state is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ Check and uncheck the first checkbox. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Change in state is conveyed
+
+
+ Test 9: Operate a checkbox
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 9 Page
+
+
+
VoiceOver for macOS
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ Check and uncheck the first checkbox. using the following commands:
+
+ Control+Option+Space
+ Space
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Change in state is conveyed
+
+
+ Test 10: Read an unchecked checkbox in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 10 Page
+
+
+
JAWS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox
+
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ When the reading cursor is on the first checkbox, read the first checkbox using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+
+
NVDA
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox
+
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ When the reading cursor is on the first checkbox, read the first checkbox using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+ Test 11: Read an unchecked checkbox in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 11 Page
+
+
+
JAWS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox
+
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ When the focus is on the first checkbox, read the first checkbox using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+
+
NVDA
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox
+
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ When the focus is on the first checkbox, read the first checkbox using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+ Test 12: Read an unchecked checkbox
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 12 Page
+
+
+
VoiceOver for macOS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox
+
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ When the focus is on the first checkbox, read the first checkbox using the following commands:
+
+ Control+Option+F3
+ Control+Option+F4
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (not checked) is conveyed
+
+
+ Test 13: Read a checked checkbox in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 13 Page
+
+
+
JAWS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox and sets its state to checked
+
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ When the reading cursor is on the first checkbox, read the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox ( checked) is conveyed
+
+
+
+
NVDA
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox and sets its state to checked
+
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ When the reading cursor is on the first checkbox, read the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox ( checked) is conveyed
+
+
+ Test 14: Read a checked checkbox in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 14 Page
+
+
+
JAWS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox and sets its state to checked
+
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ When the focus is on the first checkbox, read the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+
+
NVDA
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox and sets its state to checked
+
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ When the focus is on the first checkbox, read the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ Insert+Tab
+ Insert+Up
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+ Test 15: Read a checked checkbox
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 15 Page
+
+
+
VoiceOver for macOS
+
Scripted Instructions
+ The following instructions are executed by a script in the test page to initialize the widget:
+
+ sets focus on the first checkbox and sets its state to checked
+
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ When the focus is on the first checkbox, read the first checkbox. Note: it should be in the checked state. using the following commands:
+
+ Control+Option+F3
+ Control+Option+F4
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'checkbox' is conveyed
+ required Name 'Lettuce' is conveyed
+ required State of the checkbox (checked) is conveyed
+
+
+ Test 16: Read grouping information of a grouped checkbox in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 16 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ When reading cursor is on a checkbox, read its grouping information using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ When reading cursor is on a checkbox, read its grouping information using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+
+
+ Test 17: Read grouping information of a grouped checkbox in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 17 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ When focus is on a checkbox, read its grouping information using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ When focus is on a checkbox, read its grouping information using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+
+
+ Test 18: Read grouping information of a grouped checkbox
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 18 Page
+
+
+
VoiceOver for macOS
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ When focus is on a checkbox, read its grouping information using the following commands:
+
+ Control+Option+F3
+ Control+Option+F4
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+
+
+ Test 19: Navigate sequentially through a checkbox group in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 19 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ Navigate both forward and backward into and out of the checkbox group. using the following commands:
+
+ Up Arrow
+ Down Arrow
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ required Group boundaries at start and end of group are conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ Navigate both forward and backward into and out of the checkbox group. using the following commands:
+
+ Up Arrow
+ Down Arrow
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ required Group boundaries at start and end of group are conveyed
+
+
+ Test 20: Navigate sequentially through a checkbox group
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 20 Page
+
+
+
VoiceOver for macOS
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ Navigate both forward and backward into and out of the checkbox group. using the following commands:
+
+ Control+Option+Right
+ Ctrl+Option+Left
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ required Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ required Group boundaries at start and end of group are conveyed
+
+
+ Test 21: Navigate into a checkbox group in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 21 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ Navigate from outside the checkbox group to a checkbox inside the group. Test both navigating forward into the start and backward into the end. using the following commands:
+
+ X
+ Shift+X
+ F
+ F / Shift+F
+ Tab
+ Shift+Tab
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ Navigate from outside the checkbox group to a checkbox inside the group. Test both navigating forward into the start and backward into the end. using the following commands:
+
+ X
+ Shift+X
+ F
+ F / Shift+F
+ Tab
+ Shift+Tab
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+ Test 22: Navigate into a checkbox group in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 22 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ Navigate from outside the checkbox group to a checkbox inside the group. Test both navigating forward into the start and backward into the end. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ Navigate from outside the checkbox group to a checkbox inside the group. Test both navigating forward into the start and backward into the end. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+ Test 23: Navigate into a checkbox group
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 23 Page
+
+
+
VoiceOver for macOS
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ Navigate from outside the checkbox group to a checkbox inside the group. Test both navigating forward into the start and backward into the end. using the following commands:
+
+ Tab
+ Shift+Tab
+ Control+Option+Right
+ Ctrl+Option+Left
+ Control+Option+Command+J
+ Shift+Control+Option+Command+J
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ required Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+ Test 24: Navigate out of a checkbox group in reading mode
+
+
+ Mode: reading
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 24 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.
+ Navigate from a checkbox inside the checkbox group to an element outside the checkbox group. Test both navigating forward out of the end and backward out of the start. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ optional Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.
+ Navigate from a checkbox inside the checkbox group to an element outside the checkbox group. Test both navigating forward out of the end and backward out of the start. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ optional Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+ Test 25: Navigate out of a checkbox group in interaction mode
+
+
+ Mode: interaction
+ Applies to: jaws, nvda
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 25 Page
+
+
+
JAWS
+
Tester Instructions
+
+
+ Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.
+ Navigate from a checkbox inside the checkbox group to an element outside the checkbox group. Test both navigating forward out of the end and backward out of the start. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ optional Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+
+
NVDA
+
Tester Instructions
+
+
+ If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.
+ Navigate from a checkbox inside the checkbox group to an element outside the checkbox group. Test both navigating forward out of the end and backward out of the start. using the following commands:
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ optional Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+ Test 26: Navigate out of a checkbox group
+
+
+ Mode: interaction
+ Applies to: voiceover_macos
+ Lasted edited:
+ Tests:
+
+
+ Relevant Specifications:
+
+
+
+
+ Open Test 26 Page
+
+
+
VoiceOver for macOS
+
Tester Instructions
+
+
+ Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.
+ Navigate from a checkbox inside the checkbox group to an element outside the checkbox group. Test both navigating forward out of the end and backward out of the start. using the following commands:
+
+ Tab
+ Shift+Tab
+ Control+Option+Right
+ Ctrl+Option+Left
+
+
+
+
+
Assertions
+
+ Priority Assertion
+ optional Role 'group' is conveyed
+ optional Group name 'Sandwich Condiments' is conveyed
+ optional The group boundary is conveyed
+
+
+
+
+
diff --git a/build/review/checkbox-tri-state.html b/review/checkbox-tri-state.html
similarity index 98%
rename from build/review/checkbox-tri-state.html
rename to review/checkbox-tri-state.html
index 371c34e5c..adde2596e 100644
--- a/build/review/checkbox-tri-state.html
+++ b/review/checkbox-tri-state.html
@@ -301,7 +301,7 @@ Test 1: Navigate forwards to a partially checked checkbox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -383,7 +383,7 @@ Test 2: Navigate backwards to a partially checked checkbox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -465,7 +465,7 @@ Test 3: Navigate forwards to a partially checked checkbox in interaction mod
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -541,7 +541,7 @@ Test 4: Navigate backwards to a partially checked checkbox in interaction mo
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -617,7 +617,7 @@ Test 5: Navigate forwards to a partially checked checkbox
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -668,7 +668,7 @@ Test 6: Navigate backwards to a partially checked checkbox
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -719,7 +719,7 @@ Test 7: Operate a partially checked checkbox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -790,7 +790,7 @@ Test 8: Operate a partially checked checkbox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -861,7 +861,7 @@ Test 9: Operate a partially checked checkbox
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -908,7 +908,7 @@ Test 10: Operate an unchecked checkbox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -980,7 +980,7 @@ Test 11: Operate an unchecked checkbox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1052,7 +1052,7 @@ Test 12: Operate an unchecked checkbox
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -1100,7 +1100,7 @@ Test 13: Read a partially checked checkbox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1178,7 +1178,7 @@ Test 14: Read a partially checked checkbox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1256,7 +1256,7 @@ Test 15: Read a partially checked checkbox
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -1306,7 +1306,7 @@ Test 16: Read grouping information of a grouped, partially checked checkbox
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1378,7 +1378,7 @@ Test 17: Read grouping information of a grouped, partially checked checkbox
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1450,7 +1450,7 @@ Test 18: Read grouping information of a grouped, partially checked checkbox<
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -1497,7 +1497,7 @@ Test 19: Navigate forwards into a checkbox group in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1575,7 +1575,7 @@ Test 20: Navigate backwards out of a checkbox group in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1649,7 +1649,7 @@ Test 21: Navigate forwards into a checkbox group in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1723,7 +1723,7 @@ Test 22: Navigate backwards out of a checkbox group in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1797,7 +1797,7 @@ Test 23: Navigate forwards into a checkbox group
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -1844,7 +1844,7 @@ Test 24: Navigate backwards out of a checkbox group
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
diff --git a/build/review/checkbox.html b/review/checkbox.html
similarity index 98%
rename from build/review/checkbox.html
rename to review/checkbox.html
index 128fab2d8..5ecc6df94 100644
--- a/build/review/checkbox.html
+++ b/review/checkbox.html
@@ -301,7 +301,7 @@ Test 1: Navigate to an unchecked checkbox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -374,7 +374,7 @@ Test 2: Navigate to an unchecked checkbox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -440,7 +440,7 @@ Test 3: Navigate to an unchecked checkbox
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -486,7 +486,7 @@ Test 4: Navigate to a checked checkbox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -569,7 +569,7 @@ Test 5: Navigate to a checked checkbox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -645,7 +645,7 @@ Test 6: Navigate to a checked checkbox
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -696,7 +696,7 @@ Test 7: Operate a checkbox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -759,7 +759,7 @@ Test 8: Operate a checkbox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -820,7 +820,7 @@ Test 9: Operate a checkbox
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -862,7 +862,7 @@ Test 10: Read an unchecked checkbox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -940,7 +940,7 @@ Test 11: Read an unchecked checkbox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1018,7 +1018,7 @@ Test 12: Read an unchecked checkbox
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -1068,7 +1068,7 @@ Test 13: Read a checked checkbox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1146,7 +1146,7 @@ Test 14: Read a checked checkbox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1224,7 +1224,7 @@ Test 15: Read a checked checkbox
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -1274,7 +1274,7 @@ Test 16: Read grouping information of a grouped checkbox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1338,7 +1338,7 @@ Test 17: Read grouping information of a grouped checkbox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1402,7 +1402,7 @@ Test 18: Read grouping information of a grouped checkbox
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -1446,7 +1446,7 @@ Test 19: Navigate sequentially through a checkbox group in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1515,7 +1515,7 @@ Test 20: Navigate sequentially through a checkbox group
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -1561,7 +1561,7 @@ Test 21: Navigate into a checkbox group in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1638,7 +1638,7 @@ Test 22: Navigate into a checkbox group in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1707,7 +1707,7 @@ Test 23: Navigate into a checkbox group
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -1757,7 +1757,7 @@ Test 24: Navigate out of a checkbox group in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1826,7 +1826,7 @@ Test 25: Navigate out of a checkbox group in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1895,7 +1895,7 @@ Test 26: Navigate out of a checkbox group
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
diff --git a/build/review/combobox-autocomplete-both.html b/review/combobox-autocomplete-both.html
similarity index 98%
rename from build/review/combobox-autocomplete-both.html
rename to review/combobox-autocomplete-both.html
index d70421713..cf19f2cd0 100644
--- a/build/review/combobox-autocomplete-both.html
+++ b/review/combobox-autocomplete-both.html
@@ -301,7 +301,7 @@ Test 1: Navigate to empty, editable combobox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -371,7 +371,7 @@ Test 2: Navigate sequentially to empty, editable combobox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -437,7 +437,7 @@ Test 3: Navigate to empty, editable combobox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -503,7 +503,7 @@ Test 4: Read empty, editable combobox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -569,7 +569,7 @@ Test 5: Read empty, editable combobox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -635,7 +635,7 @@ Test 6: Navigate to filled, editable, collapsed combobox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -717,7 +717,7 @@ Test 7: Navigate to filled, editable, collapsed combobox in interaction mod
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -795,7 +795,7 @@ Test 8: Read filled, editable, collapsed combobox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -873,7 +873,7 @@ Test 9: Read filled, editable, collapsed combobox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -951,7 +951,7 @@ Test 10: Navigate to filled, editable, expanded combobox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1033,7 +1033,7 @@ Test 11: Navigate sequentially to filled, editable, expanded combobox in rea
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1101,7 +1101,7 @@ Test 12: Navigate to filled, editable, expanded combobox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1179,7 +1179,7 @@ Test 13: Read filled, editable, expanded combobox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1257,7 +1257,7 @@ Test 14: Read filled, editable, expanded combobox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1335,7 +1335,7 @@ Test 15: Navigate to editable combobox with commands that switch mode from r
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1395,7 +1395,7 @@ Test 16: Activate editable combobox in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1465,7 +1465,7 @@ Test 17: Open combobox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1539,7 +1539,7 @@ Test 18: Close combobox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1609,7 +1609,7 @@ Test 19: Open combobox with 'States' button in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1677,7 +1677,7 @@ Test 20: Open combobox with 'States' button
Mode: interaction
Applies to: voiceover_macos
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
voiceover_macos
@@ -1720,7 +1720,7 @@ Test 21: Close combobox with 'States' button in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1792,7 +1792,7 @@ Test 22: Close combobox with 'States' button in reading mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1862,7 +1862,7 @@ Test 23: Navigate into popup from empty combobox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -1940,7 +1940,7 @@ Test 24: Type portion of valid value in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -2016,7 +2016,7 @@ Test 25: Navigate options in popup in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -2092,7 +2092,7 @@ Test 26: Read popup item in reading mode
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -2167,7 +2167,7 @@ Test 27: Read popup item in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -2242,7 +2242,7 @@ Test 28: Activate option in popup in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -2320,7 +2320,7 @@ Test 29: Cancel option selection in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -2398,7 +2398,7 @@ Test 30: Initiate caret movement from listbox in interaction mode
Mode: interaction
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
diff --git a/build/review/combobox-select-only.html b/review/combobox-select-only.html
similarity index 98%
rename from build/review/combobox-select-only.html
rename to review/combobox-select-only.html
index 586d1a13e..dbd05c82b 100644
--- a/build/review/combobox-select-only.html
+++ b/review/combobox-select-only.html
@@ -301,7 +301,7 @@ Test 1: Navigate forwards to a collapsed select-only combobox in reading mod
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests:
jaws
@@ -386,7 +386,7 @@ Test 2: Navigate backwards to a collapsed select-only combobox in reading mo
Mode: reading
Applies to: jaws, nvda
- Last edited: Fri Jun 11 11:30:16 2021 -0500
+ Lasted edited: Thu Jun 3 22:57:25 2021 +0200
Tests: