From 693acebd0fb0a1bea86f8394648c957a306a4749 Mon Sep 17 00:00:00 2001
From: Howard Edwards <howarde.edwards@gmail.com>
Date: Tue, 29 Jun 2021 16:13:31 -0500
Subject: [PATCH] Generation of tests and review pages script improvements
 (#451)

* updated create-all-tests script to add verbose flag and provide summary of runs

* Generate test and review files automatically

* Generate test and review files automatically

* Generated tests improvements (#3)

* WIP - pre-push test

* Revert "WIP - pre-push test"

This reverts commit 42b40d66

* adding tests folder level .gitignore

* after untrack

* added additional command to generate-and-commit-files workflow script

* Generate test and review files automatically

* workflow tweak

* Generate test and review files automatically

* workflow tweak

* Generate test and review files automatically

* workflow tweak

* Generate test and review files automatically

* workflow tweak

* Generate test and review files automatically

* Generate test and review files automatically

* workflow tweak

* Generate test and review files automatically

* workflow tweak

* workflow step rename

* added tests/.gitignore

* Generate test and review files automatically

* untracked files

* Generate test and review files automatically

* misc

* Generate test and review files automatically

* adjusted generate-and-commit-files.yml for CI

* Generate test and review files automatically

* updated workflow action

* untracked files

* Generate test and review files automatically

* misc

* Generate test and review files automatically

* Update test-03-navigate-to-unchecked-checkbox-interaction.html

* Generate test and review files automatically

* Create test-03-navigate-to-unchecked-checkbox-interaction.html

* Generate test and review files automatically

* misc

* Generate test and review files automatically

* after untrack

* modified gitignore

* untrack files

* testing .gitattributes

* Generate test and review files automatically

* .gitattributes

* Generate test and review files automatically

* misc

* Generate test and review files automatically

* misc

* Generate test and review files automatically

* misc

* Generate test and review files automatically

* adjusted .gitattributes

* Generate test and review files automatically

* misc

* Generate test and review files automatically

* misc

* misc

* adjusted gitignore

* after untrack

* prep to test workflow

* Generate test and review files automatically

* Create index.html

* Generate test and review files automatically

* Delete index.html

* Generate test and review files automatically

* adjusting generated PR link

* Generate test and review files automatically

* adding support for support.json

* Generate test and review files automatically

* build cleanups

* misc

* workflow refactor

* Generate test and review files automatically

* Generate test and review files automatically

* after merging with verbosity branch

* Generate test and review files automatically

* updated .gitattributes and .gitignore; added additional utility script for generating tests and review files locally

* Generate test and review files automatically

* misc

* Generate test and review files automatically

Co-authored-by: howard-e <howard-e@users.noreply.github.com>

* Generate test and review files automatically

* changed update-pr.yml workflow generated link

* typo fix in review-template file

* * removed in-line tests and review pages generation
* added `npm run validate` command
* added `npm run cleanup` command

* Generate test and review files automatically

* added targeted test plan directory support for npm run build (create-all-tests.js) and npm run validate

* start to support of targeted test plan directory for test-reviewer.mjs

* added support for targeted test plan directory for test-reviewer.mjs

* added targeted test plan support for npm run build and npm run validate

* Generate test and review files automatically

* Added local development docs

* Generate test and review files automatically

* Updated LOCAL_DEVELOPMENT.md

* Added local development docs

* Generate test and review files automatically

* Updated README with correct flag

* Generate test and review files automatically

* changed language for test plan flag from 'directory' to 'testplan'

* addressing PR feedback

* Generate test and review files automatically

* Generate test and review files automatically

* Windows support

* fix for bug where test plan summary total was falsely reported

* Generate test and review files automatically

* fix for bug where test plans processed total was incorrect

* Generate test and review files automatically

* now only moving required files to /build/tests/resources; revised .gitattributes to include *.mjs files of build/tests directory

* Generate test and review files automatically

* Updated LOCAL_DEVELOPMENT.md

* Generate test and review files automatically

* Generate test and review files automatically

* re-added README and GitHub action changes

* Generate test and review files automatically

* template typo fix

* Generate test and review files automatically

Co-authored-by: howard-e <howard-e@users.noreply.github.com>
---
 .gitattributes                                |   15 +
 .../workflows/generate-and-commit-files.yml   |   35 +-
 .github/workflows/update-pr.yml               |    2 +-
 .gitignore                                    |    2 -
 README.md                                     |    3 +
 build/index.html                              |  105 +
 build/review/checkbox-tri-state.html          | 1891 ++++++++++
 build/review/checkbox.html                    | 1943 +++++++++++
 build/review/combobox-autocomplete-both.html  | 2484 +++++++++++++
 build/review/combobox-select-only.html        | 2925 ++++++++++++++++
 ...menu-button-actions-active-descendant.html | 2031 +++++++++++
 build/review/menubar-editor.html              | 3092 +++++++++++++++++
 build/review/modal-dialog.html                | 2227 ++++++++++++
 build/review/tabs-manual-activation.html      | 2329 +++++++++++++
 .../tests}/checkbox-tri-state/commands.json   |    0
 .../tests}/checkbox-tri-state/index.html      |    0
 .../reference/checkbox-tri-state.html         |   81 +
 .../reference/css/checkbox.css                |   89 +
 .../reference/js/checkboxMixed.js             |  149 +
 .../reference/js/controlledCheckbox.js        |  100 +
 ...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
 {tests => build/tests}/checkbox/commands.json |    0
 {tests => build/tests}/checkbox/index.html    |    0
 .../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 +
 ...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
 .../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 +++
 .../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
 .../tests}/combobox-select-only/commands.json |    0
 .../tests}/combobox-select-only/index.html    |    0
 .../reference/combobox-select-only.html       |   51 +
 .../reference/css/select-only.css             |  103 +
 .../reference/js/select-only.js               |  390 +++
 ...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
 .../css/menu-button-actions.css               |   82 +
 .../menu-button-actions-active-descendant.js  |  347 ++
 ...menu-button-actions-active-descendant.html |   57 +
 ...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
 .../tests}/menubar-editor/commands.json       |    0
 .../tests}/menubar-editor/index.html          |    0
 .../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 +
 .../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
 .../tests}/modal-dialog/commands.json         |    0
 .../tests}/modal-dialog/index.html            |    0
 .../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 +
 .../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
 build/tests/resources/aria-at-harness.mjs     |  860 +++++
 build/tests/resources/at-commands.mjs         |  105 +
 build/tests/resources/keys.mjs                |   97 +
 build/tests/support.json                      |   42 +
 .../tabs-manual-activation/commands.json      |    0
 .../tests}/tabs-manual-activation/index.html  |    0
 .../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 +
 ...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
 docs/LOCAL_DEVELOPMENT.md                     |  122 +
 index.html                                    |   16 +-
 package-lock.json                             | 1080 +++++-
 package.json                                  |   13 +-
 review/checkbox-tri-state.html                |   48 +-
 review/checkbox.html                          |   52 +-
 review/combobox-autocomplete-both.html        |   60 +-
 review/combobox-select-only.html              |   76 +-
 ...menu-button-actions-active-descendant.html |   52 +-
 review/menubar-editor.html                    |   80 +-
 review/modal-dialog.html                      |   58 +-
 review/tabs-manual-activation.html            |   58 +-
 scripts/create-all-tests.js                   |   79 +-
 scripts/create-example-tests.js               |  345 +-
 scripts/review-template.mustache              |    8 +-
 scripts/test-reviewer.mjs                     |  416 ++-
 631 files changed, 40862 insertions(+), 653 deletions(-)
 create mode 100644 .gitattributes
 create mode 100644 build/index.html
 create mode 100644 build/review/checkbox-tri-state.html
 create mode 100644 build/review/checkbox.html
 create mode 100644 build/review/combobox-autocomplete-both.html
 create mode 100644 build/review/combobox-select-only.html
 create mode 100644 build/review/menu-button-actions-active-descendant.html
 create mode 100644 build/review/menubar-editor.html
 create mode 100644 build/review/modal-dialog.html
 create mode 100644 build/review/tabs-manual-activation.html
 rename {tests => build/tests}/checkbox-tri-state/commands.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/index.html (100%)
 create mode 100644 build/tests/checkbox-tri-state/reference/checkbox-tri-state.html
 create mode 100644 build/tests/checkbox-tri-state/reference/css/checkbox.css
 create mode 100644 build/tests/checkbox-tri-state/reference/js/checkboxMixed.js
 create mode 100644 build/tests/checkbox-tri-state/reference/js/controlledCheckbox.js
 rename {tests => build/tests}/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-05-navigate-forwards-to-partially-checked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-05-navigate-forwards-to-partially-checked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-06-navigate-backwards-to-partially-checked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-06-navigate-backwards-to-partially-checked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-09-operate-partially-checked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-09-operate-partially-checked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-12-operate-unchecked-checked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-12-operate-unchecked-checked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-15-read-partially-checked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-15-read-partially-checked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-16-read-checkbox-group-reading.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-16-read-checkbox-group-reading.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-17-read-checkbox-group-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-17-read-checkbox-group-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-18-read-checkbox-group-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-18-read-checkbox-group-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-23-navigate-forwards-into-checkbox-group-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-23-navigate-forwards-into-checkbox-group-interaction.json (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-24-navigate-backwards-out-of-checkbox-group-interaction.html (100%)
 rename {tests => build/tests}/checkbox-tri-state/test-24-navigate-backwards-out-of-checkbox-group-interaction.json (100%)
 rename {tests => build/tests}/checkbox/commands.json (100%)
 rename {tests => build/tests}/checkbox/index.html (100%)
 create mode 100644 build/tests/checkbox/reference/2020-11-23_175030/checkbox-1/checkbox-1.html
 create mode 100644 build/tests/checkbox/reference/2020-11-23_175030/checkbox-1/js/checkbox.js
 create mode 100644 build/tests/checkbox/reference/2020-11-23_175030/checkbox-2/js/checkboxMixed.js
 create mode 100644 build/tests/checkbox/reference/2020-11-23_175030/checkbox-2/js/controlledCheckbox.js
 create mode 100644 build/tests/checkbox/reference/2020-11-23_175030/css/checkbox.css
 rename {tests => build/tests}/checkbox/test-01-navigate-to-unchecked-checkbox-reading.html (100%)
 rename {tests => build/tests}/checkbox/test-01-navigate-to-unchecked-checkbox-reading.json (100%)
 rename {tests => build/tests}/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-03-navigate-to-unchecked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-03-navigate-to-unchecked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-04-navigate-to-checked-checkbox-reading.html (100%)
 rename {tests => build/tests}/checkbox/test-04-navigate-to-checked-checkbox-reading.json (100%)
 rename {tests => build/tests}/checkbox/test-05-navigate-to-checked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-05-navigate-to-checked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-06-navigate-to-checked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-06-navigate-to-checked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-07-operate-checkbox-reading.html (100%)
 rename {tests => build/tests}/checkbox/test-07-operate-checkbox-reading.json (100%)
 rename {tests => build/tests}/checkbox/test-08-operate-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-08-operate-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-09-operate-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-09-operate-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-10-read-unchecked-checkbox-reading.html (100%)
 rename {tests => build/tests}/checkbox/test-10-read-unchecked-checkbox-reading.json (100%)
 rename {tests => build/tests}/checkbox/test-11-read-unchecked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-11-read-unchecked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-12-read-unchecked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-12-read-unchecked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-13-read-checked-checkbox-reading.html (100%)
 rename {tests => build/tests}/checkbox/test-13-read-checked-checkbox-reading.json (100%)
 rename {tests => build/tests}/checkbox/test-14-read-checked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-14-read-checked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-15-read-checked-checkbox-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-15-read-checked-checkbox-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-16-read-checkbox-group-reading.html (100%)
 rename {tests => build/tests}/checkbox/test-16-read-checkbox-group-reading.json (100%)
 rename {tests => build/tests}/checkbox/test-17-read-checkbox-group-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-17-read-checkbox-group-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-18-read-checkbox-group-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-18-read-checkbox-group-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.html (100%)
 rename {tests => build/tests}/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.json (100%)
 rename {tests => build/tests}/checkbox/test-20-navigate-sequentially-through-checkbox-group-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-20-navigate-sequentially-through-checkbox-group-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-21-navigate-into-checkbox-group-reading.html (100%)
 rename {tests => build/tests}/checkbox/test-21-navigate-into-checkbox-group-reading.json (100%)
 rename {tests => build/tests}/checkbox/test-22-navigate-into-checkbox-group-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-22-navigate-into-checkbox-group-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-23-navigate-into-checkbox-group-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-23-navigate-into-checkbox-group-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-24-navigate-out-of-checkbox-group-reading.html (100%)
 rename {tests => build/tests}/checkbox/test-24-navigate-out-of-checkbox-group-reading.json (100%)
 rename {tests => build/tests}/checkbox/test-25-navigate-out-of-checkbox-group-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-25-navigate-out-of-checkbox-group-interaction.json (100%)
 rename {tests => build/tests}/checkbox/test-26-navigate-out-of-checkbox-group-interaction.html (100%)
 rename {tests => build/tests}/checkbox/test-26-navigate-out-of-checkbox-group-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/commands.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/index.html (100%)
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/combobox-autocomplete-both.html
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/combobox-autocomplete.css
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/combobox-datepicker.css
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/grid-combo.css
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/select-only.css
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/combobox-autocomplete.js
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/combobox-datepicker.js
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/grid-combo-example.js
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/grid-combo.js
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/select-only.js
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/combobox-autocomplete-both.html
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/combobox-autocomplete.css
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/combobox-datepicker.css
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/grid-combo.css
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/select-only.css
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/combobox-autocomplete.js
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/combobox-datepicker.js
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/grid-combo-example.js
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/grid-combo.js
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/select-only.js
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/combobox-autocomplete-both.html
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/combobox-autocomplete.css
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/combobox-datepicker.css
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/grid-combo.css
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/select-only.css
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/combobox-autocomplete.js
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/combobox-datepicker.js
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/grid-combo-example.js
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/grid-combo.js
 create mode 100644 build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/select-only.js
 rename {tests => build/tests}/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-04-read-combobox-reading.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-04-read-combobox-reading.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-05-read-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-05-read-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-08-read-combobox-reading.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-08-read-combobox-reading.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-09-read-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-09-read-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-13-read-combobox-reading.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-13-read-combobox-reading.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-14-read-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-14-read-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-16-activate-combobox-reading.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-16-activate-combobox-reading.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-17-open-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-17-open-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-18-close-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-18-close-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-19-activate-states-button-reading.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-19-activate-states-button-reading.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-20-activate-states-button-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-20-activate-states-button-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-21-activate-states-button-reading.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-21-activate-states-button-reading.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-22-activate-states-button-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-22-activate-states-button-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-29-cancel-selection-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-29-cancel-selection-interaction.json (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.html (100%)
 rename {tests => build/tests}/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/commands.json (100%)
 rename {tests => build/tests}/combobox-select-only/index.html (100%)
 create mode 100644 build/tests/combobox-select-only/reference/combobox-select-only.html
 create mode 100644 build/tests/combobox-select-only/reference/css/select-only.css
 create mode 100644 build/tests/combobox-select-only/reference/js/select-only.js
 rename {tests => build/tests}/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-05-navigate-forwards-to-collapsed-select-only-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-05-navigate-forwards-to-collapsed-select-only-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-06-navigate-backwards-to-collapsed-select-only-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-06-navigate-backwards-to-collapsed-select-only-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-09-read-information-about-collapsed-select-only-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-09-read-information-about-collapsed-select-only-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-12-open-collapsed-select-only-combobox-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-12-open-collapsed-select-only-combobox-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-14-open-collapsed-select-only-combobox-to-first-option-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-14-open-collapsed-select-only-combobox-to-first-option-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-16-open-collapsed-select-only-combobox-to-specific-option-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-16-open-collapsed-select-only-combobox-to-specific-option-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-18-open-collapsed-select-only-combobox-to-last-option-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-18-open-collapsed-select-only-combobox-to-last-option-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-20-read-information-about-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-20-read-information-about-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-23-navigate-forwards-to-option-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-23-navigate-forwards-to-option-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-24-navigate-backwards-to-option-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-24-navigate-backwards-to-option-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-26-navigate-to-specific-option-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-26-navigate-to-specific-option-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-29-navigate-to-first-option-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-29-navigate-to-first-option-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-30-navigate-to-last-option-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-30-navigate-to-last-option-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-33-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-33-navigate-forwards-by-ten-options-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-34-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-34-navigate-backwards-by-ten-options-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-36-select-option-in-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-36-select-option-in-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-37-close-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-37-close-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/combobox-select-only/test-38-close-listbox-popup-interaction.html (100%)
 rename {tests => build/tests}/combobox-select-only/test-38-close-listbox-popup-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/commands.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/index.html (100%)
 create mode 100644 build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/css/menu-button-actions.css
 create mode 100644 build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/js/menu-button-actions-active-descendant.js
 create mode 100644 build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/menu-button-actions-active-descendant.html
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-05-navigate-forwards-to-menu-button-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-05-navigate-forwards-to-menu-button-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-06-navigate-backwards-to-menu-button-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-06-navigate-backwards-to-menu-button-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-09-read-information-about-menu-button-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-09-read-information-about-menu-button-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-10-open-menu-reading.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-10-open-menu-reading.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-11-open-menu-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-11-open-menu-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-12-open-menu-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-12-open-menu-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-14-open-menu-to-last-item-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-14-open-menu-to-last-item-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-16-read-information-about-menu-item-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-16-read-information-about-menu-item-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-18-navigate-to-first-item-in-menu-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-18-navigate-to-first-item-in-menu-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-20-navigate-to-last-item-in-menu-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-20-navigate-to-last-item-in-menu-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-22-navigate-to-item-in-menu-by-typing-character-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-22-navigate-to-item-in-menu-by-typing-character-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-24-activate-menu-item-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-24-activate-menu-item-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-25-close-menu-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-25-close-menu-interaction.json (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-26-close-menu-interaction.html (100%)
 rename {tests => build/tests}/menu-button-actions-active-descendant/test-26-close-menu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/commands.json (100%)
 rename {tests => build/tests}/menubar-editor/index.html (100%)
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/css/menubar-editor.css
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/css/menubar-navigation.css
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/checkbox-checked-focus.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/checkbox-checked.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/down-arrow-focus.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/down-arrow.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/radio-checked-focus.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/radio-checked.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/separator.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/up-arrow-focus.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/images/up-arrow.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/js/menubar-editor.js
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/js/menubar-navigation.js
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/js/style-manager.js
 create mode 100644 build/tests/menubar-editor/reference/2020-11-19_152059/menubar-editor.html
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/css/menubar-editor.css
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/css/menubar-navigation.css
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/checkbox-checked-focus.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/checkbox-checked.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/down-arrow-focus.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/down-arrow.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/radio-checked-focus.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/radio-checked.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/separator.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/up-arrow-focus.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/images/up-arrow.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/js/menubar-editor.js
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/js/menubar-navigation.js
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/js/style-manager.js
 create mode 100644 build/tests/menubar-editor/reference/2020-11-20_13316/menubar-editor.html
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/css/menubar-editor.css
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/css/menubar-navigation.css
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/checkbox-checked-focus.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/checkbox-checked.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/down-arrow-focus.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/down-arrow.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/radio-checked-focus.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/radio-checked.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/separator.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/up-arrow-focus.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/images/up-arrow.svg
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/js/menubar-editor.js
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/js/menubar-navigation.js
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/js/style-manager.js
 create mode 100644 build/tests/menubar-editor/reference/2020-11-23_175528/menubar-editor.html
 rename {tests => build/tests}/menubar-editor/test-01-navigate-to-menubar-reading.html (100%)
 rename {tests => build/tests}/menubar-editor/test-01-navigate-to-menubar-reading.json (100%)
 rename {tests => build/tests}/menubar-editor/test-02-activate-menubar-reading.html (100%)
 rename {tests => build/tests}/menubar-editor/test-02-activate-menubar-reading.json (100%)
 rename {tests => build/tests}/menubar-editor/test-03-tab-to-menubar-reading.html (100%)
 rename {tests => build/tests}/menubar-editor/test-03-tab-to-menubar-reading.json (100%)
 rename {tests => build/tests}/menubar-editor/test-04-navigate-to-menubar-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-04-navigate-to-menubar-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-05-navigate-to-menubar-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-05-navigate-to-menubar-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.html (100%)
 rename {tests => build/tests}/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.json (100%)
 rename {tests => build/tests}/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-08-navigate-to-menuitem-in-menubar-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-08-navigate-to-menuitem-in-menubar-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-10-navigate-to-open-menuitem-in-menubar-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-10-navigate-to-open-menuitem-in-menubar-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-11-open-submenu-of-menubar-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-11-open-submenu-of-menubar-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-12-open-submenu-of-menubar-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-12-open-submenu-of-menubar-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-13-close-submenu-of-menubar-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-13-close-submenu-of-menubar-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-14-close-submenu-of-menubar-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-14-close-submenu-of-menubar-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-16-navigate-to-checked-menuitemradio-in-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-16-navigate-to-checked-menuitemradio-in-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-18-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-18-navigate-to-unchecked-menuitemradio-in-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-20-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-20-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-22-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-22-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-23-read-menuitem-in-menubar-reading.html (100%)
 rename {tests => build/tests}/menubar-editor/test-23-read-menuitem-in-menubar-reading.json (100%)
 rename {tests => build/tests}/menubar-editor/test-24-read-menuitem-in-menubar-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-24-read-menuitem-in-menubar-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-25-read-menuitem-in-menubar-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-25-read-menuitem-in-menubar-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.html (100%)
 rename {tests => build/tests}/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.json (100%)
 rename {tests => build/tests}/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-28-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-28-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.html (100%)
 rename {tests => build/tests}/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.json (100%)
 rename {tests => build/tests}/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-31-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-31-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html (100%)
 rename {tests => build/tests}/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.json (100%)
 rename {tests => build/tests}/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-34-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-34-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html (100%)
 rename {tests => build/tests}/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.json (100%)
 rename {tests => build/tests}/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-37-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-37-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.html (100%)
 rename {tests => build/tests}/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.json (100%)
 rename {tests => build/tests}/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.json (100%)
 rename {tests => build/tests}/menubar-editor/test-40-read-disabled-menuitem-in-a-submenu-interaction.html (100%)
 rename {tests => build/tests}/menubar-editor/test-40-read-disabled-menuitem-in-a-submenu-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/commands.json (100%)
 rename {tests => build/tests}/modal-dialog/index.html (100%)
 create mode 100644 build/tests/modal-dialog/reference/2020-12-17_13353/css/dialog.css
 create mode 100644 build/tests/modal-dialog/reference/2020-12-17_13353/dialog.html
 create mode 100644 build/tests/modal-dialog/reference/2020-12-17_13353/js/dialog.js
 create mode 100644 build/tests/modal-dialog/reference/2020-12-17_13353/js/utils.js
 rename {tests => build/tests}/modal-dialog/test-01-open-modal-dialog-reading.html (100%)
 rename {tests => build/tests}/modal-dialog/test-01-open-modal-dialog-reading.json (100%)
 rename {tests => build/tests}/modal-dialog/test-02-open-modal-dialog-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-02-open-modal-dialog-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-03-open-modal-dialog-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-03-open-modal-dialog-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-04-close-modal-dialog-reading.html (100%)
 rename {tests => build/tests}/modal-dialog/test-04-close-modal-dialog-reading.json (100%)
 rename {tests => build/tests}/modal-dialog/test-05-close-modal-dialog-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-05-close-modal-dialog-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-06-close-modal-dialog-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-06-close-modal-dialog-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-07-close-modal-dialog-using-button-reading.html (100%)
 rename {tests => build/tests}/modal-dialog/test-07-close-modal-dialog-using-button-reading.json (100%)
 rename {tests => build/tests}/modal-dialog/test-08-close-modal-dialog-using-button-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-08-close-modal-dialog-using-button-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-09-close-modal-dialog-using-button-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-09-close-modal-dialog-using-button-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-11-navigate-to-last-focusable-element-in-modal-dialog-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-11-navigate-to-last-focusable-element-in-modal-dialog-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-13-navigate-to-first-focusable-element-in-modal-dialog-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-13-navigate-to-first-focusable-element-in-modal-dialog-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.html (100%)
 rename {tests => build/tests}/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.json (100%)
 rename {tests => build/tests}/modal-dialog/test-15-navigate-to-beginning-of-modal-dialog-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-15-navigate-to-beginning-of-modal-dialog-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.html (100%)
 rename {tests => build/tests}/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.json (100%)
 rename {tests => build/tests}/modal-dialog/test-17-navigate-to-end-of-modal-dialog-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-17-navigate-to-end-of-modal-dialog-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-18-open-nested-modal-dialog-reading.html (100%)
 rename {tests => build/tests}/modal-dialog/test-18-open-nested-modal-dialog-reading.json (100%)
 rename {tests => build/tests}/modal-dialog/test-19-open-nested-modal-dialog-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-19-open-nested-modal-dialog-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-20-open-nested-modal-dialog-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-20-open-nested-modal-dialog-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-21-close-nested-modal-dialog-reading.html (100%)
 rename {tests => build/tests}/modal-dialog/test-21-close-nested-modal-dialog-reading.json (100%)
 rename {tests => build/tests}/modal-dialog/test-22-close-nested-modal-dialog-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-22-close-nested-modal-dialog-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-23-close-nested-modal-dialog-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-23-close-nested-modal-dialog-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.html (100%)
 rename {tests => build/tests}/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.json (100%)
 rename {tests => build/tests}/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-26-close-nested-modal-dialog-using-button-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-26-close-nested-modal-dialog-using-button-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.html (100%)
 rename {tests => build/tests}/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.json (100%)
 rename {tests => build/tests}/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.json (100%)
 rename {tests => build/tests}/modal-dialog/test-29-open-nested-modal-dialog-using-link-interaction.html (100%)
 rename {tests => build/tests}/modal-dialog/test-29-open-nested-modal-dialog-using-link-interaction.json (100%)
 create mode 100644 build/tests/resources/aria-at-harness.mjs
 create mode 100644 build/tests/resources/at-commands.mjs
 create mode 100644 build/tests/resources/keys.mjs
 create mode 100644 build/tests/support.json
 rename {tests => build/tests}/tabs-manual-activation/commands.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/index.html (100%)
 create mode 100644 build/tests/tabs-manual-activation/reference/2021-2-15_124757/css/tabs.css
 create mode 100644 build/tests/tabs-manual-activation/reference/2021-2-15_124757/js/tabs.js
 create mode 100644 build/tests/tabs-manual-activation/reference/2021-2-15_124757/tabs.html
 rename {tests => build/tests}/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-05-navigate-forwards-to-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-05-navigate-forwards-to-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-06-navigate-backwards-to-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-06-navigate-backwards-to-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-09-read-information-about-tab-in-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-09-read-information-about-tab-in-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-12-navigate-to-next-tab-in-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-12-navigate-to-next-tab-in-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-15-navigate-to-previous-tab-in-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-15-navigate-to-previous-tab-in-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-17-navigate-to-first-tab-in-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-17-navigate-to-first-tab-in-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-19-navigate-to-last-tab-in-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-19-navigate-to-last-tab-in-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-22-navigate-forwards-to-tab-panel-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-22-navigate-forwards-to-tab-panel-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-23-navigate-backwards-to-tab-panel-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-23-navigate-backwards-to-tab-panel-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-26-activate-tab-in-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-26-activate-tab-in-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.json (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-29-delete-tab-from-tab-list-interaction.html (100%)
 rename {tests => build/tests}/tabs-manual-activation/test-29-delete-tab-from-tab-list-interaction.json (100%)
 create mode 100644 docs/LOCAL_DEVELOPMENT.md

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 000000000..7c70ecef3
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,15 @@
+# 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
+/build/tests/*/*.mjs    -diff -merge
+/build/tests/*/*.mjs    linguist-generated=true
diff --git a/.github/workflows/generate-and-commit-files.yml b/.github/workflows/generate-and-commit-files.yml
index 3169972d7..f11cdbbaf 100644
--- a/.github/workflows/generate-and-commit-files.yml
+++ b/.github/workflows/generate-and-commit-files.yml
@@ -7,24 +7,27 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
-      with:
-        ref: ${{ github.head_ref }}
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.head_ref }}
 
-    - name: Use Node.js
-      uses: actions/setup-node@v1
-      with:
-        node-version: '12.x'
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '12.x'
 
-    - name: Install dependencies
-      run: npm ci
+      - 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 review files
+      #   run: npm run review-tests
 
-    - uses: stefanzweifel/git-auto-commit-action@v4
-      with:
-        commit_message: Generate test and review files automatically
+      - name: Generate test and review files
+        run: npm run build
+
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: Generate test and review files automatically
diff --git a/.github/workflows/update-pr.yml b/.github/workflows/update-pr.yml
index a8c4c1450..91a945610 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%/index.html)'
+        body-template: '[Preview Tests](https://raw.githack.com/w3c/aria-at/%headbranch%/build/index.html)'
         body-update-action: prefix
         body-uppercase-head-match: false
diff --git a/.gitignore b/.gitignore
index 4b7ecdfe3..de2ceecb3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,3 @@
 /node_modules
-
 .#*
-
 .DS_*
diff --git a/README.md b/README.md
index 1d3cff45b..a8932f55a 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,9 @@ 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/index.html b/build/index.html
new file mode 100644
index 000000000..77dfc48f4
--- /dev/null
+++ b/build/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+  <head>
+    <title>Test Patterns for Review</title>
+    <style>
+      table {
+        border-collapse: collapse;
+        margin-bottom: 1em;
+      }
+
+      table, td, th {
+        border: 1px solid black;
+      }
+
+      th {
+        padding: 1em;
+      }
+
+      td {
+        padding: .5em;
+      }
+
+    </style>
+  </head>
+  <body>
+
+    <h1>Test Patterns for Review</h1>
+
+    <table>
+      <tr>
+        <th>Pattern</th>
+        <th>Index Page</th>
+        <th>Review Page</th>
+        <th># of Tests</th>
+        <th>Commit of Last Change</th>
+      </tr>
+          <tr>
+            <td>checkbox</td>
+            <td><a href="./tests/checkbox/index.html">Index</a></td>
+            <td><a href="./review/checkbox.html">Review</a></td>
+            <td>26</td>
+            <td><a href="https://github.com/w3c/aria-at/commit/cb629e0" target="_blank">cb629e0 template typo fix
+</a></td>
+          </tr>
+          <tr>
+            <td>checkbox-tri-state</td>
+            <td><a href="./tests/checkbox-tri-state/index.html">Index</a></td>
+            <td><a href="./review/checkbox-tri-state.html">Review</a></td>
+            <td>24</td>
+            <td><a href="https://github.com/w3c/aria-at/commit/cb629e0" target="_blank">cb629e0 template typo fix
+</a></td>
+          </tr>
+          <tr>
+            <td>combobox-autocomplete-both</td>
+            <td><a href="./tests/combobox-autocomplete-both/index.html">Index</a></td>
+            <td><a href="./review/combobox-autocomplete-both.html">Review</a></td>
+            <td>30</td>
+            <td><a href="https://github.com/w3c/aria-at/commit/cb629e0" target="_blank">cb629e0 template typo fix
+</a></td>
+          </tr>
+          <tr>
+            <td>combobox-select-only</td>
+            <td><a href="./tests/combobox-select-only/index.html">Index</a></td>
+            <td><a href="./review/combobox-select-only.html">Review</a></td>
+            <td>38</td>
+            <td><a href="https://github.com/w3c/aria-at/commit/cb629e0" target="_blank">cb629e0 template typo fix
+</a></td>
+          </tr>
+          <tr>
+            <td>menu-button-actions-active-descendant</td>
+            <td><a href="./tests/menu-button-actions-active-descendant/index.html">Index</a></td>
+            <td><a href="./review/menu-button-actions-active-descendant.html">Review</a></td>
+            <td>26</td>
+            <td><a href="https://github.com/w3c/aria-at/commit/cb629e0" target="_blank">cb629e0 template typo fix
+</a></td>
+          </tr>
+          <tr>
+            <td>menubar-editor</td>
+            <td><a href="./tests/menubar-editor/index.html">Index</a></td>
+            <td><a href="./review/menubar-editor.html">Review</a></td>
+            <td>40</td>
+            <td><a href="https://github.com/w3c/aria-at/commit/cb629e0" target="_blank">cb629e0 template typo fix
+</a></td>
+          </tr>
+          <tr>
+            <td>modal-dialog</td>
+            <td><a href="./tests/modal-dialog/index.html">Index</a></td>
+            <td><a href="./review/modal-dialog.html">Review</a></td>
+            <td>29</td>
+            <td><a href="https://github.com/w3c/aria-at/commit/cb629e0" target="_blank">cb629e0 template typo fix
+</a></td>
+          </tr>
+          <tr>
+            <td>tabs-manual-activation</td>
+            <td><a href="./tests/tabs-manual-activation/index.html">Index</a></td>
+            <td><a href="./review/tabs-manual-activation.html">Review</a></td>
+            <td>29</td>
+            <td><a href="https://github.com/w3c/aria-at/commit/cb629e0" target="_blank">cb629e0 template typo fix
+</a></td>
+          </tr>
+    </table>
+
+  </body>
+</html>
diff --git a/build/review/checkbox-tri-state.html b/build/review/checkbox-tri-state.html
new file mode 100644
index 000000000..c9166d88c
--- /dev/null
+++ b/build/review/checkbox-tri-state.html
@@ -0,0 +1,1891 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+  <head>
+    <title>Test plan review for pattern: checkbox-tri-state</title>
+    <style>
+      table {
+        border-collapse: collapse;
+        margin-bottom: 1em;
+      }
+
+      table, td, th {
+        border: 1px solid black;
+      }
+
+      td {
+        padding: .5em;
+      }
+
+    </style>
+    <script>
+      const filterATs = function(button) {
+        const val = button.value;
+
+        if (val === 'all') {
+          for (let at of document.querySelectorAll('input')) {
+            if (at.value !== 'all') {
+              for (let result of document.querySelectorAll(`.${at.value}`)) {
+                result.style.display = 'block';
+              }
+              at.checked = false;
+            }
+            else {
+              at.checked = true;
+            }
+          }
+        }
+        else {
+          for (let at of document.querySelectorAll('input')) {
+
+            if (at.value === val) {
+              at.checked = true;
+            }
+            else {
+              at.checked = false;
+            }
+
+            for (let result of document.querySelectorAll(`.${at.value}`)) {
+              result.style.display = 'none';
+            }
+            for (let result of document.querySelectorAll(`.${val}`)) {
+              result.style.display = 'block';
+            }
+
+          }
+        }
+      }
+
+      function executeScriptInTestPage(setupScriptName, testPageWindow) {
+        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(setupScriptName, testPageWindow);
+          }, 100);
+          return;
+        }
+
+        if (setupScriptName) {
+          var scripts = {
+            	checkFirstCheckbox: function(testPageDocument){
+	// Set aria-checked on first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').setAttribute('aria-checked', 'true');
+},	moveFocusAndCheckFirstCheckbox: function(testPageDocument){
+	// Move focus and set aria-checked on first checkbox
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.focus();
+	checkbox.setAttribute('aria-checked', 'true');
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// Move focus to first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	moveFocusAfterFirstCheckbox: function(testPageDocument){
+	// sets focus on a link after the first checkbox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeFirstCheckbox: function(testPageDocument){
+	// sets focus on a link before the first checkbox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToAndUncheckFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox and sets its state to unchecked
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.setAttribute('aria-checked', 'false');
+	checkbox.focus();
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	buttonFocusEmptyCollpased: function(testPageDocument){
+	// Set focus on button
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+},	buttonFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on button
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxFocusEmptyCollapsed: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' is empty
+	// Ensure in collapsed state
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+},	comboboxFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxValueSetCollapsedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'Alabama';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+},	comboboxValueSetExpandedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'a'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'a';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	moveFocusAfterCombobox: function(testPageDocument){
+	// sets focus on a link after the Combobox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeCombobox: function(testPageDocument){
+	// sets focus on a link before the Combobox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToCombobox: function(testPageDocument){
+	// sets focus on the combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+},	openListbox: function(testPageDocument){
+	// sets focus on and expands the Combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+},	openListboxToApple: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Apple'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(1);
+},	openListboxToGuava: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Guave'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(11);
+},	openListboxToHuckleberry: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Huckleberry'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(12);
+},	openMenuAndSetFocusToFirstItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 1'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToFirstMenuitem();
+},	openMenuAndSetFocusToLastItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 4'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToLastMenuitem();
+},	setFocusAfterMenuButton: function(testPageDocument){
+	// sets focus on a link after the menu button
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeMenuButton: function(testPageDocument){
+	// sets focus on a link before the menu button
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnMenuButton: function(testPageDocument){
+	// sets focus on the menu button
+	testPageDocument.querySelector('#menubutton1').focus();
+},	focusonfirstlink: function(testPageDocument){
+	// Move focus to the link just before the meunbar
+	testPageDocument.querySelector('a').focus();
+},	focusonfont: function(testPageDocument){
+	// Move focus to the "Font" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[0].focus();
+},	focusonsize: function(testPageDocument){
+	// Move focus to the "Size" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[3].focus();
+},	focusonstylecolor: function(testPageDocument){
+	// Move focus to the "Style/Color" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[1].focus();
+},	focusontextalign: function(testPageDocument){
+	// Move focus to the "Text Align" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[2].focus();
+},	moveFocusToAddDeliveryAddressButton: function(testPageDocument){
+	// sets focus on the 'Add Delivery Address' button
+	testPageDocument.querySelector('#ex1 > button').focus();
+},	openAddDeliveryAddressDialogAndFocusAddButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Add' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+},	openAddDeliveryAddressDialogAndFocusCancelButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Cancel' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_cancel');
+},	openAddDeliveryAddressDialogAndFocusFirstInput: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the first input
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn);
+},	openAddressAddedDialogAndFocusYourProfileLink: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Address Added' dialog, and sets focus on the 'your profile' link inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.replaceDialog('dialog3', undefined, 'dialog3_profile');
+},	openVerificationResultDialogAndFocusCloseButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.openDialog('dialog2', 'dialog1_verify', 'dialog2_close_btn');
+},	activateThirdTabAndSetFocusOnTabpanel: function(testPageDocument){
+	// activates the third tab in the tab list, and sets focus on the tab panel
+	testPageDocument.querySelectorAll('[role="tab"]').forEach(t => {
+	t.setAttribute('tabindex', '-1');
+	t.setAttribute('aria-selected', 'false');
+	});
+	testPageDocument.querySelectorAll('[role="tabpanel"]').forEach(p => {
+	p.classList.add('is-hidden');
+	});
+	let thirdTab = testPageDocument.querySelector('#complex');
+	let thirdPanel = testPageDocument.querySelector('#complex-complex');
+	thirdTab.removeAttribute('tabindex');
+	thirdTab.setAttribute('aria-selected', 'true');
+	thirdPanel.classList.remove('is-hidden');
+	thirdPanel.focus();
+},	setFocusAfterTabpanel: function(testPageDocument){
+	// sets focus on a link after the tab panel
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeTablist: function(testPageDocument){
+	// sets focus on a link before the tab list
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnFirstTab: function(testPageDocument){
+	// sets focus on the first tab
+	testPageDocument.querySelector('#nils').focus();
+},	setFocusOnSecondTab: function(testPageDocument){
+	// sets focus on the second tab
+	testPageDocument.querySelector('#agnes').focus();
+},	setFocusOnThirdTab: function(testPageDocument){
+	// sets focus on the third tab
+	testPageDocument.querySelector('#complex').focus();
+}
+          };
+
+          scripts[setupScriptName](testPageWindow.document);
+        }
+      }
+
+      function openTestPage(testPageUri, testNumber, setupScriptName) {
+        testPageWindow = window.open(testPageUri, '_blank', 'toolbar=0,location=0,menubar=0,width=400,height=400');
+
+        document.getElementById('open-test-page-' + testNumber).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-' + testNumber).disabled = false;
+            }
+          }, 100);
+
+        };
+
+        executeScriptInTestPage(setupScriptName, testPageWindow);
+      }
+    </script>
+  </head>
+  <body>
+
+    <h1>Test plan review for pattern: checkbox-tri-state (24 tests)</h1>
+
+    <fieldset>
+      <legend>Filter tests by assistive technology</legend>
+      <input type="radio" onclick="filterATs(this)" id="all" value="all" checked="true"><label for="all">All assistive technologies</label>
+        <input type="radio" onclick="filterATs(this)" id="jaws" value="jaws"><label for="jaws">JAWS</label>
+        <input type="radio" onclick="filterATs(this)" id="nvda" value="nvda"><label for="nvda">NVDA</label>
+        <input type="radio" onclick="filterATs(this)" id="voiceover_macos" value="voiceover_macos"><label for="voiceover_macos">VoiceOver for macOS</label>
+    </fieldset>
+
+    <h2>Test 1: Navigate forwards to a partially checked checkbox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-1"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 1, 'moveFocusBeforeFirstCheckbox');">Open Test 1 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the partially checked state. You may need to press certain commands (such as Down Arrow) multiple times to hear all information relating to the checkbox. using the following commands:
+               <ul>
+                   <li>X</li>
+                   <li>F</li>
+                   <li>Tab</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the partially checked state. You may need to press certain commands (such as Down Arrow) multiple times to hear all information relating to the checkbox. using the following commands:
+               <ul>
+                   <li>X</li>
+                   <li>F</li>
+                   <li>Tab</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 2: Navigate backwards to a partially checked checkbox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-2"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 2, 'moveFocusAfterFirstCheckbox');">Open Test 2 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the partially checked state. using the following commands:
+               <ul>
+                   <li>Shift+X</li>
+                   <li>Shift+F</li>
+                   <li>Shift+Tab</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the partially checked state. using the following commands:
+               <ul>
+                   <li>Shift+X</li>
+                   <li>Shift+F</li>
+                   <li>Shift+Tab</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 3: Navigate forwards to a partially checked checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-3"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 3, 'moveFocusBeforeFirstCheckbox');">Open Test 3 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the partially checked state. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the partially checked state. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 4: Navigate backwards to a partially checked checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-4"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 4, 'moveFocusAfterFirstCheckbox');">Open Test 4 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the partially checked state. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the partially checked state. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 5: Navigate forwards to a partially checked checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-05-navigate-forwards-to-partially-checked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-5"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 5, 'moveFocusBeforeFirstCheckbox');">Open Test 5 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the partially checked state. You may need to press certain commands (such as Control+Option+Right) multiple times to hear all information relating to the checkbox. using the following commands:
+               <ul>
+                   <li>Tab</li>
+                   <li>Control+Option+Right</li>
+                   <li>Control+Option+Command+J</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 6: Navigate backwards to a partially checked checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-06-navigate-backwards-to-partially-checked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-6"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 6, 'moveFocusAfterFirstCheckbox');">Open Test 6 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the partially checked state. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+                   <li>Ctrl+Option+Left</li>
+                   <li>Shift+Control+Option+Command+J</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 7: Operate a partially checked checkbox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-7"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 7, 'moveFocusToFirstCheckbox');">Open Test 7 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Check the first checkbox. using the following commands:
+               <ul>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state (to checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Check the first checkbox. using the following commands:
+               <ul>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state (to checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 8: Operate a partially checked checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-8"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 8, 'moveFocusToFirstCheckbox');">Open Test 8 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Check the first checkbox. using the following commands:
+               <ul>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state (to checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Check the first checkbox. using the following commands:
+               <ul>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state (to checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 9: Operate a partially checked checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-09-operate-partially-checked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-9"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 9, 'moveFocusToFirstCheckbox');">Open Test 9 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Check the first checkbox. using the following commands:
+               <ul>
+                   <li>Control+Option+Space</li>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state (to checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 10: Operate an unchecked checkbox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-10"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 10, 'moveFocusToAndUncheckFirstCheckbox');">Open Test 10 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox and sets its state to unchecked</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Partially check the first checkbox. using the following commands:
+               <ul>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state (to partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox and sets its state to unchecked</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Partially check the first checkbox. using the following commands:
+               <ul>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state (to partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 11: Operate an unchecked checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-11"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 11, 'moveFocusToAndUncheckFirstCheckbox');">Open Test 11 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox and sets its state to unchecked</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Partially check the first checkbox. using the following commands:
+               <ul>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state (to partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox and sets its state to unchecked</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Partially check the first checkbox. using the following commands:
+               <ul>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state (to partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 12: Operate an unchecked checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-12-operate-unchecked-checked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-12"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 12, 'moveFocusToAndUncheckFirstCheckbox');">Open Test 12 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Partially check the first checkbox. using the following commands:
+               <ul>
+                   <li>Control+Option+Space</li>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state (to partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 13: Read a partially checked checkbox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-13"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 13, 'moveFocusToFirstCheckbox');">Open Test 13 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>When the reading cursor is on the first checkbox, read the first checkbox. Note: it should be in the partially checked state. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>When the reading cursor is on the first checkbox, read the first checkbox. Note: it should be in the partially checked state. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 14: Read a partially checked checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-14"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 14, 'moveFocusToFirstCheckbox');">Open Test 14 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>When the focus is on the first checkbox, read the first checkbox. Note: it should be in the partially checked state. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>When the focus is on the first checkbox, read the first checkbox. Note: it should be in the partially checked state. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 15: Read a partially checked checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-15-read-partially-checked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-15"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 15, 'moveFocusToFirstCheckbox');">Open Test 15 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>When the focus is on the first checkbox, read the first checkbox. Note: it should be in the partially checked state. using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;All condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (partially checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 16: Read grouping information of a grouped, partially checked checkbox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-16-read-checkbox-group-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-16-read-checkbox-group-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-16"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 16, 'moveFocusToFirstCheckbox');">Open Test 16 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>When reading cursor is on the first checkbox, read its grouping information. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>When reading cursor is on the first checkbox, read its grouping information. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 17: Read grouping information of a grouped, partially checked checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-17-read-checkbox-group-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-17-read-checkbox-group-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-17"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 17, 'moveFocusToFirstCheckbox');">Open Test 17 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>When focus is on the first checkbox, read its grouping information. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>When focus is on the first checkbox, read its grouping information. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 18: Read grouping information of a grouped, partially checked checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-18-read-checkbox-group-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-18"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 18, 'moveFocusToFirstCheckbox');">Open Test 18 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>When focus is on a checkbox, read its grouping information. using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 19: Navigate forwards into a checkbox group in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-19"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 19, 'moveFocusBeforeFirstCheckbox');">Open Test 19 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate forwards into the checkbox group. using the following commands:
+               <ul>
+                   <li>X</li>
+                   <li>F</li>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate forwards into the checkbox group. using the following commands:
+               <ul>
+                   <li>X</li>
+                   <li>F</li>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 20: Navigate backwards out of a checkbox group in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-20"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 20, 'moveFocusAfterFirstCheckbox');">Open Test 20 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate backwards out of the checkbox group. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate backwards out of the checkbox group. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 21: Navigate forwards into a checkbox group in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-21"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 21, 'moveFocusBeforeFirstCheckbox');">Open Test 21 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate forwards into the checkbox group. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate forwards into the checkbox group. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 22: Navigate backwards out of a checkbox group in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-22"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 22, 'moveFocusAfterFirstCheckbox');">Open Test 22 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate backwards out of the checkbox group. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate backwards out of the checkbox group. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 23: Navigate forwards into a checkbox group</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-23-navigate-forwards-into-checkbox-group-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-23"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 23, 'moveFocusBeforeFirstCheckbox');">Open Test 23 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate forwards into the checkbox group. Note: You may need to press certain commands (such as Control+Option+Command+J) multiple times to hear all information relating to the checkbox. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 24: Navigate backwards out of a checkbox group</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox-tri-state/test-24-navigate-backwards-out-of-checkbox-group-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html">APG example: checkbox&#x2F;checkbox-2&#x2F;checkbox-2.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-24"
+        onclick="openTestPage('../tests&#x2F;checkbox-tri-state&#x2F;reference&#x2F;checkbox-tri-state.html', 24, 'moveFocusAfterFirstCheckbox');">Open Test 24 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate backwards out of the checkbox group. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+
+  </body>
+</html>
diff --git a/build/review/checkbox.html b/build/review/checkbox.html
new file mode 100644
index 000000000..ba4f7aeb3
--- /dev/null
+++ b/build/review/checkbox.html
@@ -0,0 +1,1943 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+  <head>
+    <title>Test plan review for pattern: checkbox</title>
+    <style>
+      table {
+        border-collapse: collapse;
+        margin-bottom: 1em;
+      }
+
+      table, td, th {
+        border: 1px solid black;
+      }
+
+      td {
+        padding: .5em;
+      }
+
+    </style>
+    <script>
+      const filterATs = function(button) {
+        const val = button.value;
+
+        if (val === 'all') {
+          for (let at of document.querySelectorAll('input')) {
+            if (at.value !== 'all') {
+              for (let result of document.querySelectorAll(`.${at.value}`)) {
+                result.style.display = 'block';
+              }
+              at.checked = false;
+            }
+            else {
+              at.checked = true;
+            }
+          }
+        }
+        else {
+          for (let at of document.querySelectorAll('input')) {
+
+            if (at.value === val) {
+              at.checked = true;
+            }
+            else {
+              at.checked = false;
+            }
+
+            for (let result of document.querySelectorAll(`.${at.value}`)) {
+              result.style.display = 'none';
+            }
+            for (let result of document.querySelectorAll(`.${val}`)) {
+              result.style.display = 'block';
+            }
+
+          }
+        }
+      }
+
+      function executeScriptInTestPage(setupScriptName, testPageWindow) {
+        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(setupScriptName, testPageWindow);
+          }, 100);
+          return;
+        }
+
+        if (setupScriptName) {
+          var scripts = {
+            	checkFirstCheckbox: function(testPageDocument){
+	// Set aria-checked on first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').setAttribute('aria-checked', 'true');
+},	moveFocusAndCheckFirstCheckbox: function(testPageDocument){
+	// Move focus and set aria-checked on first checkbox
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.focus();
+	checkbox.setAttribute('aria-checked', 'true');
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// Move focus to first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	moveFocusAfterFirstCheckbox: function(testPageDocument){
+	// sets focus on a link after the first checkbox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeFirstCheckbox: function(testPageDocument){
+	// sets focus on a link before the first checkbox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToAndUncheckFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox and sets its state to unchecked
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.setAttribute('aria-checked', 'false');
+	checkbox.focus();
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	buttonFocusEmptyCollpased: function(testPageDocument){
+	// Set focus on button
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+},	buttonFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on button
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxFocusEmptyCollapsed: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' is empty
+	// Ensure in collapsed state
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+},	comboboxFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxValueSetCollapsedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'Alabama';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+},	comboboxValueSetExpandedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'a'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'a';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	moveFocusAfterCombobox: function(testPageDocument){
+	// sets focus on a link after the Combobox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeCombobox: function(testPageDocument){
+	// sets focus on a link before the Combobox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToCombobox: function(testPageDocument){
+	// sets focus on the combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+},	openListbox: function(testPageDocument){
+	// sets focus on and expands the Combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+},	openListboxToApple: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Apple'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(1);
+},	openListboxToGuava: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Guave'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(11);
+},	openListboxToHuckleberry: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Huckleberry'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(12);
+},	openMenuAndSetFocusToFirstItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 1'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToFirstMenuitem();
+},	openMenuAndSetFocusToLastItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 4'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToLastMenuitem();
+},	setFocusAfterMenuButton: function(testPageDocument){
+	// sets focus on a link after the menu button
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeMenuButton: function(testPageDocument){
+	// sets focus on a link before the menu button
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnMenuButton: function(testPageDocument){
+	// sets focus on the menu button
+	testPageDocument.querySelector('#menubutton1').focus();
+},	focusonfirstlink: function(testPageDocument){
+	// Move focus to the link just before the meunbar
+	testPageDocument.querySelector('a').focus();
+},	focusonfont: function(testPageDocument){
+	// Move focus to the "Font" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[0].focus();
+},	focusonsize: function(testPageDocument){
+	// Move focus to the "Size" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[3].focus();
+},	focusonstylecolor: function(testPageDocument){
+	// Move focus to the "Style/Color" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[1].focus();
+},	focusontextalign: function(testPageDocument){
+	// Move focus to the "Text Align" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[2].focus();
+},	moveFocusToAddDeliveryAddressButton: function(testPageDocument){
+	// sets focus on the 'Add Delivery Address' button
+	testPageDocument.querySelector('#ex1 > button').focus();
+},	openAddDeliveryAddressDialogAndFocusAddButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Add' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+},	openAddDeliveryAddressDialogAndFocusCancelButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Cancel' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_cancel');
+},	openAddDeliveryAddressDialogAndFocusFirstInput: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the first input
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn);
+},	openAddressAddedDialogAndFocusYourProfileLink: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Address Added' dialog, and sets focus on the 'your profile' link inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.replaceDialog('dialog3', undefined, 'dialog3_profile');
+},	openVerificationResultDialogAndFocusCloseButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.openDialog('dialog2', 'dialog1_verify', 'dialog2_close_btn');
+},	activateThirdTabAndSetFocusOnTabpanel: function(testPageDocument){
+	// activates the third tab in the tab list, and sets focus on the tab panel
+	testPageDocument.querySelectorAll('[role="tab"]').forEach(t => {
+	t.setAttribute('tabindex', '-1');
+	t.setAttribute('aria-selected', 'false');
+	});
+	testPageDocument.querySelectorAll('[role="tabpanel"]').forEach(p => {
+	p.classList.add('is-hidden');
+	});
+	let thirdTab = testPageDocument.querySelector('#complex');
+	let thirdPanel = testPageDocument.querySelector('#complex-complex');
+	thirdTab.removeAttribute('tabindex');
+	thirdTab.setAttribute('aria-selected', 'true');
+	thirdPanel.classList.remove('is-hidden');
+	thirdPanel.focus();
+},	setFocusAfterTabpanel: function(testPageDocument){
+	// sets focus on a link after the tab panel
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeTablist: function(testPageDocument){
+	// sets focus on a link before the tab list
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnFirstTab: function(testPageDocument){
+	// sets focus on the first tab
+	testPageDocument.querySelector('#nils').focus();
+},	setFocusOnSecondTab: function(testPageDocument){
+	// sets focus on the second tab
+	testPageDocument.querySelector('#agnes').focus();
+},	setFocusOnThirdTab: function(testPageDocument){
+	// sets focus on the third tab
+	testPageDocument.querySelector('#complex').focus();
+}
+          };
+
+          scripts[setupScriptName](testPageWindow.document);
+        }
+      }
+
+      function openTestPage(testPageUri, testNumber, setupScriptName) {
+        testPageWindow = window.open(testPageUri, '_blank', 'toolbar=0,location=0,menubar=0,width=400,height=400');
+
+        document.getElementById('open-test-page-' + testNumber).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-' + testNumber).disabled = false;
+            }
+          }, 100);
+
+        };
+
+        executeScriptInTestPage(setupScriptName, testPageWindow);
+      }
+    </script>
+  </head>
+  <body>
+
+    <h1>Test plan review for pattern: checkbox (26 tests)</h1>
+
+    <fieldset>
+      <legend>Filter tests by assistive technology</legend>
+      <input type="radio" onclick="filterATs(this)" id="all" value="all" checked="true"><label for="all">All assistive technologies</label>
+        <input type="radio" onclick="filterATs(this)" id="jaws" value="jaws"><label for="jaws">JAWS</label>
+        <input type="radio" onclick="filterATs(this)" id="nvda" value="nvda"><label for="nvda">NVDA</label>
+        <input type="radio" onclick="filterATs(this)" id="voiceover_macos" value="voiceover_macos"><label for="voiceover_macos">VoiceOver for macOS</label>
+    </fieldset>
+
+    <h2>Test 1: Navigate to an unchecked checkbox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-01-navigate-to-unchecked-checkbox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-01-navigate-to-unchecked-checkbox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-1"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 1, '');">Open Test 1 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+               <ul>
+                   <li>X &#x2F; Shift+X</li>
+                   <li>F &#x2F; Shift+F</li>
+                   <li>Tab &#x2F; Shift+Tab</li>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+                   <li>Left Arrow &#x2F; Right Arrow (with Smart Navigation on)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (not checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+               <ul>
+                   <li>X &#x2F; Shift+X</li>
+                   <li>F &#x2F; Shift+F</li>
+                   <li>Tab &#x2F; Shift+Tab</li>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (not checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 2: Navigate to an unchecked checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-2"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 2, '');">Open Test 2 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+               <ul>
+                   <li>Tab &#x2F; Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (not checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+               <ul>
+                   <li>Tab &#x2F; Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (not checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 3: Navigate to an unchecked checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-03-navigate-to-unchecked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-3"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 3, '');">Open Test 3 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the unchecked state. using the following commands:
+               <ul>
+                   <li>Tab &#x2F; Shift+Tab</li>
+                   <li>Control+Option+Right &#x2F; Ctrl+Option+Left</li>
+                   <li>Control+Option+Command+J &#x2F; Shift+Control+Option+Command+J</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (not checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 4: Navigate to a checked checkbox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-04-navigate-to-checked-checkbox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-04-navigate-to-checked-checkbox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-4"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 4, 'checkFirstCheckbox');">Open Test 4 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets the state of the first checkbox to checked</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+               <ul>
+                   <li>X &#x2F; Shift+X</li>
+                   <li>F &#x2F; Shift+F</li>
+                   <li>Tab &#x2F; Shift+Tab</li>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+                   <li>Left Arrow &#x2F; Right Arrow (with Smart Navigation on)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets the state of the first checkbox to checked</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+               <ul>
+                   <li>X &#x2F; Shift+X</li>
+                   <li>F &#x2F; Shift+F</li>
+                   <li>Tab &#x2F; Shift+Tab</li>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 5: Navigate to a checked checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-05-navigate-to-checked-checkbox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-05-navigate-to-checked-checkbox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-5"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 5, 'checkFirstCheckbox');">Open Test 5 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets the state of the first checkbox to checked</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+               <ul>
+                   <li>Tab &#x2F; Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets the state of the first checkbox to checked</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+               <ul>
+                   <li>Tab &#x2F; Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 6: Navigate to a checked checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-06-navigate-to-checked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-6"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 6, 'checkFirstCheckbox');">Open Test 6 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets the state of the first checkbox to checked</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate to the first checkbox. Note: it should be in the checked state. using the following commands:
+               <ul>
+                   <li>Tab &#x2F; Shift+Tab</li>
+                   <li>Control+Option+Right &#x2F; Ctrl+Option+Left</li>
+                   <li>Control+Option+Command+J &#x2F; Shift+Control+Option+Command+J</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 7: Operate a checkbox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-07-operate-checkbox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-07-operate-checkbox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-7"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 7, '');">Open Test 7 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Check and uncheck the first checkbox. using the following commands:
+               <ul>
+                   <li>Enter</li>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Check and uncheck the first checkbox. using the following commands:
+               <ul>
+                   <li>Enter</li>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 8: Operate a checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-08-operate-checkbox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-08-operate-checkbox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-8"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 8, '');">Open Test 8 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Check and uncheck the first checkbox. using the following commands:
+               <ul>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Check and uncheck the first checkbox. using the following commands:
+               <ul>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 9: Operate a checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-09-operate-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-9"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 9, '');">Open Test 9 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Check and uncheck the first checkbox. using the following commands:
+               <ul>
+                   <li>Control+Option+Space</li>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change in state is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 10: Read an unchecked checkbox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-10-read-unchecked-checkbox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-10-read-unchecked-checkbox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-10"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 10, 'moveFocusToFirstCheckbox');">Open Test 10 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>When the reading cursor is on the first checkbox, read the first checkbox using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (not checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>When the reading cursor is on the first checkbox, read the first checkbox using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (not checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 11: Read an unchecked checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-11-read-unchecked-checkbox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-11-read-unchecked-checkbox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-11"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 11, 'moveFocusToFirstCheckbox');">Open Test 11 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>When the focus is on the first checkbox, read the first checkbox using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (not checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>When the focus is on the first checkbox, read the first checkbox using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (not checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 12: Read an unchecked checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-12-read-unchecked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-12"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 12, 'moveFocusToFirstCheckbox');">Open Test 12 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>When the focus is on the first checkbox, read the first checkbox using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (not checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 13: Read a checked checkbox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-13-read-checked-checkbox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-13-read-checked-checkbox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-13"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 13, 'moveFocusAndCheckFirstCheckbox');">Open Test 13 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox and sets its state to checked</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>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:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox ( checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox and sets its state to checked</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>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:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox ( checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 14: Read a checked checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-14-read-checked-checkbox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-14-read-checked-checkbox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-14"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 14, 'moveFocusAndCheckFirstCheckbox');">Open Test 14 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox and sets its state to checked</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>When the focus is on the first checkbox, read the first checkbox.  Note: it should be in the checked state. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (checked) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox and sets its state to checked</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>When the focus is on the first checkbox, read the first checkbox.  Note: it should be in the checked state. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 15: Read a checked checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-15-read-checked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-15"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 15, 'moveFocusAndCheckFirstCheckbox');">Open Test 15 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first checkbox and sets its state to checked</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>When the focus is on the first checkbox, read the first checkbox.  Note: it should be in the checked state. using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Lettuce&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the checkbox (checked) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 16: Read grouping information of a grouped checkbox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-16-read-checkbox-group-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-16-read-checkbox-group-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-16"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 16, '');">Open Test 16 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>When reading cursor is on a checkbox, read its grouping information using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>When reading cursor is on a checkbox, read its grouping information using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 17: Read grouping information of a grouped checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-17-read-checkbox-group-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-17-read-checkbox-group-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-17"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 17, '');">Open Test 17 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>When focus is on a checkbox, read its grouping information using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>When focus is on a checkbox, read its grouping information using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 18: Read grouping information of a grouped checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-18-read-checkbox-group-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-18"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 18, '');">Open Test 18 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>When focus is on a checkbox, read its grouping information using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 19: Navigate sequentially through a checkbox group in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-19"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 19, '');">Open Test 19 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate both forward and backward into and out of  the checkbox group. using the following commands:
+               <ul>
+                   <li>Up Arrow</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group boundaries at start and end of group are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate both forward and backward into and out of  the checkbox group. using the following commands:
+               <ul>
+                   <li>Up Arrow</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group boundaries at start and end of group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 20: Navigate sequentially through a checkbox group</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-20-navigate-sequentially-through-checkbox-group-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-20"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 20, '');">Open Test 20 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate both forward and backward into and out of  the checkbox group. using the following commands:
+               <ul>
+                   <li>Control+Option+Right</li>
+                   <li>Ctrl+Option+Left</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group boundaries at start and end of group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 21: Navigate into a checkbox group in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-21-navigate-into-checkbox-group-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-21-navigate-into-checkbox-group-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-21"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 21, '');">Open Test 21 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>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:
+               <ul>
+                   <li>X</li>
+                   <li>Shift+X</li>
+                   <li>F</li>
+                   <li>Shift+F</li>
+                   <li>Tab</li>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>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:
+               <ul>
+                   <li>X</li>
+                   <li>Shift+X</li>
+                   <li>F</li>
+                   <li>Shift+F</li>
+                   <li>Tab</li>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 22: Navigate into a checkbox group in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-22-navigate-into-checkbox-group-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-22-navigate-into-checkbox-group-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-22"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 22, '');">Open Test 22 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>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:
+               <ul>
+                   <li>Tab</li>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>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:
+               <ul>
+                   <li>Tab</li>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 23: Navigate into a checkbox group</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-23-navigate-into-checkbox-group-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-23"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 23, '');">Open Test 23 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>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:
+               <ul>
+                   <li>Tab</li>
+                   <li>Shift+Tab</li>
+                   <li>Control+Option+Right</li>
+                   <li>Ctrl+Option+Left</li>
+                   <li>Control+Option+Command+J</li>
+                   <li>Shift+Control+Option+Command+J</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 24: Navigate out of a checkbox group  in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-24-navigate-out-of-checkbox-group-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-24-navigate-out-of-checkbox-group-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-24"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 24, '');">Open Test 24 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>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:
+               <ul>
+                   <li>Tab</li>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>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:
+               <ul>
+                   <li>Tab</li>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 25: Navigate out of a checkbox group in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-25-navigate-out-of-checkbox-group-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/checkbox/test-25-navigate-out-of-checkbox-group-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-25"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 25, '');">Open Test 25 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>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:
+               <ul>
+                   <li>Tab</li>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>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:
+               <ul>
+                   <li>Tab</li>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 26: Navigate out of a checkbox group</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/checkbox/test-26-navigate-out-of-checkbox-group-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html">APG example: checkbox&#x2F;checkbox-1&#x2F;checkbox-1.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#checkbox">ARIA specification: checkbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-26"
+        onclick="openTestPage('../tests&#x2F;checkbox&#x2F;reference&#x2F;2020-11-23_175030&#x2F;checkbox-1&#x2F;checkbox-1.html', 26, '');">Open Test 26 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>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:
+               <ul>
+                   <li>Tab</li>
+                   <li>Shift+Tab</li>
+                   <li>Control+Option+Right</li>
+                   <li>Ctrl+Option+Left</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role &#39;group&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Group name &#39;Sandwich Condiments&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>The group boundary is conveyed</td></tr>
+        </table>
+      </div>
+
+  </body>
+</html>
diff --git a/build/review/combobox-autocomplete-both.html b/build/review/combobox-autocomplete-both.html
new file mode 100644
index 000000000..3c5c97148
--- /dev/null
+++ b/build/review/combobox-autocomplete-both.html
@@ -0,0 +1,2484 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+  <head>
+    <title>Test plan review for pattern: combobox-autocomplete-both</title>
+    <style>
+      table {
+        border-collapse: collapse;
+        margin-bottom: 1em;
+      }
+
+      table, td, th {
+        border: 1px solid black;
+      }
+
+      td {
+        padding: .5em;
+      }
+
+    </style>
+    <script>
+      const filterATs = function(button) {
+        const val = button.value;
+
+        if (val === 'all') {
+          for (let at of document.querySelectorAll('input')) {
+            if (at.value !== 'all') {
+              for (let result of document.querySelectorAll(`.${at.value}`)) {
+                result.style.display = 'block';
+              }
+              at.checked = false;
+            }
+            else {
+              at.checked = true;
+            }
+          }
+        }
+        else {
+          for (let at of document.querySelectorAll('input')) {
+
+            if (at.value === val) {
+              at.checked = true;
+            }
+            else {
+              at.checked = false;
+            }
+
+            for (let result of document.querySelectorAll(`.${at.value}`)) {
+              result.style.display = 'none';
+            }
+            for (let result of document.querySelectorAll(`.${val}`)) {
+              result.style.display = 'block';
+            }
+
+          }
+        }
+      }
+
+      function executeScriptInTestPage(setupScriptName, testPageWindow) {
+        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(setupScriptName, testPageWindow);
+          }, 100);
+          return;
+        }
+
+        if (setupScriptName) {
+          var scripts = {
+            	checkFirstCheckbox: function(testPageDocument){
+	// Set aria-checked on first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').setAttribute('aria-checked', 'true');
+},	moveFocusAndCheckFirstCheckbox: function(testPageDocument){
+	// Move focus and set aria-checked on first checkbox
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.focus();
+	checkbox.setAttribute('aria-checked', 'true');
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// Move focus to first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	moveFocusAfterFirstCheckbox: function(testPageDocument){
+	// sets focus on a link after the first checkbox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeFirstCheckbox: function(testPageDocument){
+	// sets focus on a link before the first checkbox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToAndUncheckFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox and sets its state to unchecked
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.setAttribute('aria-checked', 'false');
+	checkbox.focus();
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	buttonFocusEmptyCollpased: function(testPageDocument){
+	// Set focus on button
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+},	buttonFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on button
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxFocusEmptyCollapsed: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' is empty
+	// Ensure in collapsed state
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+},	comboboxFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxValueSetCollapsedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'Alabama';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+},	comboboxValueSetExpandedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'a'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'a';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	moveFocusAfterCombobox: function(testPageDocument){
+	// sets focus on a link after the Combobox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeCombobox: function(testPageDocument){
+	// sets focus on a link before the Combobox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToCombobox: function(testPageDocument){
+	// sets focus on the combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+},	openListbox: function(testPageDocument){
+	// sets focus on and expands the Combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+},	openListboxToApple: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Apple'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(1);
+},	openListboxToGuava: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Guave'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(11);
+},	openListboxToHuckleberry: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Huckleberry'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(12);
+},	openMenuAndSetFocusToFirstItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 1'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToFirstMenuitem();
+},	openMenuAndSetFocusToLastItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 4'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToLastMenuitem();
+},	setFocusAfterMenuButton: function(testPageDocument){
+	// sets focus on a link after the menu button
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeMenuButton: function(testPageDocument){
+	// sets focus on a link before the menu button
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnMenuButton: function(testPageDocument){
+	// sets focus on the menu button
+	testPageDocument.querySelector('#menubutton1').focus();
+},	focusonfirstlink: function(testPageDocument){
+	// Move focus to the link just before the meunbar
+	testPageDocument.querySelector('a').focus();
+},	focusonfont: function(testPageDocument){
+	// Move focus to the "Font" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[0].focus();
+},	focusonsize: function(testPageDocument){
+	// Move focus to the "Size" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[3].focus();
+},	focusonstylecolor: function(testPageDocument){
+	// Move focus to the "Style/Color" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[1].focus();
+},	focusontextalign: function(testPageDocument){
+	// Move focus to the "Text Align" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[2].focus();
+},	moveFocusToAddDeliveryAddressButton: function(testPageDocument){
+	// sets focus on the 'Add Delivery Address' button
+	testPageDocument.querySelector('#ex1 > button').focus();
+},	openAddDeliveryAddressDialogAndFocusAddButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Add' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+},	openAddDeliveryAddressDialogAndFocusCancelButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Cancel' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_cancel');
+},	openAddDeliveryAddressDialogAndFocusFirstInput: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the first input
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn);
+},	openAddressAddedDialogAndFocusYourProfileLink: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Address Added' dialog, and sets focus on the 'your profile' link inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.replaceDialog('dialog3', undefined, 'dialog3_profile');
+},	openVerificationResultDialogAndFocusCloseButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.openDialog('dialog2', 'dialog1_verify', 'dialog2_close_btn');
+},	activateThirdTabAndSetFocusOnTabpanel: function(testPageDocument){
+	// activates the third tab in the tab list, and sets focus on the tab panel
+	testPageDocument.querySelectorAll('[role="tab"]').forEach(t => {
+	t.setAttribute('tabindex', '-1');
+	t.setAttribute('aria-selected', 'false');
+	});
+	testPageDocument.querySelectorAll('[role="tabpanel"]').forEach(p => {
+	p.classList.add('is-hidden');
+	});
+	let thirdTab = testPageDocument.querySelector('#complex');
+	let thirdPanel = testPageDocument.querySelector('#complex-complex');
+	thirdTab.removeAttribute('tabindex');
+	thirdTab.setAttribute('aria-selected', 'true');
+	thirdPanel.classList.remove('is-hidden');
+	thirdPanel.focus();
+},	setFocusAfterTabpanel: function(testPageDocument){
+	// sets focus on a link after the tab panel
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeTablist: function(testPageDocument){
+	// sets focus on a link before the tab list
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnFirstTab: function(testPageDocument){
+	// sets focus on the first tab
+	testPageDocument.querySelector('#nils').focus();
+},	setFocusOnSecondTab: function(testPageDocument){
+	// sets focus on the second tab
+	testPageDocument.querySelector('#agnes').focus();
+},	setFocusOnThirdTab: function(testPageDocument){
+	// sets focus on the third tab
+	testPageDocument.querySelector('#complex').focus();
+}
+          };
+
+          scripts[setupScriptName](testPageWindow.document);
+        }
+      }
+
+      function openTestPage(testPageUri, testNumber, setupScriptName) {
+        testPageWindow = window.open(testPageUri, '_blank', 'toolbar=0,location=0,menubar=0,width=400,height=400');
+
+        document.getElementById('open-test-page-' + testNumber).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-' + testNumber).disabled = false;
+            }
+          }, 100);
+
+        };
+
+        executeScriptInTestPage(setupScriptName, testPageWindow);
+      }
+    </script>
+  </head>
+  <body>
+
+    <h1>Test plan review for pattern: combobox-autocomplete-both (30 tests)</h1>
+
+    <fieldset>
+      <legend>Filter tests by assistive technology</legend>
+      <input type="radio" onclick="filterATs(this)" id="all" value="all" checked="true"><label for="all">All assistive technologies</label>
+        <input type="radio" onclick="filterATs(this)" id="jaws" value="jaws"><label for="jaws">JAWS</label>
+        <input type="radio" onclick="filterATs(this)" id="nvda" value="nvda"><label for="nvda">NVDA</label>
+        <input type="radio" onclick="filterATs(this)" id="voiceover_macos" value="voiceover_macos"><label for="voiceover_macos">VoiceOver for macOS</label>
+    </fieldset>
+
+    <h2>Test 1: Navigate to empty, editable combobox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-1"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 1, '');">Open Test 1 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>C &#x2F; Shift+C</li>
+                   <li>E &#x2F; Shift+E</li>
+                   <li>F &#x2F; Shift+F</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>C &#x2F; Shift+C</li>
+                   <li>E &#x2F; Shift+E</li>
+                   <li>F &#x2F; Shift+F</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 2: Navigate sequentially to empty, editable combobox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-2"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 2, '');">Open Test 2 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 3: Navigate to empty, editable combobox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-3"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 3, '');">Open Test 3 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>Tab &#x2F; Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>Tab &#x2F; Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 4: Read empty, editable combobox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-04-read-combobox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-04-read-combobox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-4"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 4, '');">Open Test 4 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the combobox; read the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the combobox; read the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 5: Read empty, editable combobox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-05-read-combobox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-05-read-combobox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-5"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 5, '');">Open Test 5 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the combobox; read the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the combobox; read the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 6: Navigate to filled, editable, collapsed  combobox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-6"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 6, 'comboboxValueSetCollapsedState');">Open Test 6 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;Alabama&#39;; ensure in collapsed state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>C &#x2F; Shift+C</li>
+                   <li>E &#x2F; Shift+E</li>
+                   <li>F &#x2F; Shift+F</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;Alabama&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;Alabama&#39;; ensure in collapsed state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>C &#x2F; Shift+C</li>
+                   <li>E &#x2F; Shift+E</li>
+                   <li>F &#x2F; Shift+F</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;Alabama&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 7: Navigate to filled, editable, collapsed  combobox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-7"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 7, 'comboboxValueSetCollapsedState');">Open Test 7 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;Alabama&#39;; ensure in collapsed state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>Tab &#x2F; Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;Alabama&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;Alabama&#39;; ensure in collapsed state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>Tab &#x2F; Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;Alabama&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 8: Read filled, editable, collapsed combobox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-08-read-combobox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-08-read-combobox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-8"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 8, 'comboboxValueSetCollapsedState');">Open Test 8 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;Alabama&#39;; ensure in collapsed state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the combobox; read the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;Alabama&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;Alabama&#39;; ensure in collapsed state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the combobox; read the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;Alabama&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 9: Read filled, editable, collapsed combobox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-09-read-combobox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-09-read-combobox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-9"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 9, 'comboboxValueSetCollapsedState');">Open Test 9 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;Alabama&#39;; ensure in collapsed state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the combobox; read the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;Alabama&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;Alabama&#39;; ensure in collapsed state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the combobox; read the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;Alabama&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 10: Navigate to filled, editable, expanded combobox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-10"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 10, 'comboboxValueSetExpandedState');">Open Test 10 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;A&#39;; ensure in expanded state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>C &#x2F; Shift+C</li>
+                   <li>E &#x2F; Shift+E</li>
+                   <li>F &#x2F; Shift+F</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;A&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Expanded state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;A&#39;; ensure in expanded state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>C &#x2F; Shift+C</li>
+                   <li>E &#x2F; Shift+E</li>
+                   <li>F &#x2F; Shift+F</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;A&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Expanded state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 11: Navigate sequentially to filled, editable, expanded combobox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-11"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 11, '');">Open Test 11 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;A&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Expanded state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;A&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Expanded state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 12: Navigate to filled, editable, expanded combobox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-12"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 12, 'comboboxValueSetExpandedState');">Open Test 12 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;A&#39;; ensure in expanded state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>Tab &#x2F; Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;A&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Expanded state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;A&#39;; ensure in expanded state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>Tab &#x2F; Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;A&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Expanded state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 13: Read filled, editable, expanded combobox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-13-read-combobox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-13-read-combobox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-13"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 13, 'comboboxValueSetExpandedState');">Open Test 13 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;A&#39;; ensure in expanded state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the combobox; read the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;A&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Expanded state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;A&#39;; ensure in expanded state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the combobox; read the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;A&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Expanded state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 14: Read filled, editable, expanded combobox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-14-read-combobox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-14-read-combobox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-14"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 14, 'comboboxValueSetExpandedState');">Open Test 14 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;A&#39;; ensure in expanded state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the combobox; read the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;A&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Expanded state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; set value of &#39;combobox&#39; to &#39;A&#39;; ensure in expanded state.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the combobox; read the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;A&#39; is conveyed.</td></tr>
+            <tr><td>optional</td><td>Expanded state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 15: Navigate to editable combobox with commands that switch mode from reading to interaction</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-15"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 15, '');">Open Test 15 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>Tab &#x2F; Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The screen reader switches to mode that allows text input</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>Tab &#x2F; Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The screen reader switches to mode that allows text input</td></tr>
+        </table>
+      </div>
+    <h2>Test 16: Activate editable combobox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-16-activate-combobox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-16-activate-combobox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-16"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 16, 'comboboxFocusEmptyCollapsed');">Open Test 16 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Activate the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The screen reader switches to mode that allows text input</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Activate the &#39;State&#39; combobox using the following commands:
+               <ul>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The screen reader switches to mode that allows text input</td></tr>
+        </table>
+      </div>
+    <h2>Test 17: Open combobox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-17-open-combobox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-17-open-combobox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-17"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 17, 'comboboxFocusEmptyCollapsed');">Open Test 17 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; ensure it is empty and collapsed.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Display the popup from empty combobox using the following commands:
+               <ul>
+                   <li>Alt+Down</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Expanded state of combobox is conveyed</td></tr>
+            <tr><td>optional</td><td>Name &#39;States&#39; is conveyed for the popup.</td></tr>
+            <tr><td>optional</td><td>Number of options available is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; ensure it is empty and collapsed.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Display the popup from empty combobox using the following commands:
+               <ul>
+                   <li>Alt+Down</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Expanded state of combobox is conveyed</td></tr>
+            <tr><td>optional</td><td>Name &#39;States&#39; is conveyed for the popup.</td></tr>
+            <tr><td>optional</td><td>Number of options available is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 18: Close combobox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-18-close-combobox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-18-close-combobox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-18"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 18, 'comboboxFocusEmptyExpanded');">Open Test 18 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; ensure it is empty and expanded.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Collapse the combobox popup using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Collapsed state of combobox is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; ensure it is empty and expanded.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Collapse the combobox popup using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Collapsed state of combobox is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 19: Open combobox with 'States' button in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-19-activate-states-button-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-19-activate-states-button-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-19"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 19, '');">Open Test 19 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Activate the button that displays the list of states. using the following commands:
+               <ul>
+                   <li>Enter</li>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>expanded state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Activate the button that displays the list of states. using the following commands:
+               <ul>
+                   <li>Enter</li>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>expanded state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 20: Open combobox with 'States' button</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-20-activate-states-button-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-20"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 20, '');">Open Test 20 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Activate the button that displays the list of states. using the following commands:
+               <ul>
+                   <li>Control+Option+Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>expanded state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 21: Close combobox with 'States' button in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-21-activate-states-button-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-21-activate-states-button-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-21"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 21, 'buttonFocusEmptyExpanded');">Open Test 21 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on &#39;States&#39; button; Ensure combobox is expanded.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Activate the button that hides the list of states. using the following commands:
+               <ul>
+                   <li>Enter</li>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Collapsed state is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on &#39;States&#39; button; Ensure combobox is expanded.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Activate the button that hides the list of states. using the following commands:
+               <ul>
+                   <li>Enter</li>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Collapsed state is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 22: Close combobox with 'States' button in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-22-activate-states-button-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-22-activate-states-button-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-22"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 22, 'buttonFocusEmptyExpanded');">Open Test 22 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on &#39;States&#39; button; Ensure combobox is expanded.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Activate the button that hides the list of states. using the following commands:
+               <ul>
+                   <li>No commands have been added for this test for JAWS. Add commands, or, update the "applies_to" to list only the relevant assistive technologies.</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Collapsed state is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on &#39;States&#39; button; Ensure combobox is expanded.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Activate the button that hides the list of states. using the following commands:
+               <ul>
+                   <li>No commands have been added for this test for NVDA. Add commands, or, update the "applies_to" to list only the relevant assistive technologies.</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Collapsed state is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 23: Navigate into popup from empty combobox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-23"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 23, 'comboboxFocusEmptyCollapsed');">Open Test 23 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; ensure it is empty.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate into the popup from the empty combobox using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;listbox&#39; is conveyed for the popup.</td></tr>
+            <tr><td>optional</td><td>Name &#39;States&#39; is conveyed for the popup.</td></tr>
+            <tr><td>required</td><td>Name of focused option is conveyed; e.g.; &#39;Alabama&#39; if first option; &#39;Wyoming&#39; if last option.</td></tr>
+            <tr><td>required</td><td>Position in set of the focused option is conveyed; e.g.; 1 of 56 if first option; 56 of 56 if last option.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; ensure it is empty.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate into the popup from the empty combobox using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;listbox&#39; is conveyed for the popup.</td></tr>
+            <tr><td>optional</td><td>Name &#39;States&#39; is conveyed for the popup.</td></tr>
+            <tr><td>required</td><td>Name of focused option is conveyed; e.g.; &#39;Alabama&#39; if first option; &#39;Wyoming&#39; if last option.</td></tr>
+            <tr><td>required</td><td>Position in set of the focused option is conveyed; e.g.; 1 of 56 if first option; 56 of 56 if last option.</td></tr>
+        </table>
+      </div>
+    <h2>Test 24: Type portion of valid value in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-24"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 24, 'comboboxFocusEmptyCollapsed');">Open Test 24 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; ensure it is empty.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Type &#39;a&#39; in the empty combobox using the following commands:
+               <ul>
+                   <li>A</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Either 1) The selected text &#39;labama&#39; is conveyed or 2) The entire value &#39;Alabama&#39; is conveyed.</td></tr>
+            <tr><td>required</td><td>The selected state of of the value option &#39;Alabama&#39; is conveyed.</td></tr>
+            <tr><td>required</td><td>The combobox state change from collapsed to expanded is conveyed</td></tr>
+            <tr><td>optional</td><td>The position in set of the selected option is conveyed; e.g.; 1 of 4 suggestions.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; ensure it is empty.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Type &#39;a&#39; in the empty combobox using the following commands:
+               <ul>
+                   <li>A</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Either 1) The selected text &#39;labama&#39; is conveyed or 2) The entire value &#39;Alabama&#39; is conveyed.</td></tr>
+            <tr><td>required</td><td>The selected state of of the value option &#39;Alabama&#39; is conveyed.</td></tr>
+            <tr><td>required</td><td>The combobox state change from collapsed to expanded is conveyed</td></tr>
+            <tr><td>optional</td><td>The position in set of the selected option is conveyed; e.g.; 1 of 4 suggestions.</td></tr>
+        </table>
+      </div>
+    <h2>Test 25: Navigate options in popup in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-25"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 25, 'comboboxFocusEmptyCollapsed');">Open Test 25 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; press down arrow 2 times.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate through options in the popup listbox using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name of the focused option is conveyed; e.g.; &#39;American Samoa&#39;</td></tr>
+            <tr><td>optional</td><td>Role listbox or role option is conveyed</td></tr>
+            <tr><td>optional</td><td>The position in set of the focused option is conveyed; e.g.; 3 of 56</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; press down arrow 2 times.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate through options in the popup listbox using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name of the focused option is conveyed; e.g.; &#39;American Samoa&#39;</td></tr>
+            <tr><td>optional</td><td>Role listbox or role option is conveyed</td></tr>
+            <tr><td>optional</td><td>The position in set of the focused option is conveyed; e.g.; 3 of 56</td></tr>
+        </table>
+      </div>
+    <h2>Test 26: Read popup item in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-26"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 26, 'comboboxFocusEmptyCollapsed');">Open Test 26 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; press down arrow 2 times.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on an item in the popup listbox; read the item. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Name of focused option is conveyed; e.g.; &#39;Alaska&#39;</td></tr>
+            <tr><td>optional</td><td>Role listbox or role option is conveyed</td></tr>
+            <tr><td>optional</td><td>The position in set of the focused option is conveyed; e.g.; 2 of 56</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; press down arrow 2 times.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With focus on an item in the popup listbox; read the item. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Name of focused option is conveyed; e.g.; &#39;Alaska&#39;</td></tr>
+            <tr><td>optional</td><td>Role listbox or role option is conveyed</td></tr>
+            <tr><td>optional</td><td>The position in set of the focused option is conveyed; e.g.; 2 of 56</td></tr>
+        </table>
+      </div>
+    <h2>Test 27: Read popup item in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-27"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 27, 'comboboxFocusEmptyCollapsed');">Open Test 27 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; press down arrow 2 times.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on an item in the popup listbox; read the item. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Name of focused option is conveyed; e.g.; &#39;Alaska&#39;</td></tr>
+            <tr><td>optional</td><td>Role listbox or role option is conveyed</td></tr>
+            <tr><td>optional</td><td>The position in set of the focused option is conveyed; e.g.; 2 of 56</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; press down arrow 2 times.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on an item in the popup listbox; read the item. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Name of focused option is conveyed; e.g.; &#39;Alaska&#39;</td></tr>
+            <tr><td>optional</td><td>Role listbox or role option is conveyed</td></tr>
+            <tr><td>optional</td><td>The position in set of the focused option is conveyed; e.g.; 2 of 56</td></tr>
+        </table>
+      </div>
+    <h2>Test 28: Activate option in popup in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-28"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 28, 'comboboxFocusEmptyCollapsed');">Open Test 28 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; press down arrow 2 times.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Choose &#39;Alaska&#39; from the listbox. using the following commands:
+               <ul>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;Alaska&#39; is conveyed.</td></tr>
+            <tr><td>required</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; press down arrow 2 times.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Choose &#39;Alaska&#39; from the listbox. using the following commands:
+               <ul>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;Alaska&#39; is conveyed.</td></tr>
+            <tr><td>required</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 29: Cancel option selection in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-29-cancel-selection-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-29-cancel-selection-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-29"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 29, 'comboboxFocusEmptyCollapsed');">Open Test 29 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; type &#39;A&#39;; down arrow 2 times.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Collapse the combobox popup using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;A&#39; is conveyed.</td></tr>
+            <tr><td>required</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; type &#39;A&#39;; down arrow 2 times.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Collapse the combobox popup using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Ability to enter text is conveyed</td></tr>
+            <tr><td>required</td><td>Value &#39;A&#39; is conveyed.</td></tr>
+            <tr><td>required</td><td>Collapsed state is conveyed.</td></tr>
+        </table>
+      </div>
+    <h2>Test 30: Initiate caret movement from listbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-autocomplete-both.html">APG example: combobox&#x2F;combobox-autocomplete-both.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-30"
+        onclick="openTestPage('../tests&#x2F;combobox-autocomplete-both&#x2F;reference&#x2F;2020-11-23_175618&#x2F;combobox-autocomplete-both.html', 30, 'comboboxFocusEmptyCollapsed');">Open Test 30 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; press down arrow 2 times.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Start caret movement in the textbox while focus is in the listbox using the following commands:
+               <ul>
+                   <li>Left Arrow</li>
+                   <li>Right Arrow</li>
+                   <li>Home</li>
+                   <li>End</li>
+                   <li>Command+Left (Mac)</li>
+                   <li>Command+Right (Mac)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Caret position is conveyed</td></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Value &#39;Alaska&#39; is conveyed.</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>Set focus on combobox; press down arrow 2 times.</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Start caret movement in the textbox while focus is in the listbox using the following commands:
+               <ul>
+                   <li>Left Arrow</li>
+                   <li>Right Arrow</li>
+                   <li>Home</li>
+                   <li>End</li>
+                   <li>Command+Left (Mac)</li>
+                   <li>Command+Right (Mac)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Caret position is conveyed</td></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Name &#39;State&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Value &#39;Alaska&#39; is conveyed.</td></tr>
+        </table>
+      </div>
+
+  </body>
+</html>
diff --git a/build/review/combobox-select-only.html b/build/review/combobox-select-only.html
new file mode 100644
index 000000000..64f321c22
--- /dev/null
+++ b/build/review/combobox-select-only.html
@@ -0,0 +1,2925 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+  <head>
+    <title>Test plan review for pattern: combobox-select-only</title>
+    <style>
+      table {
+        border-collapse: collapse;
+        margin-bottom: 1em;
+      }
+
+      table, td, th {
+        border: 1px solid black;
+      }
+
+      td {
+        padding: .5em;
+      }
+
+    </style>
+    <script>
+      const filterATs = function(button) {
+        const val = button.value;
+
+        if (val === 'all') {
+          for (let at of document.querySelectorAll('input')) {
+            if (at.value !== 'all') {
+              for (let result of document.querySelectorAll(`.${at.value}`)) {
+                result.style.display = 'block';
+              }
+              at.checked = false;
+            }
+            else {
+              at.checked = true;
+            }
+          }
+        }
+        else {
+          for (let at of document.querySelectorAll('input')) {
+
+            if (at.value === val) {
+              at.checked = true;
+            }
+            else {
+              at.checked = false;
+            }
+
+            for (let result of document.querySelectorAll(`.${at.value}`)) {
+              result.style.display = 'none';
+            }
+            for (let result of document.querySelectorAll(`.${val}`)) {
+              result.style.display = 'block';
+            }
+
+          }
+        }
+      }
+
+      function executeScriptInTestPage(setupScriptName, testPageWindow) {
+        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(setupScriptName, testPageWindow);
+          }, 100);
+          return;
+        }
+
+        if (setupScriptName) {
+          var scripts = {
+            	checkFirstCheckbox: function(testPageDocument){
+	// Set aria-checked on first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').setAttribute('aria-checked', 'true');
+},	moveFocusAndCheckFirstCheckbox: function(testPageDocument){
+	// Move focus and set aria-checked on first checkbox
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.focus();
+	checkbox.setAttribute('aria-checked', 'true');
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// Move focus to first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	moveFocusAfterFirstCheckbox: function(testPageDocument){
+	// sets focus on a link after the first checkbox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeFirstCheckbox: function(testPageDocument){
+	// sets focus on a link before the first checkbox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToAndUncheckFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox and sets its state to unchecked
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.setAttribute('aria-checked', 'false');
+	checkbox.focus();
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	buttonFocusEmptyCollpased: function(testPageDocument){
+	// Set focus on button
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+},	buttonFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on button
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxFocusEmptyCollapsed: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' is empty
+	// Ensure in collapsed state
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+},	comboboxFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxValueSetCollapsedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'Alabama';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+},	comboboxValueSetExpandedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'a'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'a';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	moveFocusAfterCombobox: function(testPageDocument){
+	// sets focus on a link after the Combobox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeCombobox: function(testPageDocument){
+	// sets focus on a link before the Combobox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToCombobox: function(testPageDocument){
+	// sets focus on the combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+},	openListbox: function(testPageDocument){
+	// sets focus on and expands the Combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+},	openListboxToApple: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Apple'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(1);
+},	openListboxToGuava: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Guave'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(11);
+},	openListboxToHuckleberry: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Huckleberry'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(12);
+},	openMenuAndSetFocusToFirstItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 1'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToFirstMenuitem();
+},	openMenuAndSetFocusToLastItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 4'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToLastMenuitem();
+},	setFocusAfterMenuButton: function(testPageDocument){
+	// sets focus on a link after the menu button
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeMenuButton: function(testPageDocument){
+	// sets focus on a link before the menu button
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnMenuButton: function(testPageDocument){
+	// sets focus on the menu button
+	testPageDocument.querySelector('#menubutton1').focus();
+},	focusonfirstlink: function(testPageDocument){
+	// Move focus to the link just before the meunbar
+	testPageDocument.querySelector('a').focus();
+},	focusonfont: function(testPageDocument){
+	// Move focus to the "Font" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[0].focus();
+},	focusonsize: function(testPageDocument){
+	// Move focus to the "Size" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[3].focus();
+},	focusonstylecolor: function(testPageDocument){
+	// Move focus to the "Style/Color" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[1].focus();
+},	focusontextalign: function(testPageDocument){
+	// Move focus to the "Text Align" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[2].focus();
+},	moveFocusToAddDeliveryAddressButton: function(testPageDocument){
+	// sets focus on the 'Add Delivery Address' button
+	testPageDocument.querySelector('#ex1 > button').focus();
+},	openAddDeliveryAddressDialogAndFocusAddButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Add' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+},	openAddDeliveryAddressDialogAndFocusCancelButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Cancel' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_cancel');
+},	openAddDeliveryAddressDialogAndFocusFirstInput: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the first input
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn);
+},	openAddressAddedDialogAndFocusYourProfileLink: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Address Added' dialog, and sets focus on the 'your profile' link inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.replaceDialog('dialog3', undefined, 'dialog3_profile');
+},	openVerificationResultDialogAndFocusCloseButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.openDialog('dialog2', 'dialog1_verify', 'dialog2_close_btn');
+},	activateThirdTabAndSetFocusOnTabpanel: function(testPageDocument){
+	// activates the third tab in the tab list, and sets focus on the tab panel
+	testPageDocument.querySelectorAll('[role="tab"]').forEach(t => {
+	t.setAttribute('tabindex', '-1');
+	t.setAttribute('aria-selected', 'false');
+	});
+	testPageDocument.querySelectorAll('[role="tabpanel"]').forEach(p => {
+	p.classList.add('is-hidden');
+	});
+	let thirdTab = testPageDocument.querySelector('#complex');
+	let thirdPanel = testPageDocument.querySelector('#complex-complex');
+	thirdTab.removeAttribute('tabindex');
+	thirdTab.setAttribute('aria-selected', 'true');
+	thirdPanel.classList.remove('is-hidden');
+	thirdPanel.focus();
+},	setFocusAfterTabpanel: function(testPageDocument){
+	// sets focus on a link after the tab panel
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeTablist: function(testPageDocument){
+	// sets focus on a link before the tab list
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnFirstTab: function(testPageDocument){
+	// sets focus on the first tab
+	testPageDocument.querySelector('#nils').focus();
+},	setFocusOnSecondTab: function(testPageDocument){
+	// sets focus on the second tab
+	testPageDocument.querySelector('#agnes').focus();
+},	setFocusOnThirdTab: function(testPageDocument){
+	// sets focus on the third tab
+	testPageDocument.querySelector('#complex').focus();
+}
+          };
+
+          scripts[setupScriptName](testPageWindow.document);
+        }
+      }
+
+      function openTestPage(testPageUri, testNumber, setupScriptName) {
+        testPageWindow = window.open(testPageUri, '_blank', 'toolbar=0,location=0,menubar=0,width=400,height=400');
+
+        document.getElementById('open-test-page-' + testNumber).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-' + testNumber).disabled = false;
+            }
+          }, 100);
+
+        };
+
+        executeScriptInTestPage(setupScriptName, testPageWindow);
+      }
+    </script>
+  </head>
+  <body>
+
+    <h1>Test plan review for pattern: combobox-select-only (38 tests)</h1>
+
+    <fieldset>
+      <legend>Filter tests by assistive technology</legend>
+      <input type="radio" onclick="filterATs(this)" id="all" value="all" checked="true"><label for="all">All assistive technologies</label>
+        <input type="radio" onclick="filterATs(this)" id="jaws" value="jaws"><label for="jaws">JAWS</label>
+        <input type="radio" onclick="filterATs(this)" id="nvda" value="nvda"><label for="nvda">NVDA</label>
+        <input type="radio" onclick="filterATs(this)" id="voiceover_macos" value="voiceover_macos"><label for="voiceover_macos">VoiceOver for macOS</label>
+    </fieldset>
+
+    <h2>Test 1: Navigate forwards to a collapsed select-only combobox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#combobox">ARIA specification: combobox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-1"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 1, 'moveFocusBeforeCombobox');">Open Test 1 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the Combobox. Note: it should be in the collapsed state. You may need to press certain commands (such as Down Arrow) multiple times to hear all information relating to the combobox. using the following commands:
+               <ul>
+                   <li>F</li>
+                   <li>C</li>
+                   <li>Tab</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the Combobox. Note: it should be in the collapsed state. You may need to press certain commands (such as Down Arrow) multiple times to hear all information relating to the combobox. using the following commands:
+               <ul>
+                   <li>F</li>
+                   <li>C</li>
+                   <li>Tab</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 2: Navigate backwards to a collapsed select-only combobox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#combobox">ARIA specification: combobox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-2"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 2, 'moveFocusAfterCombobox');">Open Test 2 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the Combobox. Note: it should be in the collapsed state. You may need to press certain commands (such as Up Arrow) multiple times to hear all information relating to the combobox. using the following commands:
+               <ul>
+                   <li>Shift+F</li>
+                   <li>Shift+C</li>
+                   <li>Shift+Tab</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the Combobox. Note: it should be in the collapsed state. You may need to press certain commands (such as Up Arrow) multiple times to hear all information relating to the combobox. using the following commands:
+               <ul>
+                   <li>Shift+F</li>
+                   <li>Shift+C</li>
+                   <li>Shift+Tab</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 3: Navigate forwards to a collapsed select-only combobox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#combobox">ARIA specification: combobox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-3"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 3, 'moveFocusBeforeCombobox');">Open Test 3 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the Combobox. Note: it should be in the collapsed state. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the Combobox. Note: it should be in the collapsed state. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 4: Navigate backwards to a collapsed select-only combobox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#combobox">ARIA specification: combobox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-4"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 4, 'moveFocusAfterCombobox');">Open Test 4 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the Combobox. Note: it should be in the collapsed state. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the Combobox. Note: it should be in the collapsed state. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 5: Navigate forwards to a collapsed select-only combobox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-05-navigate-forwards-to-collapsed-select-only-combobox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#combobox">ARIA specification: combobox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-5"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 5, 'moveFocusBeforeCombobox');">Open Test 5 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate to the Combobox. Note: it should be in the collapsed state. You may need to press certain commands (such as Control+Option+Right) multiple times to hear all information relating to the combobox. using the following commands:
+               <ul>
+                   <li>Control+Option+Right</li>
+                   <li>Tab</li>
+                   <li>Control+Option+Command+J</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 6: Navigate backwards to a collapsed select-only combobox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-06-navigate-backwards-to-collapsed-select-only-combobox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#combobox">ARIA specification: combobox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-6"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 6, 'moveFocusAfterCombobox');">Open Test 6 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate to the Combobox. Note: it should be in the collapsed state. You may need to press certain commands (such as Control+Option+Left Arrow) multiple times to hear all information relating to the combobox. using the following commands:
+               <ul>
+                   <li>Ctrl+Option+Left</li>
+                   <li>Shift+Tab</li>
+                   <li>Shift+Control+Option+Command+J</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 7: Read information about a collapsed select-only combobox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#combobox">ARIA specification: combobox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-7"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 7, 'moveFocusToCombobox');">Open Test 7 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the combobox, read information about the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the combobox, read information about the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 8: Read information about a collapsed select-only combobox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#combobox">ARIA specification: combobox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-8"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 8, 'moveFocusToCombobox');">Open Test 8 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the combobox, read information about the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the combobox, read information about the combobox. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 9: Read information about a collapsed select-only combobox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-09-read-information-about-collapsed-select-only-combobox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#combobox">ARIA specification: combobox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-9"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 9, 'moveFocusToCombobox');">Open Test 9 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the combobox, read information about the combobox. using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 10: Open a collapsed select-only combobox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#listbox">ARIA specification: listbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-10"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 10, 'moveFocusToCombobox');">Open Test 10 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the combobox, open the combobox. using the following commands:
+               <ul>
+                   <li>Alt+Down</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the combobox (expanded) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the combobox, open the combobox. using the following commands:
+               <ul>
+                   <li>Alt+Down</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the combobox (expanded) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 11: Open a collapsed select-only combobox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#listbox">ARIA specification: listbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-11"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 11, 'moveFocusToCombobox');">Open Test 11 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the combobox, open the combobox. using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+                   <li>Alt+Down</li>
+                   <li>Up Arrow</li>
+                   <li>Enter</li>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the combobox (expanded) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the combobox, open the combobox. using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+                   <li>Alt+Down</li>
+                   <li>Up Arrow</li>
+                   <li>Enter</li>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the combobox (expanded) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 12: Open a collapsed select-only combobox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-12-open-collapsed-select-only-combobox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#listbox">ARIA specification: listbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-12"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 12, 'moveFocusToCombobox');">Open Test 12 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the combobox, open the combobox. using the following commands:
+               <ul>
+                   <li>Control+Option+Space</li>
+                   <li>Down Arrow</li>
+                   <li>Option+Down</li>
+                   <li>Up Arrow</li>
+                   <li>Enter</li>
+                   <li>Space</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the combobox (expanded) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 13: Open a collapsed select-only combobox to the first option in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#listbox">ARIA specification: listbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-13"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 13, 'moveFocusToCombobox');">Open Test 13 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the combobox, open the combobox and set focus to the first option. using the following commands:
+               <ul>
+                   <li>Home</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the combobox (expanded) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the combobox, open the combobox and set focus to the first option. using the following commands:
+               <ul>
+                   <li>Home</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the combobox (expanded) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 14: Open a collapsed select-only combobox to the first option</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-14-open-collapsed-select-only-combobox-to-first-option-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#listbox">ARIA specification: listbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-14"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 14, 'moveFocusToCombobox');">Open Test 14 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the combobox, open the combobox and set focus to the first option. using the following commands:
+               <ul>
+                   <li>Home</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the combobox (expanded) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 15: Open a collapsed select-only combobox to a specific option in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#listbox">ARIA specification: listbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-15"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 15, 'moveFocusToCombobox');">Open Test 15 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the combobox, open the combobox and set focus on a specific option by typing a printable character. using the following commands:
+               <ul>
+                   <li>A</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the combobox (expanded) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Apple&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the combobox, open the combobox and set focus on a specific option by typing a printable character. using the following commands:
+               <ul>
+                   <li>A</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the combobox (expanded) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Apple&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 16: Open a collapsed select-only combobox to a specific option</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-16-open-collapsed-select-only-combobox-to-specific-option-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#listbox">ARIA specification: listbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-16"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 16, 'moveFocusToCombobox');">Open Test 16 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the combobox, open the combobox and set focus on a specific option by typing a printable character. using the following commands:
+               <ul>
+                   <li>A</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the combobox (expanded) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Apple&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 17: Open a collapsed select-only combobox to the last option in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#listbox">ARIA specification: listbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-17"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 17, 'moveFocusToCombobox');">Open Test 17 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the combobox, open the combobox and set focus on the last option. using the following commands:
+               <ul>
+                   <li>End</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the combobox (expanded) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Huckleberry&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (13) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the combobox, open the combobox and set focus on the last option. using the following commands:
+               <ul>
+                   <li>End</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the combobox (expanded) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Huckleberry&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (13) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 18: Open a collapsed select-only combobox to the last option</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-18-open-collapsed-select-only-combobox-to-last-option-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#listbox">ARIA specification: listbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-18"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 18, 'moveFocusToCombobox');">Open Test 18 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the combobox, open the combobox and set focus on the last option. using the following commands:
+               <ul>
+                   <li>End</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the combobox (expanded) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Huckleberry&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (13) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 19: Read information about a listbox popup in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#listbox">ARIA specification: listbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-19"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 19, 'openListbox');">Open Test 19 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>with focus on the listbox popup, read information about the listbox popup. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>with focus on the listbox popup, read information about the listbox popup. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 20: Read information about a listbox popup</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-20-read-information-about-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#listbox">ARIA specification: listbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-20"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 20, 'openListbox');">Open Test 20 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>with focus on the listbox popup, read information about the listbox popup. using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the popup (&#39;listbox&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the popup (&#39;Favorite Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 21: Navigate forwards to an option in a listbox popup in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-21"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 21, 'openListbox');">Open Test 21 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the listbox popup, navigate forwards by a single option. using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Apple&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the listbox popup, navigate forwards by a single option. using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Apple&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 22: Navigate backwards to an option in a listbox popup in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-22"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 22, 'openListboxToApple');">Open Test 22 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Apple&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the listbox popup, navigate backwards by a single option. using the following commands:
+               <ul>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Apple&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the listbox popup, navigate backwards by a single option. using the following commands:
+               <ul>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 23: Navigate forwards to an option in a listbox popup</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-23-navigate-forwards-to-option-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-23"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 23, 'openListbox');">Open Test 23 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the listbox popup, navigate forwards by a single option. using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+                   <li>Control+Option+Down</li>
+                   <li>Control+Option+Right</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Apple&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 24: Navigate backwards to an option in a listbox popup</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-24-navigate-backwards-to-option-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-24"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 24, 'openListboxToApple');">Open Test 24 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Apple&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the listbox popup, navigate backwards by a single option. using the following commands:
+               <ul>
+                   <li>Up Arrow</li>
+                   <li>Control+Option+Up</li>
+                   <li>Ctrl+Option+Left</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 25: Navigate to a specific option in a listbox popup in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-25"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 25, 'openListbox');">Open Test 25 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the listbox popup, type a printable character to set focus on a specific option. using the following commands:
+               <ul>
+                   <li>A</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Apple&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the listbox popup, type a printable character to set focus on a specific option. using the following commands:
+               <ul>
+                   <li>A</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Apple&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 26: Navigate to a specific option in a listbox popup</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-26-navigate-to-specific-option-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-26"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 26, 'openListbox');">Open Test 26 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the listbox popup, type a printable character to set focus on a specific option. using the following commands:
+               <ul>
+                   <li>A</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Apple&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 27: Navigate to the first option in a listbox popup in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-27"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 27, 'openListboxToApple');">Open Test 27 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Apple&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the listbox popup, navigate to the first option. using the following commands:
+               <ul>
+                   <li>Home</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Apple&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the listbox popup, navigate to the first option. using the following commands:
+               <ul>
+                   <li>Home</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 28: Navigate to the last option in a listbox popup in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-28"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 28, 'openListboxToGuava');">Open Test 28 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Guava&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the listbox popup, navigate to the last option. using the following commands:
+               <ul>
+                   <li>End</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Huckleberry&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (13) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Guava&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the listbox popup, navigate to the last option. using the following commands:
+               <ul>
+                   <li>End</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Huckleberry&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (13) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 29: Navigate to the first option in a listbox popup</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-29-navigate-to-first-option-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-29"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 29, 'openListboxToApple');">Open Test 29 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Apple&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the listbox popup, navigate to the first option. using the following commands:
+               <ul>
+                   <li>Home</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 30: Navigate to the last option in a listbox popup</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-30-navigate-to-last-option-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-30"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 30, 'openListboxToGuava');">Open Test 30 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Guava&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the listbox popup, navigate to the last option. using the following commands:
+               <ul>
+                   <li>End</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Huckleberry&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (13) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 31: Navigate forwards by ten options in a listbox popup in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-31"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 31, 'openListbox');">Open Test 31 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>with focus on the listbox popup, navigate forwards by ten options. using the following commands:
+               <ul>
+                   <li>Page Down</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Grape&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (11) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>with focus on the listbox popup, navigate forwards by ten options. using the following commands:
+               <ul>
+                   <li>Page Down</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Grape&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (11) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 32: Navigate backwards by ten options in a listbox popup in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-32"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 32, 'openListboxToHuckleberry');">Open Test 32 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Huckleberry&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>with focus on the listbox popup, navigate backwards by ten options. using the following commands:
+               <ul>
+                   <li>Page Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Banana&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (3) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Huckleberry&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>with focus on the listbox popup, navigate backwards by ten options. using the following commands:
+               <ul>
+                   <li>Page Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Banana&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (3) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 33: Navigate forwards by ten options in a listbox popup</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-33-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-33"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 33, 'openListbox');">Open Test 33 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>with focus on the listbox popup, navigate forwards by ten options. using the following commands:
+               <ul>
+                   <li>Page Down</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Grape&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (11) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 34: Navigate backwards by ten options in a listbox popup</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-34-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#option">ARIA specification: option</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-34"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 34, 'openListboxToHuckleberry');">Open Test 34 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Huckleberry&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>with focus on the listbox popup, navigate backwards by ten options. using the following commands:
+               <ul>
+                   <li>Page Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Text of the focused option in the popup (&#39;Banana&#39;) is conveyed</td></tr>
+            <tr><td>optional</td><td>State of the focused option in the popup (not selected) is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused option in the popup (3) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of options in the popup (13) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 35: Select an option in a listbox popup in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#combobox">ARIA specification: combobox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-35"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 35, 'openListboxToApple');">Open Test 35 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Apple&#39; without selecting it</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>with focus on the listbox popup, select the focused option. using the following commands:
+               <ul>
+                   <li>Enter</li>
+                   <li>Space</li>
+                   <li>Alt+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Apple&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Apple&#39; without selecting it</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>with focus on the listbox popup, select the focused option. using the following commands:
+               <ul>
+                   <li>Enter</li>
+                   <li>Space</li>
+                   <li>Alt+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Apple&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 36: Select an option in a listbox popup</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-36-select-option-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#combobox">ARIA specification: combobox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-36"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 36, 'openListboxToApple');">Open Test 36 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Apple&#39; without selecting it</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>with focus on the listbox popup, select the focused option. using the following commands:
+               <ul>
+                   <li>Control+Option+Space</li>
+                   <li>Enter</li>
+                   <li>Space</li>
+                   <li>Option+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Apple&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 37: Close a listbox popup in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-37-close-listbox-popup-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/combobox-select-only/test-37-close-listbox-popup-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#combobox">ARIA specification: combobox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-37"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 37, 'openListboxToApple');">Open Test 37 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Apple&#39; without selecting it</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>with focus on the listbox popup, close the listbox popup without changing the selected value of the combobox. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Apple&#39; without selecting it</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>with focus on the listbox popup, close the listbox popup without changing the selected value of the combobox. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 38: Close a listbox popup</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/combobox-select-only/test-38-close-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;combobox&#x2F;combobox-select-only.html">APG example: combobox&#x2F;combobox-select-only.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;#combobox">ARIA specification: combobox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-38"
+        onclick="openTestPage('../tests&#x2F;combobox-select-only&#x2F;reference&#x2F;combobox-select-only.html', 38, 'openListboxToApple');">Open Test 38 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on and expands the Combobox, and sets the focused option to &#39;Apple&#39; without selecting it</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>with focus on the listbox popup, close the listbox popup without changing the selected value of the combobox. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;combobox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Favorite Fruit&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the selected option (&#39;Choose a Fruit&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>State of the combobox (collapsed) is conveyed</td></tr>
+        </table>
+      </div>
+
+  </body>
+</html>
diff --git a/build/review/menu-button-actions-active-descendant.html b/build/review/menu-button-actions-active-descendant.html
new file mode 100644
index 000000000..57a87c771
--- /dev/null
+++ b/build/review/menu-button-actions-active-descendant.html
@@ -0,0 +1,2031 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+  <head>
+    <title>Test plan review for pattern: menu-button-actions-active-descendant</title>
+    <style>
+      table {
+        border-collapse: collapse;
+        margin-bottom: 1em;
+      }
+
+      table, td, th {
+        border: 1px solid black;
+      }
+
+      td {
+        padding: .5em;
+      }
+
+    </style>
+    <script>
+      const filterATs = function(button) {
+        const val = button.value;
+
+        if (val === 'all') {
+          for (let at of document.querySelectorAll('input')) {
+            if (at.value !== 'all') {
+              for (let result of document.querySelectorAll(`.${at.value}`)) {
+                result.style.display = 'block';
+              }
+              at.checked = false;
+            }
+            else {
+              at.checked = true;
+            }
+          }
+        }
+        else {
+          for (let at of document.querySelectorAll('input')) {
+
+            if (at.value === val) {
+              at.checked = true;
+            }
+            else {
+              at.checked = false;
+            }
+
+            for (let result of document.querySelectorAll(`.${at.value}`)) {
+              result.style.display = 'none';
+            }
+            for (let result of document.querySelectorAll(`.${val}`)) {
+              result.style.display = 'block';
+            }
+
+          }
+        }
+      }
+
+      function executeScriptInTestPage(setupScriptName, testPageWindow) {
+        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(setupScriptName, testPageWindow);
+          }, 100);
+          return;
+        }
+
+        if (setupScriptName) {
+          var scripts = {
+            	checkFirstCheckbox: function(testPageDocument){
+	// Set aria-checked on first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').setAttribute('aria-checked', 'true');
+},	moveFocusAndCheckFirstCheckbox: function(testPageDocument){
+	// Move focus and set aria-checked on first checkbox
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.focus();
+	checkbox.setAttribute('aria-checked', 'true');
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// Move focus to first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	moveFocusAfterFirstCheckbox: function(testPageDocument){
+	// sets focus on a link after the first checkbox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeFirstCheckbox: function(testPageDocument){
+	// sets focus on a link before the first checkbox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToAndUncheckFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox and sets its state to unchecked
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.setAttribute('aria-checked', 'false');
+	checkbox.focus();
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	buttonFocusEmptyCollpased: function(testPageDocument){
+	// Set focus on button
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+},	buttonFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on button
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxFocusEmptyCollapsed: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' is empty
+	// Ensure in collapsed state
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+},	comboboxFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxValueSetCollapsedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'Alabama';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+},	comboboxValueSetExpandedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'a'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'a';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	moveFocusAfterCombobox: function(testPageDocument){
+	// sets focus on a link after the Combobox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeCombobox: function(testPageDocument){
+	// sets focus on a link before the Combobox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToCombobox: function(testPageDocument){
+	// sets focus on the combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+},	openListbox: function(testPageDocument){
+	// sets focus on and expands the Combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+},	openListboxToApple: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Apple'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(1);
+},	openListboxToGuava: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Guave'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(11);
+},	openListboxToHuckleberry: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Huckleberry'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(12);
+},	openMenuAndSetFocusToFirstItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 1'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToFirstMenuitem();
+},	openMenuAndSetFocusToLastItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 4'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToLastMenuitem();
+},	setFocusAfterMenuButton: function(testPageDocument){
+	// sets focus on a link after the menu button
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeMenuButton: function(testPageDocument){
+	// sets focus on a link before the menu button
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnMenuButton: function(testPageDocument){
+	// sets focus on the menu button
+	testPageDocument.querySelector('#menubutton1').focus();
+},	focusonfirstlink: function(testPageDocument){
+	// Move focus to the link just before the meunbar
+	testPageDocument.querySelector('a').focus();
+},	focusonfont: function(testPageDocument){
+	// Move focus to the "Font" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[0].focus();
+},	focusonsize: function(testPageDocument){
+	// Move focus to the "Size" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[3].focus();
+},	focusonstylecolor: function(testPageDocument){
+	// Move focus to the "Style/Color" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[1].focus();
+},	focusontextalign: function(testPageDocument){
+	// Move focus to the "Text Align" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[2].focus();
+},	moveFocusToAddDeliveryAddressButton: function(testPageDocument){
+	// sets focus on the 'Add Delivery Address' button
+	testPageDocument.querySelector('#ex1 > button').focus();
+},	openAddDeliveryAddressDialogAndFocusAddButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Add' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+},	openAddDeliveryAddressDialogAndFocusCancelButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Cancel' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_cancel');
+},	openAddDeliveryAddressDialogAndFocusFirstInput: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the first input
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn);
+},	openAddressAddedDialogAndFocusYourProfileLink: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Address Added' dialog, and sets focus on the 'your profile' link inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.replaceDialog('dialog3', undefined, 'dialog3_profile');
+},	openVerificationResultDialogAndFocusCloseButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.openDialog('dialog2', 'dialog1_verify', 'dialog2_close_btn');
+},	activateThirdTabAndSetFocusOnTabpanel: function(testPageDocument){
+	// activates the third tab in the tab list, and sets focus on the tab panel
+	testPageDocument.querySelectorAll('[role="tab"]').forEach(t => {
+	t.setAttribute('tabindex', '-1');
+	t.setAttribute('aria-selected', 'false');
+	});
+	testPageDocument.querySelectorAll('[role="tabpanel"]').forEach(p => {
+	p.classList.add('is-hidden');
+	});
+	let thirdTab = testPageDocument.querySelector('#complex');
+	let thirdPanel = testPageDocument.querySelector('#complex-complex');
+	thirdTab.removeAttribute('tabindex');
+	thirdTab.setAttribute('aria-selected', 'true');
+	thirdPanel.classList.remove('is-hidden');
+	thirdPanel.focus();
+},	setFocusAfterTabpanel: function(testPageDocument){
+	// sets focus on a link after the tab panel
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeTablist: function(testPageDocument){
+	// sets focus on a link before the tab list
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnFirstTab: function(testPageDocument){
+	// sets focus on the first tab
+	testPageDocument.querySelector('#nils').focus();
+},	setFocusOnSecondTab: function(testPageDocument){
+	// sets focus on the second tab
+	testPageDocument.querySelector('#agnes').focus();
+},	setFocusOnThirdTab: function(testPageDocument){
+	// sets focus on the third tab
+	testPageDocument.querySelector('#complex').focus();
+}
+          };
+
+          scripts[setupScriptName](testPageWindow.document);
+        }
+      }
+
+      function openTestPage(testPageUri, testNumber, setupScriptName) {
+        testPageWindow = window.open(testPageUri, '_blank', 'toolbar=0,location=0,menubar=0,width=400,height=400');
+
+        document.getElementById('open-test-page-' + testNumber).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-' + testNumber).disabled = false;
+            }
+          }, 100);
+
+        };
+
+        executeScriptInTestPage(setupScriptName, testPageWindow);
+      }
+    </script>
+  </head>
+  <body>
+
+    <h1>Test plan review for pattern: menu-button-actions-active-descendant (26 tests)</h1>
+
+    <fieldset>
+      <legend>Filter tests by assistive technology</legend>
+      <input type="radio" onclick="filterATs(this)" id="all" value="all" checked="true"><label for="all">All assistive technologies</label>
+        <input type="radio" onclick="filterATs(this)" id="jaws" value="jaws"><label for="jaws">JAWS</label>
+        <input type="radio" onclick="filterATs(this)" id="nvda" value="nvda"><label for="nvda">NVDA</label>
+        <input type="radio" onclick="filterATs(this)" id="voiceover_macos" value="voiceover_macos"><label for="voiceover_macos">VoiceOver for macOS</label>
+    </fieldset>
+
+    <h2>Test 1: Navigate forwards to a menu button in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-1"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 1, 'setFocusBeforeMenuButton');">Open Test 1 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the menu button. using the following commands:
+               <ul>
+                   <li>B</li>
+                   <li>F</li>
+                   <li>Tab</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the menu button. using the following commands:
+               <ul>
+                   <li>B</li>
+                   <li>F</li>
+                   <li>Tab</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 2: Navigate backwards to a menu button in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-2"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 2, 'setFocusAfterMenuButton');">Open Test 2 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the menu button. using the following commands:
+               <ul>
+                   <li>Shift+B</li>
+                   <li>Shift+F</li>
+                   <li>Shift+Tab</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the menu button. using the following commands:
+               <ul>
+                   <li>Shift+B</li>
+                   <li>Shift+F</li>
+                   <li>Shift+Tab</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 3: Navigate forwards to a menu button in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-3"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 3, 'setFocusBeforeMenuButton');">Open Test 3 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the menu button. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the menu button. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 4: Navigate backwards to a menu button in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-4"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 4, 'setFocusAfterMenuButton');">Open Test 4 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the menu button. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the menu button. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 5: Navigate forwards to a menu button</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-05-navigate-forwards-to-menu-button-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-5"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 5, 'setFocusBeforeMenuButton');">Open Test 5 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate to the menu button. using the following commands:
+               <ul>
+                   <li>Tab</li>
+                   <li>Control+Option+Right</li>
+                   <li>Control+Option+Command+J</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 6: Navigate backwards to a menu button</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-06-navigate-backwards-to-menu-button-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-6"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 6, 'setFocusAfterMenuButton');">Open Test 6 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate to the menu button. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+                   <li>Ctrl+Option+Left</li>
+                   <li>Shift+Control+Option+Command+J</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 7: Read information about a menu button in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-7"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 7, 'setFocusOnMenuButton');">Open Test 7 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the &#39;Actions&#39; menu button, read information about the menu button. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the &#39;Actions&#39; menu button, read information about the menu button. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 8: Read information about a menu button in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-8"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 8, 'setFocusOnMenuButton');">Open Test 8 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Actions&#39; menu button, read information about the menu button. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Actions&#39; menu button, read information about the menu button. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 9: Read information about a menu button</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-09-read-information-about-menu-button-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-9"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 9, 'setFocusOnMenuButton');">Open Test 9 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Actions&#39; menu button, read information about the menu button. using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 10: Open a menu in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-10-open-menu-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-10-open-menu-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menu">ARIA specification: menu</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-activedescendant">ARIA specification: aria-activedescendant</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-10"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 10, 'setFocusOnMenuButton');">Open Test 10 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the &#39;Actions&#39; menu button, open the menu. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 1&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the &#39;Actions&#39; menu button, open the menu. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 1&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 11: Open a menu in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-11-open-menu-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-11-open-menu-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menu">ARIA specification: menu</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-activedescendant">ARIA specification: aria-activedescendant</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-11"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 11, 'setFocusOnMenuButton');">Open Test 11 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Actions&#39; menu button, open the menu. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 1&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Actions&#39; menu button, open the menu. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 1&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 12: Open a menu</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-12-open-menu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menu">ARIA specification: menu</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-12"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 12, 'setFocusOnMenuButton');">Open Test 12 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Actions&#39; menu button, open the menu. using the following commands:
+               <ul>
+                   <li>Control+Option+Space</li>
+                   <li>Space</li>
+                   <li>Enter</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 1&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 13: Open a menu to the last item in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menu">ARIA specification: menu</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-activedescendant">ARIA specification: aria-activedescendant</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-13"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 13, 'setFocusOnMenuButton');">Open Test 13 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Actions&#39; menu button, open the menu. using the following commands:
+               <ul>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 4&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (4) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Actions&#39; menu button, open the menu. using the following commands:
+               <ul>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 4&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (4) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 14: Open a menu to the last item</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-14-open-menu-to-last-item-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menu">ARIA specification: menu</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-activedescendant">ARIA specification: aria-activedescendant</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-14"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 14, 'setFocusOnMenuButton');">Open Test 14 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the menu button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Actions&#39; menu button, open the menu. using the following commands:
+               <ul>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 4&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (4) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 15: Read information about a menu item in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-activedescendant">ARIA specification: aria-activedescendant</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-15"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 15, 'openMenuAndSetFocusToFirstItem');">Open Test 15 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, read information about the menu item. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 1&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, read information about the menu item. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 1&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 16: Read information about a menu item</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-16-read-information-about-menu-item-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-activedescendant">ARIA specification: aria-activedescendant</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-16"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 16, 'openMenuAndSetFocusToFirstItem');">Open Test 16 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, read information about the menu item. using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 1&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 17: Navigate to the first item in a menu in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-activedescendant">ARIA specification: aria-activedescendant</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-17"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 17, 'openMenuAndSetFocusToLastItem');">Open Test 17 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 4&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Action 4&#39; menu item, navigate to the first menu item. using the following commands:
+               <ul>
+                   <li>Home</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 1&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 4&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Action 4&#39; menu item, navigate to the first menu item. using the following commands:
+               <ul>
+                   <li>Home</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 1&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 18: Navigate to the first item in a menu</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-18-navigate-to-first-item-in-menu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-activedescendant">ARIA specification: aria-activedescendant</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-18"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 18, 'openMenuAndSetFocusToLastItem');">Open Test 18 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 4&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Action 4&#39; menu item, navigate to the first menu item. using the following commands:
+               <ul>
+                   <li>Home</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 1&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (1) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 19: Navigate to the last item in a menu in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-activedescendant">ARIA specification: aria-activedescendant</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-19"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 19, 'openMenuAndSetFocusToFirstItem');">Open Test 19 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, navigate to the last menu item. using the following commands:
+               <ul>
+                   <li>End</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 4&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (4) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, navigate to the last menu item. using the following commands:
+               <ul>
+                   <li>End</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 4&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (4) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 20: Navigate to the last item in a menu</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-20-navigate-to-last-item-in-menu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-activedescendant">ARIA specification: aria-activedescendant</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-20"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 20, 'openMenuAndSetFocusToFirstItem');">Open Test 20 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, navigate to the last menu item. using the following commands:
+               <ul>
+                   <li>End</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 4&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (4) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 21: Navigate to an item in a menu by typing a character in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-activedescendant">ARIA specification: aria-activedescendant</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-21"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 21, 'openMenuAndSetFocusToFirstItem');">Open Test 21 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, type a character to navigate to a different menu item. using the following commands:
+               <ul>
+                   <li>A</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 2&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, type a character to navigate to a different menu item. using the following commands:
+               <ul>
+                   <li>A</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 2&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 22: Navigate to an item in a menu by typing a character</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-22-navigate-to-item-in-menu-by-typing-character-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-activedescendant">ARIA specification: aria-activedescendant</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-22"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 22, 'openMenuAndSetFocusToFirstItem');">Open Test 22 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, type a character to navigate to a different menu item. using the following commands:
+               <ul>
+                   <li>A</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>optional</td><td>Role of the focused item, &#39;menu item&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused item, &#39;Action 2&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused item in the menu (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Number of items in the menu (4) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 23: Activate a menu item in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-23"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 23, 'openMenuAndSetFocusToFirstItem');">Open Test 23 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, activate the menu item. using the following commands:
+               <ul>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, activate the menu item. using the following commands:
+               <ul>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 24: Activate a menu item</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-24-activate-menu-item-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-24"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 24, 'openMenuAndSetFocusToFirstItem');">Open Test 24 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, activate the menu item. using the following commands:
+               <ul>
+                   <li>Control+Option+Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 25: Close a menu in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-25-close-menu-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-25-close-menu-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-25"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 25, 'openMenuAndSetFocusToFirstItem');">Open Test 25 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, close the menu. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, close the menu. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 26: Close a menu</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menu-button-actions-active-descendant/test-26-close-menu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menu-button&#x2F;menu-button-actions-active-descendant.html">APG example: menu-button&#x2F;menu-button-actions-active-descendant.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-26"
+        onclick="openTestPage('../tests&#x2F;menu-button-actions-active-descendant&#x2F;reference&#x2F;2021-1-14_171136&#x2F;menu-button-actions-active-descendant.html', 26, 'openMenuAndSetFocusToFirstItem');">Open Test 26 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the menu, and sets focus on &#39;Action 1&#39;</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Action 1&#39; menu item, close the menu. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;menu button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Actions&#39; is conveyed</td></tr>
+        </table>
+      </div>
+
+  </body>
+</html>
diff --git a/build/review/menubar-editor.html b/build/review/menubar-editor.html
new file mode 100644
index 000000000..f763d0bfd
--- /dev/null
+++ b/build/review/menubar-editor.html
@@ -0,0 +1,3092 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+  <head>
+    <title>Test plan review for pattern: menubar-editor</title>
+    <style>
+      table {
+        border-collapse: collapse;
+        margin-bottom: 1em;
+      }
+
+      table, td, th {
+        border: 1px solid black;
+      }
+
+      td {
+        padding: .5em;
+      }
+
+    </style>
+    <script>
+      const filterATs = function(button) {
+        const val = button.value;
+
+        if (val === 'all') {
+          for (let at of document.querySelectorAll('input')) {
+            if (at.value !== 'all') {
+              for (let result of document.querySelectorAll(`.${at.value}`)) {
+                result.style.display = 'block';
+              }
+              at.checked = false;
+            }
+            else {
+              at.checked = true;
+            }
+          }
+        }
+        else {
+          for (let at of document.querySelectorAll('input')) {
+
+            if (at.value === val) {
+              at.checked = true;
+            }
+            else {
+              at.checked = false;
+            }
+
+            for (let result of document.querySelectorAll(`.${at.value}`)) {
+              result.style.display = 'none';
+            }
+            for (let result of document.querySelectorAll(`.${val}`)) {
+              result.style.display = 'block';
+            }
+
+          }
+        }
+      }
+
+      function executeScriptInTestPage(setupScriptName, testPageWindow) {
+        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(setupScriptName, testPageWindow);
+          }, 100);
+          return;
+        }
+
+        if (setupScriptName) {
+          var scripts = {
+            	checkFirstCheckbox: function(testPageDocument){
+	// Set aria-checked on first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').setAttribute('aria-checked', 'true');
+},	moveFocusAndCheckFirstCheckbox: function(testPageDocument){
+	// Move focus and set aria-checked on first checkbox
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.focus();
+	checkbox.setAttribute('aria-checked', 'true');
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// Move focus to first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	moveFocusAfterFirstCheckbox: function(testPageDocument){
+	// sets focus on a link after the first checkbox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeFirstCheckbox: function(testPageDocument){
+	// sets focus on a link before the first checkbox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToAndUncheckFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox and sets its state to unchecked
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.setAttribute('aria-checked', 'false');
+	checkbox.focus();
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	buttonFocusEmptyCollpased: function(testPageDocument){
+	// Set focus on button
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+},	buttonFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on button
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxFocusEmptyCollapsed: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' is empty
+	// Ensure in collapsed state
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+},	comboboxFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxValueSetCollapsedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'Alabama';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+},	comboboxValueSetExpandedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'a'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'a';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	moveFocusAfterCombobox: function(testPageDocument){
+	// sets focus on a link after the Combobox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeCombobox: function(testPageDocument){
+	// sets focus on a link before the Combobox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToCombobox: function(testPageDocument){
+	// sets focus on the combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+},	openListbox: function(testPageDocument){
+	// sets focus on and expands the Combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+},	openListboxToApple: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Apple'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(1);
+},	openListboxToGuava: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Guave'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(11);
+},	openListboxToHuckleberry: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Huckleberry'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(12);
+},	openMenuAndSetFocusToFirstItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 1'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToFirstMenuitem();
+},	openMenuAndSetFocusToLastItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 4'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToLastMenuitem();
+},	setFocusAfterMenuButton: function(testPageDocument){
+	// sets focus on a link after the menu button
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeMenuButton: function(testPageDocument){
+	// sets focus on a link before the menu button
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnMenuButton: function(testPageDocument){
+	// sets focus on the menu button
+	testPageDocument.querySelector('#menubutton1').focus();
+},	focusonfirstlink: function(testPageDocument){
+	// Move focus to the link just before the meunbar
+	testPageDocument.querySelector('a').focus();
+},	focusonfont: function(testPageDocument){
+	// Move focus to the "Font" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[0].focus();
+},	focusonsize: function(testPageDocument){
+	// Move focus to the "Size" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[3].focus();
+},	focusonstylecolor: function(testPageDocument){
+	// Move focus to the "Style/Color" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[1].focus();
+},	focusontextalign: function(testPageDocument){
+	// Move focus to the "Text Align" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[2].focus();
+},	moveFocusToAddDeliveryAddressButton: function(testPageDocument){
+	// sets focus on the 'Add Delivery Address' button
+	testPageDocument.querySelector('#ex1 > button').focus();
+},	openAddDeliveryAddressDialogAndFocusAddButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Add' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+},	openAddDeliveryAddressDialogAndFocusCancelButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Cancel' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_cancel');
+},	openAddDeliveryAddressDialogAndFocusFirstInput: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the first input
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn);
+},	openAddressAddedDialogAndFocusYourProfileLink: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Address Added' dialog, and sets focus on the 'your profile' link inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.replaceDialog('dialog3', undefined, 'dialog3_profile');
+},	openVerificationResultDialogAndFocusCloseButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.openDialog('dialog2', 'dialog1_verify', 'dialog2_close_btn');
+},	activateThirdTabAndSetFocusOnTabpanel: function(testPageDocument){
+	// activates the third tab in the tab list, and sets focus on the tab panel
+	testPageDocument.querySelectorAll('[role="tab"]').forEach(t => {
+	t.setAttribute('tabindex', '-1');
+	t.setAttribute('aria-selected', 'false');
+	});
+	testPageDocument.querySelectorAll('[role="tabpanel"]').forEach(p => {
+	p.classList.add('is-hidden');
+	});
+	let thirdTab = testPageDocument.querySelector('#complex');
+	let thirdPanel = testPageDocument.querySelector('#complex-complex');
+	thirdTab.removeAttribute('tabindex');
+	thirdTab.setAttribute('aria-selected', 'true');
+	thirdPanel.classList.remove('is-hidden');
+	thirdPanel.focus();
+},	setFocusAfterTabpanel: function(testPageDocument){
+	// sets focus on a link after the tab panel
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeTablist: function(testPageDocument){
+	// sets focus on a link before the tab list
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnFirstTab: function(testPageDocument){
+	// sets focus on the first tab
+	testPageDocument.querySelector('#nils').focus();
+},	setFocusOnSecondTab: function(testPageDocument){
+	// sets focus on the second tab
+	testPageDocument.querySelector('#agnes').focus();
+},	setFocusOnThirdTab: function(testPageDocument){
+	// sets focus on the third tab
+	testPageDocument.querySelector('#complex').focus();
+}
+          };
+
+          scripts[setupScriptName](testPageWindow.document);
+        }
+      }
+
+      function openTestPage(testPageUri, testNumber, setupScriptName) {
+        testPageWindow = window.open(testPageUri, '_blank', 'toolbar=0,location=0,menubar=0,width=400,height=400');
+
+        document.getElementById('open-test-page-' + testNumber).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-' + testNumber).disabled = false;
+            }
+          }, 100);
+
+        };
+
+        executeScriptInTestPage(setupScriptName, testPageWindow);
+      }
+    </script>
+  </head>
+  <body>
+
+    <h1>Test plan review for pattern: menubar-editor (40 tests)</h1>
+
+    <fieldset>
+      <legend>Filter tests by assistive technology</legend>
+      <input type="radio" onclick="filterATs(this)" id="all" value="all" checked="true"><label for="all">All assistive technologies</label>
+        <input type="radio" onclick="filterATs(this)" id="jaws" value="jaws"><label for="jaws">JAWS</label>
+        <input type="radio" onclick="filterATs(this)" id="nvda" value="nvda"><label for="nvda">NVDA</label>
+        <input type="radio" onclick="filterATs(this)" id="voiceover_macos" value="voiceover_macos"><label for="voiceover_macos">VoiceOver for macOS</label>
+    </fieldset>
+
+    <h2>Test 1: Navigate to menubar in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-01-navigate-to-menubar-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-01-navigate-to-menubar-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menubar">ARIA specification: menubar</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-1"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 1, 'focusonfirstlink');">Open Test 1 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the &#39;Text Formatting&#39; menubar using the following commands:
+               <ul>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+                   <li>F &#x2F; Shift+F</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The role &#39;menubar&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The menubar name &#39;Text Formatting&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The menu item name &quot;Font&quot; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the &#39;Text Formatting&#39; menubar using the following commands:
+               <ul>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+                   <li>Insert+Down (or CapsLock+Down)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The role &#39;menubar&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The menubar name &#39;Text Formatting&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The menu item name &quot;Font&quot; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 2: Activate menubar in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-02-activate-menubar-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-02-activate-menubar-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menubar">ARIA specification: menubar</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-2"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 2, '');">Open Test 2 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the &#39;Font&quot; menu item in the &#39;Text Formatting&#39; menubar example with down arrow. | Activate the &#39;Font&#39; menu using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change of mode from reading to interaction is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the &#39;Font&quot; menu item in the &#39;Text Formatting&#39; menubar example with down arrow. | Activate the &#39;Font&#39; menu using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change of mode from reading to interaction is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 3: Navigate to menubar with commands that switch mode from reading to interaction</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-03-tab-to-menubar-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-03-tab-to-menubar-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menubar">ARIA specification: menubar</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-3"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 3, 'focusonfirstlink');">Open Test 3 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the &#39;Text Formatting&#39; menubar using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change of mode from reading to interaction is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menubar&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The menubar name &#39;Text Formatting&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The menu item name &quot;Font&quot; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the &#39;Text Formatting&#39; menubar using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Change of mode from reading to interaction is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menubar&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The menubar name &#39;Text Formatting&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The menu item name &quot;Font&quot; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 4: Navigate to menubar in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-04-navigate-to-menubar-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-04-navigate-to-menubar-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menubar">ARIA specification: menubar</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-4"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 4, 'focusonfirstlink');">Open Test 4 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the &#39;Text Formatting&#39; menubar using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The role &#39;menubar&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The menubar name &#39;Text Formatting&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The menu item name &quot;Font&quot; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the &#39;Text Formatting&#39; menubar using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The role &#39;menubar&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The menubar name &#39;Text Formatting&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The menu item name &quot;Font&quot; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 5: Navigate to menubar</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-05-navigate-to-menubar-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menubar">ARIA specification: menubar</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-5"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 5, 'focusonfirstlink');">Open Test 5 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate to the &#39;Text Formatting&#39; menubar using the following commands:
+               <ul>
+                   <li>Tab</li>
+                   <li>Control+Option+Right</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The role &#39;menubar&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The menubar name &#39;Text Formatting&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The menu item name &quot;Font&quot; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 6: Navigate to menu item in menubar in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-6"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 6, '');">Open Test 6 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to &#39;Text Formatting&#39; menu with down arrow| Navigate to &#39;Style&#x2F;Color&#39; menu using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Style&#x2F;Color&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menuitem&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> Closed state of the submenu is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to &#39;Text Formatting&#39; menu with down arrow| Navigate to &#39;Style&#x2F;Color&#39; menu using the following commands:
+               <ul>
+                   <li>Insert+Numpad 6 (or CapsLock+Numpad 6)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Style&#x2F;Color&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menuitem&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> Closed state of the submenu is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 7: Navigate to menu item in menubar in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-7"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 7, 'focusonfont');">Open Test 7 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Font&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to &#39;Style&#x2F;Color&#39; menu using the following commands:
+               <ul>
+                   <li>Right Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Style&#x2F;Color&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menuitem&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> Closed state of the submenu is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Font&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to &#39;Style&#x2F;Color&#39; menu using the following commands:
+               <ul>
+                   <li>Right Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Style&#x2F;Color&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menuitem&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> Closed state of the submenu is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 8: Navigate to menu item in menubar</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-08-navigate-to-menuitem-in-menubar-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-8"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 8, 'focusonfont');">Open Test 8 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Font&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate to &#39;Style&#x2F;Color&#39; menu using the following commands:
+               <ul>
+                   <li>Control+Option+Right</li>
+                   <li>Right Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Style&#x2F;Color&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menuitem&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> Closed state of the submenu is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 9: Navigate to open menu item in menubar in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-9"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 9, 'focusonfont');">Open Test 9 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Font&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Open &#39;Font&#39; menu with down arrow. | Navigate to &#39;Style&#x2F;Color&#39; menu using the following commands:
+               <ul>
+                   <li>Right Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Style&#x2F;Color&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menuitem&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> Open state of the submenu is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Font&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Open &#39;Font&#39; menu with down arrow. | Navigate to &#39;Style&#x2F;Color&#39; menu using the following commands:
+               <ul>
+                   <li>Right Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Style&#x2F;Color&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menuitem&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> Open state of the submenu is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 10: Navigate to open menu item in menubar</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-10-navigate-to-open-menuitem-in-menubar-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-10"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 10, 'focusonfont');">Open Test 10 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Font&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Open &#39;Font&#39; menu with down arrow. | Navigate to &#39;Style&#x2F;Color&#39; menu using the following commands:
+               <ul>
+                   <li>Right Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Style&#x2F;Color&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menuitem&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> Open state of the submenu is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 11: Open submenu in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-11-open-submenu-of-menubar-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-11-open-submenu-of-menubar-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-11"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 11, 'focusontextalign');">Open Test 11 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Text Align&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Open &#39;Text Align&#39; submenu using the following commands:
+               <ul>
+                   <li>Enter</li>
+                   <li>Space</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Left&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Text Align&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Open &#39;Text Align&#39; submenu using the following commands:
+               <ul>
+                   <li>Enter</li>
+                   <li>Space</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Left&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 12: Open submenu</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-12-open-submenu-of-menubar-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-12"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 12, 'focusontextalign');">Open Test 12 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Text Align&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Open &#39;Text Align&#39; submenu using the following commands:
+               <ul>
+                   <li>Enter</li>
+                   <li>Space</li>
+                   <li>Down Arrow</li>
+                   <li>Control+Option+Space followed by Control+Option+Right</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Left&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 13: Close submenu in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-13-close-submenu-of-menubar-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-13-close-submenu-of-menubar-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-13"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 13, 'focusontextalign');">Open Test 13 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Text Align&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Open &#39;Text Align&#39; submenu. | Close the menu using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Text Align&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> Closed state of the submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar  are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Text Align&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Open &#39;Text Align&#39; submenu. | Close the menu using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Text Align&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> Closed state of the submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar  are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 14: Close submenu</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-14-close-submenu-of-menubar-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-14"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 14, 'focusontextalign');">Open Test 14 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Text Align&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Open &#39;Text Align&#39; submenu. | Close the menu using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Text Align&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> Closed state of the submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar  are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 15: Navigate to checked menu item radio in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemradio">ARIA specification: menuitemradio</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-15"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 15, 'focusonfont');">Open Test 15 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Font&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Open &quot;Font&quot; menu with down arrow. | Navigate to &#39;Sans-serif&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Sans-serif&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The checked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Font&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Open &quot;Font&quot; menu with down arrow. | Navigate to &#39;Sans-serif&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Sans-serif&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The checked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 16: Navigate to checked menu item radio</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-16-navigate-to-checked-menuitemradio-in-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemradio">ARIA specification: menuitemradio</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-16"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 16, 'focusonfont');">Open Test 16 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Font&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Open &quot;Font&quot; menu with down arrow. | Navigate to &#39;Sans-serif&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+                   <li>Control+Option+Right &#x2F; Ctrl+Option+Left</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Sans-serif&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The checked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 17: Navigate to unchecked menu item radio in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemradio">ARIA specification: menuitemradio</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-17"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 17, 'focusonfont');">Open Test 17 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Font&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Open &quot;Font&quot; menu with down arrow. | Navigate to &#39;Monospace&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Monospace&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Font&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Open &quot;Font&quot; menu with down arrow. | Navigate to &#39;Monospace&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Monospace&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 18: Navigate to unchecked menu item radio</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-18-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemradio">ARIA specification: menuitemradio</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-18"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 18, 'focusonfont');">Open Test 18 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Font&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Open &quot;Font&quot; menu with down arrow. | Navigate to &#39;Monospace&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+                   <li>Control+Option+Right &#x2F; Ctrl+Option+Left</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Monospace&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 19: Navigate to unchecked menu item checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemcheckbox">ARIA specification: menuitemcheckbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-19"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 19, 'focusonstylecolor');">Open Test 19 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | Navigate to &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+            <tr><td>optional</td><td> The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | Navigate to &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+            <tr><td>optional</td><td> The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 20: Navigate to unchecked menu item checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-20-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemcheckbox">ARIA specification: menuitemcheckbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-20"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 20, 'focusonstylecolor');">Open Test 20 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | Navigate to &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+                   <li>Control+Option+Right &#x2F; Ctrl+Option+Left</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+            <tr><td>optional</td><td> The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 21: Navigate to checked menu item checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemcheckbox">ARIA specification: menuitemcheckbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-21"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 21, 'focusonstylecolor');">Open Test 21 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | 
+Navigate to &#39;Italic&#39; menu item and check it by pressing enter. (the menu will close.) | 
+Re-open &quot;Style&#x2F;Color&quot; menu with down arrow. | 
+Navigate to &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The checked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+            <tr><td>optional</td><td> The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | 
+Navigate to &#39;Italic&#39; menu item and check it by pressing enter. (the menu will close.) | 
+Re-open &quot;Style&#x2F;Color&quot; menu with down arrow. | 
+Navigate to &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The checked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+            <tr><td>optional</td><td> The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 22: Navigate to checked menu item checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-22-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemcheckbox">ARIA specification: menuitemcheckbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-22"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 22, 'focusonstylecolor');">Open Test 22 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | 
+Navigate to &#39;Italic&#39; menu item and check it by pressing enter. (the menu will close.) | 
+Re-open &quot;Style&#x2F;Color&quot; menu with down arrow. | 
+Navigate to &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Up Arrow &#x2F; Down Arrow</li>
+                   <li>Control+Option+Right &#x2F; Ctrl+Option+Left</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The checked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu are conveyed</td></tr>
+            <tr><td>optional</td><td> The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 23: Read menu item in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-23-read-menuitem-in-menubar-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-23-read-menuitem-in-menubar-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menubar">ARIA specification: menubar</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-23"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 23, '');">Open Test 23 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the &#39;Text Formatting&#39; menubar. | Navigate to the size menu item in the menubar. | Read &#39;Size&#39; menu item using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Size&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> Closed state of the submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menu item&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the &#39;Text Formatting&#39; menubar. | Navigate to the size menu item in the menubar. | Read &#39;Size&#39; menu item using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Numpad 5 (or CapsLock+Numpad 5)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Size&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> Closed state of the submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menu item&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 24: Read menu item in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-24-read-menuitem-in-menubar-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-24-read-menuitem-in-menubar-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menubar">ARIA specification: menubar</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-24"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 24, 'focusonsize');">Open Test 24 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Size&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Read the  &#39;Size&#39; menu item in the menubar using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Size&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> Closed state of the submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menu item&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Size&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Read the  &#39;Size&#39; menu item in the menubar using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Numpad 5 (or CapsLock+Numpad 5)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Size&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> Closed state of the submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menu item&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 25: Read menu item</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-25-read-menuitem-in-menubar-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menubar">ARIA specification: menubar</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-haspopup">ARIA specification: aria-haspopup</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-expanded">ARIA specification: aria-expanded</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-25"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 25, 'focusonsize');">Open Test 25 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Size&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Read the  &#39;Size&#39; menu item in the menubar using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Size&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Availability of a submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> Closed state of the submenu is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menubar are conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menu item&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 26: Read unchecked menu item radio in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemradio">ARIA specification: menuitemradio</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-26"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 26, 'focusonfirstlink');">Open Test 26 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Tab to &#39;Text Formatting&#39; menubar. | Navigate to &#39;Style&#x2F;Color&#39; menu item with right arrow. | Open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Blue&#39; menu item radio with down arrow. | Activate the screen reader reading cursor. | Read the  &#39;Blue&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Blue&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Text Color&#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Text Color&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Tab to &#39;Text Formatting&#39; menubar. | Navigate to &#39;Style&#x2F;Color&#39; menu item with right arrow. | Open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Blue&#39; menu item radio with down arrow. | Activate the screen reader reading cursor. | Read the  &#39;Blue&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Numpad 5 (or CapsLock+Numpad 5)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Blue&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Text Color&#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Text Color&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 27: Read unchecked menu item radio in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemradio">ARIA specification: menuitemradio</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-27"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 27, 'focusonstylecolor');">Open Test 27 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | Navigate to &#39;Blue&#39; menu item radio with down arrow. | Read the  &#39;Blue&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Blue&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Text Color&#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Text Color&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | Navigate to &#39;Blue&#39; menu item radio with down arrow. | Read the  &#39;Blue&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Numpad 5 (or CapsLock+Numpad 5)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Blue&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Text Color&#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Text Color&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 28: Read unchecked menu item radio</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-28-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemradio">ARIA specification: menuitemradio</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-28"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 28, 'focusonstylecolor');">Open Test 28 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | Navigate to &#39;Blue&#39; menu item radio with down arrow. | Read the  &#39;Blue&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Blue&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Text Color&#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Text Color&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 29: Read checked menu item radio in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemradio">ARIA specification: menuitemradio</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-29"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 29, 'focusonfirstlink');">Open Test 29 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Tab to &#39;Text Formatting&#39; menubar. | Navigate to &#39;Style&#x2F;Color&#39; menu item with right arrow. | Open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Black&#39; menu item radio with down arrow. | Activate the screen reader reading cursor. | Read the  &#39;Black&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Black&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The checked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Text Color&#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Text Color&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Tab to &#39;Text Formatting&#39; menubar. | Navigate to &#39;Style&#x2F;Color&#39; menu item with right arrow. | Open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Black&#39; menu item radio with down arrow. | Activate the screen reader reading cursor. | Read the  &#39;Black&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Numpad 5 (or CapsLock+Numpad 5)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Black&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The checked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Text Color&#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Text Color&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 30: Read checked menu item radio in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemradio">ARIA specification: menuitemradio</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-30"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 30, 'focusonstylecolor');">Open Test 30 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | Navigate to &#39;Black&#39; menu item radio with down arrow. | Read the  &#39;Black&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Black&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The checked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Text Color&#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Text Color&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | Navigate to &#39;Black&#39; menu item radio with down arrow. | Read the  &#39;Black&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Numpad 5 (or CapsLock+Numpad 5)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Black&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The checked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Text Color&#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Text Color&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 31: Read checked menu item radio</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-31-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemradio">ARIA specification: menuitemradio</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-31"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 31, 'focusonstylecolor');">Open Test 31 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | Navigate to &#39;Black&#39; menu item radio with down arrow. | Read the  &#39;Black&#39; menu item radio using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Black&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item radio&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The checked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Text Color&#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Text Color&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 32: Read unchecked menu item checkbox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemcheckbox">ARIA specification: menuitemcheckbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-32"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 32, 'focusonfirstlink');">Open Test 32 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Tab to &#39;Text Formatting&#39; menubar. | Navigate to &#39;Style&#x2F;Color&#39; menu item with right arrow. | Open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Italic&#39; menu item checkbox with down arrow. | Activate the screen reader reading cursor. | Read the &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Font Style &#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Tab to &#39;Text Formatting&#39; menubar. | Navigate to &#39;Style&#x2F;Color&#39; menu item with right arrow. | Open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Italic&#39; menu item checkbox with down arrow. | Activate the screen reader reading cursor. | Read the &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Numpad 5 (or CapsLock+Numpad 5)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Font Style &#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 33: Read unchecked menu item checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemcheckbox">ARIA specification: menuitemcheckbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-33"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 33, 'focusonstylecolor');">Open Test 33 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | Navigate to &#39;Italic&#39; menu item checkbox with down arrow. | Read the &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Font Style &#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | Navigate to &#39;Italic&#39; menu item checkbox with down arrow. | Read the &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Numpad 5 (or CapsLock+Numpad 5)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Font Style &#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 34: Read unchecked menu item checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-34-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemcheckbox">ARIA specification: menuitemcheckbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-34"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 34, 'focusonstylecolor');">Open Test 34 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Open &quot;Style&#x2F;Color&quot; menu with down arrow. | Navigate to &#39;Italic&#39; menu item checkbox with down arrow. | Read the &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Font Style &#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 35: Read checked menu item checkbox in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemcheckbox">ARIA specification: menuitemcheckbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-35"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 35, 'focusonfirstlink');">Open Test 35 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Tab to &#39;Text Formatting&#39; menubar. | Navigate to &#39;Style&#x2F;Color&#39; menu item with right arrow. | Open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Italic&#39; menu item checkbox and check it by pressing enter. (the menu will close.) | Re-open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Italic&#39; menu item checkbox. | Activate the screen reader reading cursor. | Read the &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Font Style &#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Tab to &#39;Text Formatting&#39; menubar. | Navigate to &#39;Style&#x2F;Color&#39; menu item with right arrow. | Open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Italic&#39; menu item checkbox and check it by pressing enter. (the menu will close.) | Re-open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Italic&#39; menu item checkbox. | Activate the screen reader reading cursor. | Read the &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Numpad 5 (or CapsLock+Numpad 5)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Font Style &#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 36: Read checked menu item checkbox in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemcheckbox">ARIA specification: menuitemcheckbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-36"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 36, 'focusonstylecolor');">Open Test 36 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Italic&#39; menu item and check it by pressing enter. (the menu will close.) | Re-open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Italic&#39; menu item. | Read the &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Font Style &#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Italic&#39; menu item and check it by pressing enter. (the menu will close.) | Re-open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Italic&#39; menu item. | Read the &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Numpad 5 (or CapsLock+Numpad 5)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Font Style &#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 37: Read checked menu item checkbox</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-37-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitemcheckbox">ARIA specification: menuitemcheckbox</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-checked">ARIA specification: aria-checked</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-37"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 37, 'focusonstylecolor');">Open Test 37 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Style&#x2F;Color&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Italic&#39; menu item and check it by pressing enter. (the menu will close.) | Re-open &#39;Style&#x2F;Color&#39; menu with down arrow. | Navigate to &#39;Italic&#39; menu item. | Read the &#39;Italic&#39; menu item checkbox using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Italic&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The role &#39;menu item checkbox&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The unchecked state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the &#39;Font Style &#39; group are conveyed</td></tr>
+            <tr><td>required</td><td>The name and role of the &#39;Font Style&#39; group are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 38: Read disabled menu item in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-disabled">ARIA specification: aria-disabled</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-38"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 38, 'focusonfirstlink');">Open Test 38 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Tab to &#39;Text Formatting&#39; menubar. | Navigate to &#39;Size&#39; menu item with right arrow. | Open &#39;Size&#39; menu with  down arrow. | Navigate to &#39;X-Small&#39; with down arrow. | Activate &#39;X-Small&#39;. with Enter. | Open &#39;Size&#39; menu with down arrow. | Activate the screen reader reading cursor. | Read the &#39;Smaller&#39; menu item using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Smaller&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menu item&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The disabled state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu  are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link just before the menubar</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Tab to &#39;Text Formatting&#39; menubar. | Navigate to &#39;Size&#39; menu item with right arrow. | Open &#39;Size&#39; menu with  down arrow. | Navigate to &#39;X-Small&#39; with down arrow. | Activate &#39;X-Small&#39;. with Enter. | Open &#39;Size&#39; menu with down arrow. | Activate the screen reader reading cursor. | Read the &#39;Smaller&#39; menu item using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Numpad 5 (or CapsLock+Numpad 5)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Smaller&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menu item&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The disabled state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu  are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 39: Read disabled menu item in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-disabled">ARIA specification: aria-disabled</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-39"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 39, 'focusonsize');">Open Test 39 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Size&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Open &#39;Size&#39; menu with  down arrow. | Navigate to &#39;X-Small&#39; with down arrow. | Activate &#39;X-Small&#39;. with Enter. | Open &#39;Size&#39; menu with down arrow. | Read the &#39;Smaller&#39; menu item using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Smaller&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menu item&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The disabled state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu  are conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Size&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Open &#39;Size&#39; menu with  down arrow. | Navigate to &#39;X-Small&#39; with down arrow. | Activate &#39;X-Small&#39;. with Enter. | Open &#39;Size&#39; menu with down arrow. | Read the &#39;Smaller&#39; menu item using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Numpad 5 (or CapsLock+Numpad 5)</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Smaller&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menu item&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The disabled state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu  are conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 40: Read disabled menu item</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/menubar-editor/test-40-read-disabled-menuitem-in-a-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;menubar&#x2F;menubar-editor.html">APG example: menubar&#x2F;menubar-editor.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#group">ARIA specification: group</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#menuitem">ARIA specification: menuitem</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-disabled">ARIA specification: aria-disabled</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-40"
+        onclick="openTestPage('../tests&#x2F;menubar-editor&#x2F;reference&#x2F;2020-11-23_175528&#x2F;menubar-editor.html', 40, 'focusonsize');">Open Test 40 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Size&#39; menu item</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Open &#39;Size&#39; menu with  down arrow. | Navigate to &#39;X-Small&#39; with down arrow. | Activate &#39;X-Small&#39;. with Enter. | Open &#39;Size&#39; menu with down arrow. | Read the &#39;Smaller&#39; menu item using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>The name &#39;Smaller&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td> The role &#39;menu item&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The disabled state is conveyed</td></tr>
+            <tr><td>optional</td><td> The position of the item and number of items in the menu  are conveyed</td></tr>
+        </table>
+      </div>
+
+  </body>
+</html>
diff --git a/build/review/modal-dialog.html b/build/review/modal-dialog.html
new file mode 100644
index 000000000..3f37ce4b6
--- /dev/null
+++ b/build/review/modal-dialog.html
@@ -0,0 +1,2227 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+  <head>
+    <title>Test plan review for pattern: modal-dialog</title>
+    <style>
+      table {
+        border-collapse: collapse;
+        margin-bottom: 1em;
+      }
+
+      table, td, th {
+        border: 1px solid black;
+      }
+
+      td {
+        padding: .5em;
+      }
+
+    </style>
+    <script>
+      const filterATs = function(button) {
+        const val = button.value;
+
+        if (val === 'all') {
+          for (let at of document.querySelectorAll('input')) {
+            if (at.value !== 'all') {
+              for (let result of document.querySelectorAll(`.${at.value}`)) {
+                result.style.display = 'block';
+              }
+              at.checked = false;
+            }
+            else {
+              at.checked = true;
+            }
+          }
+        }
+        else {
+          for (let at of document.querySelectorAll('input')) {
+
+            if (at.value === val) {
+              at.checked = true;
+            }
+            else {
+              at.checked = false;
+            }
+
+            for (let result of document.querySelectorAll(`.${at.value}`)) {
+              result.style.display = 'none';
+            }
+            for (let result of document.querySelectorAll(`.${val}`)) {
+              result.style.display = 'block';
+            }
+
+          }
+        }
+      }
+
+      function executeScriptInTestPage(setupScriptName, testPageWindow) {
+        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(setupScriptName, testPageWindow);
+          }, 100);
+          return;
+        }
+
+        if (setupScriptName) {
+          var scripts = {
+            	checkFirstCheckbox: function(testPageDocument){
+	// Set aria-checked on first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').setAttribute('aria-checked', 'true');
+},	moveFocusAndCheckFirstCheckbox: function(testPageDocument){
+	// Move focus and set aria-checked on first checkbox
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.focus();
+	checkbox.setAttribute('aria-checked', 'true');
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// Move focus to first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	moveFocusAfterFirstCheckbox: function(testPageDocument){
+	// sets focus on a link after the first checkbox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeFirstCheckbox: function(testPageDocument){
+	// sets focus on a link before the first checkbox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToAndUncheckFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox and sets its state to unchecked
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.setAttribute('aria-checked', 'false');
+	checkbox.focus();
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	buttonFocusEmptyCollpased: function(testPageDocument){
+	// Set focus on button
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+},	buttonFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on button
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxFocusEmptyCollapsed: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' is empty
+	// Ensure in collapsed state
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+},	comboboxFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxValueSetCollapsedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'Alabama';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+},	comboboxValueSetExpandedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'a'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'a';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	moveFocusAfterCombobox: function(testPageDocument){
+	// sets focus on a link after the Combobox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeCombobox: function(testPageDocument){
+	// sets focus on a link before the Combobox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToCombobox: function(testPageDocument){
+	// sets focus on the combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+},	openListbox: function(testPageDocument){
+	// sets focus on and expands the Combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+},	openListboxToApple: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Apple'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(1);
+},	openListboxToGuava: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Guave'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(11);
+},	openListboxToHuckleberry: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Huckleberry'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(12);
+},	openMenuAndSetFocusToFirstItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 1'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToFirstMenuitem();
+},	openMenuAndSetFocusToLastItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 4'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToLastMenuitem();
+},	setFocusAfterMenuButton: function(testPageDocument){
+	// sets focus on a link after the menu button
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeMenuButton: function(testPageDocument){
+	// sets focus on a link before the menu button
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnMenuButton: function(testPageDocument){
+	// sets focus on the menu button
+	testPageDocument.querySelector('#menubutton1').focus();
+},	focusonfirstlink: function(testPageDocument){
+	// Move focus to the link just before the meunbar
+	testPageDocument.querySelector('a').focus();
+},	focusonfont: function(testPageDocument){
+	// Move focus to the "Font" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[0].focus();
+},	focusonsize: function(testPageDocument){
+	// Move focus to the "Size" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[3].focus();
+},	focusonstylecolor: function(testPageDocument){
+	// Move focus to the "Style/Color" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[1].focus();
+},	focusontextalign: function(testPageDocument){
+	// Move focus to the "Text Align" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[2].focus();
+},	moveFocusToAddDeliveryAddressButton: function(testPageDocument){
+	// sets focus on the 'Add Delivery Address' button
+	testPageDocument.querySelector('#ex1 > button').focus();
+},	openAddDeliveryAddressDialogAndFocusAddButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Add' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+},	openAddDeliveryAddressDialogAndFocusCancelButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Cancel' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_cancel');
+},	openAddDeliveryAddressDialogAndFocusFirstInput: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the first input
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn);
+},	openAddressAddedDialogAndFocusYourProfileLink: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Address Added' dialog, and sets focus on the 'your profile' link inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.replaceDialog('dialog3', undefined, 'dialog3_profile');
+},	openVerificationResultDialogAndFocusCloseButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.openDialog('dialog2', 'dialog1_verify', 'dialog2_close_btn');
+},	activateThirdTabAndSetFocusOnTabpanel: function(testPageDocument){
+	// activates the third tab in the tab list, and sets focus on the tab panel
+	testPageDocument.querySelectorAll('[role="tab"]').forEach(t => {
+	t.setAttribute('tabindex', '-1');
+	t.setAttribute('aria-selected', 'false');
+	});
+	testPageDocument.querySelectorAll('[role="tabpanel"]').forEach(p => {
+	p.classList.add('is-hidden');
+	});
+	let thirdTab = testPageDocument.querySelector('#complex');
+	let thirdPanel = testPageDocument.querySelector('#complex-complex');
+	thirdTab.removeAttribute('tabindex');
+	thirdTab.setAttribute('aria-selected', 'true');
+	thirdPanel.classList.remove('is-hidden');
+	thirdPanel.focus();
+},	setFocusAfterTabpanel: function(testPageDocument){
+	// sets focus on a link after the tab panel
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeTablist: function(testPageDocument){
+	// sets focus on a link before the tab list
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnFirstTab: function(testPageDocument){
+	// sets focus on the first tab
+	testPageDocument.querySelector('#nils').focus();
+},	setFocusOnSecondTab: function(testPageDocument){
+	// sets focus on the second tab
+	testPageDocument.querySelector('#agnes').focus();
+},	setFocusOnThirdTab: function(testPageDocument){
+	// sets focus on the third tab
+	testPageDocument.querySelector('#complex').focus();
+}
+          };
+
+          scripts[setupScriptName](testPageWindow.document);
+        }
+      }
+
+      function openTestPage(testPageUri, testNumber, setupScriptName) {
+        testPageWindow = window.open(testPageUri, '_blank', 'toolbar=0,location=0,menubar=0,width=400,height=400');
+
+        document.getElementById('open-test-page-' + testNumber).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-' + testNumber).disabled = false;
+            }
+          }, 100);
+
+        };
+
+        executeScriptInTestPage(setupScriptName, testPageWindow);
+      }
+    </script>
+  </head>
+  <body>
+
+    <h1>Test plan review for pattern: modal-dialog (29 tests)</h1>
+
+    <fieldset>
+      <legend>Filter tests by assistive technology</legend>
+      <input type="radio" onclick="filterATs(this)" id="all" value="all" checked="true"><label for="all">All assistive technologies</label>
+        <input type="radio" onclick="filterATs(this)" id="jaws" value="jaws"><label for="jaws">JAWS</label>
+        <input type="radio" onclick="filterATs(this)" id="nvda" value="nvda"><label for="nvda">NVDA</label>
+        <input type="radio" onclick="filterATs(this)" id="voiceover_macos" value="voiceover_macos"><label for="voiceover_macos">VoiceOver for macOS</label>
+    </fieldset>
+
+    <h2>Test 1: Open a modal dialog in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-01-open-modal-dialog-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-01-open-modal-dialog-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-1"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 1, 'moveFocusToAddDeliveryAddressButton');">Open Test 1 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Add Delivery Address&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the &#39;Add Delivery Address&#39; button, open the dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused input (&#39;Street&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>The ability to enter text into the focused input is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Add Delivery Address&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the &#39;Add Delivery Address&#39; button, open the dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused input (&#39;Street&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>The ability to enter text into the focused input is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 2: Open a modal dialog in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-02-open-modal-dialog-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-02-open-modal-dialog-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-2"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 2, 'moveFocusToAddDeliveryAddressButton');">Open Test 2 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Add Delivery Address&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Add Delivery Address&#39; button, open the dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused input (&#39;Street&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>The ability to enter text into the focused input is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Add Delivery Address&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Add Delivery Address&#39; button, open the dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused input (&#39;Street&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>The ability to enter text into the focused input is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 3: Open a Modal Dialog</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-03-open-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-3"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 3, 'moveFocusToAddDeliveryAddressButton');">Open Test 3 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the &#39;Add Delivery Address&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Add Delivery Address&#39; button, open the dialog. using the following commands:
+               <ul>
+                   <li>Control+Option+Space</li>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused input (&#39;Street&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>The ability to enter text into the focused input is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 4: Close a modal dialog in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-04-close-modal-dialog-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-04-close-modal-dialog-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-4"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 4, 'openAddDeliveryAddressDialogAndFocusFirstInput');">Open Test 4 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the first input</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on an input inside a modal dialog, close the dialog. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Add Delivery Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the first input</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on an input inside a modal dialog, close the dialog. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Add Delivery Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 5: Close a modal dialog in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-05-close-modal-dialog-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-05-close-modal-dialog-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-5"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 5, 'openAddDeliveryAddressDialogAndFocusFirstInput');">Open Test 5 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the first input</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on an input inside a modal dialog, close the dialog. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Add Delivery Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the first input</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on an input inside a modal dialog, close the dialog. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Add Delivery Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 6: Close a modal dialog</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-06-close-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-6"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 6, 'openAddDeliveryAddressDialogAndFocusFirstInput');">Open Test 6 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the first input</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on an input inside a modal dialog, close the dialog. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Add Delivery Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 7: Close a modal dialog using a button in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-07-close-modal-dialog-using-button-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-07-close-modal-dialog-using-button-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-7"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 7, 'openAddDeliveryAddressDialogAndFocusCancelButton');">Open Test 7 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the &#39;Cancel&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the &#39;Cancel&#39; button inside a modal dialog, press the button to close the dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Add Delivery Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the &#39;Cancel&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the &#39;Cancel&#39; button inside a modal dialog, press the button to close the dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Add Delivery Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 8: Close a modal dialog using a button in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-08-close-modal-dialog-using-button-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-08-close-modal-dialog-using-button-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-8"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 8, 'openAddDeliveryAddressDialogAndFocusCancelButton');">Open Test 8 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the &#39;Cancel&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Cancel&#39; button inside a modal dialog, press the button to close the dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Add Delivery Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the &#39;Cancel&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Cancel&#39; button inside a modal dialog, press the button to close the dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Add Delivery Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 9: Close a modal dialog using a button</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-09-close-modal-dialog-using-button-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-9"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 9, 'openAddDeliveryAddressDialogAndFocusCancelButton');">Open Test 9 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the &#39;Cancel&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Cancel&#39; button inside a modal dialog, press the button to close the dialog. using the following commands:
+               <ul>
+                   <li>Control+Option+Space</li>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Add Delivery Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 10: Navigate to the last focusable element in a modal dialog in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-10"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 10, 'openAddDeliveryAddressDialogAndFocusFirstInput');">Open Test 10 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the first input</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the first focusable element inside a modal dialog, navigate to the last focusable element in the same dialog. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Cancel&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the first input</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the first focusable element inside a modal dialog, navigate to the last focusable element in the same dialog. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Cancel&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 11: Navigate to the last focusable element in a modal dialog</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-11-navigate-to-last-focusable-element-in-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-11"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 11, 'openAddDeliveryAddressDialogAndFocusFirstInput');">Open Test 11 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the first input</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the first focusable element inside a modal dialog, navigate to the last focusable element in the same dialog. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Cancel&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 12: Navigate to the first focusable element in a modal dialog in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-12"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 12, 'openAddDeliveryAddressDialogAndFocusCancelButton');">Open Test 12 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the &#39;Cancel&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the last focusable element inside a modal dialog, navigate to the first focusable element in the same dialog. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Name &#39;Street&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The ability to enter text is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the &#39;Cancel&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the last focusable element inside a modal dialog, navigate to the first focusable element in the same dialog. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Name &#39;Street&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The ability to enter text is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 13: Navigate to the first focusable element in a modal dialog</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-13-navigate-to-first-focusable-element-in-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-13"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 13, 'openAddDeliveryAddressDialogAndFocusCancelButton');">Open Test 13 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the &#39;Cancel&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the last focusable element inside a modal dialog, navigate to the first focusable element in the same dialog. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Name &#39;Street&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>The ability to enter text is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 14: Navigate to the beginning of a modal dialog in reading mode </h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-14"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 14, 'openAddDeliveryAddressDialogAndFocusFirstInput');">Open Test 14 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the first input</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on an input inside a modal dialog, navigate to the beginning of the dialog. using the following commands:
+               <ul>
+                   <li>Control+Home followed by Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;heading&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Level of the heading (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the heading (&#39;Add Delivery Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the first input</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on an input inside a modal dialog, navigate to the beginning of the dialog. using the following commands:
+               <ul>
+                   <li>Control+Home</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;heading&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Level of the heading (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the heading (&#39;Add Delivery Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 15: Navigate to the beginning of a modal dialog </h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-15-navigate-to-beginning-of-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-15"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 15, 'openAddDeliveryAddressDialogAndFocusFirstInput');">Open Test 15 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the first input</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on an input inside a modal dialog, navigate to the beginning of the dialog. using the following commands:
+               <ul>
+                   <li>Control+Option+Home</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;heading&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Level of the heading (2) is conveyed</td></tr>
+            <tr><td>required</td><td>Text of the heading (&#39;Add Delivery Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 16: Navigate to the end of a modal dialog in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-16"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 16, 'openAddDeliveryAddressDialogAndFocusFirstInput');">Open Test 16 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the first input</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on an input inside a modal dialog, navigate to the end of the dialog. using the following commands:
+               <ul>
+                   <li>Control+End</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Cancel&#39; is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the first input</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on an input inside a modal dialog, navigate to the end of the dialog. using the following commands:
+               <ul>
+                   <li>Control+End</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Cancel&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 17: Navigate to the end of a modal dialog</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-17-navigate-to-end-of-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-17"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 17, 'openAddDeliveryAddressDialogAndFocusFirstInput');">Open Test 17 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the first input</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on an input inside a modal dialog, navigate to the end of the dialog. using the following commands:
+               <ul>
+                   <li>Control+Option+End</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;button&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Cancel&#39; is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 18: Open a nested modal dialog in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-18-open-nested-modal-dialog-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-18-open-nested-modal-dialog-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-describedby">ARIA specification: aria-describedby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-18"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 18, 'openAddDeliveryAddressDialogAndFocusAddButton');">Open Test 18 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the &#39;Add&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the &#39;Add&#39; button inside a modal dialog, open the nested &#39;Address Added&#39; dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Address Added&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Description of the dialog (&#39;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.&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;OK&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the &#39;Add&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the &#39;Add&#39; button inside a modal dialog, open the nested &#39;Address Added&#39; dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Address Added&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Description of the dialog (&#39;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.&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;OK&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 19: Open a nested modal dialog in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-19-open-nested-modal-dialog-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-19-open-nested-modal-dialog-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-describedby">ARIA specification: aria-describedby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-19"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 19, 'openAddDeliveryAddressDialogAndFocusAddButton');">Open Test 19 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the &#39;Add&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Add&#39; button inside a modal dialog, open the nested &#39;Address Added&#39; dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Address Added&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Description of the dialog (&#39;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.&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;OK&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the &#39;Add&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Add&#39; button inside a modal dialog, open the nested &#39;Address Added&#39; dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Address Added&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Description of the dialog (&#39;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.&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;OK&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 20: Open a nested modal dialog</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-20-open-nested-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-describedby">ARIA specification: aria-describedby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-20"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 20, 'openAddDeliveryAddressDialogAndFocusAddButton');">Open Test 20 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; modal dialog, and sets focus on the &#39;Add&#39; button</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Add&#39; button inside a modal dialog, open the nested &#39;Address Added&#39; dialog. using the following commands:
+               <ul>
+                   <li>Control+Option+Space</li>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Address Added&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Description of the dialog (&#39;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.&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;OK&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 21: Close a nested modal dialog in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-21-close-nested-modal-dialog-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-21-close-nested-modal-dialog-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-21"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 21, 'openVerificationResultDialogAndFocusCloseButton');">Open Test 21 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Verification Result&#39; dialog, and sets focus on the &#39;Close&#39; button inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the &#39;Close&#39; button inside a modal dialog, close the dialog. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Verify Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Verification Result&#39; dialog, and sets focus on the &#39;Close&#39; button inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the &#39;Close&#39; button inside a modal dialog, close the dialog. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Verify Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 22: Close a nested modal dialog in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-22-close-nested-modal-dialog-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-22-close-nested-modal-dialog-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-22"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 22, 'openVerificationResultDialogAndFocusCloseButton');">Open Test 22 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Verification Result&#39; dialog, and sets focus on the &#39;Close&#39; button inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Close&#39; button inside a modal dialog, close the dialog. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Verify Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Verification Result&#39; dialog, and sets focus on the &#39;Close&#39; button inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Close&#39; button inside a modal dialog, close the dialog. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Verify Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 23: Close a nested modal dialog</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-23-close-nested-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-23"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 23, 'openVerificationResultDialogAndFocusCloseButton');">Open Test 23 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Verification Result&#39; dialog, and sets focus on the &#39;Close&#39; button inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Close&#39; button inside a modal dialog, close the dialog. using the following commands:
+               <ul>
+                   <li>Escape</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Verify Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 24: Close a nested modal dialog using a button in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-24"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 24, 'openVerificationResultDialogAndFocusCloseButton');">Open Test 24 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Verification Result&#39; dialog, and sets focus on the &#39;Close&#39; button inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the &#39;Close&#39; button inside a modal dialog, press the button to close the dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Verify Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Verification Result&#39; dialog, and sets focus on the &#39;Close&#39; button inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the &#39;Close&#39; button inside a modal dialog, press the button to close the dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Verify Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 25: Close a nested modal dialog using a button in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-25"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 25, 'openVerificationResultDialogAndFocusCloseButton');">Open Test 25 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Verification Result&#39; dialog, and sets focus on the &#39;Close&#39; button inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Close&#39; button inside a modal dialog, press the button to close the dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Verify Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Verification Result&#39; dialog, and sets focus on the &#39;Close&#39; button inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Close&#39; button inside a modal dialog, press the button to close the dialog. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Verify Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 26: Close a nested modal dialog using a button</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-26-close-nested-modal-dialog-using-button-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-26"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 26, 'openVerificationResultDialogAndFocusCloseButton');">Open Test 26 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Verification Result&#39; dialog, and sets focus on the &#39;Close&#39; button inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Close&#39; button inside a modal dialog, press the button to close the dialog. using the following commands:
+               <ul>
+                   <li>Control+Option+Space</li>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Add Delivery Address&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Verify Address&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 27: Open a nested modal dialog using a link in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-describedby">ARIA specification: aria-describedby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-27"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 27, 'openAddressAddedDialogAndFocusYourProfileLink');">Open Test 27 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Address Added&#39; dialog, and sets focus on the &#39;your profile&#39; link inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the &#39;your profile&#39; link inside a modal dialog, open the nested &#39;End of the Road!&#39; dialog. using the following commands:
+               <ul>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;End of the Road!&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Description of the dialog (&#39;You activated a fake link or button that goes nowhere! The link or button is present for demonstration purposes only.&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Close&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Address Added&#39; dialog, and sets focus on the &#39;your profile&#39; link inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the &#39;your profile&#39; link inside a modal dialog, open the nested &#39;End of the Road!&#39; dialog. using the following commands:
+               <ul>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;End of the Road!&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Description of the dialog (&#39;You activated a fake link or button that goes nowhere! The link or button is present for demonstration purposes only.&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Close&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 28: Open a nested modal dialog using a link in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-describedby">ARIA specification: aria-describedby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-28"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 28, 'openAddressAddedDialogAndFocusYourProfileLink');">Open Test 28 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Address Added&#39; dialog, and sets focus on the &#39;your profile&#39; link inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;your profile&#39; link inside a modal dialog, open the nested &#39;End of the Road!&#39; dialog. using the following commands:
+               <ul>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;End of the Road!&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Description of the dialog (&#39;You activated a fake link or button that goes nowhere! The link or button is present for demonstration purposes only.&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Close&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Address Added&#39; dialog, and sets focus on the &#39;your profile&#39; link inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;your profile&#39; link inside a modal dialog, open the nested &#39;End of the Road!&#39; dialog. using the following commands:
+               <ul>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;End of the Road!&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Description of the dialog (&#39;You activated a fake link or button that goes nowhere! The link or button is present for demonstration purposes only.&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Close&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 29: Open a nested modal dialog using a link</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/modal-dialog/test-29-open-nested-modal-dialog-using-link-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;dialog-modal&#x2F;dialog.html">APG example: dialog-modal&#x2F;dialog.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#dialog">ARIA specification: dialog</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-describedby">ARIA specification: aria-describedby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-29"
+        onclick="openTestPage('../tests&#x2F;modal-dialog&#x2F;reference&#x2F;2020-12-17_13353&#x2F;dialog.html', 29, 'openAddressAddedDialogAndFocusYourProfileLink');">Open Test 29 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>opens the &#39;Add Delivery Address&#39; dialog followed by the &#39;Address Added&#39; dialog, and sets focus on the &#39;your profile&#39; link inside the second dialog</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;your profile&#39; link inside a modal dialog, open the nested &#39;End of the Road!&#39; dialog. using the following commands:
+               <ul>
+                   <li>Control+Option+Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;dialog&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;End of the Road!&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Description of the dialog (&#39;You activated a fake link or button that goes nowhere! The link or button is present for demonstration purposes only.&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the focused element (&#39;button&#39;) is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused element (&#39;Close&#39;) is conveyed</td></tr>
+        </table>
+      </div>
+
+  </body>
+</html>
diff --git a/build/review/tabs-manual-activation.html b/build/review/tabs-manual-activation.html
new file mode 100644
index 000000000..89aa82427
--- /dev/null
+++ b/build/review/tabs-manual-activation.html
@@ -0,0 +1,2329 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+  <head>
+    <title>Test plan review for pattern: tabs-manual-activation</title>
+    <style>
+      table {
+        border-collapse: collapse;
+        margin-bottom: 1em;
+      }
+
+      table, td, th {
+        border: 1px solid black;
+      }
+
+      td {
+        padding: .5em;
+      }
+
+    </style>
+    <script>
+      const filterATs = function(button) {
+        const val = button.value;
+
+        if (val === 'all') {
+          for (let at of document.querySelectorAll('input')) {
+            if (at.value !== 'all') {
+              for (let result of document.querySelectorAll(`.${at.value}`)) {
+                result.style.display = 'block';
+              }
+              at.checked = false;
+            }
+            else {
+              at.checked = true;
+            }
+          }
+        }
+        else {
+          for (let at of document.querySelectorAll('input')) {
+
+            if (at.value === val) {
+              at.checked = true;
+            }
+            else {
+              at.checked = false;
+            }
+
+            for (let result of document.querySelectorAll(`.${at.value}`)) {
+              result.style.display = 'none';
+            }
+            for (let result of document.querySelectorAll(`.${val}`)) {
+              result.style.display = 'block';
+            }
+
+          }
+        }
+      }
+
+      function executeScriptInTestPage(setupScriptName, testPageWindow) {
+        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(setupScriptName, testPageWindow);
+          }, 100);
+          return;
+        }
+
+        if (setupScriptName) {
+          var scripts = {
+            	checkFirstCheckbox: function(testPageDocument){
+	// Set aria-checked on first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').setAttribute('aria-checked', 'true');
+},	moveFocusAndCheckFirstCheckbox: function(testPageDocument){
+	// Move focus and set aria-checked on first checkbox
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.focus();
+	checkbox.setAttribute('aria-checked', 'true');
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// Move focus to first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	moveFocusAfterFirstCheckbox: function(testPageDocument){
+	// sets focus on a link after the first checkbox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeFirstCheckbox: function(testPageDocument){
+	// sets focus on a link before the first checkbox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToAndUncheckFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox and sets its state to unchecked
+	const checkbox = testPageDocument.querySelector('[role="checkbox"]');
+	checkbox.setAttribute('aria-checked', 'false');
+	checkbox.focus();
+},	moveFocusToFirstCheckbox: function(testPageDocument){
+	// sets focus on the first checkbox
+	testPageDocument.querySelector('[role="checkbox"]').focus();
+},	buttonFocusEmptyCollpased: function(testPageDocument){
+	// Set focus on button
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+},	buttonFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on button
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.buttonNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxFocusEmptyCollapsed: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' is empty
+	// Ensure in collapsed state
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+},	comboboxFocusEmptyExpanded: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = '';
+	cb.combobox.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	comboboxValueSetCollapsedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'Alabama'
+	// Ensure in collapsed state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'Alabama';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+},	comboboxValueSetExpandedState: function(testPageDocument){
+	// Set focus on combobox
+	// Set value of 'combobox' to 'a'
+	// Ensure in expanded state.
+	var cb = testPageDocument.comboboxAutocomplete;
+	cb.comboboxNode.value = 'a';
+	cb.comboboxNode.focus();
+	cb.filter = cb.comboboxNode.value;
+	cb.filterOptions();
+	cb.open();
+},	moveFocusAfterCombobox: function(testPageDocument){
+	// sets focus on a link after the Combobox
+	testPageDocument.querySelector('#afterlink').focus();
+},	moveFocusBeforeCombobox: function(testPageDocument){
+	// sets focus on a link before the Combobox
+	testPageDocument.querySelector('#beforelink').focus();
+},	moveFocusToCombobox: function(testPageDocument){
+	// sets focus on the combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+},	openListbox: function(testPageDocument){
+	// sets focus on and expands the Combobox
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+},	openListboxToApple: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Apple'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(1);
+},	openListboxToGuava: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Guave'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(11);
+},	openListboxToHuckleberry: function(testPageDocument){
+	// sets focus on and expands the Combobox, and sets the focused option to 'Huckleberry'
+	testPageDocument.querySelector('[role="combobox"]').focus();
+	testPageDocument.defaultView.selectController.updateMenuState(true);
+	testPageDocument.defaultView.selectController.onOptionChange(12);
+},	openMenuAndSetFocusToFirstItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 1'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToFirstMenuitem();
+},	openMenuAndSetFocusToLastItem: function(testPageDocument){
+	// opens the menu, and sets focus on 'Action 4'
+	testPageDocument.defaultView.menuController.openPopup();
+	testPageDocument.defaultView.menuController.setFocusToLastMenuitem();
+},	setFocusAfterMenuButton: function(testPageDocument){
+	// sets focus on a link after the menu button
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeMenuButton: function(testPageDocument){
+	// sets focus on a link before the menu button
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnMenuButton: function(testPageDocument){
+	// sets focus on the menu button
+	testPageDocument.querySelector('#menubutton1').focus();
+},	focusonfirstlink: function(testPageDocument){
+	// Move focus to the link just before the meunbar
+	testPageDocument.querySelector('a').focus();
+},	focusonfont: function(testPageDocument){
+	// Move focus to the "Font" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[0].focus();
+},	focusonsize: function(testPageDocument){
+	// Move focus to the "Size" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[3].focus();
+},	focusonstylecolor: function(testPageDocument){
+	// Move focus to the "Style/Color" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[1].focus();
+},	focusontextalign: function(testPageDocument){
+	// Move focus to the "Text Align" menu item
+	testPageDocument.querySelectorAll('[role=menuitem]')[2].focus();
+},	moveFocusToAddDeliveryAddressButton: function(testPageDocument){
+	// sets focus on the 'Add Delivery Address' button
+	testPageDocument.querySelector('#ex1 > button').focus();
+},	openAddDeliveryAddressDialogAndFocusAddButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Add' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+},	openAddDeliveryAddressDialogAndFocusCancelButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the 'Cancel' button
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_cancel');
+},	openAddDeliveryAddressDialogAndFocusFirstInput: function(testPageDocument){
+	// opens the 'Add Delivery Address' modal dialog, and sets focus on the first input
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn);
+},	openAddressAddedDialogAndFocusYourProfileLink: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Address Added' dialog, and sets focus on the 'your profile' link inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.replaceDialog('dialog3', undefined, 'dialog3_profile');
+},	openVerificationResultDialogAndFocusCloseButton: function(testPageDocument){
+	// opens the 'Add Delivery Address' dialog followed by the 'Verification Result' dialog, and sets focus on the 'Close' button inside the second dialog
+	const btn = testPageDocument.querySelector('#ex1 > button');
+	testPageDocument.defaultView.openDialog('dialog1', btn, 'dialog1_add');
+	testPageDocument.defaultView.openDialog('dialog2', 'dialog1_verify', 'dialog2_close_btn');
+},	activateThirdTabAndSetFocusOnTabpanel: function(testPageDocument){
+	// activates the third tab in the tab list, and sets focus on the tab panel
+	testPageDocument.querySelectorAll('[role="tab"]').forEach(t => {
+	t.setAttribute('tabindex', '-1');
+	t.setAttribute('aria-selected', 'false');
+	});
+	testPageDocument.querySelectorAll('[role="tabpanel"]').forEach(p => {
+	p.classList.add('is-hidden');
+	});
+	let thirdTab = testPageDocument.querySelector('#complex');
+	let thirdPanel = testPageDocument.querySelector('#complex-complex');
+	thirdTab.removeAttribute('tabindex');
+	thirdTab.setAttribute('aria-selected', 'true');
+	thirdPanel.classList.remove('is-hidden');
+	thirdPanel.focus();
+},	setFocusAfterTabpanel: function(testPageDocument){
+	// sets focus on a link after the tab panel
+	testPageDocument.querySelector('#afterlink').focus();
+},	setFocusBeforeTablist: function(testPageDocument){
+	// sets focus on a link before the tab list
+	testPageDocument.querySelector('#beforelink').focus();
+},	setFocusOnFirstTab: function(testPageDocument){
+	// sets focus on the first tab
+	testPageDocument.querySelector('#nils').focus();
+},	setFocusOnSecondTab: function(testPageDocument){
+	// sets focus on the second tab
+	testPageDocument.querySelector('#agnes').focus();
+},	setFocusOnThirdTab: function(testPageDocument){
+	// sets focus on the third tab
+	testPageDocument.querySelector('#complex').focus();
+}
+          };
+
+          scripts[setupScriptName](testPageWindow.document);
+        }
+      }
+
+      function openTestPage(testPageUri, testNumber, setupScriptName) {
+        testPageWindow = window.open(testPageUri, '_blank', 'toolbar=0,location=0,menubar=0,width=400,height=400');
+
+        document.getElementById('open-test-page-' + testNumber).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-' + testNumber).disabled = false;
+            }
+          }, 100);
+
+        };
+
+        executeScriptInTestPage(setupScriptName, testPageWindow);
+      }
+    </script>
+  </head>
+  <body>
+
+    <h1>Test plan review for pattern: tabs-manual-activation (29 tests)</h1>
+
+    <fieldset>
+      <legend>Filter tests by assistive technology</legend>
+      <input type="radio" onclick="filterATs(this)" id="all" value="all" checked="true"><label for="all">All assistive technologies</label>
+        <input type="radio" onclick="filterATs(this)" id="jaws" value="jaws"><label for="jaws">JAWS</label>
+        <input type="radio" onclick="filterATs(this)" id="nvda" value="nvda"><label for="nvda">NVDA</label>
+        <input type="radio" onclick="filterATs(this)" id="voiceover_macos" value="voiceover_macos"><label for="voiceover_macos">VoiceOver for macOS</label>
+    </fieldset>
+
+    <h2>Test 1: Navigate forwards to a tab list in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tablist">ARIA specification: tablist</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-1"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 1, 'setFocusBeforeTablist');">Open Test 1 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the tab list</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the tab list. Note: You may need to press certain commands (such as Down Arrow) multiple times to hear all information relating to the tab list. using the following commands:
+               <ul>
+                   <li>Tab</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab list&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the tab list, &#39;Entertainment&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the selected item, &#39;tab&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused tab, &#39;Nils Frahm&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>State of the focused tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused tab, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the tab list</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the tab list. Note: You may need to press certain commands (such as Down Arrow) multiple times to hear all information relating to the tab list. using the following commands:
+               <ul>
+                   <li>Tab</li>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab list&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the tab list, &#39;Entertainment&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the selected item, &#39;tab&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused tab, &#39;Nils Frahm&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>State of the focused tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused tab, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 2: Navigate backwards to a tab list in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tablist">ARIA specification: tablist</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-2"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 2, 'activateThirdTabAndSetFocusOnTabpanel');">Open Test 2 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>activates the third tab in the tab list, and sets focus on the tab panel</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the tab list. Note: You may need to press certain commands (such as Up Arrow) multiple times to hear all information relating to the tab list. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab list&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the tab list, &#39;Entertainment&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the selected item, &#39;tab&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused tab, &#39;Joke&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>State of the focused tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused tab in the tab list, 3, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>activates the third tab in the tab list, and sets focus on the tab panel</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>Navigate to the tab list. Note: You may need to press certain commands (such as Up Arrow) multiple times to hear all information relating to the tab list. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab list&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the tab list, &#39;Entertainment&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the selected item, &#39;tab&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused tab, &#39;Joke&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>State of the focused tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused tab in the tab list, 3, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 3: Navigate forwards to a tab list in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tablist">ARIA specification: tablist</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-3"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 3, 'setFocusBeforeTablist');">Open Test 3 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the tab list</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the tab list. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab list&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the tab list, &#39;Entertainment&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the selected item, &#39;tab&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused tab, &#39;Nils Frahm&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>State of the focused tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused tab, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the tab list</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the tab list. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab list&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the tab list, &#39;Entertainment&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the selected item, &#39;tab&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused tab, &#39;Nils Frahm&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>State of the focused tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused tab, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 4: Navigate backwards to a tab list in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tablist">ARIA specification: tablist</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-4"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 4, 'activateThirdTabAndSetFocusOnTabpanel');">Open Test 4 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>activates the third tab in the tab list, and sets focus on the tab panel</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the tab list. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab list&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the tab list, &#39;Entertainment&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the selected item, &#39;tab&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused tab, &#39;Joke&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>State of the focused tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused tab in the tab list, 3, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>activates the third tab in the tab list, and sets focus on the tab panel</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the tab list. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab list&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the tab list, &#39;Entertainment&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the selected item, &#39;tab&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused tab, &#39;Joke&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>State of the focused tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused tab in the tab list, 3, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 5: Navigate forwards to a tab list</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-05-navigate-forwards-to-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tablist">ARIA specification: tablist</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-5"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 5, 'setFocusBeforeTablist');">Open Test 5 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link before the tab list</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate to the tab list. Note: You may need to press certain commands (such as Control+Option+Right Arrow) multiple times to hear all information relating to the tab list. using the following commands:
+               <ul>
+                   <li>Tab</li>
+                   <li>Control+Option+Right</li>
+                   <li>Control+Option+Command+J</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab list&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the tab list, &#39;Entertainment&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the selected item, &#39;tab&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused tab, &#39;Nils Frahm&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>State of the focused tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused tab, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 6: Navigate backwards to a tab list</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-06-navigate-backwards-to-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tablist">ARIA specification: tablist</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-label">ARIA specification: aria-label</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-6"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 6, 'activateThirdTabAndSetFocusOnTabpanel');">Open Test 6 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>activates the third tab in the tab list, and sets focus on the tab panel</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate to the tab list. Note: You may need to press certain commands (such as Control+Option+Left Arrow) multiple times to hear all information relating to the tab list. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+                   <li>Ctrl+Option+Left</li>
+                   <li>Shift+Control+Option+Command+J</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab list&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the tab list, &#39;Entertainment&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Role of the selected item, &#39;tab&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Name of the focused tab, &#39;Joke&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>State of the focused tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of the focused tab in the tab list, 3, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 7: Read information about a tab in a tab list in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-7"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 7, 'setFocusOnFirstTab');">Open Test 7 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the &#39;Nils Frahm&#39; tab, read information about the tab. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the &#39;Nils Frahm&#39; tab, read information about the tab. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 8: Read information about a tab in a tab list in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-8"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 8, 'setFocusOnFirstTab');">Open Test 8 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Nils Frahm&#39; tab, read information about the tab. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Nils Frahm&#39; tab, read information about the tab. using the following commands:
+               <ul>
+                   <li>Insert+Tab</li>
+                   <li>Insert+Up</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 9: Read information about a tab in a tab list</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-09-read-information-about-tab-in-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-9"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 9, 'setFocusOnFirstTab');">Open Test 9 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Nils Frahm&#39; tab, read information about the tab. using the following commands:
+               <ul>
+                   <li>Control+Option+F3</li>
+                   <li>Control+Option+F4</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 10: Navigate to the next tab in a tab list in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-10"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 10, 'setFocusOnFirstTab');">Open Test 10 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the &#39;Nils Frahm&#39; tab, navigate to the next tab. using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Agnes Obel&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Position of tab in the tab list, 2, is conveyed</td></tr>
+            <tr><td>optional</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the &#39;Nils Frahm&#39; tab, navigate to the next tab. using the following commands:
+               <ul>
+                   <li>Down Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Agnes Obel&#39; is conveyed</td></tr>
+            <tr><td>optional</td><td>Position of tab in the tab list, 2, is conveyed</td></tr>
+            <tr><td>optional</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 11: Navigate to the next tab in a tab list in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-11"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 11, 'setFocusOnFirstTab');">Open Test 11 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Nils Frahm&#39; tab, navigate to the next tab. using the following commands:
+               <ul>
+                   <li>Right Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Agnes Obel&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 2, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Nils Frahm&#39; tab, navigate to the next tab. using the following commands:
+               <ul>
+                   <li>Right Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Agnes Obel&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 2, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 12: Navigate to the next tab in a tab list</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-12-navigate-to-next-tab-in-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-12"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 12, 'setFocusOnFirstTab');">Open Test 12 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Nils Frahm&#39; tab, navigate to the next tab. using the following commands:
+               <ul>
+                   <li>Control+Option+Right</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Agnes Obel&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 2, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 13: Navigate to the previous tab in a tab list in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-13"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 13, 'setFocusOnSecondTab');">Open Test 13 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the second tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the &#39;Agnes Obel&#39; tab, navigate to the previous tab. using the following commands:
+               <ul>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>optional</td><td>Position of tab in the tab list, 1, is conveyed</td></tr>
+            <tr><td>optional</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the second tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the &#39;Agnes Obel&#39; tab, navigate to the previous tab. using the following commands:
+               <ul>
+                   <li>Up Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>optional</td><td>Position of tab in the tab list, 1, is conveyed</td></tr>
+            <tr><td>optional</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 14: Navigate to the previous tab in a tab list in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-14"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 14, 'setFocusOnSecondTab');">Open Test 14 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the second tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Agnes Obel&#39; tab, navigate to the previous tab. using the following commands:
+               <ul>
+                   <li>Left Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the second tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Agnes Obel&#39; tab, navigate to the previous tab. using the following commands:
+               <ul>
+                   <li>Left Arrow</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 15: Navigate to the previous tab in a tab list</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-15-navigate-to-previous-tab-in-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-15"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 15, 'setFocusOnSecondTab');">Open Test 15 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the second tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Agnes Obel&#39; tab, navigate to the previous tab. using the following commands:
+               <ul>
+                   <li>Ctrl+Option+Left</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 16: Navigate to the first tab in a tab list in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-16"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 16, 'setFocusOnThirdTab');">Open Test 16 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the third tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Joke&#39; tab, navigate to the first tab. using the following commands:
+               <ul>
+                   <li>Home</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the third tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Joke&#39; tab, navigate to the first tab. using the following commands:
+               <ul>
+                   <li>Home</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 17: Navigate to the first tab in a tab list</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-17-navigate-to-first-tab-in-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-17"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 17, 'setFocusOnThirdTab');">Open Test 17 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the third tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Joke&#39; tab, navigate to the first tab. using the following commands:
+               <ul>
+                   <li>Home</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 1, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 18: Navigate to the last tab in a tab list in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-18"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 18, 'setFocusOnFirstTab');">Open Test 18 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Nils Frahm&#39; tab, navigate to the last tab. using the following commands:
+               <ul>
+                   <li>End</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Joke&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 3, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Nils Frahm&#39; tab, navigate to the last tab. using the following commands:
+               <ul>
+                   <li>End</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Joke&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 3, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 19: Navigate to the last tab in a tab list</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-19-navigate-to-last-tab-in-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-19"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 19, 'setFocusOnFirstTab');">Open Test 19 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Nils Frahm&#39; tab, navigate to the last tab. using the following commands:
+               <ul>
+                   <li>End</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Joke&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 3, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 3, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 20: Navigate forwards to a tab panel in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tabpanel">ARIA specification: tabpanel</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-20"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 20, 'setFocusOnFirstTab');">Open Test 20 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the tab panel. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab panel&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Textual content of the tab panel is conveyed as &#39;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.&#39;</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the tab panel. using the following commands:
+               <ul>
+                   <li>Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab panel&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Textual content of the tab panel is conveyed as &#39;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.&#39;</td></tr>
+        </table>
+      </div>
+    <h2>Test 21: Navigate backwards to a tab panel in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tabpanel">ARIA specification: tabpanel</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-21"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 21, 'setFocusAfterTabpanel');">Open Test 21 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the tab panel</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>Navigate to the tab panel. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab panel&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Textual content of the tab panel is conveyed as &#39;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.&#39;</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the tab panel</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>Navigate to the tab panel. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab panel&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Textual content of the tab panel is conveyed as &#39;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.&#39;</td></tr>
+        </table>
+      </div>
+    <h2>Test 22: Navigate forwards to a tab panel</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-22-navigate-forwards-to-tab-panel-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tabpanel">ARIA specification: tabpanel</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-22"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 22, 'setFocusOnFirstTab');">Open Test 22 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the first tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate to the tab panel. Note: You may need to press certain commands (such as Control+Option+Right Arrow) multiple times to hear all information relating to the tab panel. using the following commands:
+               <ul>
+                   <li>Tab</li>
+                   <li>Control+Option+Right</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab panel&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Textual content of the tab panel is conveyed as &#39;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.&#39;</td></tr>
+        </table>
+      </div>
+    <h2>Test 23: Navigate backwards to a tab panel</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-23-navigate-backwards-to-tab-panel-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tabpanel">ARIA specification: tabpanel</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-23"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 23, 'setFocusAfterTabpanel');">Open Test 23 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on a link after the tab panel</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>Navigate to the tab panel. Note: You may need to press certain commands (such as Control+Option+Left Arrow) multiple times to hear all information relating to the tab panel. using the following commands:
+               <ul>
+                   <li>Shift+Tab</li>
+                   <li>Ctrl+Option+Left</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab panel&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Nils Frahm&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Textual content of the tab panel is conveyed as &#39;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.&#39;</td></tr>
+        </table>
+      </div>
+    <h2>Test 24: Activate a tab in a tab list in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-24"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 24, 'setFocusOnSecondTab');">Open Test 24 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the second tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the &#39;Agnes Obel&#39; tab, activate the tab. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the second tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the &#39;Agnes Obel&#39; tab, activate the tab. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 25: Activate a tab in a tab list in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-25"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 25, 'setFocusOnSecondTab');">Open Test 25 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the second tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Agnes Obel&#39; tab, activate the tab. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the second tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Agnes Obel&#39; tab, activate the tab. using the following commands:
+               <ul>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 26: Activate a tab in a tab list</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-26-activate-tab-in-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-26"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 26, 'setFocusOnSecondTab');">Open Test 26 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the second tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Agnes Obel&#39; tab, activate the tab. using the following commands:
+               <ul>
+                   <li>Control+Option+Space</li>
+                   <li>Space</li>
+                   <li>Enter</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 27: Delete a tab from a tab list in reading mode</h2>
+    <p>
+      <ul>
+        <li>Mode: reading</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-27"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 27, 'setFocusOnThirdTab');">Open Test 27 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the third tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the Virtual Cursor is active by pressing Alt+Delete. If it is not, turn on the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With the reading cursor on the &#39;Joke&#39; tab, delete the tab. using the following commands:
+               <ul>
+                   <li>Delete</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Agnes Obel&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 2, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 2, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the third tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Insure NVDA is in browse mode by pressing Escape. Note: This command has no effect if NVDA is already in browse mode.</li>
+             <li>With the reading cursor on the &#39;Joke&#39; tab, delete the tab. using the following commands:
+               <ul>
+                   <li>Delete</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Agnes Obel&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 2, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 2, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 28: Delete a tab from a tab list in interaction mode</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: jaws, nvda</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.html?at=jaws">jaws</a></li>
+              <li><a href="../tests/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.html?at=nvda">nvda</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-28"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 28, 'setFocusOnThirdTab');">Open Test 28 Page</button>
+    </p>
+      <div class="jaws">
+        <h3>JAWS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the third tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Verify the PC Cursor is active by pressing Alt+Delete. If it is not, turn off the Virtual Cursor by pressing Insert+Z.</li>
+             <li>With focus on the &#39;Joke&#39; tab, delete the tab. using the following commands:
+               <ul>
+                   <li>Delete</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Agnes Obel&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 2, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 2, is conveyed</td></tr>
+        </table>
+      </div>
+      <div class="nvda">
+        <h3>NVDA</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the third tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>If NVDA did not make the focus mode sound when the test page loaded, press Insert+Space to turn focus mode on.</li>
+             <li>With focus on the &#39;Joke&#39; tab, delete the tab. using the following commands:
+               <ul>
+                   <li>Delete</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Agnes Obel&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 2, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 2, is conveyed</td></tr>
+        </table>
+      </div>
+    <h2>Test 29: Delete a tab from a tab list</h2>
+    <p>
+      <ul>
+        <li>Mode: interaction</li>
+        <li>Applies to: voiceover_macos</li>
+        <li>Lasted edited: Wed Jun 16 15:16:18 2021 -0500</li>
+        <li>Tests:
+          <ul>
+              <li><a href="../tests/tabs-manual-activation/test-29-delete-tab-from-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
+          </ul>
+        </li>
+        <li>Relevant Specifications:
+          <ul>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria-practices&#x2F;examples&#x2F;tabs&#x2F;tabs-2&#x2F;tabs.html">APG example: tabs&#x2F;tabs-2&#x2F;tabs.html</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#tab">ARIA specification: tab</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-labelledby">ARIA specification: aria-labelledby</a></li>
+              <li><a href="https:&#x2F;&#x2F;w3c.github.io&#x2F;aria&#x2F;#aria-selected">ARIA specification: aria-selected</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <button id="open-test-page-29"
+        onclick="openTestPage('../tests&#x2F;tabs-manual-activation&#x2F;reference&#x2F;2021-2-15_124757&#x2F;tabs.html', 29, 'setFocusOnThirdTab');">Open Test 29 Page</button>
+    </p>
+      <div class="voiceover_macos">
+        <h3>VoiceOver for macOS</h3>
+        <h4>Scripted Instructions</h4>
+        The following instructions are executed by a script in the test page to initialize the widget:
+        <ol>
+        <li>sets focus on the third tab</li>
+        </ol>
+        <h4>Tester Instructions</h4>
+        <p>
+          <ol>
+             <li>Toggle Quick Nav OFF by pressing the Left Arrow and Right Arrow keys at the same time.</li>
+             <li>With focus on the &#39;Joke&#39; tab, delete the tab. using the following commands:
+               <ul>
+                   <li>Delete</li>
+               </ul>
+             </li>
+          </ol>
+        </p>
+        <h4>Assertions</h4>
+        <table>
+          <tr><th>Priority</th><th>Assertion</th></tr>
+            <tr><td>required</td><td>Role &#39;tab&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>Name &#39;Agnes Obel&#39; is conveyed</td></tr>
+            <tr><td>required</td><td>State of the tab, &#39;selected&#39;, is conveyed</td></tr>
+            <tr><td>required</td><td>Position of tab in the tab list, 2, is conveyed</td></tr>
+            <tr><td>required</td><td>Number of tabs in the tab list, 2, is conveyed</td></tr>
+        </table>
+      </div>
+
+  </body>
+</html>
diff --git a/tests/checkbox-tri-state/commands.json b/build/tests/checkbox-tri-state/commands.json
similarity index 100%
rename from tests/checkbox-tri-state/commands.json
rename to build/tests/checkbox-tri-state/commands.json
diff --git a/tests/checkbox-tri-state/index.html b/build/tests/checkbox-tri-state/index.html
similarity index 100%
rename from tests/checkbox-tri-state/index.html
rename to build/tests/checkbox-tri-state/index.html
diff --git a/build/tests/checkbox-tri-state/reference/checkbox-tri-state.html b/build/tests/checkbox-tri-state/reference/checkbox-tri-state.html
new file mode 100644
index 000000000..4c6038f18
--- /dev/null
+++ b/build/tests/checkbox-tri-state/reference/checkbox-tri-state.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+  <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Tri-State Checkbox Example</title>
+
+    <!-- Core css shared by all examples -->
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+
+    <!-- css and JS used by this example -->
+    <link href="css/checkbox.css" rel="stylesheet">
+    <script src="js/controlledCheckbox.js" type="text/javascript"></script>
+    <script src="js/checkboxMixed.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <main>
+      <h1>Tri-State Checkbox Example</h1>
+      <p>
+        This example demonstrates using the  <a href="https://w3c.github.io/aria-practices/#checkbox">Checkbox Design Pattern</a> 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.
+      </p>
+      <p>
+        This example also demonstrates use of <code>fieldset</code> and <code>Legend</code> elements for labeling the checkbox group.
+      </p>
+      <section>
+        <div class="example-header">
+          <h2 id="ex_label" tabindex="-1">Example</h2>
+        </div>
+        <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+        <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
+        <div  id="ex1">
+           <fieldset>
+              <legend>Sandwich Condiments</legend>
+                  <div
+                      role="checkbox"
+                      class="group_checkbox"
+                      aria-checked="mixed"
+                      aria-controls="cond1 cond2 cond3 cond4"
+                      tabindex="0"
+                  >
+                    All condiments
+                </div>
+                <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
+                <ul class="checkboxes">
+                  <li><label><input type="checkbox" id="cond1">Lettuce</label></li>
+                  <li><label><input type="checkbox" id="cond2" checked>Tomato</label></li>
+                  <li><label><input type="checkbox" id="cond3">Mustard</label></li>
+                  <li><label><input type="checkbox" id="cond4">Sprouts</label></li>
+                </ul>
+          </fieldset>
+          <script type="text/javascript">
+            function checkboxFocus (event) {
+              event.currentTarget.parentNode.classList.add('focus');
+            };
+            function checkboxBlur (event) {
+              event.currentTarget.parentNode.classList.remove('focus');
+            };
+            window.onload = function () {
+              var i;
+              var mixed = document.querySelectorAll('[role="checkbox"]');
+              for (i = 0; i < mixed.length; i++) {
+                var m = new CheckboxMixed(mixed[i]);
+                m.init();
+              }
+              var checkboxes = document.querySelectorAll('input[type="checkbox"]');
+              for (i = 0; i < checkboxes.length; i++) {
+                var cb = checkboxes[i];
+                cb.addEventListener('focus', checkboxFocus);
+                cb.addEventListener('blur', checkboxBlur);
+              }
+            };
+          </script>
+        </div>
+        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+      </section>
+    </main>
+  </body>
+</html>
\ 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
new file mode 100644
index 000000000..3eb6b7dc8
--- /dev/null
+++ b/build/tests/checkbox-tri-state/reference/css/checkbox.css
@@ -0,0 +1,89 @@
+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
new file mode 100644
index 000000000..d2ca7f9a8
--- /dev/null
+++ b/build/tests/checkbox-tri-state/reference/js/checkboxMixed.js
@@ -0,0 +1,149 @@
+/*
+ *   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
new file mode 100644
index 000000000..b44c95eeb
--- /dev/null
+++ b/build/tests/checkbox-tri-state/reference/js/controlledCheckbox.js
@@ -0,0 +1,100 @@
+/*
+ *   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/tests/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.html b/build/tests/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.html
similarity index 100%
rename from tests/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.html
rename to build/tests/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.html
diff --git a/tests/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.json b/build/tests/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.json
similarity index 100%
rename from tests/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.json
rename to build/tests/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.json
diff --git a/tests/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.html b/build/tests/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.html
similarity index 100%
rename from tests/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.html
rename to build/tests/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.html
diff --git a/tests/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.json b/build/tests/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.json
similarity index 100%
rename from tests/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.json
rename to build/tests/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.json
diff --git a/tests/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.html b/build/tests/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.html
rename to build/tests/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.html
diff --git a/tests/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.json b/build/tests/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.json
rename to build/tests/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.json
diff --git a/tests/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.html b/build/tests/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.html
rename to build/tests/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.html
diff --git a/tests/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.json b/build/tests/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.json
rename to build/tests/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.json
diff --git a/tests/checkbox-tri-state/test-05-navigate-forwards-to-partially-checked-checkbox-interaction.html b/build/tests/checkbox-tri-state/test-05-navigate-forwards-to-partially-checked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-05-navigate-forwards-to-partially-checked-checkbox-interaction.html
rename to build/tests/checkbox-tri-state/test-05-navigate-forwards-to-partially-checked-checkbox-interaction.html
diff --git a/tests/checkbox-tri-state/test-05-navigate-forwards-to-partially-checked-checkbox-interaction.json b/build/tests/checkbox-tri-state/test-05-navigate-forwards-to-partially-checked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-05-navigate-forwards-to-partially-checked-checkbox-interaction.json
rename to build/tests/checkbox-tri-state/test-05-navigate-forwards-to-partially-checked-checkbox-interaction.json
diff --git a/tests/checkbox-tri-state/test-06-navigate-backwards-to-partially-checked-checkbox-interaction.html b/build/tests/checkbox-tri-state/test-06-navigate-backwards-to-partially-checked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-06-navigate-backwards-to-partially-checked-checkbox-interaction.html
rename to build/tests/checkbox-tri-state/test-06-navigate-backwards-to-partially-checked-checkbox-interaction.html
diff --git a/tests/checkbox-tri-state/test-06-navigate-backwards-to-partially-checked-checkbox-interaction.json b/build/tests/checkbox-tri-state/test-06-navigate-backwards-to-partially-checked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-06-navigate-backwards-to-partially-checked-checkbox-interaction.json
rename to build/tests/checkbox-tri-state/test-06-navigate-backwards-to-partially-checked-checkbox-interaction.json
diff --git a/tests/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.html b/build/tests/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.html
similarity index 100%
rename from tests/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.html
rename to build/tests/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.html
diff --git a/tests/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.json b/build/tests/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.json
similarity index 100%
rename from tests/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.json
rename to build/tests/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.json
diff --git a/tests/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.html b/build/tests/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.html
rename to build/tests/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.html
diff --git a/tests/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.json b/build/tests/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.json
rename to build/tests/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.json
diff --git a/tests/checkbox-tri-state/test-09-operate-partially-checked-checkbox-interaction.html b/build/tests/checkbox-tri-state/test-09-operate-partially-checked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-09-operate-partially-checked-checkbox-interaction.html
rename to build/tests/checkbox-tri-state/test-09-operate-partially-checked-checkbox-interaction.html
diff --git a/tests/checkbox-tri-state/test-09-operate-partially-checked-checkbox-interaction.json b/build/tests/checkbox-tri-state/test-09-operate-partially-checked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-09-operate-partially-checked-checkbox-interaction.json
rename to build/tests/checkbox-tri-state/test-09-operate-partially-checked-checkbox-interaction.json
diff --git a/tests/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.html b/build/tests/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.html
similarity index 100%
rename from tests/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.html
rename to build/tests/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.html
diff --git a/tests/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.json b/build/tests/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.json
similarity index 100%
rename from tests/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.json
rename to build/tests/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.json
diff --git a/tests/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.html b/build/tests/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.html
rename to build/tests/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.html
diff --git a/tests/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.json b/build/tests/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.json
rename to build/tests/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.json
diff --git a/tests/checkbox-tri-state/test-12-operate-unchecked-checked-checkbox-interaction.html b/build/tests/checkbox-tri-state/test-12-operate-unchecked-checked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-12-operate-unchecked-checked-checkbox-interaction.html
rename to build/tests/checkbox-tri-state/test-12-operate-unchecked-checked-checkbox-interaction.html
diff --git a/tests/checkbox-tri-state/test-12-operate-unchecked-checked-checkbox-interaction.json b/build/tests/checkbox-tri-state/test-12-operate-unchecked-checked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-12-operate-unchecked-checked-checkbox-interaction.json
rename to build/tests/checkbox-tri-state/test-12-operate-unchecked-checked-checkbox-interaction.json
diff --git a/tests/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.html b/build/tests/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.html
similarity index 100%
rename from tests/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.html
rename to build/tests/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.html
diff --git a/tests/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.json b/build/tests/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.json
similarity index 100%
rename from tests/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.json
rename to build/tests/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.json
diff --git a/tests/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.html b/build/tests/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.html
rename to build/tests/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.html
diff --git a/tests/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.json b/build/tests/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.json
rename to build/tests/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.json
diff --git a/tests/checkbox-tri-state/test-15-read-partially-checked-checkbox-interaction.html b/build/tests/checkbox-tri-state/test-15-read-partially-checked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-15-read-partially-checked-checkbox-interaction.html
rename to build/tests/checkbox-tri-state/test-15-read-partially-checked-checkbox-interaction.html
diff --git a/tests/checkbox-tri-state/test-15-read-partially-checked-checkbox-interaction.json b/build/tests/checkbox-tri-state/test-15-read-partially-checked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-15-read-partially-checked-checkbox-interaction.json
rename to build/tests/checkbox-tri-state/test-15-read-partially-checked-checkbox-interaction.json
diff --git a/tests/checkbox-tri-state/test-16-read-checkbox-group-reading.html b/build/tests/checkbox-tri-state/test-16-read-checkbox-group-reading.html
similarity index 100%
rename from tests/checkbox-tri-state/test-16-read-checkbox-group-reading.html
rename to build/tests/checkbox-tri-state/test-16-read-checkbox-group-reading.html
diff --git a/tests/checkbox-tri-state/test-16-read-checkbox-group-reading.json b/build/tests/checkbox-tri-state/test-16-read-checkbox-group-reading.json
similarity index 100%
rename from tests/checkbox-tri-state/test-16-read-checkbox-group-reading.json
rename to build/tests/checkbox-tri-state/test-16-read-checkbox-group-reading.json
diff --git a/tests/checkbox-tri-state/test-17-read-checkbox-group-interaction.html b/build/tests/checkbox-tri-state/test-17-read-checkbox-group-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-17-read-checkbox-group-interaction.html
rename to build/tests/checkbox-tri-state/test-17-read-checkbox-group-interaction.html
diff --git a/tests/checkbox-tri-state/test-17-read-checkbox-group-interaction.json b/build/tests/checkbox-tri-state/test-17-read-checkbox-group-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-17-read-checkbox-group-interaction.json
rename to build/tests/checkbox-tri-state/test-17-read-checkbox-group-interaction.json
diff --git a/tests/checkbox-tri-state/test-18-read-checkbox-group-interaction.html b/build/tests/checkbox-tri-state/test-18-read-checkbox-group-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-18-read-checkbox-group-interaction.html
rename to build/tests/checkbox-tri-state/test-18-read-checkbox-group-interaction.html
diff --git a/tests/checkbox-tri-state/test-18-read-checkbox-group-interaction.json b/build/tests/checkbox-tri-state/test-18-read-checkbox-group-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-18-read-checkbox-group-interaction.json
rename to build/tests/checkbox-tri-state/test-18-read-checkbox-group-interaction.json
diff --git a/tests/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.html b/build/tests/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.html
similarity index 100%
rename from tests/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.html
rename to build/tests/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.html
diff --git a/tests/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.json b/build/tests/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.json
similarity index 100%
rename from tests/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.json
rename to build/tests/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.json
diff --git a/tests/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.html b/build/tests/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.html
similarity index 100%
rename from tests/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.html
rename to build/tests/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.html
diff --git a/tests/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.json b/build/tests/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.json
similarity index 100%
rename from tests/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.json
rename to build/tests/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.json
diff --git a/tests/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.html b/build/tests/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.html
rename to build/tests/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.html
diff --git a/tests/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.json b/build/tests/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.json
rename to build/tests/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.json
diff --git a/tests/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.html b/build/tests/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.html
rename to build/tests/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.html
diff --git a/tests/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.json b/build/tests/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.json
rename to build/tests/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.json
diff --git a/tests/checkbox-tri-state/test-23-navigate-forwards-into-checkbox-group-interaction.html b/build/tests/checkbox-tri-state/test-23-navigate-forwards-into-checkbox-group-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-23-navigate-forwards-into-checkbox-group-interaction.html
rename to build/tests/checkbox-tri-state/test-23-navigate-forwards-into-checkbox-group-interaction.html
diff --git a/tests/checkbox-tri-state/test-23-navigate-forwards-into-checkbox-group-interaction.json b/build/tests/checkbox-tri-state/test-23-navigate-forwards-into-checkbox-group-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-23-navigate-forwards-into-checkbox-group-interaction.json
rename to build/tests/checkbox-tri-state/test-23-navigate-forwards-into-checkbox-group-interaction.json
diff --git a/tests/checkbox-tri-state/test-24-navigate-backwards-out-of-checkbox-group-interaction.html b/build/tests/checkbox-tri-state/test-24-navigate-backwards-out-of-checkbox-group-interaction.html
similarity index 100%
rename from tests/checkbox-tri-state/test-24-navigate-backwards-out-of-checkbox-group-interaction.html
rename to build/tests/checkbox-tri-state/test-24-navigate-backwards-out-of-checkbox-group-interaction.html
diff --git a/tests/checkbox-tri-state/test-24-navigate-backwards-out-of-checkbox-group-interaction.json b/build/tests/checkbox-tri-state/test-24-navigate-backwards-out-of-checkbox-group-interaction.json
similarity index 100%
rename from tests/checkbox-tri-state/test-24-navigate-backwards-out-of-checkbox-group-interaction.json
rename to build/tests/checkbox-tri-state/test-24-navigate-backwards-out-of-checkbox-group-interaction.json
diff --git a/tests/checkbox/commands.json b/build/tests/checkbox/commands.json
similarity index 100%
rename from tests/checkbox/commands.json
rename to build/tests/checkbox/commands.json
diff --git a/tests/checkbox/index.html b/build/tests/checkbox/index.html
similarity index 100%
rename from tests/checkbox/index.html
rename to build/tests/checkbox/index.html
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
new file mode 100644
index 000000000..5aa42a3c0
--- /dev/null
+++ b/build/tests/checkbox/reference/2020-11-23_175030/checkbox-1/checkbox-1.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" >
+  <title>Checkbox Example (Two State) | WAI-ARIA Authoring Practices 1.2</title>
+
+  
+  <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css" />
+  <link rel="stylesheet" href="../../css/core.css" />
+  <script src="../../js/examples.js"></script>
+  <script src="../../js/highlight.pack.js"></script>
+  <script src="../../js/app.js"></script>
+
+  <link href="../css/checkbox.css" rel="stylesheet" />
+  <script src="js/checkbox.js" type="text/javascript"></script>
+</head>
+<body>
+  <h1>Checkbox Example (Two State)</h1>
+
+  <div id="ex1">
+        <h3 id="id-group-label">Sandwich Condiments</h3>
+        <div role="group" aria-labelledby="id-group-label">
+          <ul class="checkboxes">
+            <li><div role="checkbox" aria-checked="false" tabindex= "0">Lettuce</div></li>
+            <li><div role="checkbox" aria-checked="true"  tabindex= "0">Tomato</div></li>
+            <li><div role="checkbox" aria-checked="false" tabindex= "0">Mustard</div></li>
+            <li><div role="checkbox" aria-checked="false" tabindex= "0">Sprouts</div></li>
+          </ul>
+        </div>
+
+        <script type="text/javascript">
+          window.onload = function () {
+
+            var checkboxes = document.querySelectorAll('[role="checkbox"]');
+
+            for (var i = 0; i < checkboxes.length; i++) {
+              var cb = new Checkbox(checkboxes[i]);
+              cb.init();
+            }
+
+          };
+        </script>
+
+      </div>
+</body>
+</html>
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
new file mode 100644
index 000000000..092727e97
--- /dev/null
+++ b/build/tests/checkbox/reference/2020-11-23_175030/checkbox-1/js/checkbox.js
@@ -0,0 +1,80 @@
+/*
+ *   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
new file mode 100644
index 000000000..d2ca7f9a8
--- /dev/null
+++ b/build/tests/checkbox/reference/2020-11-23_175030/checkbox-2/js/checkboxMixed.js
@@ -0,0 +1,149 @@
+/*
+ *   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
new file mode 100644
index 000000000..b44c95eeb
--- /dev/null
+++ b/build/tests/checkbox/reference/2020-11-23_175030/checkbox-2/js/controlledCheckbox.js
@@ -0,0 +1,100 @@
+/*
+ *   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
new file mode 100644
index 000000000..3eb6b7dc8
--- /dev/null
+++ b/build/tests/checkbox/reference/2020-11-23_175030/css/checkbox.css
@@ -0,0 +1,89 @@
+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/tests/checkbox/test-01-navigate-to-unchecked-checkbox-reading.html b/build/tests/checkbox/test-01-navigate-to-unchecked-checkbox-reading.html
similarity index 100%
rename from tests/checkbox/test-01-navigate-to-unchecked-checkbox-reading.html
rename to build/tests/checkbox/test-01-navigate-to-unchecked-checkbox-reading.html
diff --git a/tests/checkbox/test-01-navigate-to-unchecked-checkbox-reading.json b/build/tests/checkbox/test-01-navigate-to-unchecked-checkbox-reading.json
similarity index 100%
rename from tests/checkbox/test-01-navigate-to-unchecked-checkbox-reading.json
rename to build/tests/checkbox/test-01-navigate-to-unchecked-checkbox-reading.json
diff --git a/tests/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.html b/build/tests/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.html
rename to build/tests/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.html
diff --git a/tests/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.json b/build/tests/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.json
rename to build/tests/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.json
diff --git a/tests/checkbox/test-03-navigate-to-unchecked-checkbox-interaction.html b/build/tests/checkbox/test-03-navigate-to-unchecked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox/test-03-navigate-to-unchecked-checkbox-interaction.html
rename to build/tests/checkbox/test-03-navigate-to-unchecked-checkbox-interaction.html
diff --git a/tests/checkbox/test-03-navigate-to-unchecked-checkbox-interaction.json b/build/tests/checkbox/test-03-navigate-to-unchecked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox/test-03-navigate-to-unchecked-checkbox-interaction.json
rename to build/tests/checkbox/test-03-navigate-to-unchecked-checkbox-interaction.json
diff --git a/tests/checkbox/test-04-navigate-to-checked-checkbox-reading.html b/build/tests/checkbox/test-04-navigate-to-checked-checkbox-reading.html
similarity index 100%
rename from tests/checkbox/test-04-navigate-to-checked-checkbox-reading.html
rename to build/tests/checkbox/test-04-navigate-to-checked-checkbox-reading.html
diff --git a/tests/checkbox/test-04-navigate-to-checked-checkbox-reading.json b/build/tests/checkbox/test-04-navigate-to-checked-checkbox-reading.json
similarity index 100%
rename from tests/checkbox/test-04-navigate-to-checked-checkbox-reading.json
rename to build/tests/checkbox/test-04-navigate-to-checked-checkbox-reading.json
diff --git a/tests/checkbox/test-05-navigate-to-checked-checkbox-interaction.html b/build/tests/checkbox/test-05-navigate-to-checked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox/test-05-navigate-to-checked-checkbox-interaction.html
rename to build/tests/checkbox/test-05-navigate-to-checked-checkbox-interaction.html
diff --git a/tests/checkbox/test-05-navigate-to-checked-checkbox-interaction.json b/build/tests/checkbox/test-05-navigate-to-checked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox/test-05-navigate-to-checked-checkbox-interaction.json
rename to build/tests/checkbox/test-05-navigate-to-checked-checkbox-interaction.json
diff --git a/tests/checkbox/test-06-navigate-to-checked-checkbox-interaction.html b/build/tests/checkbox/test-06-navigate-to-checked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox/test-06-navigate-to-checked-checkbox-interaction.html
rename to build/tests/checkbox/test-06-navigate-to-checked-checkbox-interaction.html
diff --git a/tests/checkbox/test-06-navigate-to-checked-checkbox-interaction.json b/build/tests/checkbox/test-06-navigate-to-checked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox/test-06-navigate-to-checked-checkbox-interaction.json
rename to build/tests/checkbox/test-06-navigate-to-checked-checkbox-interaction.json
diff --git a/tests/checkbox/test-07-operate-checkbox-reading.html b/build/tests/checkbox/test-07-operate-checkbox-reading.html
similarity index 100%
rename from tests/checkbox/test-07-operate-checkbox-reading.html
rename to build/tests/checkbox/test-07-operate-checkbox-reading.html
diff --git a/tests/checkbox/test-07-operate-checkbox-reading.json b/build/tests/checkbox/test-07-operate-checkbox-reading.json
similarity index 100%
rename from tests/checkbox/test-07-operate-checkbox-reading.json
rename to build/tests/checkbox/test-07-operate-checkbox-reading.json
diff --git a/tests/checkbox/test-08-operate-checkbox-interaction.html b/build/tests/checkbox/test-08-operate-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox/test-08-operate-checkbox-interaction.html
rename to build/tests/checkbox/test-08-operate-checkbox-interaction.html
diff --git a/tests/checkbox/test-08-operate-checkbox-interaction.json b/build/tests/checkbox/test-08-operate-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox/test-08-operate-checkbox-interaction.json
rename to build/tests/checkbox/test-08-operate-checkbox-interaction.json
diff --git a/tests/checkbox/test-09-operate-checkbox-interaction.html b/build/tests/checkbox/test-09-operate-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox/test-09-operate-checkbox-interaction.html
rename to build/tests/checkbox/test-09-operate-checkbox-interaction.html
diff --git a/tests/checkbox/test-09-operate-checkbox-interaction.json b/build/tests/checkbox/test-09-operate-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox/test-09-operate-checkbox-interaction.json
rename to build/tests/checkbox/test-09-operate-checkbox-interaction.json
diff --git a/tests/checkbox/test-10-read-unchecked-checkbox-reading.html b/build/tests/checkbox/test-10-read-unchecked-checkbox-reading.html
similarity index 100%
rename from tests/checkbox/test-10-read-unchecked-checkbox-reading.html
rename to build/tests/checkbox/test-10-read-unchecked-checkbox-reading.html
diff --git a/tests/checkbox/test-10-read-unchecked-checkbox-reading.json b/build/tests/checkbox/test-10-read-unchecked-checkbox-reading.json
similarity index 100%
rename from tests/checkbox/test-10-read-unchecked-checkbox-reading.json
rename to build/tests/checkbox/test-10-read-unchecked-checkbox-reading.json
diff --git a/tests/checkbox/test-11-read-unchecked-checkbox-interaction.html b/build/tests/checkbox/test-11-read-unchecked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox/test-11-read-unchecked-checkbox-interaction.html
rename to build/tests/checkbox/test-11-read-unchecked-checkbox-interaction.html
diff --git a/tests/checkbox/test-11-read-unchecked-checkbox-interaction.json b/build/tests/checkbox/test-11-read-unchecked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox/test-11-read-unchecked-checkbox-interaction.json
rename to build/tests/checkbox/test-11-read-unchecked-checkbox-interaction.json
diff --git a/tests/checkbox/test-12-read-unchecked-checkbox-interaction.html b/build/tests/checkbox/test-12-read-unchecked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox/test-12-read-unchecked-checkbox-interaction.html
rename to build/tests/checkbox/test-12-read-unchecked-checkbox-interaction.html
diff --git a/tests/checkbox/test-12-read-unchecked-checkbox-interaction.json b/build/tests/checkbox/test-12-read-unchecked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox/test-12-read-unchecked-checkbox-interaction.json
rename to build/tests/checkbox/test-12-read-unchecked-checkbox-interaction.json
diff --git a/tests/checkbox/test-13-read-checked-checkbox-reading.html b/build/tests/checkbox/test-13-read-checked-checkbox-reading.html
similarity index 100%
rename from tests/checkbox/test-13-read-checked-checkbox-reading.html
rename to build/tests/checkbox/test-13-read-checked-checkbox-reading.html
diff --git a/tests/checkbox/test-13-read-checked-checkbox-reading.json b/build/tests/checkbox/test-13-read-checked-checkbox-reading.json
similarity index 100%
rename from tests/checkbox/test-13-read-checked-checkbox-reading.json
rename to build/tests/checkbox/test-13-read-checked-checkbox-reading.json
diff --git a/tests/checkbox/test-14-read-checked-checkbox-interaction.html b/build/tests/checkbox/test-14-read-checked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox/test-14-read-checked-checkbox-interaction.html
rename to build/tests/checkbox/test-14-read-checked-checkbox-interaction.html
diff --git a/tests/checkbox/test-14-read-checked-checkbox-interaction.json b/build/tests/checkbox/test-14-read-checked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox/test-14-read-checked-checkbox-interaction.json
rename to build/tests/checkbox/test-14-read-checked-checkbox-interaction.json
diff --git a/tests/checkbox/test-15-read-checked-checkbox-interaction.html b/build/tests/checkbox/test-15-read-checked-checkbox-interaction.html
similarity index 100%
rename from tests/checkbox/test-15-read-checked-checkbox-interaction.html
rename to build/tests/checkbox/test-15-read-checked-checkbox-interaction.html
diff --git a/tests/checkbox/test-15-read-checked-checkbox-interaction.json b/build/tests/checkbox/test-15-read-checked-checkbox-interaction.json
similarity index 100%
rename from tests/checkbox/test-15-read-checked-checkbox-interaction.json
rename to build/tests/checkbox/test-15-read-checked-checkbox-interaction.json
diff --git a/tests/checkbox/test-16-read-checkbox-group-reading.html b/build/tests/checkbox/test-16-read-checkbox-group-reading.html
similarity index 100%
rename from tests/checkbox/test-16-read-checkbox-group-reading.html
rename to build/tests/checkbox/test-16-read-checkbox-group-reading.html
diff --git a/tests/checkbox/test-16-read-checkbox-group-reading.json b/build/tests/checkbox/test-16-read-checkbox-group-reading.json
similarity index 100%
rename from tests/checkbox/test-16-read-checkbox-group-reading.json
rename to build/tests/checkbox/test-16-read-checkbox-group-reading.json
diff --git a/tests/checkbox/test-17-read-checkbox-group-interaction.html b/build/tests/checkbox/test-17-read-checkbox-group-interaction.html
similarity index 100%
rename from tests/checkbox/test-17-read-checkbox-group-interaction.html
rename to build/tests/checkbox/test-17-read-checkbox-group-interaction.html
diff --git a/tests/checkbox/test-17-read-checkbox-group-interaction.json b/build/tests/checkbox/test-17-read-checkbox-group-interaction.json
similarity index 100%
rename from tests/checkbox/test-17-read-checkbox-group-interaction.json
rename to build/tests/checkbox/test-17-read-checkbox-group-interaction.json
diff --git a/tests/checkbox/test-18-read-checkbox-group-interaction.html b/build/tests/checkbox/test-18-read-checkbox-group-interaction.html
similarity index 100%
rename from tests/checkbox/test-18-read-checkbox-group-interaction.html
rename to build/tests/checkbox/test-18-read-checkbox-group-interaction.html
diff --git a/tests/checkbox/test-18-read-checkbox-group-interaction.json b/build/tests/checkbox/test-18-read-checkbox-group-interaction.json
similarity index 100%
rename from tests/checkbox/test-18-read-checkbox-group-interaction.json
rename to build/tests/checkbox/test-18-read-checkbox-group-interaction.json
diff --git a/tests/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.html b/build/tests/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.html
similarity index 100%
rename from tests/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.html
rename to build/tests/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.html
diff --git a/tests/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.json b/build/tests/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.json
similarity index 100%
rename from tests/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.json
rename to build/tests/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.json
diff --git a/tests/checkbox/test-20-navigate-sequentially-through-checkbox-group-interaction.html b/build/tests/checkbox/test-20-navigate-sequentially-through-checkbox-group-interaction.html
similarity index 100%
rename from tests/checkbox/test-20-navigate-sequentially-through-checkbox-group-interaction.html
rename to build/tests/checkbox/test-20-navigate-sequentially-through-checkbox-group-interaction.html
diff --git a/tests/checkbox/test-20-navigate-sequentially-through-checkbox-group-interaction.json b/build/tests/checkbox/test-20-navigate-sequentially-through-checkbox-group-interaction.json
similarity index 100%
rename from tests/checkbox/test-20-navigate-sequentially-through-checkbox-group-interaction.json
rename to build/tests/checkbox/test-20-navigate-sequentially-through-checkbox-group-interaction.json
diff --git a/tests/checkbox/test-21-navigate-into-checkbox-group-reading.html b/build/tests/checkbox/test-21-navigate-into-checkbox-group-reading.html
similarity index 100%
rename from tests/checkbox/test-21-navigate-into-checkbox-group-reading.html
rename to build/tests/checkbox/test-21-navigate-into-checkbox-group-reading.html
diff --git a/tests/checkbox/test-21-navigate-into-checkbox-group-reading.json b/build/tests/checkbox/test-21-navigate-into-checkbox-group-reading.json
similarity index 100%
rename from tests/checkbox/test-21-navigate-into-checkbox-group-reading.json
rename to build/tests/checkbox/test-21-navigate-into-checkbox-group-reading.json
diff --git a/tests/checkbox/test-22-navigate-into-checkbox-group-interaction.html b/build/tests/checkbox/test-22-navigate-into-checkbox-group-interaction.html
similarity index 100%
rename from tests/checkbox/test-22-navigate-into-checkbox-group-interaction.html
rename to build/tests/checkbox/test-22-navigate-into-checkbox-group-interaction.html
diff --git a/tests/checkbox/test-22-navigate-into-checkbox-group-interaction.json b/build/tests/checkbox/test-22-navigate-into-checkbox-group-interaction.json
similarity index 100%
rename from tests/checkbox/test-22-navigate-into-checkbox-group-interaction.json
rename to build/tests/checkbox/test-22-navigate-into-checkbox-group-interaction.json
diff --git a/tests/checkbox/test-23-navigate-into-checkbox-group-interaction.html b/build/tests/checkbox/test-23-navigate-into-checkbox-group-interaction.html
similarity index 100%
rename from tests/checkbox/test-23-navigate-into-checkbox-group-interaction.html
rename to build/tests/checkbox/test-23-navigate-into-checkbox-group-interaction.html
diff --git a/tests/checkbox/test-23-navigate-into-checkbox-group-interaction.json b/build/tests/checkbox/test-23-navigate-into-checkbox-group-interaction.json
similarity index 100%
rename from tests/checkbox/test-23-navigate-into-checkbox-group-interaction.json
rename to build/tests/checkbox/test-23-navigate-into-checkbox-group-interaction.json
diff --git a/tests/checkbox/test-24-navigate-out-of-checkbox-group-reading.html b/build/tests/checkbox/test-24-navigate-out-of-checkbox-group-reading.html
similarity index 100%
rename from tests/checkbox/test-24-navigate-out-of-checkbox-group-reading.html
rename to build/tests/checkbox/test-24-navigate-out-of-checkbox-group-reading.html
diff --git a/tests/checkbox/test-24-navigate-out-of-checkbox-group-reading.json b/build/tests/checkbox/test-24-navigate-out-of-checkbox-group-reading.json
similarity index 100%
rename from tests/checkbox/test-24-navigate-out-of-checkbox-group-reading.json
rename to build/tests/checkbox/test-24-navigate-out-of-checkbox-group-reading.json
diff --git a/tests/checkbox/test-25-navigate-out-of-checkbox-group-interaction.html b/build/tests/checkbox/test-25-navigate-out-of-checkbox-group-interaction.html
similarity index 100%
rename from tests/checkbox/test-25-navigate-out-of-checkbox-group-interaction.html
rename to build/tests/checkbox/test-25-navigate-out-of-checkbox-group-interaction.html
diff --git a/tests/checkbox/test-25-navigate-out-of-checkbox-group-interaction.json b/build/tests/checkbox/test-25-navigate-out-of-checkbox-group-interaction.json
similarity index 100%
rename from tests/checkbox/test-25-navigate-out-of-checkbox-group-interaction.json
rename to build/tests/checkbox/test-25-navigate-out-of-checkbox-group-interaction.json
diff --git a/tests/checkbox/test-26-navigate-out-of-checkbox-group-interaction.html b/build/tests/checkbox/test-26-navigate-out-of-checkbox-group-interaction.html
similarity index 100%
rename from tests/checkbox/test-26-navigate-out-of-checkbox-group-interaction.html
rename to build/tests/checkbox/test-26-navigate-out-of-checkbox-group-interaction.html
diff --git a/tests/checkbox/test-26-navigate-out-of-checkbox-group-interaction.json b/build/tests/checkbox/test-26-navigate-out-of-checkbox-group-interaction.json
similarity index 100%
rename from tests/checkbox/test-26-navigate-out-of-checkbox-group-interaction.json
rename to build/tests/checkbox/test-26-navigate-out-of-checkbox-group-interaction.json
diff --git a/tests/combobox-autocomplete-both/commands.json b/build/tests/combobox-autocomplete-both/commands.json
similarity index 100%
rename from tests/combobox-autocomplete-both/commands.json
rename to build/tests/combobox-autocomplete-both/commands.json
diff --git a/tests/combobox-autocomplete-both/index.html b/build/tests/combobox-autocomplete-both/index.html
similarity index 100%
rename from tests/combobox-autocomplete-both/index.html
rename to build/tests/combobox-autocomplete-both/index.html
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
new file mode 100644
index 000000000..ecd3b4ba2
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/combobox-autocomplete-both.html
@@ -0,0 +1,528 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Editable Combobox With Both List and Inline Autocomplete Example | WAI-ARIA Authoring Practices 1.2</title>
+
+<!--  Core js and css shared by all examples; do not modify when using this template. -->
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script type="text/javascript" src="../js/examples.js"></script>
+<script type="text/javascript" src="../js/highlight.pack.js"></script>
+<script type="text/javascript" src="../js/app.js"></script>
+
+<!--  js and css for this example. -->
+<link rel="stylesheet" href="css/combobox-autocomplete.css">
+<script type="text/javascript" src="js/combobox-autocomplete.js"></script>
+</head>
+<body>
+  <nav aria-label="Related Links" class="feedback">
+    <ul>
+      <li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
+      <li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
+      <li><a href="https://github.com/w3c/aria-practices/projects/7">Related Issues</a></li>
+      <li><a href="../../#combobox">Design Pattern</a></li>
+    </ul>
+  </nav>
+  <main>
+    <h1>Editable Combobox With Both List and Inline Autocomplete Example</h1>
+    <p>
+      The below combobox for choosing the name of a US state or territory demonstrates the
+      <a href="../../#combobox">design pattern for combobox.</a>
+      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.
+    </p>
+    <p>Similar examples include:</p>
+    <ul>
+      <li><a href="combobox-select-only.html">Select-Only Combobox</a>: A single-select combobox with no text input that is functionally similar to an HTML <code>select</code> element.</li>
+      <li><a href="combobox-autocomplete-list.html">Editable Combobox with List Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with manual selection</q>.</li>
+      <li><a href="combobox-autocomplete-none.html">Editable Combobox Without Autocomplete</a>: An editable combobox that demonstrates the behavior associated with <code>aria-autocomplete=none</code>.</li>
+      <li><a href="grid-combo.html">Editable Combobox with Grid Popup</a>: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.</li>
+      <li><a href="combobox-datepicker.html">Date Picker Combobox</a>: An editable date input combobox that opens a dialog containing a calendar grid and buttons for navigating by month and year.</li>
+    </ul>
+    <section>
+      <h2 id="ex_label">Example</h2>
+      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+      <div id="ex1">
+        <label for="cb1-input">State</label>
+        <div class="combobox combobox-list">
+          <div class="group">
+            <input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="both"
+              aria-expanded="false" aria-controls="cb1-listbox">
+            <button type="button" id="cb1-button" aria-label="States" aria-expanded="false" aria-controls="cb1-listbox" tabindex="-1">
+              <span class="arrow">
+                <svg width="18" height="16" aria-hidden="true" focusable="false">
+                  <polygon class="outline" points="1,4 17,4 9,15"></polygon>
+                  <polygon class="arrow" points="3,5 15,5 9,13"></polygon>
+                </svg>
+              </span>
+            </button>
+          </div>
+          <ul id="cb1-listbox" role="listbox" aria-label="States">
+            <li id="lb1-al" role="option">Alabama</li>
+            <li id="lb1-ak" role="option">Alaska</li>
+            <li id="lb1-as" role="option">American Samoa</li>
+            <li id="lb1-az" role="option">Arizona</li>
+            <li id="lb1-ar" role="option">Arkansas</li>
+            <li id="lb1-ca" role="option">California</li>
+            <li id="lb1-co" role="option">Colorado</li>
+            <li id="lb1-ct" role="option">Connecticut</li>
+            <li id="lb1-de" role="option">Delaware</li>
+            <li id="lb1-dc" role="option">District of Columbia</li>
+            <li id="lb1-fl" role="option">Florida</li>
+            <li id="lb1-ga" role="option">Georgia</li>
+            <li id="lb1-gm" role="option">Guam</li>
+            <li id="lb1-hi" role="option">Hawaii</li>
+            <li id="lb1-id" role="option">Idaho</li>
+            <li id="lb1-il" role="option">Illinois</li>
+            <li id="lb1-in" role="option">Indiana</li>
+            <li id="lb1-ia" role="option">Iowa</li>
+            <li id="lb1-ks" role="option">Kansas</li>
+            <li id="lb1-ky" role="option">Kentucky</li>
+            <li id="lb1-la" role="option">Louisiana</li>
+            <li id="lb1-me" role="option">Maine</li>
+            <li id="lb1-md" role="option">Maryland</li>
+            <li id="lb1-ma" role="option">Massachusetts</li>
+            <li id="lb1-mi" role="option">Michigan</li>
+            <li id="lb1-mn" role="option">Minnesota</li>
+            <li id="lb1-ms" role="option">Mississippi</li>
+            <li id="lb1-mo" role="option">Missouri</li>
+            <li id="lb1-mt" role="option">Montana</li>
+            <li id="lb1-ne" role="option">Nebraska</li>
+            <li id="lb1-nv" role="option">Nevada</li>
+            <li id="lb1-nh" role="option">New Hampshire</li>
+            <li id="lb1-nj" role="option">New Jersey</li>
+            <li id="lb1-nm" role="option">New Mexico</li>
+            <li id="lb1-ny" role="option">New York</li>
+            <li id="lb1-nc" role="option">North Carolina</li>
+            <li id="lb1-nd" role="option">North Dakota</li>
+            <li id="lb1-mp" role="option">Northern Marianas Islands</li>
+            <li id="lb1-oh" role="option">Ohio</li>
+            <li id="lb1-ok" role="option">Oklahoma</li>
+            <li id="lb1-or" role="option">Oregon</li>
+            <li id="lb1-pa" role="option">Pennsylvania</li>
+            <li id="lb1-pr" role="option">Puerto Rico</li>
+            <li id="lb1-ri" role="option">Rhode Island</li>
+            <li id="lb1-sc" role="option">South Carolina</li>
+            <li id="lb1-sd" role="option">South Dakota</li>
+            <li id="lb1-tn" role="option">Tennessee</li>
+            <li id="lb1-tx" role="option">Texas</li>
+            <li id="lb1-ut" role="option">Utah</li>
+            <li id="lb1-ve" role="option">Vermont</li>
+            <li id="lb1-va" role="option">Virginia</li>
+            <li id="lb1-vi" role="option">Virgin Islands</li>
+            <li id="lb1-wa" role="option">Washington</li>
+            <li id="lb1-wv" role="option">West Virginia</li>
+            <li id="lb1-wi" role="option">Wisconsin</li>
+            <li id="lb1-wy" role="option">Wyoming</li>
+          </ul>
+        </div>
+      </div>
+      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+    </section>
+
+    <section>
+      <h2 id="kbd_label">Keyboard Support</h2>
+      <p>
+      The example combobox on this page implements the following keyboard interface.
+        Other variations and options for the keyboard interface are described in the
+        <a href="../../#combobox_kbd_interaction">Keyboard Interaction section of the combobox design pattern.</a>
+      </p>
+      <h3 id="kbd_label_textbox">Textbox</h3>
+      <table aria-labelledby="kbd_label_textbox kbd_label" class="def">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Function</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="textbox-key-down-arrow">
+            <th><kbd>Down Arrow</kbd></th>
+            <td>
+              <ul>
+                <li>If the listbox is displayed and a suggestion is selected, moves visual focus to the next suggested value.</li>
+                <li>If the textbox is empty and the listbox is not displayed, opens the listbox and moves visual focus to the first option.</li>
+                <li>In both cases DOM focus remains on the textbox.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="textbox-key-alt-down-arrow">
+            <th><kbd>Alt + Down Arrow</kbd></th>
+            <td>
+                Opens the listbox without moving focus or changing selection.
+            </td>
+          </tr>
+          <tr data-test-id="textbox-key-up-arrow">
+            <th><kbd>Up Arrow</kbd></th>
+            <td>
+              <ul>
+                <li>If the listbox is displayed and a suggestion is selected, moves visual focus to the last suggested value.</li>
+                <li>If the textbox is empty, first opens the listbox if it is not already displayed and then moves visual focus to the last option.</li>
+                <li>In both cases DOM focus remains on the textbox.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="textbox-key-enter">
+            <th><kbd>Enter</kbd></th>
+            <td>
+              <ul>
+                <li>Sets the textbox value to the content of the selected option.</li>
+                <li>Closes the listbox.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="textbox-key-escape">
+            <th><kbd>Escape</kbd></th>
+            <td>
+              <ul>
+                <li>If the listbox is displayed, closes it.</li>
+                <li>If the listbox is not displayed, clears the textbox.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="standard-single-line-editing-keys">
+            <th>Standard single line text editing keys</th>
+            <td>
+              <ul>
+                <li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift + Right Arrow</kbd>.</li>
+                <li>An HTML <code>input</code> with <code>type="text"</code> is used for the textbox so the browser will provide platform-specific editing keys.</li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <h3 id="kbd_label_listbox">Listbox Popup</h3>
+      <p>
+        <strong>NOTE:</strong> When visual focus is in the listbox, DOM focus remains on the textbox and the value of <code>aria-activedescendant</code> 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
+        <a href="../../#kbd_focus_activedescendant">Using aria-activedescendant to Manage Focus.</a>
+      </p>
+      <table aria-labelledby="kbd_label_listbox kbd_label" class="def">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Function</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="listbox-key-enter">
+            <th><kbd>Enter</kbd></th>
+            <td>
+              <ul>
+                <li>Sets the textbox value to the content of the focused option in the listbox.</li>
+                <li>Closes the listbox.</li>
+                <li>Sets visual focus on the textbox.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="listbox-key-escape">
+            <th><kbd>Escape</kbd></th>
+            <td>
+              <ul>
+                <li>Closes the listbox.</li>
+                <li>Sets visual focus on the textbox.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="listbox-key-down-arrow">
+            <th><kbd>Down Arrow</kbd></th>
+            <td>
+              <ul>
+                <li>Moves visual focus to the next option.</li>
+                <li>If visual focus is on the last option, moves visual focus to the first option.</li>
+                <li>Note: This wrapping behavior is useful when <kbd>Home</kbd> and <kbd>End</kbd> move the editing cursor as described below.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="listbox-key-up-arrow">
+            <th><kbd>Up Arrow</kbd></th>
+            <td>
+              <ul>
+                <li>Moves visual focus to the previous option.</li>
+                <li>If visual focus is on the first option, moves visual focus to the last option.</li>
+                <li>Note: This wrapping behavior is useful when <kbd>Home</kbd> and <kbd>End</kbd> move the editing cursor as described below.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="listbox-key-right-arrow">
+            <th><kbd>Right Arrow</kbd></th>
+            <td>Moves visual focus to the textbox and moves the editing cursor one character to the right.</td>
+          </tr>
+          <tr data-test-id="listbox-key-left-arrow">
+            <th><kbd>Left Arrow</kbd></th>
+            <td>Moves visual focus to the textbox and moves the editing cursor one character to the left.</td>
+          </tr>
+          <tr data-test-id="listbox-key-home">
+            <th><kbd>Home</kbd></th>
+            <td>Moves visual focus to the textbox and places the editing cursor at the beginning of the field.</td>
+          </tr>
+          <tr data-test-id="listbox-key-end">
+            <th><kbd>End</kbd></th>
+            <td>Moves visual focus to the textbox and places the editing cursor at the end of the field.</td>
+          </tr>
+          <tr data-test-id="listbox-characters">
+            <th>Printable Characters</th>
+            <td>
+              <ul>
+                <li>Moves visual focus to the textbox.</li>
+                <li>Types the character in the textbox.</li>
+                <li>Options in the listbox are filtered based on characters in the textbox.</li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <h3 id="kbd_label_button">Button</h3>
+      <p>
+        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.
+      </p>
+
+    </section>
+
+    <section>
+      <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
+      <p>
+        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
+        <a href="../../#combobox_roles_states_props">Roles, States, and Properties section of the combobox design pattern.</a>
+      </p>
+      <h3 id="rps_label_textbox">Textbox</h3>
+      <table aria-labelledby="rps_label_textbox rps_label" class="data attributes">
+        <thead>
+          <tr>
+            <th scope="col">Role</th>
+            <th scope="col">Attribute</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="combobox-role">
+            <th scope="row">
+              <code>combobox</code>
+            </th>
+            <td></td>
+            <td><code>input[type="text"]</code></td>
+            <td>Identifies the input as a combobox.</td>
+          </tr>
+          <tr data-test-id="combobox-aria-autocomplete">
+            <td></td>
+            <th scope="row">
+              <code>aria-autocomplete="both"</code>
+            </th>
+            <td><code>input[type="text"]</code></td>
+            <td>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.</td>
+          </tr>
+          <tr data-test-id="combobox-aria-controls">
+            <td></td>
+            <th scope="row">
+              <code>aria-controls="#IDREF"</code>
+            </th>
+            <td><code>input[type="text"]</code></td>
+            <td>Identifies the element that serves as the popup.</td>
+          </tr>
+          <tr data-test-id="combobox-aria-expanded">
+            <td></td>
+            <th scope="row">
+              <code>aria-expanded="false"</code>
+            </th>
+            <td><code>input[type="text"]</code></td>
+            <td>Indicates that the popup element <strong>is not</strong> displayed.</td>
+          </tr>
+          <tr data-test-id="combobox-aria-expanded">
+            <td></td>
+            <th scope="row">
+              <code>aria-expanded="true"</code>
+            </th>
+            <td><code>input[type="text"]</code></td>
+            <td>Indicates that the popup element <strong>is</strong> displayed.</td>
+          </tr>
+          <tr data-test-id="combobox-id">
+            <td></td>
+            <th scope="row">
+              <code>id="string"</code>
+            </th>
+            <td><code>input[type="text"]</code></td>
+            <td>
+              <ul>
+                <li>Referenced by <code>for</code> attribute of <code>label</code> element to provide an accessible name.</li>
+                <li>Recommended naming method for HTML input elements because clicking label focuses input.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="combobox-aria-activedescendant">
+            <td></td>
+            <th scope="row">
+              <code>aria-activedescendant="IDREF"</code>
+            </th>
+            <td><code>input[type="text"]</code></td>
+            <td>
+              <ul>
+                <li>When an option in the listbox is visually indicated as having keyboard focus, refers to that option.</li>
+                <li>When navigation keys, such as <kbd>Down Arrow</kbd>, are pressed, the JavaScript changes the value.</li>
+                <li>Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the <code>input</code> element.</li>
+                <li>
+                  For more information about this focus management technique, see
+                  <a href="../../#kbd_focus_activedescendant">Using aria-activedescendant to Manage Focus.</a>
+                </li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <h3 id="rps_label_listbox">Listbox Popup</h3>
+      <table aria-labelledby="rps_label_listbox rps_label" class="data attributes">
+        <thead>
+          <tr>
+            <th scope="col">Role</th>
+            <th scope="col">Attribute</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="listbox-role">
+            <th scope="row">
+              <code>listbox</code>
+            </th>
+            <td></td>
+            <td>
+              <code>ul</code>
+            </td>
+            <td>Identifies the <code>ul</code> element as a <code>listbox</code>.</td>
+          </tr>
+          <tr data-test-id="listbox-aria-label">
+            <td></td>
+            <th scope="row">
+              <code>aria-label="States"</code>
+            </th>
+            <td><code>ul</code></td>
+            <td>Provides a label for the <code>listbox</code>.</td>
+          </tr>
+          <tr data-test-id="option-role">
+            <th scope="row">
+              <code>option</code>
+            </th>
+            <td></td>
+            <td><code>li</code></td>
+            <td>
+              <ul>
+                <li>Identifies the element as a <code>listbox</code> <code>option</code>.</li>
+                <li>The text content of the element provides the accessible name of the <code>option</code>.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="option-aria-selected">
+            <td></td>
+            <th scope="row">
+              <code>aria-selected="true"</code>
+            </th>
+            <td><code>li</code></td>
+            <td>
+              <ul>
+                <li>Specified on an option in the listbox when it is visually highlighted as selected.</li>
+                <li>Occurs when an option in the list is referenced by <code>aria-activedescendant</code> and when focus is in the textbox and the first option is automatically selected.</li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h3 id="rps_label_button">Button</h3>
+      <table aria-labelledby="rps_label_button rps_label" class="data attributes">
+        <thead>
+          <tr>
+            <th scope="col">Role</th>
+            <th scope="col">Attribute</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="button-tabindex">
+            <td></td>
+            <th scope="row">
+              <code>tabindex="-1"</code>
+            </th>
+            <td><code>button</code></td>
+            <td>Removes the button from the tab sequence of the page because its function is redundant with the keyboard operation of the combobox.</td>
+          </tr>
+          <tr data-test-id="button-aria-label">
+            <td></td>
+            <th scope="row">
+              <code>aria-label="States"</code>
+            </th>
+            <td><code>button</code></td>
+            <td>Provides a label for the <code>button</code>.</td>
+          </tr>
+          <tr data-test-id="button-aria-controls">
+            <td></td>
+            <th scope="row">
+              <code>aria-controls="#IDREF"</code>
+            </th>
+            <td><code>button</code></td>
+            <td>Identifies the element that serves as the popup.</td>
+          </tr>
+          <tr data-test-id="button-aria-expanded">
+            <td></td>
+            <th scope="row">
+              <code>aria-expanded="false"</code>
+            </th>
+            <td><code>button</code></td>
+            <td>Indicates that the popup element <strong>is not</strong> displayed.</td>
+          </tr>
+          <tr data-test-id="button-aria-expanded">
+            <td></td>
+            <th scope="row">
+              <code>aria-expanded="true"</code>
+            </th>
+            <td><code>button</code></td>
+            <td>Indicates that the popup element <strong>is</strong> displayed.</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section>
+      <h2>Javascript and CSS Source Code</h2>
+      <ul>
+        <li>
+          CSS:
+          <a href="css/combobox-autocomplete.css" type="text/css">combobox-autocomplete.css</a>
+        </li>
+        <li>
+          Javascript:
+          <a href="js/combobox-autocomplete.js" type="text/javascript">combobox-autocomplete.js</a>
+        </li>
+      </ul>
+    </section>
+
+    <section>
+      <h2 id="sc1_label">HTML Source Code</h2>
+      <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
+      <pre>
+        <code id="sc1"></code>
+      </pre>
+      <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
+      <!--
+        The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
+        It renders the HTML in the preceding pre element with ID 'sc1'.
+        -->
+      <script>
+        sourceCode.add('sc1', 'ex1');
+        sourceCode.make();
+      </script>
+    </section>
+  </main>
+  <nav>
+    <a href="../../#combobox">Combobox Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
+  </nav>
+</body>
+</html>
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
new file mode 100644
index 000000000..297f818b5
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/combobox-autocomplete.css
@@ -0,0 +1,114 @@
+.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
new file mode 100644
index 000000000..5370b4edf
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/combobox-datepicker.css
@@ -0,0 +1,249 @@
+.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
new file mode 100644
index 000000000..29324bea1
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/grid-combo.css
@@ -0,0 +1,88 @@
+.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
new file mode 100644
index 000000000..1d8beb3a7
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/css/select-only.css
@@ -0,0 +1,103 @@
+.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
new file mode 100644
index 000000000..95f013077
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/combobox-autocomplete.js
@@ -0,0 +1,573 @@
+/*
+ *   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
new file mode 100644
index 000000000..c791141ea
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/combobox-datepicker.js
@@ -0,0 +1,866 @@
+/*
+ *   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
new file mode 100644
index 000000000..8bc03ac77
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/grid-combo-example.js
@@ -0,0 +1,99 @@
+/*
+ *   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
new file mode 100644
index 000000000..78bc5c107
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/grid-combo.js
@@ -0,0 +1,297 @@
+/*
+ *   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
new file mode 100644
index 000000000..f8441cfc5
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-19_142152/js/select-only.js
@@ -0,0 +1,393 @@
+/*
+ *   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
new file mode 100644
index 000000000..9dfb621b0
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/combobox-autocomplete-both.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" >
+<title>Editable Combobox With Both List and Inline Autocomplete Example | WAI-ARIA Authoring Practices 1.2</title>
+
+
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css" />
+<link rel="stylesheet" href="../css/core.css" />
+<script type="text/javascript" src="../js/examples.js"></script>
+<script type="text/javascript" src="../js/highlight.pack.js"></script>
+<script type="text/javascript" src="../js/app.js"></script>
+
+
+<link rel="stylesheet" href="css/combobox-autocomplete.css" />
+<script type="text/javascript" src="js/combobox-autocomplete.js"></script>
+</head>
+<body>
+  <h1>Editable Combobox With Both List and Inline Autocomplete Example</h1>
+
+  <div id="ex1">
+        <label for="cb1-input">State</label>
+        <div class="combobox combobox-list">
+          <div class="group">
+            <input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="both"
+              aria-expanded="false" aria-controls="cb1-listbox" />
+            <button type="button" id="cb1-button" aria-label="States" aria-expanded="false" aria-controls="cb1-listbox" tabindex="-1">
+              <span class="arrow">
+                <svg width="18" height="16" aria-hidden="true" focusable="false">
+                  <polygon class="outline" points="1,4 17,4 9,15"></polygon>
+                  <polygon class="arrow" points="3,5 15,5 9,13"></polygon>
+                </svg>
+              </span>
+            </button>
+          </div>
+          <ul id="cb1-listbox" role="listbox" aria-label="States">
+            <li id="lb1-al" role="option">Alabama</li>
+            <li id="lb1-ak" role="option">Alaska</li>
+            <li id="lb1-as" role="option">American Samoa</li>
+            <li id="lb1-az" role="option">Arizona</li>
+            <li id="lb1-ar" role="option">Arkansas</li>
+            <li id="lb1-ca" role="option">California</li>
+            <li id="lb1-co" role="option">Colorado</li>
+            <li id="lb1-ct" role="option">Connecticut</li>
+            <li id="lb1-de" role="option">Delaware</li>
+            <li id="lb1-dc" role="option">District of Columbia</li>
+            <li id="lb1-fl" role="option">Florida</li>
+            <li id="lb1-ga" role="option">Georgia</li>
+            <li id="lb1-gm" role="option">Guam</li>
+            <li id="lb1-hi" role="option">Hawaii</li>
+            <li id="lb1-id" role="option">Idaho</li>
+            <li id="lb1-il" role="option">Illinois</li>
+            <li id="lb1-in" role="option">Indiana</li>
+            <li id="lb1-ia" role="option">Iowa</li>
+            <li id="lb1-ks" role="option">Kansas</li>
+            <li id="lb1-ky" role="option">Kentucky</li>
+            <li id="lb1-la" role="option">Louisiana</li>
+            <li id="lb1-me" role="option">Maine</li>
+            <li id="lb1-md" role="option">Maryland</li>
+            <li id="lb1-ma" role="option">Massachusetts</li>
+            <li id="lb1-mi" role="option">Michigan</li>
+            <li id="lb1-mn" role="option">Minnesota</li>
+            <li id="lb1-ms" role="option">Mississippi</li>
+            <li id="lb1-mo" role="option">Missouri</li>
+            <li id="lb1-mt" role="option">Montana</li>
+            <li id="lb1-ne" role="option">Nebraska</li>
+            <li id="lb1-nv" role="option">Nevada</li>
+            <li id="lb1-nh" role="option">New Hampshire</li>
+            <li id="lb1-nj" role="option">New Jersey</li>
+            <li id="lb1-nm" role="option">New Mexico</li>
+            <li id="lb1-ny" role="option">New York</li>
+            <li id="lb1-nc" role="option">North Carolina</li>
+            <li id="lb1-nd" role="option">North Dakota</li>
+            <li id="lb1-mp" role="option">Northern Marianas Islands</li>
+            <li id="lb1-oh" role="option">Ohio</li>
+            <li id="lb1-ok" role="option">Oklahoma</li>
+            <li id="lb1-or" role="option">Oregon</li>
+            <li id="lb1-pa" role="option">Pennsylvania</li>
+            <li id="lb1-pr" role="option">Puerto Rico</li>
+            <li id="lb1-ri" role="option">Rhode Island</li>
+            <li id="lb1-sc" role="option">South Carolina</li>
+            <li id="lb1-sd" role="option">South Dakota</li>
+            <li id="lb1-tn" role="option">Tennessee</li>
+            <li id="lb1-tx" role="option">Texas</li>
+            <li id="lb1-ut" role="option">Utah</li>
+            <li id="lb1-ve" role="option">Vermont</li>
+            <li id="lb1-va" role="option">Virginia</li>
+            <li id="lb1-vi" role="option">Virgin Islands</li>
+            <li id="lb1-wa" role="option">Washington</li>
+            <li id="lb1-wv" role="option">West Virginia</li>
+            <li id="lb1-wi" role="option">Wisconsin</li>
+            <li id="lb1-wy" role="option">Wyoming</li>
+          </ul>
+        </div>
+      </div>
+</body>
+</html>
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
new file mode 100644
index 000000000..297f818b5
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/combobox-autocomplete.css
@@ -0,0 +1,114 @@
+.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
new file mode 100644
index 000000000..5370b4edf
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/combobox-datepicker.css
@@ -0,0 +1,249 @@
+.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
new file mode 100644
index 000000000..29324bea1
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/grid-combo.css
@@ -0,0 +1,88 @@
+.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
new file mode 100644
index 000000000..1d8beb3a7
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/css/select-only.css
@@ -0,0 +1,103 @@
+.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
new file mode 100644
index 000000000..95f013077
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/combobox-autocomplete.js
@@ -0,0 +1,573 @@
+/*
+ *   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
new file mode 100644
index 000000000..c791141ea
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/combobox-datepicker.js
@@ -0,0 +1,866 @@
+/*
+ *   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
new file mode 100644
index 000000000..8bc03ac77
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/grid-combo-example.js
@@ -0,0 +1,99 @@
+/*
+ *   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
new file mode 100644
index 000000000..78bc5c107
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/grid-combo.js
@@ -0,0 +1,297 @@
+/*
+ *   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
new file mode 100644
index 000000000..f8441cfc5
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-20_134016/js/select-only.js
@@ -0,0 +1,393 @@
+/*
+ *   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
new file mode 100644
index 000000000..9dfb621b0
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/combobox-autocomplete-both.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" >
+<title>Editable Combobox With Both List and Inline Autocomplete Example | WAI-ARIA Authoring Practices 1.2</title>
+
+
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css" />
+<link rel="stylesheet" href="../css/core.css" />
+<script type="text/javascript" src="../js/examples.js"></script>
+<script type="text/javascript" src="../js/highlight.pack.js"></script>
+<script type="text/javascript" src="../js/app.js"></script>
+
+
+<link rel="stylesheet" href="css/combobox-autocomplete.css" />
+<script type="text/javascript" src="js/combobox-autocomplete.js"></script>
+</head>
+<body>
+  <h1>Editable Combobox With Both List and Inline Autocomplete Example</h1>
+
+  <div id="ex1">
+        <label for="cb1-input">State</label>
+        <div class="combobox combobox-list">
+          <div class="group">
+            <input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="both"
+              aria-expanded="false" aria-controls="cb1-listbox" />
+            <button type="button" id="cb1-button" aria-label="States" aria-expanded="false" aria-controls="cb1-listbox" tabindex="-1">
+              <span class="arrow">
+                <svg width="18" height="16" aria-hidden="true" focusable="false">
+                  <polygon class="outline" points="1,4 17,4 9,15"></polygon>
+                  <polygon class="arrow" points="3,5 15,5 9,13"></polygon>
+                </svg>
+              </span>
+            </button>
+          </div>
+          <ul id="cb1-listbox" role="listbox" aria-label="States">
+            <li id="lb1-al" role="option">Alabama</li>
+            <li id="lb1-ak" role="option">Alaska</li>
+            <li id="lb1-as" role="option">American Samoa</li>
+            <li id="lb1-az" role="option">Arizona</li>
+            <li id="lb1-ar" role="option">Arkansas</li>
+            <li id="lb1-ca" role="option">California</li>
+            <li id="lb1-co" role="option">Colorado</li>
+            <li id="lb1-ct" role="option">Connecticut</li>
+            <li id="lb1-de" role="option">Delaware</li>
+            <li id="lb1-dc" role="option">District of Columbia</li>
+            <li id="lb1-fl" role="option">Florida</li>
+            <li id="lb1-ga" role="option">Georgia</li>
+            <li id="lb1-gm" role="option">Guam</li>
+            <li id="lb1-hi" role="option">Hawaii</li>
+            <li id="lb1-id" role="option">Idaho</li>
+            <li id="lb1-il" role="option">Illinois</li>
+            <li id="lb1-in" role="option">Indiana</li>
+            <li id="lb1-ia" role="option">Iowa</li>
+            <li id="lb1-ks" role="option">Kansas</li>
+            <li id="lb1-ky" role="option">Kentucky</li>
+            <li id="lb1-la" role="option">Louisiana</li>
+            <li id="lb1-me" role="option">Maine</li>
+            <li id="lb1-md" role="option">Maryland</li>
+            <li id="lb1-ma" role="option">Massachusetts</li>
+            <li id="lb1-mi" role="option">Michigan</li>
+            <li id="lb1-mn" role="option">Minnesota</li>
+            <li id="lb1-ms" role="option">Mississippi</li>
+            <li id="lb1-mo" role="option">Missouri</li>
+            <li id="lb1-mt" role="option">Montana</li>
+            <li id="lb1-ne" role="option">Nebraska</li>
+            <li id="lb1-nv" role="option">Nevada</li>
+            <li id="lb1-nh" role="option">New Hampshire</li>
+            <li id="lb1-nj" role="option">New Jersey</li>
+            <li id="lb1-nm" role="option">New Mexico</li>
+            <li id="lb1-ny" role="option">New York</li>
+            <li id="lb1-nc" role="option">North Carolina</li>
+            <li id="lb1-nd" role="option">North Dakota</li>
+            <li id="lb1-mp" role="option">Northern Marianas Islands</li>
+            <li id="lb1-oh" role="option">Ohio</li>
+            <li id="lb1-ok" role="option">Oklahoma</li>
+            <li id="lb1-or" role="option">Oregon</li>
+            <li id="lb1-pa" role="option">Pennsylvania</li>
+            <li id="lb1-pr" role="option">Puerto Rico</li>
+            <li id="lb1-ri" role="option">Rhode Island</li>
+            <li id="lb1-sc" role="option">South Carolina</li>
+            <li id="lb1-sd" role="option">South Dakota</li>
+            <li id="lb1-tn" role="option">Tennessee</li>
+            <li id="lb1-tx" role="option">Texas</li>
+            <li id="lb1-ut" role="option">Utah</li>
+            <li id="lb1-ve" role="option">Vermont</li>
+            <li id="lb1-va" role="option">Virginia</li>
+            <li id="lb1-vi" role="option">Virgin Islands</li>
+            <li id="lb1-wa" role="option">Washington</li>
+            <li id="lb1-wv" role="option">West Virginia</li>
+            <li id="lb1-wi" role="option">Wisconsin</li>
+            <li id="lb1-wy" role="option">Wyoming</li>
+          </ul>
+        </div>
+      </div>
+</body>
+</html>
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
new file mode 100644
index 000000000..297f818b5
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/combobox-autocomplete.css
@@ -0,0 +1,114 @@
+.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
new file mode 100644
index 000000000..5370b4edf
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/combobox-datepicker.css
@@ -0,0 +1,249 @@
+.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
new file mode 100644
index 000000000..29324bea1
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/grid-combo.css
@@ -0,0 +1,88 @@
+.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
new file mode 100644
index 000000000..1d8beb3a7
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/css/select-only.css
@@ -0,0 +1,103 @@
+.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
new file mode 100644
index 000000000..95f013077
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/combobox-autocomplete.js
@@ -0,0 +1,573 @@
+/*
+ *   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
new file mode 100644
index 000000000..c791141ea
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/combobox-datepicker.js
@@ -0,0 +1,866 @@
+/*
+ *   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
new file mode 100644
index 000000000..8bc03ac77
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/grid-combo-example.js
@@ -0,0 +1,99 @@
+/*
+ *   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
new file mode 100644
index 000000000..78bc5c107
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/grid-combo.js
@@ -0,0 +1,297 @@
+/*
+ *   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
new file mode 100644
index 000000000..f8441cfc5
--- /dev/null
+++ b/build/tests/combobox-autocomplete-both/reference/2020-11-23_175618/js/select-only.js
@@ -0,0 +1,393 @@
+/*
+ *   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/tests/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.html b/build/tests/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.html
rename to build/tests/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.html
diff --git a/tests/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.json b/build/tests/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.json
rename to build/tests/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.json
diff --git a/tests/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.html b/build/tests/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.html
rename to build/tests/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.html
diff --git a/tests/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.json b/build/tests/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.json
rename to build/tests/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.json
diff --git a/tests/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.html b/build/tests/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.html
rename to build/tests/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.json b/build/tests/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.json
rename to build/tests/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-04-read-combobox-reading.html b/build/tests/combobox-autocomplete-both/test-04-read-combobox-reading.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-04-read-combobox-reading.html
rename to build/tests/combobox-autocomplete-both/test-04-read-combobox-reading.html
diff --git a/tests/combobox-autocomplete-both/test-04-read-combobox-reading.json b/build/tests/combobox-autocomplete-both/test-04-read-combobox-reading.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-04-read-combobox-reading.json
rename to build/tests/combobox-autocomplete-both/test-04-read-combobox-reading.json
diff --git a/tests/combobox-autocomplete-both/test-05-read-combobox-interaction.html b/build/tests/combobox-autocomplete-both/test-05-read-combobox-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-05-read-combobox-interaction.html
rename to build/tests/combobox-autocomplete-both/test-05-read-combobox-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-05-read-combobox-interaction.json b/build/tests/combobox-autocomplete-both/test-05-read-combobox-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-05-read-combobox-interaction.json
rename to build/tests/combobox-autocomplete-both/test-05-read-combobox-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.html b/build/tests/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.html
rename to build/tests/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.html
diff --git a/tests/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.json b/build/tests/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.json
rename to build/tests/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.json
diff --git a/tests/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.html b/build/tests/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.html
rename to build/tests/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.json b/build/tests/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.json
rename to build/tests/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-08-read-combobox-reading.html b/build/tests/combobox-autocomplete-both/test-08-read-combobox-reading.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-08-read-combobox-reading.html
rename to build/tests/combobox-autocomplete-both/test-08-read-combobox-reading.html
diff --git a/tests/combobox-autocomplete-both/test-08-read-combobox-reading.json b/build/tests/combobox-autocomplete-both/test-08-read-combobox-reading.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-08-read-combobox-reading.json
rename to build/tests/combobox-autocomplete-both/test-08-read-combobox-reading.json
diff --git a/tests/combobox-autocomplete-both/test-09-read-combobox-interaction.html b/build/tests/combobox-autocomplete-both/test-09-read-combobox-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-09-read-combobox-interaction.html
rename to build/tests/combobox-autocomplete-both/test-09-read-combobox-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-09-read-combobox-interaction.json b/build/tests/combobox-autocomplete-both/test-09-read-combobox-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-09-read-combobox-interaction.json
rename to build/tests/combobox-autocomplete-both/test-09-read-combobox-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.html b/build/tests/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.html
rename to build/tests/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.html
diff --git a/tests/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.json b/build/tests/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.json
rename to build/tests/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.json
diff --git a/tests/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.html b/build/tests/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.html
rename to build/tests/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.html
diff --git a/tests/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.json b/build/tests/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.json
rename to build/tests/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.json
diff --git a/tests/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.html b/build/tests/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.html
rename to build/tests/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.json b/build/tests/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.json
rename to build/tests/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-13-read-combobox-reading.html b/build/tests/combobox-autocomplete-both/test-13-read-combobox-reading.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-13-read-combobox-reading.html
rename to build/tests/combobox-autocomplete-both/test-13-read-combobox-reading.html
diff --git a/tests/combobox-autocomplete-both/test-13-read-combobox-reading.json b/build/tests/combobox-autocomplete-both/test-13-read-combobox-reading.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-13-read-combobox-reading.json
rename to build/tests/combobox-autocomplete-both/test-13-read-combobox-reading.json
diff --git a/tests/combobox-autocomplete-both/test-14-read-combobox-interaction.html b/build/tests/combobox-autocomplete-both/test-14-read-combobox-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-14-read-combobox-interaction.html
rename to build/tests/combobox-autocomplete-both/test-14-read-combobox-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-14-read-combobox-interaction.json b/build/tests/combobox-autocomplete-both/test-14-read-combobox-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-14-read-combobox-interaction.json
rename to build/tests/combobox-autocomplete-both/test-14-read-combobox-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.html b/build/tests/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.html
rename to build/tests/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.html
diff --git a/tests/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.json b/build/tests/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.json
rename to build/tests/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.json
diff --git a/tests/combobox-autocomplete-both/test-16-activate-combobox-reading.html b/build/tests/combobox-autocomplete-both/test-16-activate-combobox-reading.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-16-activate-combobox-reading.html
rename to build/tests/combobox-autocomplete-both/test-16-activate-combobox-reading.html
diff --git a/tests/combobox-autocomplete-both/test-16-activate-combobox-reading.json b/build/tests/combobox-autocomplete-both/test-16-activate-combobox-reading.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-16-activate-combobox-reading.json
rename to build/tests/combobox-autocomplete-both/test-16-activate-combobox-reading.json
diff --git a/tests/combobox-autocomplete-both/test-17-open-combobox-interaction.html b/build/tests/combobox-autocomplete-both/test-17-open-combobox-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-17-open-combobox-interaction.html
rename to build/tests/combobox-autocomplete-both/test-17-open-combobox-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-17-open-combobox-interaction.json b/build/tests/combobox-autocomplete-both/test-17-open-combobox-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-17-open-combobox-interaction.json
rename to build/tests/combobox-autocomplete-both/test-17-open-combobox-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-18-close-combobox-interaction.html b/build/tests/combobox-autocomplete-both/test-18-close-combobox-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-18-close-combobox-interaction.html
rename to build/tests/combobox-autocomplete-both/test-18-close-combobox-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-18-close-combobox-interaction.json b/build/tests/combobox-autocomplete-both/test-18-close-combobox-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-18-close-combobox-interaction.json
rename to build/tests/combobox-autocomplete-both/test-18-close-combobox-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-19-activate-states-button-reading.html b/build/tests/combobox-autocomplete-both/test-19-activate-states-button-reading.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-19-activate-states-button-reading.html
rename to build/tests/combobox-autocomplete-both/test-19-activate-states-button-reading.html
diff --git a/tests/combobox-autocomplete-both/test-19-activate-states-button-reading.json b/build/tests/combobox-autocomplete-both/test-19-activate-states-button-reading.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-19-activate-states-button-reading.json
rename to build/tests/combobox-autocomplete-both/test-19-activate-states-button-reading.json
diff --git a/tests/combobox-autocomplete-both/test-20-activate-states-button-interaction.html b/build/tests/combobox-autocomplete-both/test-20-activate-states-button-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-20-activate-states-button-interaction.html
rename to build/tests/combobox-autocomplete-both/test-20-activate-states-button-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-20-activate-states-button-interaction.json b/build/tests/combobox-autocomplete-both/test-20-activate-states-button-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-20-activate-states-button-interaction.json
rename to build/tests/combobox-autocomplete-both/test-20-activate-states-button-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-21-activate-states-button-reading.html b/build/tests/combobox-autocomplete-both/test-21-activate-states-button-reading.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-21-activate-states-button-reading.html
rename to build/tests/combobox-autocomplete-both/test-21-activate-states-button-reading.html
diff --git a/tests/combobox-autocomplete-both/test-21-activate-states-button-reading.json b/build/tests/combobox-autocomplete-both/test-21-activate-states-button-reading.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-21-activate-states-button-reading.json
rename to build/tests/combobox-autocomplete-both/test-21-activate-states-button-reading.json
diff --git a/tests/combobox-autocomplete-both/test-22-activate-states-button-interaction.html b/build/tests/combobox-autocomplete-both/test-22-activate-states-button-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-22-activate-states-button-interaction.html
rename to build/tests/combobox-autocomplete-both/test-22-activate-states-button-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-22-activate-states-button-interaction.json b/build/tests/combobox-autocomplete-both/test-22-activate-states-button-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-22-activate-states-button-interaction.json
rename to build/tests/combobox-autocomplete-both/test-22-activate-states-button-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.html b/build/tests/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.html
rename to build/tests/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.json b/build/tests/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.json
rename to build/tests/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.html b/build/tests/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.html
rename to build/tests/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.json b/build/tests/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.json
rename to build/tests/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.html b/build/tests/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.html
rename to build/tests/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.json b/build/tests/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.json
rename to build/tests/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.html b/build/tests/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.html
rename to build/tests/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.html
diff --git a/tests/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.json b/build/tests/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.json
rename to build/tests/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.json
diff --git a/tests/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.html b/build/tests/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.html
rename to build/tests/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.json b/build/tests/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.json
rename to build/tests/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.html b/build/tests/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.html
rename to build/tests/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.json b/build/tests/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.json
rename to build/tests/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-29-cancel-selection-interaction.html b/build/tests/combobox-autocomplete-both/test-29-cancel-selection-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-29-cancel-selection-interaction.html
rename to build/tests/combobox-autocomplete-both/test-29-cancel-selection-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-29-cancel-selection-interaction.json b/build/tests/combobox-autocomplete-both/test-29-cancel-selection-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-29-cancel-selection-interaction.json
rename to build/tests/combobox-autocomplete-both/test-29-cancel-selection-interaction.json
diff --git a/tests/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.html b/build/tests/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.html
similarity index 100%
rename from tests/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.html
rename to build/tests/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.html
diff --git a/tests/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.json b/build/tests/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.json
similarity index 100%
rename from tests/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.json
rename to build/tests/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.json
diff --git a/tests/combobox-select-only/commands.json b/build/tests/combobox-select-only/commands.json
similarity index 100%
rename from tests/combobox-select-only/commands.json
rename to build/tests/combobox-select-only/commands.json
diff --git a/tests/combobox-select-only/index.html b/build/tests/combobox-select-only/index.html
similarity index 100%
rename from tests/combobox-select-only/index.html
rename to build/tests/combobox-select-only/index.html
diff --git a/build/tests/combobox-select-only/reference/combobox-select-only.html b/build/tests/combobox-select-only/reference/combobox-select-only.html
new file mode 100644
index 000000000..c67aa4049
--- /dev/null
+++ b/build/tests/combobox-select-only/reference/combobox-select-only.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Select-Only Combobox Example</title>
+
+<!--  js and css for this example. -->
+<link href="css/select-only.css" rel="stylesheet">
+<script src="js/select-only.js"  type="text/javascript"></script>
+</head>
+<body>
+  <main>
+    <h1>Select-Only Combobox Example</h1>
+    <p>
+      The following example implementation of the <a href="https://w3c.github.io/aria-practices/#combobox">ARIA design pattern for combobox</a>
+      demonstrates a single-select combobox widget that is functionally similar to an HTML <code>select</code> element.
+      Unlike the editable combobox examples, this select-only combobox is not made with an <code>&lt;input&gt;</code> element, and it does not accept freeform user input.
+      However, like an HTML <code>&lt;select&gt;</code>, users can type characters to select matching options.
+    </p>
+    <section>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
+      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+      <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
+      <div id="ex1">
+        <label id="combo1-label" class="combo-label">Favorite Fruit</label>
+        <div class="combo js-select">
+            <div
+                aria-controls="listbox1"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="combo1-label"
+                id="combo1"
+                class="combo-input"
+                role="combobox"
+                tabindex="0"
+                >
+            </div>
+            <div class="combo-menu" role="listbox" id="listbox1" aria-labelledby="combo1-label" tabindex="-1">
+                <!-- options are inserted here -->
+                <!-- e.g. <div role="option" id="op1">option text</div>  -->
+            </div>
+        </div>
+      </div>
+      <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
+      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+    </section>
+  </main>
+</body>
+</html>
diff --git a/build/tests/combobox-select-only/reference/css/select-only.css b/build/tests/combobox-select-only/reference/css/select-only.css
new file mode 100644
index 000000000..1d8beb3a7
--- /dev/null
+++ b/build/tests/combobox-select-only/reference/css/select-only.css
@@ -0,0 +1,103 @@
+.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
new file mode 100644
index 000000000..2398e1b9d
--- /dev/null
+++ b/build/tests/combobox-select-only/reference/js/select-only.js
@@ -0,0 +1,390 @@
+/*
+ *   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/tests/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.html b/build/tests/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.html
similarity index 100%
rename from tests/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.html
rename to build/tests/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.html
diff --git a/tests/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.json b/build/tests/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.json
similarity index 100%
rename from tests/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.json
rename to build/tests/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.json
diff --git a/tests/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.html b/build/tests/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.html
similarity index 100%
rename from tests/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.html
rename to build/tests/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.html
diff --git a/tests/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.json b/build/tests/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.json
similarity index 100%
rename from tests/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.json
rename to build/tests/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.json
diff --git a/tests/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.html b/build/tests/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.html
rename to build/tests/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.html
diff --git a/tests/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.json b/build/tests/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.json
rename to build/tests/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.json
diff --git a/tests/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.html b/build/tests/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.html
rename to build/tests/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.html
diff --git a/tests/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.json b/build/tests/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.json
rename to build/tests/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.json
diff --git a/tests/combobox-select-only/test-05-navigate-forwards-to-collapsed-select-only-combobox-interaction.html b/build/tests/combobox-select-only/test-05-navigate-forwards-to-collapsed-select-only-combobox-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-05-navigate-forwards-to-collapsed-select-only-combobox-interaction.html
rename to build/tests/combobox-select-only/test-05-navigate-forwards-to-collapsed-select-only-combobox-interaction.html
diff --git a/tests/combobox-select-only/test-05-navigate-forwards-to-collapsed-select-only-combobox-interaction.json b/build/tests/combobox-select-only/test-05-navigate-forwards-to-collapsed-select-only-combobox-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-05-navigate-forwards-to-collapsed-select-only-combobox-interaction.json
rename to build/tests/combobox-select-only/test-05-navigate-forwards-to-collapsed-select-only-combobox-interaction.json
diff --git a/tests/combobox-select-only/test-06-navigate-backwards-to-collapsed-select-only-combobox-interaction.html b/build/tests/combobox-select-only/test-06-navigate-backwards-to-collapsed-select-only-combobox-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-06-navigate-backwards-to-collapsed-select-only-combobox-interaction.html
rename to build/tests/combobox-select-only/test-06-navigate-backwards-to-collapsed-select-only-combobox-interaction.html
diff --git a/tests/combobox-select-only/test-06-navigate-backwards-to-collapsed-select-only-combobox-interaction.json b/build/tests/combobox-select-only/test-06-navigate-backwards-to-collapsed-select-only-combobox-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-06-navigate-backwards-to-collapsed-select-only-combobox-interaction.json
rename to build/tests/combobox-select-only/test-06-navigate-backwards-to-collapsed-select-only-combobox-interaction.json
diff --git a/tests/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.html b/build/tests/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.html
similarity index 100%
rename from tests/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.html
rename to build/tests/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.html
diff --git a/tests/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.json b/build/tests/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.json
similarity index 100%
rename from tests/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.json
rename to build/tests/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.json
diff --git a/tests/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.html b/build/tests/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.html
rename to build/tests/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.html
diff --git a/tests/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.json b/build/tests/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.json
rename to build/tests/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.json
diff --git a/tests/combobox-select-only/test-09-read-information-about-collapsed-select-only-combobox-interaction.html b/build/tests/combobox-select-only/test-09-read-information-about-collapsed-select-only-combobox-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-09-read-information-about-collapsed-select-only-combobox-interaction.html
rename to build/tests/combobox-select-only/test-09-read-information-about-collapsed-select-only-combobox-interaction.html
diff --git a/tests/combobox-select-only/test-09-read-information-about-collapsed-select-only-combobox-interaction.json b/build/tests/combobox-select-only/test-09-read-information-about-collapsed-select-only-combobox-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-09-read-information-about-collapsed-select-only-combobox-interaction.json
rename to build/tests/combobox-select-only/test-09-read-information-about-collapsed-select-only-combobox-interaction.json
diff --git a/tests/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.html b/build/tests/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.html
similarity index 100%
rename from tests/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.html
rename to build/tests/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.html
diff --git a/tests/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.json b/build/tests/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.json
similarity index 100%
rename from tests/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.json
rename to build/tests/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.json
diff --git a/tests/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.html b/build/tests/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.html
rename to build/tests/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.html
diff --git a/tests/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.json b/build/tests/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.json
rename to build/tests/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.json
diff --git a/tests/combobox-select-only/test-12-open-collapsed-select-only-combobox-interaction.html b/build/tests/combobox-select-only/test-12-open-collapsed-select-only-combobox-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-12-open-collapsed-select-only-combobox-interaction.html
rename to build/tests/combobox-select-only/test-12-open-collapsed-select-only-combobox-interaction.html
diff --git a/tests/combobox-select-only/test-12-open-collapsed-select-only-combobox-interaction.json b/build/tests/combobox-select-only/test-12-open-collapsed-select-only-combobox-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-12-open-collapsed-select-only-combobox-interaction.json
rename to build/tests/combobox-select-only/test-12-open-collapsed-select-only-combobox-interaction.json
diff --git a/tests/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.html b/build/tests/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.html
rename to build/tests/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.html
diff --git a/tests/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.json b/build/tests/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.json
rename to build/tests/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.json
diff --git a/tests/combobox-select-only/test-14-open-collapsed-select-only-combobox-to-first-option-interaction.html b/build/tests/combobox-select-only/test-14-open-collapsed-select-only-combobox-to-first-option-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-14-open-collapsed-select-only-combobox-to-first-option-interaction.html
rename to build/tests/combobox-select-only/test-14-open-collapsed-select-only-combobox-to-first-option-interaction.html
diff --git a/tests/combobox-select-only/test-14-open-collapsed-select-only-combobox-to-first-option-interaction.json b/build/tests/combobox-select-only/test-14-open-collapsed-select-only-combobox-to-first-option-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-14-open-collapsed-select-only-combobox-to-first-option-interaction.json
rename to build/tests/combobox-select-only/test-14-open-collapsed-select-only-combobox-to-first-option-interaction.json
diff --git a/tests/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.html b/build/tests/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.html
rename to build/tests/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.html
diff --git a/tests/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.json b/build/tests/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.json
rename to build/tests/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.json
diff --git a/tests/combobox-select-only/test-16-open-collapsed-select-only-combobox-to-specific-option-interaction.html b/build/tests/combobox-select-only/test-16-open-collapsed-select-only-combobox-to-specific-option-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-16-open-collapsed-select-only-combobox-to-specific-option-interaction.html
rename to build/tests/combobox-select-only/test-16-open-collapsed-select-only-combobox-to-specific-option-interaction.html
diff --git a/tests/combobox-select-only/test-16-open-collapsed-select-only-combobox-to-specific-option-interaction.json b/build/tests/combobox-select-only/test-16-open-collapsed-select-only-combobox-to-specific-option-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-16-open-collapsed-select-only-combobox-to-specific-option-interaction.json
rename to build/tests/combobox-select-only/test-16-open-collapsed-select-only-combobox-to-specific-option-interaction.json
diff --git a/tests/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.html b/build/tests/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.html
rename to build/tests/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.html
diff --git a/tests/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.json b/build/tests/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.json
rename to build/tests/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.json
diff --git a/tests/combobox-select-only/test-18-open-collapsed-select-only-combobox-to-last-option-interaction.html b/build/tests/combobox-select-only/test-18-open-collapsed-select-only-combobox-to-last-option-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-18-open-collapsed-select-only-combobox-to-last-option-interaction.html
rename to build/tests/combobox-select-only/test-18-open-collapsed-select-only-combobox-to-last-option-interaction.html
diff --git a/tests/combobox-select-only/test-18-open-collapsed-select-only-combobox-to-last-option-interaction.json b/build/tests/combobox-select-only/test-18-open-collapsed-select-only-combobox-to-last-option-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-18-open-collapsed-select-only-combobox-to-last-option-interaction.json
rename to build/tests/combobox-select-only/test-18-open-collapsed-select-only-combobox-to-last-option-interaction.json
diff --git a/tests/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-20-read-information-about-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-20-read-information-about-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-20-read-information-about-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-20-read-information-about-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-20-read-information-about-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-20-read-information-about-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-20-read-information-about-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-20-read-information-about-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-23-navigate-forwards-to-option-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-23-navigate-forwards-to-option-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-23-navigate-forwards-to-option-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-23-navigate-forwards-to-option-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-23-navigate-forwards-to-option-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-23-navigate-forwards-to-option-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-23-navigate-forwards-to-option-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-23-navigate-forwards-to-option-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-24-navigate-backwards-to-option-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-24-navigate-backwards-to-option-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-24-navigate-backwards-to-option-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-24-navigate-backwards-to-option-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-24-navigate-backwards-to-option-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-24-navigate-backwards-to-option-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-24-navigate-backwards-to-option-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-24-navigate-backwards-to-option-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-26-navigate-to-specific-option-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-26-navigate-to-specific-option-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-26-navigate-to-specific-option-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-26-navigate-to-specific-option-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-26-navigate-to-specific-option-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-26-navigate-to-specific-option-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-26-navigate-to-specific-option-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-26-navigate-to-specific-option-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-29-navigate-to-first-option-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-29-navigate-to-first-option-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-29-navigate-to-first-option-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-29-navigate-to-first-option-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-29-navigate-to-first-option-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-29-navigate-to-first-option-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-29-navigate-to-first-option-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-29-navigate-to-first-option-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-30-navigate-to-last-option-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-30-navigate-to-last-option-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-30-navigate-to-last-option-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-30-navigate-to-last-option-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-30-navigate-to-last-option-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-30-navigate-to-last-option-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-30-navigate-to-last-option-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-30-navigate-to-last-option-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-33-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-33-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-33-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-33-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-33-navigate-forwards-by-ten-options-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-33-navigate-forwards-by-ten-options-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-33-navigate-forwards-by-ten-options-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-33-navigate-forwards-by-ten-options-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-34-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-34-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-34-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-34-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-34-navigate-backwards-by-ten-options-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-34-navigate-backwards-by-ten-options-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-34-navigate-backwards-by-ten-options-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-34-navigate-backwards-by-ten-options-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-36-select-option-in-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-36-select-option-in-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-36-select-option-in-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-36-select-option-in-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-36-select-option-in-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-36-select-option-in-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-36-select-option-in-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-36-select-option-in-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-37-close-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-37-close-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-37-close-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-37-close-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-37-close-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-37-close-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-37-close-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-37-close-listbox-popup-interaction.json
diff --git a/tests/combobox-select-only/test-38-close-listbox-popup-interaction.html b/build/tests/combobox-select-only/test-38-close-listbox-popup-interaction.html
similarity index 100%
rename from tests/combobox-select-only/test-38-close-listbox-popup-interaction.html
rename to build/tests/combobox-select-only/test-38-close-listbox-popup-interaction.html
diff --git a/tests/combobox-select-only/test-38-close-listbox-popup-interaction.json b/build/tests/combobox-select-only/test-38-close-listbox-popup-interaction.json
similarity index 100%
rename from tests/combobox-select-only/test-38-close-listbox-popup-interaction.json
rename to build/tests/combobox-select-only/test-38-close-listbox-popup-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/commands.json b/build/tests/menu-button-actions-active-descendant/commands.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/commands.json
rename to build/tests/menu-button-actions-active-descendant/commands.json
diff --git a/tests/menu-button-actions-active-descendant/index.html b/build/tests/menu-button-actions-active-descendant/index.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/index.html
rename to build/tests/menu-button-actions-active-descendant/index.html
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
new file mode 100644
index 000000000..391043fa3
--- /dev/null
+++ b/build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/css/menu-button-actions.css
@@ -0,0 +1,82 @@
+.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
new file mode 100644
index 000000000..685e270ef
--- /dev/null
+++ b/build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/js/menu-button-actions-active-descendant.js
@@ -0,0 +1,347 @@
+/*
+ *   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
new file mode 100644
index 000000000..1fb1900c9
--- /dev/null
+++ b/build/tests/menu-button-actions-active-descendant/reference/2021-1-14_171136/menu-button-actions-active-descendant.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <title>Actions Menu Button Example Using aria-activedescendant</title>
+
+    <!-- JS and CSS for this example -->
+    <link href="css/menu-button-actions.css" rel="stylesheet">
+    <script src="js/menu-button-actions-active-descendant.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <main>
+      <h1>Actions Menu Button Example Using aria-activedescendant</h1>
+      <p>
+        This example demonstrates how the
+        <a href="https://w3c.github.io/aria-practices/#menubutton">menu button design pattern</a>
+      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 <q>Last Action</q> edit box.
+    </p>
+      <section>
+        <div class="example-header">
+          <h2 id="ex_label">Example</h2>
+        </div>
+        <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+        <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
+        <div id="ex1">
+          <div class="menu-button-actions">
+            <button type="button"
+                id="menubutton1"
+                aria-haspopup="true"
+                aria-controls="menu1"
+                >
+              Actions
+              <svg xmlns="http://www.w3.org/2000/svg" class="down" width="12" height="9" viewBox="0 0 12 9">
+                <polygon points="1 0, 11 0, 6 8"/>
+              </svg>
+            </button>
+            <ul id="menu1"
+                role="menu"
+                tabindex="-1"
+                aria-labelledby="menubutton1"
+                aria-activedescendant="mi1">
+              <li id="mi1" role="menuitem">Action 1</li>
+              <li id="mi2" role="menuitem">Action 2</li>
+              <li id="mi3" role="menuitem">Action 3</li>
+              <li id="mi4" role="menuitem">Action 4</li>
+            </ul>
+          </div>
+          <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
+        <p>
+          <label>Last Action: <input class="action" id="action_output" type="text" value=""></label>
+        </p>
+        </div>
+        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+      </section>
+    </main>
+  </body>
+  </html>
diff --git a/tests/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.html b/build/tests/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.html
rename to build/tests/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.html
diff --git a/tests/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.json b/build/tests/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.json
rename to build/tests/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.json
diff --git a/tests/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.html b/build/tests/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.html
rename to build/tests/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.html
diff --git a/tests/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.json b/build/tests/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.json
rename to build/tests/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.json
diff --git a/tests/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.html b/build/tests/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.json b/build/tests/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.html b/build/tests/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.json b/build/tests/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-05-navigate-forwards-to-menu-button-interaction.html b/build/tests/menu-button-actions-active-descendant/test-05-navigate-forwards-to-menu-button-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-05-navigate-forwards-to-menu-button-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-05-navigate-forwards-to-menu-button-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-05-navigate-forwards-to-menu-button-interaction.json b/build/tests/menu-button-actions-active-descendant/test-05-navigate-forwards-to-menu-button-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-05-navigate-forwards-to-menu-button-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-05-navigate-forwards-to-menu-button-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-06-navigate-backwards-to-menu-button-interaction.html b/build/tests/menu-button-actions-active-descendant/test-06-navigate-backwards-to-menu-button-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-06-navigate-backwards-to-menu-button-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-06-navigate-backwards-to-menu-button-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-06-navigate-backwards-to-menu-button-interaction.json b/build/tests/menu-button-actions-active-descendant/test-06-navigate-backwards-to-menu-button-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-06-navigate-backwards-to-menu-button-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-06-navigate-backwards-to-menu-button-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.html b/build/tests/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.html
rename to build/tests/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.html
diff --git a/tests/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.json b/build/tests/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.json
rename to build/tests/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.json
diff --git a/tests/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.html b/build/tests/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.json b/build/tests/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-09-read-information-about-menu-button-interaction.html b/build/tests/menu-button-actions-active-descendant/test-09-read-information-about-menu-button-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-09-read-information-about-menu-button-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-09-read-information-about-menu-button-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-09-read-information-about-menu-button-interaction.json b/build/tests/menu-button-actions-active-descendant/test-09-read-information-about-menu-button-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-09-read-information-about-menu-button-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-09-read-information-about-menu-button-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-10-open-menu-reading.html b/build/tests/menu-button-actions-active-descendant/test-10-open-menu-reading.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-10-open-menu-reading.html
rename to build/tests/menu-button-actions-active-descendant/test-10-open-menu-reading.html
diff --git a/tests/menu-button-actions-active-descendant/test-10-open-menu-reading.json b/build/tests/menu-button-actions-active-descendant/test-10-open-menu-reading.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-10-open-menu-reading.json
rename to build/tests/menu-button-actions-active-descendant/test-10-open-menu-reading.json
diff --git a/tests/menu-button-actions-active-descendant/test-11-open-menu-interaction.html b/build/tests/menu-button-actions-active-descendant/test-11-open-menu-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-11-open-menu-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-11-open-menu-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-11-open-menu-interaction.json b/build/tests/menu-button-actions-active-descendant/test-11-open-menu-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-11-open-menu-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-11-open-menu-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-12-open-menu-interaction.html b/build/tests/menu-button-actions-active-descendant/test-12-open-menu-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-12-open-menu-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-12-open-menu-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-12-open-menu-interaction.json b/build/tests/menu-button-actions-active-descendant/test-12-open-menu-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-12-open-menu-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-12-open-menu-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.html b/build/tests/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.json b/build/tests/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-14-open-menu-to-last-item-interaction.html b/build/tests/menu-button-actions-active-descendant/test-14-open-menu-to-last-item-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-14-open-menu-to-last-item-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-14-open-menu-to-last-item-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-14-open-menu-to-last-item-interaction.json b/build/tests/menu-button-actions-active-descendant/test-14-open-menu-to-last-item-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-14-open-menu-to-last-item-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-14-open-menu-to-last-item-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.html b/build/tests/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.json b/build/tests/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-16-read-information-about-menu-item-interaction.html b/build/tests/menu-button-actions-active-descendant/test-16-read-information-about-menu-item-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-16-read-information-about-menu-item-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-16-read-information-about-menu-item-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-16-read-information-about-menu-item-interaction.json b/build/tests/menu-button-actions-active-descendant/test-16-read-information-about-menu-item-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-16-read-information-about-menu-item-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-16-read-information-about-menu-item-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.html b/build/tests/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.json b/build/tests/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-18-navigate-to-first-item-in-menu-interaction.html b/build/tests/menu-button-actions-active-descendant/test-18-navigate-to-first-item-in-menu-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-18-navigate-to-first-item-in-menu-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-18-navigate-to-first-item-in-menu-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-18-navigate-to-first-item-in-menu-interaction.json b/build/tests/menu-button-actions-active-descendant/test-18-navigate-to-first-item-in-menu-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-18-navigate-to-first-item-in-menu-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-18-navigate-to-first-item-in-menu-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.html b/build/tests/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.json b/build/tests/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-20-navigate-to-last-item-in-menu-interaction.html b/build/tests/menu-button-actions-active-descendant/test-20-navigate-to-last-item-in-menu-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-20-navigate-to-last-item-in-menu-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-20-navigate-to-last-item-in-menu-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-20-navigate-to-last-item-in-menu-interaction.json b/build/tests/menu-button-actions-active-descendant/test-20-navigate-to-last-item-in-menu-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-20-navigate-to-last-item-in-menu-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-20-navigate-to-last-item-in-menu-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.html b/build/tests/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.json b/build/tests/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-22-navigate-to-item-in-menu-by-typing-character-interaction.html b/build/tests/menu-button-actions-active-descendant/test-22-navigate-to-item-in-menu-by-typing-character-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-22-navigate-to-item-in-menu-by-typing-character-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-22-navigate-to-item-in-menu-by-typing-character-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-22-navigate-to-item-in-menu-by-typing-character-interaction.json b/build/tests/menu-button-actions-active-descendant/test-22-navigate-to-item-in-menu-by-typing-character-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-22-navigate-to-item-in-menu-by-typing-character-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-22-navigate-to-item-in-menu-by-typing-character-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.html b/build/tests/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.json b/build/tests/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-24-activate-menu-item-interaction.html b/build/tests/menu-button-actions-active-descendant/test-24-activate-menu-item-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-24-activate-menu-item-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-24-activate-menu-item-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-24-activate-menu-item-interaction.json b/build/tests/menu-button-actions-active-descendant/test-24-activate-menu-item-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-24-activate-menu-item-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-24-activate-menu-item-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-25-close-menu-interaction.html b/build/tests/menu-button-actions-active-descendant/test-25-close-menu-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-25-close-menu-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-25-close-menu-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-25-close-menu-interaction.json b/build/tests/menu-button-actions-active-descendant/test-25-close-menu-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-25-close-menu-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-25-close-menu-interaction.json
diff --git a/tests/menu-button-actions-active-descendant/test-26-close-menu-interaction.html b/build/tests/menu-button-actions-active-descendant/test-26-close-menu-interaction.html
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-26-close-menu-interaction.html
rename to build/tests/menu-button-actions-active-descendant/test-26-close-menu-interaction.html
diff --git a/tests/menu-button-actions-active-descendant/test-26-close-menu-interaction.json b/build/tests/menu-button-actions-active-descendant/test-26-close-menu-interaction.json
similarity index 100%
rename from tests/menu-button-actions-active-descendant/test-26-close-menu-interaction.json
rename to build/tests/menu-button-actions-active-descendant/test-26-close-menu-interaction.json
diff --git a/tests/menubar-editor/commands.json b/build/tests/menubar-editor/commands.json
similarity index 100%
rename from tests/menubar-editor/commands.json
rename to build/tests/menubar-editor/commands.json
diff --git a/tests/menubar-editor/index.html b/build/tests/menubar-editor/index.html
similarity index 100%
rename from tests/menubar-editor/index.html
rename to build/tests/menubar-editor/index.html
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
new file mode 100644
index 000000000..72a3f573c
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/css/menubar-editor.css
@@ -0,0 +1,200 @@
+.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
new file mode 100644
index 000000000..dddce81d0
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/css/menubar-navigation.css
@@ -0,0 +1,114 @@
+.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
new file mode 100644
index 000000000..47f273cec
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/images/checkbox-checked-focus.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20">
+  <polyline points="2,13  2,15 7,20 12,8 12,6 7,17 2,13" fill="#FFF" stroke-width="1" stroke="#FFF"/>
+</svg>
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
new file mode 100644
index 000000000..4a68a8a97
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/images/checkbox-checked.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20">
+  <polyline points="2,13  2,15 7,20 12,8 12,6 7,17 2,13" fill="#034575" stroke-width="1" stroke="#034575"/>
+</svg>
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
new file mode 100644
index 000000000..8f6ea6637
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/images/down-arrow-focus.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9">
+ <polygon points="1 0, 11 0, 6 8"  fill="#fff" stroke= "#fff" />
+</svg>
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
new file mode 100644
index 000000000..a0a2556a5
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/images/down-arrow.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9">
+ <polygon points="1 0, 11 0, 6 8"  fill="#444" stroke= "#444" />
+</svg>
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
new file mode 100644
index 000000000..04c1a03d0
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/images/radio-checked-focus.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20">
+ <circle cx="8" cy="14" r="5"  fill="#FFF" stroke-width="1" stroke="#FFF"/>
+</svg>
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
new file mode 100644
index 000000000..f34a549a3
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/images/radio-checked.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20">
+ <circle cx="8" cy="14" r="5"  fill="#034575" stroke-width="1" stroke="#034575"/>
+</svg>
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
new file mode 100644
index 000000000..b4b39760b
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/images/separator.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+  <line x1="0" y1="6" x2="12" y2="6" style="stroke:black;stroke-width:1" />
+</svg>
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
new file mode 100644
index 000000000..ede8a5d71
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/images/up-arrow-focus.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9">
+ <polygon points="1 8, 11 8, 6 0" fill="#fff" stroke="#fff"/>
+</svg>
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
new file mode 100644
index 000000000..d034dad15
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/images/up-arrow.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9">
+ <polygon points="1 9, 11 9, 6 0" fill=" #034575" stroke= "#034575" />
+</svg>
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
new file mode 100644
index 000000000..905b4ce87
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/js/menubar-editor.js
@@ -0,0 +1,709 @@
+/*
+ *   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
new file mode 100644
index 000000000..ebb2dee4d
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/js/menubar-navigation.js
@@ -0,0 +1,630 @@
+/*
+ *   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
new file mode 100644
index 000000000..06e35d7c4
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/js/style-manager.js
@@ -0,0 +1,158 @@
+/*
+ *   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
new file mode 100644
index 000000000..8f65589a1
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-19_152059/menubar-editor.html
@@ -0,0 +1,822 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <title>Editor Menubar Example | WAI-ARIA Authoring Practices 1.2</title>
+
+  <!--  Core js and css shared by all examples; do not modify when using this template. -->
+  <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+  <link rel="stylesheet" href="../css/core.css">
+  <script src="../js/examples.js"></script>
+  <script src="../js/highlight.pack.js"></script>
+  <script src="../js/app.js"></script>
+
+  <!--  CSS and javascript for this example.  -->
+  <link href="css/menubar-editor.css" rel="stylesheet">
+  <script src="js/menubar-editor.js"    type="text/javascript"></script>
+  <script src="js/style-manager.js"    type="text/javascript"></script>
+
+  <!-- Preload images -->
+  <link rel="preload" as="image" href="images/checkbox-checked-focus.svg">
+  <link rel="preload" as="image" href="images/checkbox-checked.svg">
+  <link rel="preload" as="image" href="images/down-arrow-focus.svg">
+  <link rel="preload" as="image" href="images/down-arrow.svg">
+  <link rel="preload" as="image" href="images/radio-checked-focus.svg">
+  <link rel="preload" as="image" href="images/radio-checked.svg">
+  <link rel="preload" as="image" href="images/separator.svg">
+  <link rel="preload" as="image" href="images/up-arrow-focus.svg">
+</head>
+<body>
+  <nav aria-label="Related Links" class="feedback">
+    <ul>
+      <li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
+      <li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
+      <li><a href="https://github.com/w3c/aria-practices/projects/5">Related Issues</a></li>
+      <li><a href="../../#menu">Design Pattern</a></li>
+    </ul>
+  </nav>
+  <main>
+  <h1>Editor Menubar Example</h1>
+  <p>
+    The following example demonstrates using the
+    <a href="../../#menu">menubar design pattern</a>
+    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 <code>menuitemradio</code> and <code>menuitemcheckbox</code> elements.
+  </p>
+  <p>Similar examples include: </p>
+  <ul>
+    <li><a href="menubar-navigation.html">Navigation Menubar Example</a>: A menubar that presents site navigation menus.</li>
+  </ul>
+
+  <section id="code-ex-1">
+    <h2 id="ex1_label">Example</h2>
+    <div role="separator" id="ex1_start_sep" aria-labelledby="ex1_start_sep ex1_label" aria-label="Start of"></div>
+    <div id="ex1">
+      <div class="menubar-editor">
+        <ul role="menubar" aria-label="Text Formatting">
+          <li role="none">
+            <span role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="0">Font</span>
+            <ul role="menu" data-option="font-family" aria-label="Font" >
+              <li role="menuitemradio" aria-checked="true">Sans-serif</li>
+              <li role="menuitemradio" aria-checked="false">Serif</li>
+              <li role="menuitemradio" aria-checked="false">Monospace</li>
+              <li role="menuitemradio" aria-checked="false">Fantasy</li>
+            </ul>
+          </li>
+          <li role="none">
+            <span role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="-1">Style/Color</span>
+            <ul role="menu" aria-label="Style/Color">
+              <li role="none">
+                <ul role="group" data-option="font-style" aria-label="Font Style">
+                  <li role="menuitemcheckbox" data-option="font-bold" aria-checked="false">Bold</li>
+                  <li role="menuitemcheckbox" data-option="font-italic" aria-checked="false">Italic</li>
+                </ul>
+              </li>
+              <li role="separator"></li>
+              <li role="none">
+                <ul role="group" data-option="font-color" aria-label="Text Color">
+                  <li role="menuitemradio" aria-checked="true">Black</li>
+                  <li role="menuitemradio" aria-checked="false">Blue</li>
+                  <li role="menuitemradio" aria-checked="false">Red</li>
+                  <li role="menuitemradio" aria-checked="false">Green</li>
+                </ul>
+              <li role="separator"></li>
+              <li role="none">
+                <ul role="group" data-option="text-decoration" aria-label="Text Decoration">
+                  <li role="menuitemradio" aria-checked="true">None</li>
+                  <li role="menuitemradio" aria-checked="false">Overline</li>
+                  <li role="menuitemradio" aria-checked="false">Line-through</li>
+                  <li role="menuitemradio" aria-checked="false">Underline</li>
+                </ul>
+            </ul>
+          </li>
+
+          <li role="none">
+            <span role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="-1">Text Align</span>
+            <ul role="menu" data-option="text-align" aria-label="Text Align">
+              <li role="menuitemradio" aria-checked="true">Left</li>
+              <li role="menuitemradio" aria-checked="false">Center</li>
+              <li role="menuitemradio" aria-checked="false">Right</li>
+              <li role="menuitemradio" aria-checked="false">Justify</li>
+            </ul>
+          </li>
+
+          <li role="none">
+            <span role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="-1">Size</span>
+            <ul role="menu" aria-label="Size" >
+              <li role="menuitem" data-option="font-smaller" aria-disabled="false">Smaller</li>
+              <li role="menuitem" data-option="font-larger"  aria-disabled="false">Larger</li>
+              <li role="separator"></li>
+              <li>
+                <ul role="group" data-option="font-size" aria-label="Font Sizes">
+                  <li role="menuitemradio" aria-checked="false">X-Small</li>
+                  <li role="menuitemradio" aria-checked="false">Small</li>
+                  <li role="menuitemradio" aria-checked="true">Medium</li>
+                  <li role="menuitemradio" aria-checked="false">Large</li>
+                  <li role="menuitemradio" aria-checked="false">X-Large</li>
+                </ul>
+            </ul>
+          </li>
+        </ul>
+        <textarea style="font-size: medium; font-family: sans-serif" aria-label="Text Sample"
+        >
+            Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
+
+            Now we are engaged in a great civil war, testing whether that nation, or any nation, so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
+
+            But, in a larger sense, we can not dedicate, we can not consecrate, we can not hallow, this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us, that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion, that we here highly resolve that these dead shall not have died in vain, that this nation, under God, shall have a new birth of freedom, and that government of the people, by the people, for the people, shall not perish from the earth.
+            </textarea>
+      </div>
+
+      <p>
+        <a href="https://en.wikipedia.org/wiki/Gettysburg,_Pennsylvania">More information on
+          Gettysburg Address</a>
+      </p>
+
+
+    </div>
+    <div role="separator" id="ex1_end_sep" aria-labelledby="ex1_end_sep ex1_label" aria-label="End of" ></div>
+  </section>
+
+  <section>
+    <h2>Accessibility Features</h2>
+    <ol>
+      <li>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.</li>
+      <li>Disabled menu items are demonstrated in the font size menu, which  includes two disabled menuitems.</li>
+      <li>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.</li>
+      <li>To support operating system high contrast settings, focus is highlighted by adding and removing a border around the menu item with focus.</li>
+      <li>The down arrow and checked icons are made compatible with operating system high contrast settings and hidden from screen readers by using the CSS <code>content</code> property to render images.</li>
+      <li>
+        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.
+      </li>
+      <li>
+        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:
+        <ol>
+          <li>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.</li>
+          <li>When a submenu is open and the user hovers over an item in the submenu, focus follows hover.</li>
+        </ol>
+      </li>
+    </ol>
+  </section>
+
+  <section>
+    <h2 id="kbd_label">Keyboard Support</h2>
+    <h3 id="kbd1_label">Menubar</h3>
+    <table aria-labelledby="kbd1_label kbd_label" class="def">
+      <thead>
+        <tr>
+          <th>Key</th>
+          <th>Function</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr data-test-id="menubar-key-space-and-enter">
+          <th>
+            <kbd>Space</kbd><br><kbd>Enter</kbd>
+          </th>
+          <td>Opens submenu and moves focus to first item in the submenu.</td>
+        </tr>
+        <tr data-test-id="menubar-key-escape">
+          <th>
+            <kbd>Escape</kbd>
+          </th>
+          <td>
+            If a submenu is open, closes it. Otherwise, does nothing.
+          </td>
+        </tr>
+        <tr data-test-id="menubar-key-right-arrow">
+          <th>
+            <kbd>Right Arrow</kbd>
+          </th>
+          <td>
+            <ul>
+              <li>Moves focus to the next item in the menubar.</li>
+              <li>If focus is on the last item, moves focus to the first item.</li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="menubar-key-left-arrow">
+          <th>
+            <kbd>Left Arrow</kbd>
+          </th>
+          <td>
+            <ul>
+              <li>Moves focus to the previous item in the menubar.</li>
+              <li>If focus is on the first item, moves focus to the last item.</li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="menubar-key-down-arrow">
+          <th>
+            <kbd>Down Arrow</kbd>
+          </th>
+          <td>Opens submenu and moves focus to first item in the submenu.</td>
+        </tr>
+        <tr data-test-id="menubar-key-up-arrow">
+          <th>
+            <kbd>Up Arrow</kbd>
+          </th>
+          <td>Opens submenu and moves focus to last item in the submenu.</td>
+        </tr>
+        <tr data-test-id="menubar-key-home">
+          <th>
+            <kbd>Home</kbd>
+          </th>
+          <td>Moves focus to first item in the menubar.</td>
+        </tr>
+        <tr data-test-id="menubar-key-end">
+          <th>
+            <kbd>End</kbd>
+          </th>
+          <td>Moves focus to last item in the menubar.</td>
+        </tr>
+        <tr data-test-id="menubar-key-character">
+          <th>
+            <kbd>Character</kbd>
+          </th>
+          <td>
+            <ul>
+              <li>Moves focus to next item in the menubar having a name that starts with the typed character.</li>
+              <li>If none of the items have a name starting with the typed character, focus does not move.</li>
+            </ul>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3 id="kbd2_label">Submenu</h3>
+    <table aria-labelledby="kbd2_label kbd_label" class="def">
+      <thead>
+        <tr>
+          <th>Key</th>
+          <th>Function</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr data-test-id="submenu-enter">
+          <th>
+            <kbd>Space</kbd><br><kbd>Enter</kbd>
+          </th>
+          <td>Activates menu item, causing action to be executed, e.g., bold text, change font. </td>
+        </tr>
+        <tr data-test-id="submenu-escape">
+          <th>
+            <kbd>Escape</kbd>
+          </th>
+          <td>
+            <ul>
+              <li>Closes submenu.</li>
+              <li>Moves focus to parent menubar item.</li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="submenu-right-arrow">
+          <th>
+            <kbd>Right Arrow</kbd>
+          </th>
+          <td>
+            <ul>
+              <li>Closes submenu.</li>
+              <li>Moves focus to next item in the menubar.</li>
+              <li>Opens submenu of newly focused menubar item, keeping focus on that parent menubar item.</li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="submenu-left-arrow">
+          <th>
+            <kbd>Left Arrow</kbd>
+          </th>
+          <td>
+            <ul>
+              <li>Closes submenu.</li>
+              <li>Moves focus to previous item in the menubar.</li>
+              <li>Opens submenu of newly focused menubar item, keeping focus on that parent menubar item.</li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="submenu-down-arrow">
+          <th>
+            <kbd>Down Arrow</kbd>
+          </th>
+          <td>
+            <ul>
+              <li>Moves focus to the next item in the submenu.</li>
+              <li>If focus is on the last item, moves focus to the first item.</li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="submenu-up-arrow">
+          <th>
+            <kbd>Up Arrow</kbd>
+          </th>
+          <td>
+            <ul>
+              <li>Moves focus to previous item in the submenu.</li>
+              <li>If focus is on the first item, moves focus to the last item.</li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="submenu-home">
+          <th>
+            <kbd>Home</kbd>
+          </th>
+          <td>Moves focus to the first item in the submenu.</td>
+        </tr>
+        <tr data-test-id="submenu-end">
+          <th>
+            <kbd>End</kbd>
+          </th>
+          <td>Moves focus to the last item in the submenu.</td>
+        </tr>
+        <tr data-test-id="submenu-character">
+          <th>
+            <kbd>Character</kbd>
+          </th>
+          <td>
+            <ul>
+              <li>Moves focus to the next item having a name that starts with the typed character.</li>
+              <li>If none of the items have a name starting with the typed character, focus does not move.</li>
+            </ul>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    </section>
+
+    <section>
+      <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
+      <h3 id="rps1_label">Menubar</h3>
+      <table aria-labelledby="rps1_label rps_label" class="data attributes">
+        <thead>
+          <tr>
+            <th scope="col">Role</th>
+            <th scope="col">Attribute</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="menubar-role">
+            <th scope="row">
+              <code>menubar</code>
+            </th>
+            <td></td>
+            <td>
+              <code>ul</code>
+            </td>
+            <td>
+              <ul>
+                <li>Identifies the element as a <code>menubar</code> container for a set of <code>menuitem</code> elements.</li>
+                <li>Is not focusable because focus is managed using <a href="../../#kbd_roving_tabindex">roving tabindex.</a></li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="menubar-aria-label">
+            <td></td>
+            <th scope="row">
+              <code>aria-label=&quot;<em>string</em>&quot;
+              </code>
+            </th>
+            <td>
+              <code>ul</code>
+            </td>
+            <td>
+              <ul>
+                <li>
+                  Defines an accessible name for the <code>menubar</code>.
+                </li>
+                <li>Helps assistive technology users understand the purpose of the menubar and
+                  distinguish it from any other menubars or similar elements on the page.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="menubar-menuitem-role">
+            <th scope="row">
+              <code>menuitem</code>
+            </th>
+            <td></td>
+            <td>
+              <code>span</code>
+            </td>
+            <td>
+              <ul>
+                <li>Identifies the element as a menu item within the menubar.</li>
+                <li>Accessible name comes from the text content.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="menubar-menuitem-tabindex">
+            <td></td>
+            <th scope="row">
+              <code>tabindex=&quot;-1&quot;</code>
+            </th>
+            <td>
+              <code>span</code>
+            </td>
+            <td>
+              Makes the <code>menuitem</code> element keyboard focusable but
+              <strong>not</strong> part of the <kbd>Tab</kbd> sequence of the page.
+            </td>
+          </tr>
+          <tr data-test-id="menubar-menuitem-tabindex">
+            <td></td>
+            <th scope="row">
+              <code>tabindex=&quot;0&quot;</code>
+            </th>
+            <td>
+              <code>span</code>
+            </td>
+            <td>
+              <ul>
+                <li>
+                  Makes the <code>menuitem</code> element keyboard focusable and
+                  part of the <kbd>tab</kbd> sequence of the page.
+                </li>
+                <li>
+                  Only one <code>menuitem</code> in the <code>menubar</code> has <code>tabindex=&quot;0&quot;</code>.
+                </li>
+                <li>
+                  When the page loads, the first item in the menubar has <code>tabindex=&quot;0&quot;</code>.
+                </li>
+                <li>
+                  Focus is managed using <a href="../../#kbd_roving_tabindex">roving tabindex</a>.
+                </li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="menubar-menuitem-aria-haspopup">
+            <td></td>
+            <th scope="row">
+              <code>aria-haspopup=&quot;true&quot;</code>
+            </th>
+            <td>
+              <code>span</code>
+            </td>
+            <td>
+              Indicates that the <code>menuitem</code> has a submenu.
+            </td>
+          </tr>
+          <tr data-test-id="menubar-menuitem-aria-expanded">
+            <td></td>
+            <th scope="row">
+              <code>aria-expanded=&quot;true&quot;</code>
+            </th>
+            <td>
+              <code>span</code>
+            </td>
+            <td>Indicates the menu is open.</td>
+          </tr>
+          <tr data-test-id="menubar-menuitem-aria-expanded">
+            <td></td>
+            <th scope="row">
+              <code>aria-expanded=&quot;false&quot;</code>
+            </th>
+            <td>
+              <code>span</code>
+            </td>
+            <td>Indicates the submenu is closed.</td>
+          </tr>
+        </tbody>
+      </table>
+      <h3 id="rps2_label">Submenu</h3>
+      <table aria-labelledby="rps2_label rps_label" class="data attributes">
+      <thead>
+        <tr>
+          <th scope="col">Role</th>
+          <th scope="col">Attribute</th>
+          <th scope="col">Element</th>
+          <th scope="col">Usage</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr data-test-id="menu-role">
+          <th scope="row">
+            <code>menu</code>
+          </th>
+          <td></td>
+          <td>
+            <code>ul</code>
+          </td>
+          <td>
+            <ul>
+              <li>Identifies the element as a menu container for a set of menu items.</li>
+              <li>Is not focusable because focus is managed using <a href="../../#kbd_roving_tabindex">roving tabindex.</a></li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="menu-aria-label">
+          <td></td>
+          <th scope="row">
+            <code>aria-label=&quot;<em>string</em>&quot;</code>
+          </th>
+          <td>
+            <code>ul</code>
+          </td>
+          <td>
+            Defines an accessible name for the <code>menu</code>.
+          </td>
+        </tr>
+        <tr data-test-id="submenu-menuitem-role">
+          <th scope="row">
+            <code>menuitem</code>
+          </th>
+          <td></td>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            <ul>
+              <li>Identifies the element as an item in the submenu.</li>
+              <li>Accessible name comes from the text content.</li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="submenu-menuitem-tabindex">
+          <td></td>
+          <th scope="row">
+            <code>tabindex=&quot;-1&quot;</code>
+          </th>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            Makes the item focusable but <strong>not</strong> part of the page <kbd>tab</kbd> sequence.
+          </td>
+        </tr>
+        <tr data-test-id="submenu-menuitem-aria-disabled">
+          <td></td>
+          <th scope="row">
+            <code>aria-disabled=&quot;false&quot;</code>
+          </th>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            Used on the font size "Smaller" and "Larger" options to indicate they are active.
+          </td>
+        </tr>
+        <tr data-test-id="submenu-menuitem-aria-disabled">
+          <td></td>
+          <th scope="row">
+            <code>aria-disabled=&quot;true&quot;</code>
+          </th>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            Used on the font size "Smaller" and "Larger" options to indicate one of the options is <strong>not</strong> active because the largest or smallest font has been selected.
+          </td>
+        </tr>
+        <tr data-test-id="menuitemcheckbox-role">
+          <th scope="row">
+            <code>menuitemcheckbox</code>
+          </th>
+          <td></td>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            <ul>
+              <li>Identifies the element as a <code>menuitemcheckbox</code>.</li>
+              <li>Accessible name comes from the text content.</li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="menuitemcheckbox-tabindex">
+          <td></td>
+          <th scope="row">
+            <code>tabindex=&quot;-1&quot;</code>
+          </th>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            Makes the menuitemcheckbox focusable but <strong>not</strong> part of the page <kbd>tab</kbd> sequence.
+          </td>
+        </tr>
+        <tr data-test-id="menuitemcheckbox-aria-checked">
+          <td></td>
+          <th scope="row">
+            <code>aria-checked=&quot;true&quot;</code>
+          </th>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            <ul>
+              <li>
+                Indicates that the <code>menuitemcheckbox</code> is checked.
+              </li>
+              <li>
+                The visual appearance of the selected state is synchronized with the <code>aria-checked</code> value using CSS attribute selectors.
+              </li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="menuitemcheckbox-aria-checked">
+          <td></td>
+          <th scope="row">
+            <code>aria-checked=&quot;false&quot;</code>
+          </th>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            <ul>
+              <li>
+                Indicates that the <code>menuitemcheckbox</code> is <strong>NOT</strong> checked.
+              </li>
+              <li>
+                The visual appearance of the selected state is synchronized with the <code>aria-checked</code> value using CSS attribute selectors.
+              </li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="separator-role">
+          <th scope="row">
+            <code>separator</code>
+          </th>
+          <td></td>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            <ul>
+              <li>Identifies the element as a visual separator between groups of items within a menu, such as groups of <code>menuitemradio</code> or <code>menuitemcheckbox</code> elements.</li>
+              <li>Is not focusable but may be perceivable by a screen reader user when using a reading cursor that does not depend on focus.</li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="group-role">
+          <th scope="row">
+            <code>group</code>
+          </th>
+          <td></td>
+          <td>
+            <code>ul</code>
+          </td>
+          <td>
+            <ul>
+              <li>
+                Identifies the element as a container for a set of <code>menuitemradio</code> elements.
+              </li>
+              <li>
+                Enables browsers to compute values of <code>aria-setsize</code> and <code>aria-posinset</code>.
+              </li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="group-aria-label">
+          <td></td>
+          <th scope="row">
+            <code>aria-label=&quot;string&quot;</code>
+          </th>
+          <td>
+            <code>ul</code>
+          </td>
+          <td>
+            Provides an accessible name for the group of menu items.
+          </td>
+        </tr>
+        <tr data-test-id="menuitemradio-role">
+          <th scope="row">
+            <code>menuitemradio</code>
+          </th>
+          <td></td>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            <ul>
+              <li>
+                Identifies the element as a <code>menuitemradio</code> element.
+              </li>
+              <li>
+                When all items in a submenu are members of the same radio group,
+                the group is defined by the <code>menu</code> element; a <code>group</code> element is not necessary.
+              </li>
+              <li>
+                Accessible name is computed from the text content.
+              </li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="menuitemradio-tabindex">
+          <td></td>
+          <th scope="row">
+            <code>tabindex=&quot;-1&quot;</code>
+          </th>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            Makes the menuitemradio focusable but <strong>not</strong> part of the page <kbd>tab</kbd> sequence.
+          </td>
+        </tr>
+        <tr data-test-id="menuitemradio-aria-checked">
+          <td></td>
+          <th scope="row">
+            <code>aria-checked=&quot;true&quot;</code>
+          </th>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            <ul>
+              <li>
+                Indicates the  <code>menuitemradio</code> is checked.
+              </li>
+              <li>
+                The visual appearance of the selected state is synchronized with the <code>aria-checked</code> value using CSS attribute selectors.
+              </li>
+            </ul>
+          </td>
+        </tr>
+        <tr data-test-id="menuitemradio-aria-checked">
+          <td></td>
+          <th scope="row">
+            <code>aria-checked=&quot;false&quot;</code>
+          </th>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            <ul>
+              <li>
+                Indicates that  the <code>menuitemradio</code> is <strong>NOT</strong> checked.
+              </li>
+              <li>
+                The visual appearance of the selected state is synchronized with the <code>aria-checked</code> value using CSS attribute selectors.
+              </li>
+            </ul>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+      <h3 id="rps3_label">Textarea</h3>
+      <table aria-labelledby="rps3_label rps_label" class="data attributes">
+      <thead>
+        <tr>
+          <th scope="col">Role</th>
+          <th scope="col">Attribute</th>
+          <th scope="col">Element</th>
+          <th scope="col">Usage</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr data-test-id="textarea-aria-label">
+          <td></td>
+          <th scope="row">
+            <code>aria-label=&quot;<em>string</em>&quot;</code>
+          </th>
+          <td>
+            <code>textarea</code>
+          </td>
+          <td>
+            Defines an accessible name for the <code>textarea</code>.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+
+  <section>
+    <h2>Javascript and CSS Source Code</h2>
+    <ul>
+      <li>
+        CSS:
+        <a href="css/menubar-editor.css" type="tex/css">menubar-editor.css</a>
+      </li>
+      <li>
+        Javascript: <a href="js/menubar-editor.js" type="text/javascript">menubar-editor.js</a>
+      </li>
+      <li>
+        Javascript: <a href="js/style-manager.js" type="text/javascript">style-manager.js</a>
+      </li>
+    </ul>
+  </section>
+
+  <section>
+    <h2 id="sc1_label">HTML Source Code</h2>
+    <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of" ></div>
+    <pre><code id="sc1"></code></pre>
+    <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of" ></div>
+    <script>
+sourceCode.add('sc1', 'ex1');
+</script>
+    <!--  After all source has been added, run make to do the insert.  -->
+    <script>
+sourceCode.make();
+</script>
+  </section>
+  </main>
+  <nav>
+    <a href="../../#menu">Menu or Menubar Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
+  </nav>
+
+</body>
+</html>
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
new file mode 100644
index 000000000..72a3f573c
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/css/menubar-editor.css
@@ -0,0 +1,200 @@
+.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
new file mode 100644
index 000000000..dddce81d0
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/css/menubar-navigation.css
@@ -0,0 +1,114 @@
+.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
new file mode 100644
index 000000000..47f273cec
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/images/checkbox-checked-focus.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20">
+  <polyline points="2,13  2,15 7,20 12,8 12,6 7,17 2,13" fill="#FFF" stroke-width="1" stroke="#FFF"/>
+</svg>
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
new file mode 100644
index 000000000..4a68a8a97
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/images/checkbox-checked.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20">
+  <polyline points="2,13  2,15 7,20 12,8 12,6 7,17 2,13" fill="#034575" stroke-width="1" stroke="#034575"/>
+</svg>
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
new file mode 100644
index 000000000..8f6ea6637
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/images/down-arrow-focus.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9">
+ <polygon points="1 0, 11 0, 6 8"  fill="#fff" stroke= "#fff" />
+</svg>
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
new file mode 100644
index 000000000..a0a2556a5
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/images/down-arrow.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9">
+ <polygon points="1 0, 11 0, 6 8"  fill="#444" stroke= "#444" />
+</svg>
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
new file mode 100644
index 000000000..04c1a03d0
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/images/radio-checked-focus.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20">
+ <circle cx="8" cy="14" r="5"  fill="#FFF" stroke-width="1" stroke="#FFF"/>
+</svg>
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
new file mode 100644
index 000000000..f34a549a3
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/images/radio-checked.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20">
+ <circle cx="8" cy="14" r="5"  fill="#034575" stroke-width="1" stroke="#034575"/>
+</svg>
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
new file mode 100644
index 000000000..b4b39760b
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/images/separator.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+  <line x1="0" y1="6" x2="12" y2="6" style="stroke:black;stroke-width:1" />
+</svg>
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
new file mode 100644
index 000000000..ede8a5d71
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/images/up-arrow-focus.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9">
+ <polygon points="1 8, 11 8, 6 0" fill="#fff" stroke="#fff"/>
+</svg>
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
new file mode 100644
index 000000000..d034dad15
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/images/up-arrow.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9">
+ <polygon points="1 9, 11 9, 6 0" fill=" #034575" stroke= "#034575" />
+</svg>
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
new file mode 100644
index 000000000..905b4ce87
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/js/menubar-editor.js
@@ -0,0 +1,709 @@
+/*
+ *   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
new file mode 100644
index 000000000..ebb2dee4d
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/js/menubar-navigation.js
@@ -0,0 +1,630 @@
+/*
+ *   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
new file mode 100644
index 000000000..06e35d7c4
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/js/style-manager.js
@@ -0,0 +1,158 @@
+/*
+ *   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
new file mode 100644
index 000000000..6218e8ba6
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-20_13316/menubar-editor.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <title>Editor Menubar Example | WAI-ARIA Authoring Practices 1.2</title>
+
+  
+  <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css" />
+  <link rel="stylesheet" href="../css/core.css" />
+  <script src="../js/examples.js"></script>
+  <script src="../js/highlight.pack.js"></script>
+  <script src="../js/app.js"></script>
+
+  
+  <link href="css/menubar-editor.css" rel="stylesheet" />
+  <script src="js/menubar-editor.js"    type="text/javascript"></script>
+  <script src="js/style-manager.js"    type="text/javascript"></script>
+
+  
+  <link rel="preload" as="image" href="images/checkbox-checked-focus.svg" />
+  <link rel="preload" as="image" href="images/checkbox-checked.svg" />
+  <link rel="preload" as="image" href="images/down-arrow-focus.svg" />
+  <link rel="preload" as="image" href="images/down-arrow.svg" />
+  <link rel="preload" as="image" href="images/radio-checked-focus.svg" />
+  <link rel="preload" as="image" href="images/radio-checked.svg" />
+  <link rel="preload" as="image" href="images/separator.svg" />
+  <link rel="preload" as="image" href="images/up-arrow-focus.svg" />
+</head>
+<body>
+  <h1>Editor Menubar Example</h1>
+
+  <div id="ex1">
+      <div class="menubar-editor">
+        <ul role="menubar" aria-label="Text Formatting">
+          <li role="none">
+            <span role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="0">Font</span>
+            <ul role="menu" data-option="font-family" aria-label="Font" >
+              <li role="menuitemradio" aria-checked="true">Sans-serif</li>
+              <li role="menuitemradio" aria-checked="false">Serif</li>
+              <li role="menuitemradio" aria-checked="false">Monospace</li>
+              <li role="menuitemradio" aria-checked="false">Fantasy</li>
+            </ul>
+          </li>
+          <li role="none">
+            <span role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="-1">Style/Color</span>
+            <ul role="menu" aria-label="Style/Color">
+              <li role="none">
+                <ul role="group" data-option="font-style" aria-label="Font Style">
+                  <li role="menuitemcheckbox" data-option="font-bold" aria-checked="false">Bold</li>
+                  <li role="menuitemcheckbox" data-option="font-italic" aria-checked="false">Italic</li>
+                </ul>
+              </li>
+              <li role="separator"></li>
+              <li role="none">
+                <ul role="group" data-option="font-color" aria-label="Text Color">
+                  <li role="menuitemradio" aria-checked="true">Black</li>
+                  <li role="menuitemradio" aria-checked="false">Blue</li>
+                  <li role="menuitemradio" aria-checked="false">Red</li>
+                  <li role="menuitemradio" aria-checked="false">Green</li>
+                </ul>
+              </li><li role="separator"></li>
+              <li role="none">
+                <ul role="group" data-option="text-decoration" aria-label="Text Decoration">
+                  <li role="menuitemradio" aria-checked="true">None</li>
+                  <li role="menuitemradio" aria-checked="false">Overline</li>
+                  <li role="menuitemradio" aria-checked="false">Line-through</li>
+                  <li role="menuitemradio" aria-checked="false">Underline</li>
+                </ul>
+            </li></ul>
+          </li>
+
+          <li role="none">
+            <span role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="-1">Text Align</span>
+            <ul role="menu" data-option="text-align" aria-label="Text Align">
+              <li role="menuitemradio" aria-checked="true">Left</li>
+              <li role="menuitemradio" aria-checked="false">Center</li>
+              <li role="menuitemradio" aria-checked="false">Right</li>
+              <li role="menuitemradio" aria-checked="false">Justify</li>
+            </ul>
+          </li>
+
+          <li role="none">
+            <span role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="-1">Size</span>
+            <ul role="menu" aria-label="Size" >
+              <li role="menuitem" data-option="font-smaller" aria-disabled="false">Smaller</li>
+              <li role="menuitem" data-option="font-larger"  aria-disabled="false">Larger</li>
+              <li role="separator"></li>
+              <li>
+                <ul role="group" data-option="font-size" aria-label="Font Sizes">
+                  <li role="menuitemradio" aria-checked="false">X-Small</li>
+                  <li role="menuitemradio" aria-checked="false">Small</li>
+                  <li role="menuitemradio" aria-checked="true">Medium</li>
+                  <li role="menuitemradio" aria-checked="false">Large</li>
+                  <li role="menuitemradio" aria-checked="false">X-Large</li>
+                </ul>
+            </li></ul>
+          </li>
+        </ul>
+        <textarea style="font-size: medium; font-family: sans-serif" aria-label="Text Sample"
+        >
+            Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
+
+            Now we are engaged in a great civil war, testing whether that nation, or any nation, so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
+
+            But, in a larger sense, we can not dedicate, we can not consecrate, we can not hallow, this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us, that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion, that we here highly resolve that these dead shall not have died in vain, that this nation, under God, shall have a new birth of freedom, and that government of the people, by the people, for the people, shall not perish from the earth.
+            </textarea>
+      </div>
+
+      <p>
+        <a href="https://en.wikipedia.org/wiki/Gettysburg,_Pennsylvania">More information on
+          Gettysburg Address</a>
+      </p>
+
+
+    </div>
+</body>
+</html>
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
new file mode 100644
index 000000000..72a3f573c
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/css/menubar-editor.css
@@ -0,0 +1,200 @@
+.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
new file mode 100644
index 000000000..dddce81d0
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/css/menubar-navigation.css
@@ -0,0 +1,114 @@
+.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
new file mode 100644
index 000000000..47f273cec
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/images/checkbox-checked-focus.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20">
+  <polyline points="2,13  2,15 7,20 12,8 12,6 7,17 2,13" fill="#FFF" stroke-width="1" stroke="#FFF"/>
+</svg>
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
new file mode 100644
index 000000000..4a68a8a97
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/images/checkbox-checked.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20">
+  <polyline points="2,13  2,15 7,20 12,8 12,6 7,17 2,13" fill="#034575" stroke-width="1" stroke="#034575"/>
+</svg>
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
new file mode 100644
index 000000000..8f6ea6637
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/images/down-arrow-focus.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9">
+ <polygon points="1 0, 11 0, 6 8"  fill="#fff" stroke= "#fff" />
+</svg>
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
new file mode 100644
index 000000000..a0a2556a5
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/images/down-arrow.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9">
+ <polygon points="1 0, 11 0, 6 8"  fill="#444" stroke= "#444" />
+</svg>
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
new file mode 100644
index 000000000..04c1a03d0
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/images/radio-checked-focus.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20">
+ <circle cx="8" cy="14" r="5"  fill="#FFF" stroke-width="1" stroke="#FFF"/>
+</svg>
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
new file mode 100644
index 000000000..f34a549a3
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/images/radio-checked.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20">
+ <circle cx="8" cy="14" r="5"  fill="#034575" stroke-width="1" stroke="#034575"/>
+</svg>
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
new file mode 100644
index 000000000..b4b39760b
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/images/separator.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+  <line x1="0" y1="6" x2="12" y2="6" style="stroke:black;stroke-width:1" />
+</svg>
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
new file mode 100644
index 000000000..ede8a5d71
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/images/up-arrow-focus.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9">
+ <polygon points="1 8, 11 8, 6 0" fill="#fff" stroke="#fff"/>
+</svg>
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
new file mode 100644
index 000000000..d034dad15
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/images/up-arrow.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9">
+ <polygon points="1 9, 11 9, 6 0" fill=" #034575" stroke= "#034575" />
+</svg>
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
new file mode 100644
index 000000000..905b4ce87
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/js/menubar-editor.js
@@ -0,0 +1,709 @@
+/*
+ *   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
new file mode 100644
index 000000000..ebb2dee4d
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/js/menubar-navigation.js
@@ -0,0 +1,630 @@
+/*
+ *   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
new file mode 100644
index 000000000..06e35d7c4
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/js/style-manager.js
@@ -0,0 +1,158 @@
+/*
+ *   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
new file mode 100644
index 000000000..6218e8ba6
--- /dev/null
+++ b/build/tests/menubar-editor/reference/2020-11-23_175528/menubar-editor.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <title>Editor Menubar Example | WAI-ARIA Authoring Practices 1.2</title>
+
+  
+  <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css" />
+  <link rel="stylesheet" href="../css/core.css" />
+  <script src="../js/examples.js"></script>
+  <script src="../js/highlight.pack.js"></script>
+  <script src="../js/app.js"></script>
+
+  
+  <link href="css/menubar-editor.css" rel="stylesheet" />
+  <script src="js/menubar-editor.js"    type="text/javascript"></script>
+  <script src="js/style-manager.js"    type="text/javascript"></script>
+
+  
+  <link rel="preload" as="image" href="images/checkbox-checked-focus.svg" />
+  <link rel="preload" as="image" href="images/checkbox-checked.svg" />
+  <link rel="preload" as="image" href="images/down-arrow-focus.svg" />
+  <link rel="preload" as="image" href="images/down-arrow.svg" />
+  <link rel="preload" as="image" href="images/radio-checked-focus.svg" />
+  <link rel="preload" as="image" href="images/radio-checked.svg" />
+  <link rel="preload" as="image" href="images/separator.svg" />
+  <link rel="preload" as="image" href="images/up-arrow-focus.svg" />
+</head>
+<body>
+  <h1>Editor Menubar Example</h1>
+
+  <div id="ex1">
+      <div class="menubar-editor">
+        <ul role="menubar" aria-label="Text Formatting">
+          <li role="none">
+            <span role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="0">Font</span>
+            <ul role="menu" data-option="font-family" aria-label="Font" >
+              <li role="menuitemradio" aria-checked="true">Sans-serif</li>
+              <li role="menuitemradio" aria-checked="false">Serif</li>
+              <li role="menuitemradio" aria-checked="false">Monospace</li>
+              <li role="menuitemradio" aria-checked="false">Fantasy</li>
+            </ul>
+          </li>
+          <li role="none">
+            <span role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="-1">Style/Color</span>
+            <ul role="menu" aria-label="Style/Color">
+              <li role="none">
+                <ul role="group" data-option="font-style" aria-label="Font Style">
+                  <li role="menuitemcheckbox" data-option="font-bold" aria-checked="false">Bold</li>
+                  <li role="menuitemcheckbox" data-option="font-italic" aria-checked="false">Italic</li>
+                </ul>
+              </li>
+              <li role="separator"></li>
+              <li role="none">
+                <ul role="group" data-option="font-color" aria-label="Text Color">
+                  <li role="menuitemradio" aria-checked="true">Black</li>
+                  <li role="menuitemradio" aria-checked="false">Blue</li>
+                  <li role="menuitemradio" aria-checked="false">Red</li>
+                  <li role="menuitemradio" aria-checked="false">Green</li>
+                </ul>
+              </li><li role="separator"></li>
+              <li role="none">
+                <ul role="group" data-option="text-decoration" aria-label="Text Decoration">
+                  <li role="menuitemradio" aria-checked="true">None</li>
+                  <li role="menuitemradio" aria-checked="false">Overline</li>
+                  <li role="menuitemradio" aria-checked="false">Line-through</li>
+                  <li role="menuitemradio" aria-checked="false">Underline</li>
+                </ul>
+            </li></ul>
+          </li>
+
+          <li role="none">
+            <span role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="-1">Text Align</span>
+            <ul role="menu" data-option="text-align" aria-label="Text Align">
+              <li role="menuitemradio" aria-checked="true">Left</li>
+              <li role="menuitemradio" aria-checked="false">Center</li>
+              <li role="menuitemradio" aria-checked="false">Right</li>
+              <li role="menuitemradio" aria-checked="false">Justify</li>
+            </ul>
+          </li>
+
+          <li role="none">
+            <span role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="-1">Size</span>
+            <ul role="menu" aria-label="Size" >
+              <li role="menuitem" data-option="font-smaller" aria-disabled="false">Smaller</li>
+              <li role="menuitem" data-option="font-larger"  aria-disabled="false">Larger</li>
+              <li role="separator"></li>
+              <li>
+                <ul role="group" data-option="font-size" aria-label="Font Sizes">
+                  <li role="menuitemradio" aria-checked="false">X-Small</li>
+                  <li role="menuitemradio" aria-checked="false">Small</li>
+                  <li role="menuitemradio" aria-checked="true">Medium</li>
+                  <li role="menuitemradio" aria-checked="false">Large</li>
+                  <li role="menuitemradio" aria-checked="false">X-Large</li>
+                </ul>
+            </li></ul>
+          </li>
+        </ul>
+        <textarea style="font-size: medium; font-family: sans-serif" aria-label="Text Sample"
+        >
+            Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
+
+            Now we are engaged in a great civil war, testing whether that nation, or any nation, so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
+
+            But, in a larger sense, we can not dedicate, we can not consecrate, we can not hallow, this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us, that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion, that we here highly resolve that these dead shall not have died in vain, that this nation, under God, shall have a new birth of freedom, and that government of the people, by the people, for the people, shall not perish from the earth.
+            </textarea>
+      </div>
+
+      <p>
+        <a href="https://en.wikipedia.org/wiki/Gettysburg,_Pennsylvania">More information on
+          Gettysburg Address</a>
+      </p>
+
+
+    </div>
+</body>
+</html>
diff --git a/tests/menubar-editor/test-01-navigate-to-menubar-reading.html b/build/tests/menubar-editor/test-01-navigate-to-menubar-reading.html
similarity index 100%
rename from tests/menubar-editor/test-01-navigate-to-menubar-reading.html
rename to build/tests/menubar-editor/test-01-navigate-to-menubar-reading.html
diff --git a/tests/menubar-editor/test-01-navigate-to-menubar-reading.json b/build/tests/menubar-editor/test-01-navigate-to-menubar-reading.json
similarity index 100%
rename from tests/menubar-editor/test-01-navigate-to-menubar-reading.json
rename to build/tests/menubar-editor/test-01-navigate-to-menubar-reading.json
diff --git a/tests/menubar-editor/test-02-activate-menubar-reading.html b/build/tests/menubar-editor/test-02-activate-menubar-reading.html
similarity index 100%
rename from tests/menubar-editor/test-02-activate-menubar-reading.html
rename to build/tests/menubar-editor/test-02-activate-menubar-reading.html
diff --git a/tests/menubar-editor/test-02-activate-menubar-reading.json b/build/tests/menubar-editor/test-02-activate-menubar-reading.json
similarity index 100%
rename from tests/menubar-editor/test-02-activate-menubar-reading.json
rename to build/tests/menubar-editor/test-02-activate-menubar-reading.json
diff --git a/tests/menubar-editor/test-03-tab-to-menubar-reading.html b/build/tests/menubar-editor/test-03-tab-to-menubar-reading.html
similarity index 100%
rename from tests/menubar-editor/test-03-tab-to-menubar-reading.html
rename to build/tests/menubar-editor/test-03-tab-to-menubar-reading.html
diff --git a/tests/menubar-editor/test-03-tab-to-menubar-reading.json b/build/tests/menubar-editor/test-03-tab-to-menubar-reading.json
similarity index 100%
rename from tests/menubar-editor/test-03-tab-to-menubar-reading.json
rename to build/tests/menubar-editor/test-03-tab-to-menubar-reading.json
diff --git a/tests/menubar-editor/test-04-navigate-to-menubar-interaction.html b/build/tests/menubar-editor/test-04-navigate-to-menubar-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-04-navigate-to-menubar-interaction.html
rename to build/tests/menubar-editor/test-04-navigate-to-menubar-interaction.html
diff --git a/tests/menubar-editor/test-04-navigate-to-menubar-interaction.json b/build/tests/menubar-editor/test-04-navigate-to-menubar-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-04-navigate-to-menubar-interaction.json
rename to build/tests/menubar-editor/test-04-navigate-to-menubar-interaction.json
diff --git a/tests/menubar-editor/test-05-navigate-to-menubar-interaction.html b/build/tests/menubar-editor/test-05-navigate-to-menubar-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-05-navigate-to-menubar-interaction.html
rename to build/tests/menubar-editor/test-05-navigate-to-menubar-interaction.html
diff --git a/tests/menubar-editor/test-05-navigate-to-menubar-interaction.json b/build/tests/menubar-editor/test-05-navigate-to-menubar-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-05-navigate-to-menubar-interaction.json
rename to build/tests/menubar-editor/test-05-navigate-to-menubar-interaction.json
diff --git a/tests/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.html b/build/tests/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.html
similarity index 100%
rename from tests/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.html
rename to build/tests/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.html
diff --git a/tests/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.json b/build/tests/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.json
similarity index 100%
rename from tests/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.json
rename to build/tests/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.json
diff --git a/tests/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.html b/build/tests/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.html
rename to build/tests/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.html
diff --git a/tests/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.json b/build/tests/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.json
rename to build/tests/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.json
diff --git a/tests/menubar-editor/test-08-navigate-to-menuitem-in-menubar-interaction.html b/build/tests/menubar-editor/test-08-navigate-to-menuitem-in-menubar-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-08-navigate-to-menuitem-in-menubar-interaction.html
rename to build/tests/menubar-editor/test-08-navigate-to-menuitem-in-menubar-interaction.html
diff --git a/tests/menubar-editor/test-08-navigate-to-menuitem-in-menubar-interaction.json b/build/tests/menubar-editor/test-08-navigate-to-menuitem-in-menubar-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-08-navigate-to-menuitem-in-menubar-interaction.json
rename to build/tests/menubar-editor/test-08-navigate-to-menuitem-in-menubar-interaction.json
diff --git a/tests/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.html b/build/tests/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.html
rename to build/tests/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.html
diff --git a/tests/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.json b/build/tests/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.json
rename to build/tests/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.json
diff --git a/tests/menubar-editor/test-10-navigate-to-open-menuitem-in-menubar-interaction.html b/build/tests/menubar-editor/test-10-navigate-to-open-menuitem-in-menubar-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-10-navigate-to-open-menuitem-in-menubar-interaction.html
rename to build/tests/menubar-editor/test-10-navigate-to-open-menuitem-in-menubar-interaction.html
diff --git a/tests/menubar-editor/test-10-navigate-to-open-menuitem-in-menubar-interaction.json b/build/tests/menubar-editor/test-10-navigate-to-open-menuitem-in-menubar-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-10-navigate-to-open-menuitem-in-menubar-interaction.json
rename to build/tests/menubar-editor/test-10-navigate-to-open-menuitem-in-menubar-interaction.json
diff --git a/tests/menubar-editor/test-11-open-submenu-of-menubar-interaction.html b/build/tests/menubar-editor/test-11-open-submenu-of-menubar-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-11-open-submenu-of-menubar-interaction.html
rename to build/tests/menubar-editor/test-11-open-submenu-of-menubar-interaction.html
diff --git a/tests/menubar-editor/test-11-open-submenu-of-menubar-interaction.json b/build/tests/menubar-editor/test-11-open-submenu-of-menubar-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-11-open-submenu-of-menubar-interaction.json
rename to build/tests/menubar-editor/test-11-open-submenu-of-menubar-interaction.json
diff --git a/tests/menubar-editor/test-12-open-submenu-of-menubar-interaction.html b/build/tests/menubar-editor/test-12-open-submenu-of-menubar-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-12-open-submenu-of-menubar-interaction.html
rename to build/tests/menubar-editor/test-12-open-submenu-of-menubar-interaction.html
diff --git a/tests/menubar-editor/test-12-open-submenu-of-menubar-interaction.json b/build/tests/menubar-editor/test-12-open-submenu-of-menubar-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-12-open-submenu-of-menubar-interaction.json
rename to build/tests/menubar-editor/test-12-open-submenu-of-menubar-interaction.json
diff --git a/tests/menubar-editor/test-13-close-submenu-of-menubar-interaction.html b/build/tests/menubar-editor/test-13-close-submenu-of-menubar-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-13-close-submenu-of-menubar-interaction.html
rename to build/tests/menubar-editor/test-13-close-submenu-of-menubar-interaction.html
diff --git a/tests/menubar-editor/test-13-close-submenu-of-menubar-interaction.json b/build/tests/menubar-editor/test-13-close-submenu-of-menubar-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-13-close-submenu-of-menubar-interaction.json
rename to build/tests/menubar-editor/test-13-close-submenu-of-menubar-interaction.json
diff --git a/tests/menubar-editor/test-14-close-submenu-of-menubar-interaction.html b/build/tests/menubar-editor/test-14-close-submenu-of-menubar-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-14-close-submenu-of-menubar-interaction.html
rename to build/tests/menubar-editor/test-14-close-submenu-of-menubar-interaction.html
diff --git a/tests/menubar-editor/test-14-close-submenu-of-menubar-interaction.json b/build/tests/menubar-editor/test-14-close-submenu-of-menubar-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-14-close-submenu-of-menubar-interaction.json
rename to build/tests/menubar-editor/test-14-close-submenu-of-menubar-interaction.json
diff --git a/tests/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.html b/build/tests/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.html
rename to build/tests/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.html
diff --git a/tests/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.json b/build/tests/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.json
rename to build/tests/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.json
diff --git a/tests/menubar-editor/test-16-navigate-to-checked-menuitemradio-in-submenu-interaction.html b/build/tests/menubar-editor/test-16-navigate-to-checked-menuitemradio-in-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-16-navigate-to-checked-menuitemradio-in-submenu-interaction.html
rename to build/tests/menubar-editor/test-16-navigate-to-checked-menuitemradio-in-submenu-interaction.html
diff --git a/tests/menubar-editor/test-16-navigate-to-checked-menuitemradio-in-submenu-interaction.json b/build/tests/menubar-editor/test-16-navigate-to-checked-menuitemradio-in-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-16-navigate-to-checked-menuitemradio-in-submenu-interaction.json
rename to build/tests/menubar-editor/test-16-navigate-to-checked-menuitemradio-in-submenu-interaction.json
diff --git a/tests/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html b/build/tests/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html
rename to build/tests/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html
diff --git a/tests/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.json b/build/tests/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.json
rename to build/tests/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.json
diff --git a/tests/menubar-editor/test-18-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html b/build/tests/menubar-editor/test-18-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-18-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html
rename to build/tests/menubar-editor/test-18-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html
diff --git a/tests/menubar-editor/test-18-navigate-to-unchecked-menuitemradio-in-submenu-interaction.json b/build/tests/menubar-editor/test-18-navigate-to-unchecked-menuitemradio-in-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-18-navigate-to-unchecked-menuitemradio-in-submenu-interaction.json
rename to build/tests/menubar-editor/test-18-navigate-to-unchecked-menuitemradio-in-submenu-interaction.json
diff --git a/tests/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html b/build/tests/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html
rename to build/tests/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html
diff --git a/tests/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.json b/build/tests/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.json
rename to build/tests/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.json
diff --git a/tests/menubar-editor/test-20-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html b/build/tests/menubar-editor/test-20-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-20-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html
rename to build/tests/menubar-editor/test-20-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html
diff --git a/tests/menubar-editor/test-20-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.json b/build/tests/menubar-editor/test-20-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-20-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.json
rename to build/tests/menubar-editor/test-20-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.json
diff --git a/tests/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html b/build/tests/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html
rename to build/tests/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html
diff --git a/tests/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.json b/build/tests/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.json
rename to build/tests/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.json
diff --git a/tests/menubar-editor/test-22-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html b/build/tests/menubar-editor/test-22-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-22-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html
rename to build/tests/menubar-editor/test-22-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html
diff --git a/tests/menubar-editor/test-22-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.json b/build/tests/menubar-editor/test-22-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-22-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.json
rename to build/tests/menubar-editor/test-22-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.json
diff --git a/tests/menubar-editor/test-23-read-menuitem-in-menubar-reading.html b/build/tests/menubar-editor/test-23-read-menuitem-in-menubar-reading.html
similarity index 100%
rename from tests/menubar-editor/test-23-read-menuitem-in-menubar-reading.html
rename to build/tests/menubar-editor/test-23-read-menuitem-in-menubar-reading.html
diff --git a/tests/menubar-editor/test-23-read-menuitem-in-menubar-reading.json b/build/tests/menubar-editor/test-23-read-menuitem-in-menubar-reading.json
similarity index 100%
rename from tests/menubar-editor/test-23-read-menuitem-in-menubar-reading.json
rename to build/tests/menubar-editor/test-23-read-menuitem-in-menubar-reading.json
diff --git a/tests/menubar-editor/test-24-read-menuitem-in-menubar-interaction.html b/build/tests/menubar-editor/test-24-read-menuitem-in-menubar-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-24-read-menuitem-in-menubar-interaction.html
rename to build/tests/menubar-editor/test-24-read-menuitem-in-menubar-interaction.html
diff --git a/tests/menubar-editor/test-24-read-menuitem-in-menubar-interaction.json b/build/tests/menubar-editor/test-24-read-menuitem-in-menubar-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-24-read-menuitem-in-menubar-interaction.json
rename to build/tests/menubar-editor/test-24-read-menuitem-in-menubar-interaction.json
diff --git a/tests/menubar-editor/test-25-read-menuitem-in-menubar-interaction.html b/build/tests/menubar-editor/test-25-read-menuitem-in-menubar-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-25-read-menuitem-in-menubar-interaction.html
rename to build/tests/menubar-editor/test-25-read-menuitem-in-menubar-interaction.html
diff --git a/tests/menubar-editor/test-25-read-menuitem-in-menubar-interaction.json b/build/tests/menubar-editor/test-25-read-menuitem-in-menubar-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-25-read-menuitem-in-menubar-interaction.json
rename to build/tests/menubar-editor/test-25-read-menuitem-in-menubar-interaction.json
diff --git a/tests/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.html b/build/tests/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.html
similarity index 100%
rename from tests/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.html
rename to build/tests/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.html
diff --git a/tests/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.json b/build/tests/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.json
similarity index 100%
rename from tests/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.json
rename to build/tests/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.json
diff --git a/tests/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html b/build/tests/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html
rename to build/tests/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html
diff --git a/tests/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.json b/build/tests/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.json
rename to build/tests/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.json
diff --git a/tests/menubar-editor/test-28-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html b/build/tests/menubar-editor/test-28-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-28-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html
rename to build/tests/menubar-editor/test-28-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html
diff --git a/tests/menubar-editor/test-28-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.json b/build/tests/menubar-editor/test-28-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-28-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.json
rename to build/tests/menubar-editor/test-28-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.json
diff --git a/tests/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.html b/build/tests/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.html
similarity index 100%
rename from tests/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.html
rename to build/tests/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.html
diff --git a/tests/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.json b/build/tests/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.json
similarity index 100%
rename from tests/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.json
rename to build/tests/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.json
diff --git a/tests/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html b/build/tests/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html
rename to build/tests/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html
diff --git a/tests/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.json b/build/tests/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.json
rename to build/tests/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.json
diff --git a/tests/menubar-editor/test-31-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html b/build/tests/menubar-editor/test-31-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-31-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html
rename to build/tests/menubar-editor/test-31-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html
diff --git a/tests/menubar-editor/test-31-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.json b/build/tests/menubar-editor/test-31-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-31-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.json
rename to build/tests/menubar-editor/test-31-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.json
diff --git a/tests/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html b/build/tests/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html
similarity index 100%
rename from tests/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html
rename to build/tests/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html
diff --git a/tests/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.json b/build/tests/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.json
similarity index 100%
rename from tests/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.json
rename to build/tests/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.json
diff --git a/tests/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html b/build/tests/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html
rename to build/tests/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html
diff --git a/tests/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json b/build/tests/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json
rename to build/tests/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json
diff --git a/tests/menubar-editor/test-34-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html b/build/tests/menubar-editor/test-34-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-34-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html
rename to build/tests/menubar-editor/test-34-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html
diff --git a/tests/menubar-editor/test-34-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json b/build/tests/menubar-editor/test-34-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-34-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json
rename to build/tests/menubar-editor/test-34-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json
diff --git a/tests/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html b/build/tests/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html
similarity index 100%
rename from tests/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html
rename to build/tests/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html
diff --git a/tests/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.json b/build/tests/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.json
similarity index 100%
rename from tests/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.json
rename to build/tests/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.json
diff --git a/tests/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html b/build/tests/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html
rename to build/tests/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html
diff --git a/tests/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json b/build/tests/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json
rename to build/tests/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json
diff --git a/tests/menubar-editor/test-37-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html b/build/tests/menubar-editor/test-37-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-37-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html
rename to build/tests/menubar-editor/test-37-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html
diff --git a/tests/menubar-editor/test-37-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json b/build/tests/menubar-editor/test-37-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-37-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json
rename to build/tests/menubar-editor/test-37-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.json
diff --git a/tests/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.html b/build/tests/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.html
similarity index 100%
rename from tests/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.html
rename to build/tests/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.html
diff --git a/tests/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.json b/build/tests/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.json
similarity index 100%
rename from tests/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.json
rename to build/tests/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.json
diff --git a/tests/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.html b/build/tests/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.html
rename to build/tests/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.html
diff --git a/tests/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.json b/build/tests/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.json
rename to build/tests/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.json
diff --git a/tests/menubar-editor/test-40-read-disabled-menuitem-in-a-submenu-interaction.html b/build/tests/menubar-editor/test-40-read-disabled-menuitem-in-a-submenu-interaction.html
similarity index 100%
rename from tests/menubar-editor/test-40-read-disabled-menuitem-in-a-submenu-interaction.html
rename to build/tests/menubar-editor/test-40-read-disabled-menuitem-in-a-submenu-interaction.html
diff --git a/tests/menubar-editor/test-40-read-disabled-menuitem-in-a-submenu-interaction.json b/build/tests/menubar-editor/test-40-read-disabled-menuitem-in-a-submenu-interaction.json
similarity index 100%
rename from tests/menubar-editor/test-40-read-disabled-menuitem-in-a-submenu-interaction.json
rename to build/tests/menubar-editor/test-40-read-disabled-menuitem-in-a-submenu-interaction.json
diff --git a/tests/modal-dialog/commands.json b/build/tests/modal-dialog/commands.json
similarity index 100%
rename from tests/modal-dialog/commands.json
rename to build/tests/modal-dialog/commands.json
diff --git a/tests/modal-dialog/index.html b/build/tests/modal-dialog/index.html
similarity index 100%
rename from tests/modal-dialog/index.html
rename to build/tests/modal-dialog/index.html
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
new file mode 100644
index 000000000..58b6d54f1
--- /dev/null
+++ b/build/tests/modal-dialog/reference/2020-12-17_13353/css/dialog.css
@@ -0,0 +1,165 @@
+.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 <dialog> 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
new file mode 100644
index 000000000..69879ed9c
--- /dev/null
+++ b/build/tests/modal-dialog/reference/2020-12-17_13353/dialog.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Modal Dialog Example</title>
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<!--  js and css for this example. -->
+<link href="css/dialog.css" rel="stylesheet">
+<script src="js/utils.js" type="text/javascript"></script>
+<script src="js/dialog.js" type="text/javascript"></script>
+
+</head>
+<body>
+  <main>
+    <h1>Modal Dialog Example</h1>
+    <p>
+      Following is an example implementation of the
+      <a href="https://w3c.github.io/aria-practices/#dialog_modal">design pattern for modal dialogs.</a>
+      The below <q>Add Delivery Address</q> 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 <code>aria-describedby</code> in each dialog.
+    </p>
+    <section>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
+      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+      <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
+      <div id="ex1">
+        <button type="button" onclick="openDialog('dialog1', this)">Add Delivery Address</button>
+        <div id="dialog_layer" class="dialogs">
+          <div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true" class="hidden">
+            <h2 id="dialog1_label" class="dialog_label">Add Delivery Address</h2>
+            <div class="dialog_form">
+              <div class="dialog_form_item">
+                <label>
+                  <span class="label_text">Street:</span>
+                  <input type="text" class="wide_input">
+                </label>
+              </div>
+              <div class="dialog_form_item">
+                <label>
+                  <span class="label_text">City:</span>
+                  <input type="text" class="city_input">
+                </label>
+              </div>
+              <div class="dialog_form_item">
+                <label>
+                  <span class="label_text">State:</span>
+                  <input type="text" class="state_input">
+                </label>
+              </div>
+              <div class="dialog_form_item">
+                <label>
+                  <span class="label_text">Zip:</span>
+                  <input type="text" class="zip_input">
+                </label>
+              </div>
+
+              <div class="dialog_form_item">
+                <label for="special_instructions">
+                  <span class="label_text">Special instructions:</span>
+                </label>
+                <input id="special_instructions" type="text" aria-describedby="special_instructions_desc" class="wide_input">
+                <div class="label_info" id="special_instructions_desc">
+                  For example, gate code or other information to help the driver find you
+                </div>
+              </div>
+            </div>
+            <div class="dialog_form_actions">
+              <button id="dialog1_verify" type="button" onclick="openDialog('dialog2', this, 'dialog2_para1')">Verify Address</button>
+              <button id="dialog1_add" type="button" onclick="replaceDialog('dialog3', undefined, 'dialog3_close_btn')">Add</button>
+              <button id="dialog1_cancel" type="button" onclick="closeDialog(this)">Cancel</button>
+            </div>
+          </div>
+
+          <!--  Second modal to open on top of the first modal  -->
+          <div id="dialog2" role="dialog" aria-labelledby="dialog2_label"
+               aria-describedby="dialog2_desc" aria-modal="true" class="hidden">
+            <h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
+            <div id="dialog2_desc" class="dialog_desc">
+              <p tabindex="-1" id="dialog2_para1">This is just a demonstration. If it were a real application, it would
+                provide a message telling whether the entered address is valid.</p>
+              <p>
+                For demonstration purposes, this dialog has a lot of text. It demonstrates a
+                scenario where:
+              </p>
+              <ul>
+                <li>The first interactive element, the help link, is at the bottom of the dialog.</li>
+                <li>If focus is placed on the first interactive element when the dialog opens, the
+                  validation message may not be visible.</li>
+                <li>If the validation message is visible and the focus is on the help link, then
+                  the focus may not be visible.</li>
+                <li>
+                  When the dialog opens, it is important that both:
+                  <ul>
+                    <li>The beginning of the text is visible so users do not have to scroll back to
+                      start reading.</li>
+                    <li>The keyboard focus always remains visible.</li>
+                  </ul>
+                </li>
+              </ul>
+              <p>There are several ways to resolve this issue:</p>
+              <ul>
+                <li>Place an interactive element at the top of the dialog, e.g., a button or link.</li>
+                <li>Make a static element focusable, e.g., the dialog title or the first block of
+                  text.</li>
+              </ul>
+              <p>
+                Please <em>DO NOT </em> make the element with role dialog focusable!
+              </p>
+              <ul>
+                <li>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.</li>
+                <li>The dialog has a visual border, so creating a clear visual indicator of focus
+                  when the entire dialog has focus is not very feasible.</li>
+                <li>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.</li>
+              </ul>
+              <p>
+                In this dialog, the first paragraph has <code>tabindex=<q>-1</q></code>. The first
+                paragraph is also contained inside the element that provides the dialog description, i.e., the element that is referenced
+                by <code>aria-describedby</code>. 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.
+              </p>
+            </div>
+            <div class="dialog_form_actions">
+              <a href="#" onclick="openDialog('dialog4', this)">link to help</a>
+              <button type="button" onclick="openDialog('dialog4', this)">accepting an alternative form</button>
+              <button id="dialog2_close_btn" type="button" onclick="closeDialog(this)">Close</button>
+            </div>
+          </div>
+
+          <!--  Dialog that replaces dialog 1.  -->
+          <div id="dialog3" role="dialog" aria-labelledby="dialog3_label"
+               aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
+            <h2 id="dialog3_label" class="dialog_label">Address Added</h2>
+            <p id="dialog3_desc" class="dialog_desc">
+              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
+              <a id="dialog3_profile" href="#" onclick="openDialog('dialog4', this)">your profile.</a>
+            </p>
+            <div class="dialog_form_actions">
+              <button type="button" id="dialog3_close_btn" onclick="closeDialog(this)">OK</button>
+            </div>
+          </div>
+
+          <div id="dialog4" role="dialog" aria-labelledby="dialog4_label"
+               aria-describedby="dialog4_desc" class="hidden"
+               aria-modal="true">
+            <h2 id="dialog4_label" class="dialog_label">End of the Road!</h2>
+            <p id="dialog4_desc" class="dialog_desc">
+              You activated a fake link or button that goes nowhere!
+              The link or button is present for demonstration purposes only.
+            </p>
+            <div class="dialog_form_actions">
+              <button type="button" id="dialog4_close_btn" onclick="closeDialog(this)">Close</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
+      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+    </section>
+  </main>
+</body>
+</html>
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
new file mode 100644
index 000000000..0d2242e5e
--- /dev/null
+++ b/build/tests/modal-dialog/reference/2020-12-17_13353/js/dialog.js
@@ -0,0 +1,336 @@
+/*
+ *   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 <dialog> 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
new file mode 100644
index 000000000..adb0e2b74
--- /dev/null
+++ b/build/tests/modal-dialog/reference/2020-12-17_13353/js/utils.js
@@ -0,0 +1,131 @@
+'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/tests/modal-dialog/test-01-open-modal-dialog-reading.html b/build/tests/modal-dialog/test-01-open-modal-dialog-reading.html
similarity index 100%
rename from tests/modal-dialog/test-01-open-modal-dialog-reading.html
rename to build/tests/modal-dialog/test-01-open-modal-dialog-reading.html
diff --git a/tests/modal-dialog/test-01-open-modal-dialog-reading.json b/build/tests/modal-dialog/test-01-open-modal-dialog-reading.json
similarity index 100%
rename from tests/modal-dialog/test-01-open-modal-dialog-reading.json
rename to build/tests/modal-dialog/test-01-open-modal-dialog-reading.json
diff --git a/tests/modal-dialog/test-02-open-modal-dialog-interaction.html b/build/tests/modal-dialog/test-02-open-modal-dialog-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-02-open-modal-dialog-interaction.html
rename to build/tests/modal-dialog/test-02-open-modal-dialog-interaction.html
diff --git a/tests/modal-dialog/test-02-open-modal-dialog-interaction.json b/build/tests/modal-dialog/test-02-open-modal-dialog-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-02-open-modal-dialog-interaction.json
rename to build/tests/modal-dialog/test-02-open-modal-dialog-interaction.json
diff --git a/tests/modal-dialog/test-03-open-modal-dialog-interaction.html b/build/tests/modal-dialog/test-03-open-modal-dialog-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-03-open-modal-dialog-interaction.html
rename to build/tests/modal-dialog/test-03-open-modal-dialog-interaction.html
diff --git a/tests/modal-dialog/test-03-open-modal-dialog-interaction.json b/build/tests/modal-dialog/test-03-open-modal-dialog-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-03-open-modal-dialog-interaction.json
rename to build/tests/modal-dialog/test-03-open-modal-dialog-interaction.json
diff --git a/tests/modal-dialog/test-04-close-modal-dialog-reading.html b/build/tests/modal-dialog/test-04-close-modal-dialog-reading.html
similarity index 100%
rename from tests/modal-dialog/test-04-close-modal-dialog-reading.html
rename to build/tests/modal-dialog/test-04-close-modal-dialog-reading.html
diff --git a/tests/modal-dialog/test-04-close-modal-dialog-reading.json b/build/tests/modal-dialog/test-04-close-modal-dialog-reading.json
similarity index 100%
rename from tests/modal-dialog/test-04-close-modal-dialog-reading.json
rename to build/tests/modal-dialog/test-04-close-modal-dialog-reading.json
diff --git a/tests/modal-dialog/test-05-close-modal-dialog-interaction.html b/build/tests/modal-dialog/test-05-close-modal-dialog-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-05-close-modal-dialog-interaction.html
rename to build/tests/modal-dialog/test-05-close-modal-dialog-interaction.html
diff --git a/tests/modal-dialog/test-05-close-modal-dialog-interaction.json b/build/tests/modal-dialog/test-05-close-modal-dialog-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-05-close-modal-dialog-interaction.json
rename to build/tests/modal-dialog/test-05-close-modal-dialog-interaction.json
diff --git a/tests/modal-dialog/test-06-close-modal-dialog-interaction.html b/build/tests/modal-dialog/test-06-close-modal-dialog-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-06-close-modal-dialog-interaction.html
rename to build/tests/modal-dialog/test-06-close-modal-dialog-interaction.html
diff --git a/tests/modal-dialog/test-06-close-modal-dialog-interaction.json b/build/tests/modal-dialog/test-06-close-modal-dialog-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-06-close-modal-dialog-interaction.json
rename to build/tests/modal-dialog/test-06-close-modal-dialog-interaction.json
diff --git a/tests/modal-dialog/test-07-close-modal-dialog-using-button-reading.html b/build/tests/modal-dialog/test-07-close-modal-dialog-using-button-reading.html
similarity index 100%
rename from tests/modal-dialog/test-07-close-modal-dialog-using-button-reading.html
rename to build/tests/modal-dialog/test-07-close-modal-dialog-using-button-reading.html
diff --git a/tests/modal-dialog/test-07-close-modal-dialog-using-button-reading.json b/build/tests/modal-dialog/test-07-close-modal-dialog-using-button-reading.json
similarity index 100%
rename from tests/modal-dialog/test-07-close-modal-dialog-using-button-reading.json
rename to build/tests/modal-dialog/test-07-close-modal-dialog-using-button-reading.json
diff --git a/tests/modal-dialog/test-08-close-modal-dialog-using-button-interaction.html b/build/tests/modal-dialog/test-08-close-modal-dialog-using-button-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-08-close-modal-dialog-using-button-interaction.html
rename to build/tests/modal-dialog/test-08-close-modal-dialog-using-button-interaction.html
diff --git a/tests/modal-dialog/test-08-close-modal-dialog-using-button-interaction.json b/build/tests/modal-dialog/test-08-close-modal-dialog-using-button-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-08-close-modal-dialog-using-button-interaction.json
rename to build/tests/modal-dialog/test-08-close-modal-dialog-using-button-interaction.json
diff --git a/tests/modal-dialog/test-09-close-modal-dialog-using-button-interaction.html b/build/tests/modal-dialog/test-09-close-modal-dialog-using-button-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-09-close-modal-dialog-using-button-interaction.html
rename to build/tests/modal-dialog/test-09-close-modal-dialog-using-button-interaction.html
diff --git a/tests/modal-dialog/test-09-close-modal-dialog-using-button-interaction.json b/build/tests/modal-dialog/test-09-close-modal-dialog-using-button-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-09-close-modal-dialog-using-button-interaction.json
rename to build/tests/modal-dialog/test-09-close-modal-dialog-using-button-interaction.json
diff --git a/tests/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.html b/build/tests/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.html
rename to build/tests/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.html
diff --git a/tests/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.json b/build/tests/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.json
rename to build/tests/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.json
diff --git a/tests/modal-dialog/test-11-navigate-to-last-focusable-element-in-modal-dialog-interaction.html b/build/tests/modal-dialog/test-11-navigate-to-last-focusable-element-in-modal-dialog-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-11-navigate-to-last-focusable-element-in-modal-dialog-interaction.html
rename to build/tests/modal-dialog/test-11-navigate-to-last-focusable-element-in-modal-dialog-interaction.html
diff --git a/tests/modal-dialog/test-11-navigate-to-last-focusable-element-in-modal-dialog-interaction.json b/build/tests/modal-dialog/test-11-navigate-to-last-focusable-element-in-modal-dialog-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-11-navigate-to-last-focusable-element-in-modal-dialog-interaction.json
rename to build/tests/modal-dialog/test-11-navigate-to-last-focusable-element-in-modal-dialog-interaction.json
diff --git a/tests/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.html b/build/tests/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.html
rename to build/tests/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.html
diff --git a/tests/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.json b/build/tests/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.json
rename to build/tests/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.json
diff --git a/tests/modal-dialog/test-13-navigate-to-first-focusable-element-in-modal-dialog-interaction.html b/build/tests/modal-dialog/test-13-navigate-to-first-focusable-element-in-modal-dialog-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-13-navigate-to-first-focusable-element-in-modal-dialog-interaction.html
rename to build/tests/modal-dialog/test-13-navigate-to-first-focusable-element-in-modal-dialog-interaction.html
diff --git a/tests/modal-dialog/test-13-navigate-to-first-focusable-element-in-modal-dialog-interaction.json b/build/tests/modal-dialog/test-13-navigate-to-first-focusable-element-in-modal-dialog-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-13-navigate-to-first-focusable-element-in-modal-dialog-interaction.json
rename to build/tests/modal-dialog/test-13-navigate-to-first-focusable-element-in-modal-dialog-interaction.json
diff --git a/tests/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.html b/build/tests/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.html
similarity index 100%
rename from tests/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.html
rename to build/tests/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.html
diff --git a/tests/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.json b/build/tests/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.json
similarity index 100%
rename from tests/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.json
rename to build/tests/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.json
diff --git a/tests/modal-dialog/test-15-navigate-to-beginning-of-modal-dialog-interaction.html b/build/tests/modal-dialog/test-15-navigate-to-beginning-of-modal-dialog-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-15-navigate-to-beginning-of-modal-dialog-interaction.html
rename to build/tests/modal-dialog/test-15-navigate-to-beginning-of-modal-dialog-interaction.html
diff --git a/tests/modal-dialog/test-15-navigate-to-beginning-of-modal-dialog-interaction.json b/build/tests/modal-dialog/test-15-navigate-to-beginning-of-modal-dialog-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-15-navigate-to-beginning-of-modal-dialog-interaction.json
rename to build/tests/modal-dialog/test-15-navigate-to-beginning-of-modal-dialog-interaction.json
diff --git a/tests/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.html b/build/tests/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.html
similarity index 100%
rename from tests/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.html
rename to build/tests/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.html
diff --git a/tests/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.json b/build/tests/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.json
similarity index 100%
rename from tests/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.json
rename to build/tests/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.json
diff --git a/tests/modal-dialog/test-17-navigate-to-end-of-modal-dialog-interaction.html b/build/tests/modal-dialog/test-17-navigate-to-end-of-modal-dialog-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-17-navigate-to-end-of-modal-dialog-interaction.html
rename to build/tests/modal-dialog/test-17-navigate-to-end-of-modal-dialog-interaction.html
diff --git a/tests/modal-dialog/test-17-navigate-to-end-of-modal-dialog-interaction.json b/build/tests/modal-dialog/test-17-navigate-to-end-of-modal-dialog-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-17-navigate-to-end-of-modal-dialog-interaction.json
rename to build/tests/modal-dialog/test-17-navigate-to-end-of-modal-dialog-interaction.json
diff --git a/tests/modal-dialog/test-18-open-nested-modal-dialog-reading.html b/build/tests/modal-dialog/test-18-open-nested-modal-dialog-reading.html
similarity index 100%
rename from tests/modal-dialog/test-18-open-nested-modal-dialog-reading.html
rename to build/tests/modal-dialog/test-18-open-nested-modal-dialog-reading.html
diff --git a/tests/modal-dialog/test-18-open-nested-modal-dialog-reading.json b/build/tests/modal-dialog/test-18-open-nested-modal-dialog-reading.json
similarity index 100%
rename from tests/modal-dialog/test-18-open-nested-modal-dialog-reading.json
rename to build/tests/modal-dialog/test-18-open-nested-modal-dialog-reading.json
diff --git a/tests/modal-dialog/test-19-open-nested-modal-dialog-interaction.html b/build/tests/modal-dialog/test-19-open-nested-modal-dialog-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-19-open-nested-modal-dialog-interaction.html
rename to build/tests/modal-dialog/test-19-open-nested-modal-dialog-interaction.html
diff --git a/tests/modal-dialog/test-19-open-nested-modal-dialog-interaction.json b/build/tests/modal-dialog/test-19-open-nested-modal-dialog-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-19-open-nested-modal-dialog-interaction.json
rename to build/tests/modal-dialog/test-19-open-nested-modal-dialog-interaction.json
diff --git a/tests/modal-dialog/test-20-open-nested-modal-dialog-interaction.html b/build/tests/modal-dialog/test-20-open-nested-modal-dialog-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-20-open-nested-modal-dialog-interaction.html
rename to build/tests/modal-dialog/test-20-open-nested-modal-dialog-interaction.html
diff --git a/tests/modal-dialog/test-20-open-nested-modal-dialog-interaction.json b/build/tests/modal-dialog/test-20-open-nested-modal-dialog-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-20-open-nested-modal-dialog-interaction.json
rename to build/tests/modal-dialog/test-20-open-nested-modal-dialog-interaction.json
diff --git a/tests/modal-dialog/test-21-close-nested-modal-dialog-reading.html b/build/tests/modal-dialog/test-21-close-nested-modal-dialog-reading.html
similarity index 100%
rename from tests/modal-dialog/test-21-close-nested-modal-dialog-reading.html
rename to build/tests/modal-dialog/test-21-close-nested-modal-dialog-reading.html
diff --git a/tests/modal-dialog/test-21-close-nested-modal-dialog-reading.json b/build/tests/modal-dialog/test-21-close-nested-modal-dialog-reading.json
similarity index 100%
rename from tests/modal-dialog/test-21-close-nested-modal-dialog-reading.json
rename to build/tests/modal-dialog/test-21-close-nested-modal-dialog-reading.json
diff --git a/tests/modal-dialog/test-22-close-nested-modal-dialog-interaction.html b/build/tests/modal-dialog/test-22-close-nested-modal-dialog-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-22-close-nested-modal-dialog-interaction.html
rename to build/tests/modal-dialog/test-22-close-nested-modal-dialog-interaction.html
diff --git a/tests/modal-dialog/test-22-close-nested-modal-dialog-interaction.json b/build/tests/modal-dialog/test-22-close-nested-modal-dialog-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-22-close-nested-modal-dialog-interaction.json
rename to build/tests/modal-dialog/test-22-close-nested-modal-dialog-interaction.json
diff --git a/tests/modal-dialog/test-23-close-nested-modal-dialog-interaction.html b/build/tests/modal-dialog/test-23-close-nested-modal-dialog-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-23-close-nested-modal-dialog-interaction.html
rename to build/tests/modal-dialog/test-23-close-nested-modal-dialog-interaction.html
diff --git a/tests/modal-dialog/test-23-close-nested-modal-dialog-interaction.json b/build/tests/modal-dialog/test-23-close-nested-modal-dialog-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-23-close-nested-modal-dialog-interaction.json
rename to build/tests/modal-dialog/test-23-close-nested-modal-dialog-interaction.json
diff --git a/tests/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.html b/build/tests/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.html
similarity index 100%
rename from tests/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.html
rename to build/tests/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.html
diff --git a/tests/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.json b/build/tests/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.json
similarity index 100%
rename from tests/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.json
rename to build/tests/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.json
diff --git a/tests/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.html b/build/tests/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.html
rename to build/tests/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.html
diff --git a/tests/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.json b/build/tests/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.json
rename to build/tests/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.json
diff --git a/tests/modal-dialog/test-26-close-nested-modal-dialog-using-button-interaction.html b/build/tests/modal-dialog/test-26-close-nested-modal-dialog-using-button-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-26-close-nested-modal-dialog-using-button-interaction.html
rename to build/tests/modal-dialog/test-26-close-nested-modal-dialog-using-button-interaction.html
diff --git a/tests/modal-dialog/test-26-close-nested-modal-dialog-using-button-interaction.json b/build/tests/modal-dialog/test-26-close-nested-modal-dialog-using-button-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-26-close-nested-modal-dialog-using-button-interaction.json
rename to build/tests/modal-dialog/test-26-close-nested-modal-dialog-using-button-interaction.json
diff --git a/tests/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.html b/build/tests/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.html
similarity index 100%
rename from tests/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.html
rename to build/tests/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.html
diff --git a/tests/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.json b/build/tests/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.json
similarity index 100%
rename from tests/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.json
rename to build/tests/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.json
diff --git a/tests/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.html b/build/tests/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.html
rename to build/tests/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.html
diff --git a/tests/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.json b/build/tests/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.json
rename to build/tests/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.json
diff --git a/tests/modal-dialog/test-29-open-nested-modal-dialog-using-link-interaction.html b/build/tests/modal-dialog/test-29-open-nested-modal-dialog-using-link-interaction.html
similarity index 100%
rename from tests/modal-dialog/test-29-open-nested-modal-dialog-using-link-interaction.html
rename to build/tests/modal-dialog/test-29-open-nested-modal-dialog-using-link-interaction.html
diff --git a/tests/modal-dialog/test-29-open-nested-modal-dialog-using-link-interaction.json b/build/tests/modal-dialog/test-29-open-nested-modal-dialog-using-link-interaction.json
similarity index 100%
rename from tests/modal-dialog/test-29-open-nested-modal-dialog-using-link-interaction.json
rename to build/tests/modal-dialog/test-29-open-nested-modal-dialog-using-link-interaction.json
diff --git a/build/tests/resources/aria-at-harness.mjs b/build/tests/resources/aria-at-harness.mjs
new file mode 100644
index 000000000..a47e1a1d0
--- /dev/null
+++ b/build/tests/resources/aria-at-harness.mjs
@@ -0,0 +1,860 @@
+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 = `
+<div>
+  <section id='errors' style='display:none'><h2>Test cannot be performed due to error(s)!</h2><ul></ul><hr></section>
+  <section id='instructions'></section>
+  <section id='record-results'></section>
+</div>
+`;
+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 += `<li><em>${userInstructions[i]}</em></li>`;
+    }
+    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 = `
+<h1 id="behavior-header" tabindex="0">Testing task: ${document.title}</h1>
+<p>${modePhrase} how ${at.name} behaves when performing task "${lastInstruction}"</p>
+<h2>Test instructions</h2>
+<ol aria-label="Instructions">
+  <li>Restore default settings for ${at.name}. For help, read <a href="https://github.com/w3c/aria-at/wiki/Configuring-Screen-Readers-for-Testing">Configuring Screen Readers for Testing</a>.</li>
+  <li>Activate the "Open test page" button below, which opens the example to test in a new window${setupScriptDescription}</li>
+  <li id="mode-instructions-li"><em>${modeInstructions}</em></li>
+  ${getSetupInstructions()}
+  <li>Using the following commands, ${lastInstruction}
+    <ul id='at_controls' aria-label='Commands'>
+    </ul>
+  </li>
+</ol>
+<h3>Success Criteria</h3>
+<p>To pass this test, ${at.name} needs to meet all the following assertions when each  specified command is executed:</p>
+<ul id='assertions' aria-label="Assertions">
+</ul>
+`;
+
+  // 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 = `<em>${assertion}</em>`;
+    document.getElementById('assertions').append(el);
+  }
+
+  for (let additional of additionalBehaviorAssertions) {
+    let el = document.createElement('li');
+    el.innerHTML = `<em>${additional[1]}</em>`;
+    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 = `<h2>Record Results</h2><p>${document.title}</p>`;
+
+  for (let c = 0; c < commands.length; c++) {
+    recordResults += `<section id="cmd-${c}-section"><h3 id="header-cmd-${c}">After '${commands[c]}'</h3>`;
+    recordResults += `
+<p id="cmd-${c}-output">
+  <label for="speechoutput-${c}">${at.name} output after ${commands[c]} <span class="required">(required)</span>:</label>
+    <textarea id="speechoutput-${c}"></textarea>
+</p>
+`;
+
+    recordResults += `<table id="cmd-${c}" class="record-results">
+<tr>
+  <th>Assertion</th>
+  <th>
+    Success case
+  </th>
+  <th>
+    Failure cases
+  </th>
+</tr>
+`;
+
+    for (let a = 0; a < assertions.length; a++) {
+      recordResults += `
+<tr>
+  <td id="assertion-${c}-${a}"><div class="assertion">${assertions[a]}</div><div class="required">(required: mark output)</div></td>
+  <td>
+      <input type="radio" id="pass-${c}-${a}" class="pass" name="result-${c}-${a}" aria-labelledby="pass-${c}-${a}-label assertion-${c}-${a}">
+      <label id="pass-${c}-${a}-label">Good Output <span class="off-screen">for assertion</span></label>
+  </td>
+  <td>
+      <input type="radio" id="missing-${c}-${a}" class="missing" name="result-${c}-${a}" aria-labelledby="missing-${c}-${a}-label assertion-${c}-${a}">
+      <label id="missing-${c}-${a}-label">No Output <span class="off-screen">for assertion</span></label>
+      <input type="radio" id="fail-${c}-${a}" class="fail" name="result-${c}-${a}" aria-labelledby="fail-${c}-${a}-label assertion-${c}-${a}">
+      <label id="fail-${c}-${a}-label">Incorrect Output <span class="off-screen">for assertion</span></label>
+  </td>
+</tr>
+`;
+    }
+
+    for (let n = 0; n < additionalBehaviorAssertions.length; n++) {
+      let a = assertions.length + n;
+      recordResults += `
+<tr>
+  <td id="assertion-${c}-${a}"><div class="assertion">${additionalBehaviorAssertions[n][1]}</div><div class="required">(required: mark support)</div></td>
+  <td>
+      <input type="radio" id="pass-${c}-${a}" class="pass" name="result-${c}-${a}" aria-labelledby="pass-${c}-${a}-label assertion-${c}-${a}">
+      <label id="pass-${c}-${a}-label">Good Support <span class="off-screen">for assertion</span></label>
+  </td>
+  <td>
+      <input type="radio" id="fail-${c}-${a}" class="fail" name="result-${c}-${a}" aria-labelledby="fail-${c}-${a}-label assertion-${c}-${a}">
+      <label id="fail-${c}-${a}-label">No Support <span class="off-screen">for assertion</span></label>
+  </td>
+</tr>
+`;
+    }
+
+    recordResults += '</table>';
+
+    recordResults += `
+  <fieldset id="cmd-${c}-problem">
+Were there additional undesirable behaviors? <span class="required">(required)</span>
+<div>
+  <input type="radio" id="problem-${c}-false" class="pass" name="problem-${c}">
+  <label for="problem-${c}-false">No, there were no additional undesirable behaviors.</label>
+</div>
+<div>
+  <input type="radio" id="problem-${c}-true" class="fail" name="problem-${c}">
+  <label for="problem-${c}-true">Yes, there were additional undesirable behaviors</label>
+</div>
+  <fieldset class="problem-select" id="cmd-${c}-problem-checkboxes">
+  <legend>Undesirable behaviors<span class="required"> (required)<span></legend>
+`;
+
+  for (let undesirable of UNDESIRABLES) {
+    const string = `
+      <input type="checkbox" value="${undesirable}" id="${undesirable}-${c}" class="undesirable-${c}" tabindex="-1" disabled>
+      <label for="${undesirable}-${c}">${undesirable}</label>
+      <br>
+     `;
+    recordResults += string;
+  }
+
+  recordResults += `
+     <input type="checkbox" value="Other" id="undesirable-${c}-other" name="undesirable-${c}-other" class="undesirable-${c}" tabindex="-1">
+     <label for="undesirable-${c}-other">Other</label>
+     </br>
+     <div>
+       <label for="undesirable-${c}-other-input">If "other" selected, explain <span class="required-other">(required)</span>:</label>
+       <input type="text" name="undesirable-${c}-other-input" id="undesirable-${c}-other-input" class="undesirable-other-input" disabled>
+     </div>
+  </div>
+</fieldset>
+`;
+
+    recordResults += `</section>`;
+  }
+
+  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('<span')[0];
+      const priority = assertionPriority[assertion];
+
+      let assertionResult = {
+        assertion,
+        priority
+      };
+
+      if (pass) {
+        assertionResult.pass = result;
+        summary[priority].pass++;
+      }
+      else {
+        assertionResult.fail = result;
+        summary[priority].fail++;
+
+        // If any priority 1 assertion fails, the test fails for this command
+        if (priority === 1) {
+          support = 'FAILING';
+          overallStatus = 'FAIL';
+        }
+        // If any only a priority >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 = `<h1>${document.title}</h1><h2 id=overallstatus></h2>`;
+
+  resulthtml += `<table>
+    <tr>
+      <th>Command</th>
+      <th>Support</th>
+      <th>Details</th>
+    </tr>
+  `;
+
+  for (let command of behaviorResults.commands) {
+
+      let passingAssertions = '';
+      let failingAssertions = '';
+      for (let assertion of command.assertions) {
+        if (assertion.pass) {
+          passingAssertions += `<li>${assertion.assertion}</li>`;
+        }
+        if (assertion.fail) {
+          failingAssertions += `<li>${assertion.assertion}</li>`;
+        }
+      }
+      let unexpectedBehaviors = '';
+      for (let unexpected of command.unexpected_behaviors) {
+        unexpectedBehaviors += `<li>${unexpected}</li>`;
+      }
+      passingAssertions = passingAssertions === '' ? '<li>No passing assertions.</li>' : passingAssertions;
+      failingAssertions = failingAssertions === '' ? '<li>No failing assertions.</li>' : failingAssertions;
+      unexpectedBehaviors = unexpectedBehaviors === '' ? '<li>No unexpect behaviors.</li>' : unexpectedBehaviors;
+
+
+      resulthtml+= `
+<tr>
+  <td>${command.command}</td>
+  <td>${command.support}</td>
+  <td>
+    <p>${at.name} output:<br> "${command.output.replace(/(?:\r\n|\r|\n)/g, '<br>')}"</p>
+    <div>Passing Assertions:
+      <ul>
+      ${passingAssertions}
+      </ul>
+    </div>
+    <div>Failing Assertions:
+      <ul>
+      ${failingAssertions}
+      </ul>
+    </div>
+    <div>Unexpected Behavior:
+      <ul>
+      ${unexpectedBehaviors}
+      </ul>
+    </div>
+  </td>
+</tr>
+`;
+
+    }
+
+  resulthtml += `</table>`;
+
+  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
new file mode 100644
index 000000000..c17168871
--- /dev/null
+++ b/build/tests/resources/at-commands.mjs
@@ -0,0 +1,105 @@
+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/keys.mjs b/build/tests/resources/keys.mjs
new file mode 100644
index 000000000..269ab2f98
--- /dev/null
+++ b/build/tests/resources/keys.mjs
@@ -0,0 +1,97 @@
+// 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
new file mode 100644
index 000000000..358ad9787
--- /dev/null
+++ b/build/tests/support.json
@@ -0,0 +1,42 @@
+{
+  "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/tests/tabs-manual-activation/commands.json b/build/tests/tabs-manual-activation/commands.json
similarity index 100%
rename from tests/tabs-manual-activation/commands.json
rename to build/tests/tabs-manual-activation/commands.json
diff --git a/tests/tabs-manual-activation/index.html b/build/tests/tabs-manual-activation/index.html
similarity index 100%
rename from tests/tabs-manual-activation/index.html
rename to build/tests/tabs-manual-activation/index.html
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
new file mode 100644
index 000000000..405b4b965
--- /dev/null
+++ b/build/tests/tabs-manual-activation/reference/2021-2-15_124757/css/tabs.css
@@ -0,0 +1,107 @@
+.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
new file mode 100644
index 000000000..8c8d351aa
--- /dev/null
+++ b/build/tests/tabs-manual-activation/reference/2021-2-15_124757/js/tabs.js
@@ -0,0 +1,222 @@
+/*
+ *   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 (<button>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
new file mode 100644
index 000000000..5285a9860
--- /dev/null
+++ b/build/tests/tabs-manual-activation/reference/2021-2-15_124757/tabs.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Example of Tabs with Manual Activation</title>
+
+    <!--  js and css for this example. -->
+    <link href="css/tabs.css" rel="stylesheet">
+  </head>
+  <body>
+    <main>
+      <h1>Example of Tabs with Manual Activation</h1>
+      <p>
+          The below example section demonstrates a tabs widget that implements the  <a href="https://w3c.github.io/aria-practices/#tabpanel">tabs design pattern</a>.
+          In this example,  a new panel is displayed only after the user activates a tab with either <kbd>Space</kbd>, <kbd>Enter</kbd>, 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.
+      </p>
+
+      <section>
+        <div class="example-header">
+          <h2 id="ex_label">Example</h2>
+        </div>
+        <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+        <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
+        <div id="ex1">
+          <div class="tabs">
+            <div role="tablist" aria-label="Entertainment">
+              <button type="button" role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">Nils Frahm</button>
+              <button type="button" role="tab" aria-selected="false" aria-controls="agnes-tab" id="agnes" tabindex="-1">Agnes Obel</button>
+              <button type="button" role="tab" aria-selected="false" aria-controls="complex-complex" id="complex" tabindex="-1" data-deletable>Joke</button>
+            </div>
+
+            <div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils">
+              <p>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.</p>
+            </div>
+
+            <div tabindex="0" role="tabpanel" id="agnes-tab" aria-labelledby="agnes" class="is-hidden">
+              <p>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.</p>
+            </div>
+
+            <div tabindex="0" role="tabpanel" id="complex-complex" aria-labelledby="complex" class="is-hidden">
+              <p>Fear of complicated buildings:</p>
+              <p>A complex complex complex.</p>
+            </div>
+          </div>
+        </div>
+        <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
+        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+      </section>
+    </main>
+    <script src="js/tabs.js" type="text/javascript"></script>
+
+  </body>
+</html>
diff --git a/tests/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.html b/build/tests/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.html
similarity index 100%
rename from tests/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.html
rename to build/tests/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.html
diff --git a/tests/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.json b/build/tests/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.json
similarity index 100%
rename from tests/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.json
rename to build/tests/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.json
diff --git a/tests/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.html b/build/tests/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.html
similarity index 100%
rename from tests/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.html
rename to build/tests/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.html
diff --git a/tests/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.json b/build/tests/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.json
similarity index 100%
rename from tests/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.json
rename to build/tests/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.json
diff --git a/tests/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-05-navigate-forwards-to-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-05-navigate-forwards-to-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-05-navigate-forwards-to-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-05-navigate-forwards-to-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-05-navigate-forwards-to-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-05-navigate-forwards-to-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-05-navigate-forwards-to-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-05-navigate-forwards-to-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-06-navigate-backwards-to-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-06-navigate-backwards-to-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-06-navigate-backwards-to-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-06-navigate-backwards-to-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-06-navigate-backwards-to-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-06-navigate-backwards-to-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-06-navigate-backwards-to-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-06-navigate-backwards-to-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.html b/build/tests/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.html
similarity index 100%
rename from tests/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.html
rename to build/tests/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.html
diff --git a/tests/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.json b/build/tests/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.json
similarity index 100%
rename from tests/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.json
rename to build/tests/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.json
diff --git a/tests/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-09-read-information-about-tab-in-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-09-read-information-about-tab-in-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-09-read-information-about-tab-in-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-09-read-information-about-tab-in-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-09-read-information-about-tab-in-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-09-read-information-about-tab-in-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-09-read-information-about-tab-in-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-09-read-information-about-tab-in-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.html b/build/tests/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.html
similarity index 100%
rename from tests/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.html
rename to build/tests/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.html
diff --git a/tests/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.json b/build/tests/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.json
similarity index 100%
rename from tests/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.json
rename to build/tests/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.json
diff --git a/tests/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-12-navigate-to-next-tab-in-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-12-navigate-to-next-tab-in-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-12-navigate-to-next-tab-in-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-12-navigate-to-next-tab-in-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-12-navigate-to-next-tab-in-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-12-navigate-to-next-tab-in-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-12-navigate-to-next-tab-in-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-12-navigate-to-next-tab-in-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.html b/build/tests/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.html
similarity index 100%
rename from tests/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.html
rename to build/tests/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.html
diff --git a/tests/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.json b/build/tests/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.json
similarity index 100%
rename from tests/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.json
rename to build/tests/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.json
diff --git a/tests/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-15-navigate-to-previous-tab-in-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-15-navigate-to-previous-tab-in-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-15-navigate-to-previous-tab-in-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-15-navigate-to-previous-tab-in-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-15-navigate-to-previous-tab-in-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-15-navigate-to-previous-tab-in-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-15-navigate-to-previous-tab-in-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-15-navigate-to-previous-tab-in-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-17-navigate-to-first-tab-in-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-17-navigate-to-first-tab-in-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-17-navigate-to-first-tab-in-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-17-navigate-to-first-tab-in-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-17-navigate-to-first-tab-in-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-17-navigate-to-first-tab-in-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-17-navigate-to-first-tab-in-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-17-navigate-to-first-tab-in-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-19-navigate-to-last-tab-in-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-19-navigate-to-last-tab-in-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-19-navigate-to-last-tab-in-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-19-navigate-to-last-tab-in-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-19-navigate-to-last-tab-in-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-19-navigate-to-last-tab-in-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-19-navigate-to-last-tab-in-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-19-navigate-to-last-tab-in-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.html b/build/tests/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.html
rename to build/tests/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.html
diff --git a/tests/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.json b/build/tests/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.json
rename to build/tests/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.json
diff --git a/tests/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.html b/build/tests/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.html
rename to build/tests/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.html
diff --git a/tests/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.json b/build/tests/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.json
rename to build/tests/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.json
diff --git a/tests/tabs-manual-activation/test-22-navigate-forwards-to-tab-panel-interaction.html b/build/tests/tabs-manual-activation/test-22-navigate-forwards-to-tab-panel-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-22-navigate-forwards-to-tab-panel-interaction.html
rename to build/tests/tabs-manual-activation/test-22-navigate-forwards-to-tab-panel-interaction.html
diff --git a/tests/tabs-manual-activation/test-22-navigate-forwards-to-tab-panel-interaction.json b/build/tests/tabs-manual-activation/test-22-navigate-forwards-to-tab-panel-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-22-navigate-forwards-to-tab-panel-interaction.json
rename to build/tests/tabs-manual-activation/test-22-navigate-forwards-to-tab-panel-interaction.json
diff --git a/tests/tabs-manual-activation/test-23-navigate-backwards-to-tab-panel-interaction.html b/build/tests/tabs-manual-activation/test-23-navigate-backwards-to-tab-panel-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-23-navigate-backwards-to-tab-panel-interaction.html
rename to build/tests/tabs-manual-activation/test-23-navigate-backwards-to-tab-panel-interaction.html
diff --git a/tests/tabs-manual-activation/test-23-navigate-backwards-to-tab-panel-interaction.json b/build/tests/tabs-manual-activation/test-23-navigate-backwards-to-tab-panel-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-23-navigate-backwards-to-tab-panel-interaction.json
rename to build/tests/tabs-manual-activation/test-23-navigate-backwards-to-tab-panel-interaction.json
diff --git a/tests/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.html b/build/tests/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.html
similarity index 100%
rename from tests/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.html
rename to build/tests/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.html
diff --git a/tests/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.json b/build/tests/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.json
similarity index 100%
rename from tests/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.json
rename to build/tests/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.json
diff --git a/tests/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-26-activate-tab-in-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-26-activate-tab-in-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-26-activate-tab-in-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-26-activate-tab-in-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-26-activate-tab-in-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-26-activate-tab-in-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-26-activate-tab-in-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-26-activate-tab-in-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.html b/build/tests/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.html
similarity index 100%
rename from tests/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.html
rename to build/tests/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.html
diff --git a/tests/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.json b/build/tests/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.json
similarity index 100%
rename from tests/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.json
rename to build/tests/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.json
diff --git a/tests/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.json
diff --git a/tests/tabs-manual-activation/test-29-delete-tab-from-tab-list-interaction.html b/build/tests/tabs-manual-activation/test-29-delete-tab-from-tab-list-interaction.html
similarity index 100%
rename from tests/tabs-manual-activation/test-29-delete-tab-from-tab-list-interaction.html
rename to build/tests/tabs-manual-activation/test-29-delete-tab-from-tab-list-interaction.html
diff --git a/tests/tabs-manual-activation/test-29-delete-tab-from-tab-list-interaction.json b/build/tests/tabs-manual-activation/test-29-delete-tab-from-tab-list-interaction.json
similarity index 100%
rename from tests/tabs-manual-activation/test-29-delete-tab-from-tab-list-interaction.json
rename to build/tests/tabs-manual-activation/test-29-delete-tab-from-tab-list-interaction.json
diff --git a/docs/LOCAL_DEVELOPMENT.md b/docs/LOCAL_DEVELOPMENT.md
new file mode 100644
index 000000000..c4f3a3037
--- /dev/null
+++ b/docs/LOCAL_DEVELOPMENT.md
@@ -0,0 +1,122 @@
+# 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 <contribution_branch_name>
+   ```
+1. Commit and push your changes.
+   ```
+   git commit add <files>
+   git commit -m <message>
+   git push -u <remote> <contribution_branch_name>
+   ```
+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 build`
+
+Creates or updates the `/build` folder. Runs `npm run create-all-tests` and `npm run review-tests`.
+
+#### Options
+
+* `--testplan=<test_plan>` - Creates or updates the `/build` folder for a specific test plan.
+  Runs `npm run create-all-tests -- --testplan=<test_plan>` and `npm run review-tests -- --testplan=<test_plan>` for a
+  specific test plan.
+
+### `npm run validate`
+
+Run to confirm that the test plans currently drafted within the project have no validation errors.
+
+#### Options
+
+* `--testplan=<test_plan>` - 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 create-all-tests`
+
+Generate tests' html and json files as determined by using the files in `/tests/<test_plan>/`. The generated files are
+written to `/build/tests/<test_plan>/` by default. **Note that you may not need to run this except for special cases as
+running `npm run build` covers this operation.**
+
+#### Options
+
+* `-- --help` - To display script usage text.
+
+* `-- --outputdir=<output_directory>` - Specify folder location that the generated files should be written to. Default
+  location is `/build`.
+
+* `-- --testplan=<test_plan>` - Specify test plan that the script must only attempt to generate tests html and json
+  files for.
+
+* `-- --verbose` - The script output is more detailed (logs all files that are referenced, tests that are processed,
+  absolute paths, etc).
+
+* `-- --validate` - Use to determine whether or not the test plans have any validation errors.
+
+### `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/` by default. **Note that you may not need
+to run this except for special cases as running `npm run build` covers this operation.**
+
+#### Options
+
+* `-- --help` - To display script usage text.
+
+* `-- --outputdir=<output_directory>` - Specify folder location that the generated review pages should be written to.
+  Default location is `/build`.
+
+* `-- --testplan=<test_plan>` - Specify test plan that the script must only attempt to generate review pages for.
+
+### `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 --testplan=<test_plan>`.
+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/index.html b/index.html
index 7f25dee79..ea54a86ba 100644
--- a/index.html
+++ b/index.html
@@ -40,7 +40,7 @@ <h1>Test Patterns for Review</h1>
             <td><a href="./tests/checkbox/index.html">Index</a></td>
             <td><a href="./review/checkbox.html">Review</a></td>
             <td>26</td>
-            <td><a href="https://github.com/w3c/aria-at/commit/5311dde" target="_blank">5311dde Use &#39;then&#39; instead of &#39;followed by&#39;
+            <td><a href="https://github.com/w3c/aria-at/commit/0cf798d" target="_blank">0cf798d Merge remote-tracking branch &#39;origin&#x2F;develop&#39; into develop
 </a></td>
           </tr>
           <tr>
@@ -48,7 +48,7 @@ <h1>Test Patterns for Review</h1>
             <td><a href="./tests/checkbox-tri-state/index.html">Index</a></td>
             <td><a href="./review/checkbox-tri-state.html">Review</a></td>
             <td>24</td>
-            <td><a href="https://github.com/w3c/aria-at/commit/5311dde" target="_blank">5311dde Use &#39;then&#39; instead of &#39;followed by&#39;
+            <td><a href="https://github.com/w3c/aria-at/commit/0cf798d" target="_blank">0cf798d Merge remote-tracking branch &#39;origin&#x2F;develop&#39; into develop
 </a></td>
           </tr>
           <tr>
@@ -56,7 +56,7 @@ <h1>Test Patterns for Review</h1>
             <td><a href="./tests/combobox-autocomplete-both/index.html">Index</a></td>
             <td><a href="./review/combobox-autocomplete-both.html">Review</a></td>
             <td>30</td>
-            <td><a href="https://github.com/w3c/aria-at/commit/5311dde" target="_blank">5311dde Use &#39;then&#39; instead of &#39;followed by&#39;
+            <td><a href="https://github.com/w3c/aria-at/commit/0cf798d" target="_blank">0cf798d Merge remote-tracking branch &#39;origin&#x2F;develop&#39; into develop
 </a></td>
           </tr>
           <tr>
@@ -64,7 +64,7 @@ <h1>Test Patterns for Review</h1>
             <td><a href="./tests/combobox-select-only/index.html">Index</a></td>
             <td><a href="./review/combobox-select-only.html">Review</a></td>
             <td>38</td>
-            <td><a href="https://github.com/w3c/aria-at/commit/5311dde" target="_blank">5311dde Use &#39;then&#39; instead of &#39;followed by&#39;
+            <td><a href="https://github.com/w3c/aria-at/commit/0cf798d" target="_blank">0cf798d Merge remote-tracking branch &#39;origin&#x2F;develop&#39; into develop
 </a></td>
           </tr>
           <tr>
@@ -72,7 +72,7 @@ <h1>Test Patterns for Review</h1>
             <td><a href="./tests/menu-button-actions-active-descendant/index.html">Index</a></td>
             <td><a href="./review/menu-button-actions-active-descendant.html">Review</a></td>
             <td>26</td>
-            <td><a href="https://github.com/w3c/aria-at/commit/5311dde" target="_blank">5311dde Use &#39;then&#39; instead of &#39;followed by&#39;
+            <td><a href="https://github.com/w3c/aria-at/commit/0cf798d" target="_blank">0cf798d Merge remote-tracking branch &#39;origin&#x2F;develop&#39; into develop
 </a></td>
           </tr>
           <tr>
@@ -80,7 +80,7 @@ <h1>Test Patterns for Review</h1>
             <td><a href="./tests/menubar-editor/index.html">Index</a></td>
             <td><a href="./review/menubar-editor.html">Review</a></td>
             <td>40</td>
-            <td><a href="https://github.com/w3c/aria-at/commit/5311dde" target="_blank">5311dde Use &#39;then&#39; instead of &#39;followed by&#39;
+            <td><a href="https://github.com/w3c/aria-at/commit/0cf798d" target="_blank">0cf798d Merge remote-tracking branch &#39;origin&#x2F;develop&#39; into develop
 </a></td>
           </tr>
           <tr>
@@ -88,7 +88,7 @@ <h1>Test Patterns for Review</h1>
             <td><a href="./tests/modal-dialog/index.html">Index</a></td>
             <td><a href="./review/modal-dialog.html">Review</a></td>
             <td>29</td>
-            <td><a href="https://github.com/w3c/aria-at/commit/5311dde" target="_blank">5311dde Use &#39;then&#39; instead of &#39;followed by&#39;
+            <td><a href="https://github.com/w3c/aria-at/commit/0cf798d" target="_blank">0cf798d Merge remote-tracking branch &#39;origin&#x2F;develop&#39; into develop
 </a></td>
           </tr>
           <tr>
@@ -96,7 +96,7 @@ <h1>Test Patterns for Review</h1>
             <td><a href="./tests/tabs-manual-activation/index.html">Index</a></td>
             <td><a href="./review/tabs-manual-activation.html">Review</a></td>
             <td>29</td>
-            <td><a href="https://github.com/w3c/aria-at/commit/5311dde" target="_blank">5311dde Use &#39;then&#39; instead of &#39;followed by&#39;
+            <td><a href="https://github.com/w3c/aria-at/commit/0cf798d" target="_blank">0cf798d Merge remote-tracking branch &#39;origin&#x2F;develop&#39; into develop
 </a></td>
           </tr>
     </table>
diff --git a/package-lock.json b/package-lock.json
index 46fa3035c..6514a8772 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -217,6 +217,798 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
+    "babel-code-frame": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
+      "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
+      "requires": {
+        "chalk": "^1.1.3",
+        "esutils": "^2.0.2",
+        "js-tokens": "^3.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "js-tokens": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
+          "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
+    "babel-core": {
+      "version": "6.26.3",
+      "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
+      "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
+      "requires": {
+        "babel-code-frame": "^6.26.0",
+        "babel-generator": "^6.26.0",
+        "babel-helpers": "^6.24.1",
+        "babel-messages": "^6.23.0",
+        "babel-register": "^6.26.0",
+        "babel-runtime": "^6.26.0",
+        "babel-template": "^6.26.0",
+        "babel-traverse": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "babylon": "^6.18.0",
+        "convert-source-map": "^1.5.1",
+        "debug": "^2.6.9",
+        "json5": "^0.5.1",
+        "lodash": "^4.17.4",
+        "minimatch": "^3.0.4",
+        "path-is-absolute": "^1.0.1",
+        "private": "^0.1.8",
+        "slash": "^1.0.0",
+        "source-map": "^0.5.7"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
+        }
+      }
+    },
+    "babel-generator": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.1.tgz",
+      "integrity": "sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==",
+      "requires": {
+        "babel-messages": "^6.23.0",
+        "babel-runtime": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "detect-indent": "^4.0.0",
+        "jsesc": "^1.3.0",
+        "lodash": "^4.17.4",
+        "source-map": "^0.5.7",
+        "trim-right": "^1.0.1"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
+          "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s="
+        }
+      }
+    },
+    "babel-helper-bindify-decorators": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.24.1.tgz",
+      "integrity": "sha1-FMGeXxQte0fxmlJDHlKxzLxAozA=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-builder-binary-assignment-operator-visitor": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz",
+      "integrity": "sha1-zORReto1b0IgvK6KAsKzRvmlZmQ=",
+      "requires": {
+        "babel-helper-explode-assignable-expression": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-call-delegate": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz",
+      "integrity": "sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340=",
+      "requires": {
+        "babel-helper-hoist-variables": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-define-map": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz",
+      "integrity": "sha1-pfVtq0GiX5fstJjH66ypgZ+Vvl8=",
+      "requires": {
+        "babel-helper-function-name": "^6.24.1",
+        "babel-runtime": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "lodash": "^4.17.4"
+      }
+    },
+    "babel-helper-explode-assignable-expression": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz",
+      "integrity": "sha1-8luCz33BBDPFX3BZLVdGQArCLKo=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-explode-class": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-explode-class/-/babel-helper-explode-class-6.24.1.tgz",
+      "integrity": "sha1-fcKjkQ3uAHBW4eMdZAztPVTqqes=",
+      "requires": {
+        "babel-helper-bindify-decorators": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-function-name": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz",
+      "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=",
+      "requires": {
+        "babel-helper-get-function-arity": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-get-function-arity": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz",
+      "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-hoist-variables": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz",
+      "integrity": "sha1-HssnaJydJVE+rbyZFKc/VAi+enY=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-optimise-call-expression": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz",
+      "integrity": "sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-regex": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-helper-regex/-/babel-helper-regex-6.26.0.tgz",
+      "integrity": "sha1-MlxZ+QL4LyS3T6zu0DY5VPZJXnI=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "lodash": "^4.17.4"
+      }
+    },
+    "babel-helper-remap-async-to-generator": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz",
+      "integrity": "sha1-XsWBgnrXI/7N04HxySg5BnbkVRs=",
+      "requires": {
+        "babel-helper-function-name": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helper-replace-supers": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helper-replace-supers/-/babel-helper-replace-supers-6.24.1.tgz",
+      "integrity": "sha1-v22/5Dk40XNpohPKiov3S2qQqxo=",
+      "requires": {
+        "babel-helper-optimise-call-expression": "^6.24.1",
+        "babel-messages": "^6.23.0",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-helpers": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz",
+      "integrity": "sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1"
+      }
+    },
+    "babel-messages": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
+      "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-check-es2015-constants": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz",
+      "integrity": "sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-syntax-async-functions": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz",
+      "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU="
+    },
+    "babel-plugin-syntax-async-generators": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz",
+      "integrity": "sha1-a8lj67FuzLrmuStZbrfzXDQqi5o="
+    },
+    "babel-plugin-syntax-class-constructor-call": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-constructor-call/-/babel-plugin-syntax-class-constructor-call-6.18.0.tgz",
+      "integrity": "sha1-nLnTn+Q8hgC+yBRkVt3L1OGnZBY="
+    },
+    "babel-plugin-syntax-class-properties": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
+      "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94="
+    },
+    "babel-plugin-syntax-decorators": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
+      "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs="
+    },
+    "babel-plugin-syntax-do-expressions": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-do-expressions/-/babel-plugin-syntax-do-expressions-6.13.0.tgz",
+      "integrity": "sha1-V0d1YTmqJtOQ0JQQsDdEugfkeW0="
+    },
+    "babel-plugin-syntax-dynamic-import": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
+      "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo="
+    },
+    "babel-plugin-syntax-exponentiation-operator": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz",
+      "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4="
+    },
+    "babel-plugin-syntax-export-extensions": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-export-extensions/-/babel-plugin-syntax-export-extensions-6.13.0.tgz",
+      "integrity": "sha1-cKFITw+QiaToStRLrDU8lbmxJyE="
+    },
+    "babel-plugin-syntax-function-bind": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-function-bind/-/babel-plugin-syntax-function-bind-6.13.0.tgz",
+      "integrity": "sha1-SMSV8Xe98xqYHnMvVa3AvdJgH0Y="
+    },
+    "babel-plugin-syntax-object-rest-spread": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
+      "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U="
+    },
+    "babel-plugin-syntax-trailing-function-commas": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz",
+      "integrity": "sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM="
+    },
+    "babel-plugin-transform-async-generator-functions": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-async-generator-functions/-/babel-plugin-transform-async-generator-functions-6.24.1.tgz",
+      "integrity": "sha1-8FiQAUX9PpkHpt3yjaWfIVJYpds=",
+      "requires": {
+        "babel-helper-remap-async-to-generator": "^6.24.1",
+        "babel-plugin-syntax-async-generators": "^6.5.0",
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-async-to-generator": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz",
+      "integrity": "sha1-ZTbjeK/2yx1VF6wOQOs+n8jQh2E=",
+      "requires": {
+        "babel-helper-remap-async-to-generator": "^6.24.1",
+        "babel-plugin-syntax-async-functions": "^6.8.0",
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-class-constructor-call": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-constructor-call/-/babel-plugin-transform-class-constructor-call-6.24.1.tgz",
+      "integrity": "sha1-gNwoVQWsBn3LjWxl4vbxGrd2Xvk=",
+      "requires": {
+        "babel-plugin-syntax-class-constructor-call": "^6.18.0",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-class-properties": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz",
+      "integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=",
+      "requires": {
+        "babel-helper-function-name": "^6.24.1",
+        "babel-plugin-syntax-class-properties": "^6.8.0",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-decorators": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.24.1.tgz",
+      "integrity": "sha1-eIAT2PjGtSIr33s0Q5Df13Vp4k0=",
+      "requires": {
+        "babel-helper-explode-class": "^6.24.1",
+        "babel-plugin-syntax-decorators": "^6.13.0",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-do-expressions": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-do-expressions/-/babel-plugin-transform-do-expressions-6.22.0.tgz",
+      "integrity": "sha1-KMyvkoEtlJws0SgfaQyP3EaK6bs=",
+      "requires": {
+        "babel-plugin-syntax-do-expressions": "^6.8.0",
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-arrow-functions": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",
+      "integrity": "sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-block-scoped-functions": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz",
+      "integrity": "sha1-u8UbSflk1wy42OC5ToICRs46YUE=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-block-scoping": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz",
+      "integrity": "sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "babel-template": "^6.26.0",
+        "babel-traverse": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "lodash": "^4.17.4"
+      }
+    },
+    "babel-plugin-transform-es2015-classes": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz",
+      "integrity": "sha1-WkxYpQyclGHlZLSyo7+ryXolhNs=",
+      "requires": {
+        "babel-helper-define-map": "^6.24.1",
+        "babel-helper-function-name": "^6.24.1",
+        "babel-helper-optimise-call-expression": "^6.24.1",
+        "babel-helper-replace-supers": "^6.24.1",
+        "babel-messages": "^6.23.0",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-computed-properties": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz",
+      "integrity": "sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-destructuring": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz",
+      "integrity": "sha1-mXux8auWf2gtKwh2/jWNYOdlxW0=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-duplicate-keys": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz",
+      "integrity": "sha1-c+s9MQypaePvnskcU3QabxV2Qj4=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-for-of": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz",
+      "integrity": "sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-function-name": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz",
+      "integrity": "sha1-g0yJhTvDaxrw86TF26qU/Y6sqos=",
+      "requires": {
+        "babel-helper-function-name": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-literals": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz",
+      "integrity": "sha1-T1SgLWzWbPkVKAAZox0xklN3yi4=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-modules-amd": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz",
+      "integrity": "sha1-Oz5UAXI5hC1tGcMBHEvS8AoA0VQ=",
+      "requires": {
+        "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-modules-commonjs": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz",
+      "integrity": "sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==",
+      "requires": {
+        "babel-plugin-transform-strict-mode": "^6.24.1",
+        "babel-runtime": "^6.26.0",
+        "babel-template": "^6.26.0",
+        "babel-types": "^6.26.0"
+      }
+    },
+    "babel-plugin-transform-es2015-modules-systemjs": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz",
+      "integrity": "sha1-/4mhQrkRmpBhlfXxBuzzBdlAfSM=",
+      "requires": {
+        "babel-helper-hoist-variables": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-modules-umd": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz",
+      "integrity": "sha1-rJl+YoXNGO1hdq22B9YCNErThGg=",
+      "requires": {
+        "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-object-super": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz",
+      "integrity": "sha1-JM72muIcuDp/hgPa0CH1cusnj40=",
+      "requires": {
+        "babel-helper-replace-supers": "^6.24.1",
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-parameters": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz",
+      "integrity": "sha1-V6w1GrScrxSpfNE7CfZv3wpiXys=",
+      "requires": {
+        "babel-helper-call-delegate": "^6.24.1",
+        "babel-helper-get-function-arity": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1",
+        "babel-traverse": "^6.24.1",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-shorthand-properties": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz",
+      "integrity": "sha1-JPh11nIch2YbvZmkYi5R8U3jiqA=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-spread": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz",
+      "integrity": "sha1-1taKmfia7cRTbIGlQujdnxdG+NE=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-sticky-regex": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz",
+      "integrity": "sha1-AMHNsaynERLN8M9hJsLta0V8zbw=",
+      "requires": {
+        "babel-helper-regex": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-plugin-transform-es2015-template-literals": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz",
+      "integrity": "sha1-qEs0UPfp+PH2g51taH2oS7EjbY0=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-typeof-symbol": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz",
+      "integrity": "sha1-3sCfHN3/lLUqxz1QXITfWdzOs3I=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-unicode-regex": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz",
+      "integrity": "sha1-04sS9C6nMj9yk4fxinxa4frrNek=",
+      "requires": {
+        "babel-helper-regex": "^6.24.1",
+        "babel-runtime": "^6.22.0",
+        "regexpu-core": "^2.0.0"
+      }
+    },
+    "babel-plugin-transform-exponentiation-operator": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz",
+      "integrity": "sha1-KrDJx/MJj6SJB3cruBP+QejeOg4=",
+      "requires": {
+        "babel-helper-builder-binary-assignment-operator-visitor": "^6.24.1",
+        "babel-plugin-syntax-exponentiation-operator": "^6.8.0",
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-export-extensions": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-export-extensions/-/babel-plugin-transform-export-extensions-6.22.0.tgz",
+      "integrity": "sha1-U3OLR+deghhYnuqUbLvTkQm75lM=",
+      "requires": {
+        "babel-plugin-syntax-export-extensions": "^6.8.0",
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-function-bind": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-function-bind/-/babel-plugin-transform-function-bind-6.22.0.tgz",
+      "integrity": "sha1-xvuOlqwpajELjPjqQBRiQH3fapc=",
+      "requires": {
+        "babel-plugin-syntax-function-bind": "^6.8.0",
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-object-rest-spread": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz",
+      "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=",
+      "requires": {
+        "babel-plugin-syntax-object-rest-spread": "^6.8.0",
+        "babel-runtime": "^6.26.0"
+      }
+    },
+    "babel-plugin-transform-regenerator": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz",
+      "integrity": "sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8=",
+      "requires": {
+        "regenerator-transform": "^0.10.0"
+      }
+    },
+    "babel-plugin-transform-strict-mode": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz",
+      "integrity": "sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=",
+      "requires": {
+        "babel-runtime": "^6.22.0",
+        "babel-types": "^6.24.1"
+      }
+    },
+    "babel-preset-es2015": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz",
+      "integrity": "sha1-1EBQ1rwsn+6nAqrzjXJ6AhBTiTk=",
+      "requires": {
+        "babel-plugin-check-es2015-constants": "^6.22.0",
+        "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
+        "babel-plugin-transform-es2015-block-scoped-functions": "^6.22.0",
+        "babel-plugin-transform-es2015-block-scoping": "^6.24.1",
+        "babel-plugin-transform-es2015-classes": "^6.24.1",
+        "babel-plugin-transform-es2015-computed-properties": "^6.24.1",
+        "babel-plugin-transform-es2015-destructuring": "^6.22.0",
+        "babel-plugin-transform-es2015-duplicate-keys": "^6.24.1",
+        "babel-plugin-transform-es2015-for-of": "^6.22.0",
+        "babel-plugin-transform-es2015-function-name": "^6.24.1",
+        "babel-plugin-transform-es2015-literals": "^6.22.0",
+        "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
+        "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
+        "babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
+        "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+        "babel-plugin-transform-es2015-object-super": "^6.24.1",
+        "babel-plugin-transform-es2015-parameters": "^6.24.1",
+        "babel-plugin-transform-es2015-shorthand-properties": "^6.24.1",
+        "babel-plugin-transform-es2015-spread": "^6.22.0",
+        "babel-plugin-transform-es2015-sticky-regex": "^6.24.1",
+        "babel-plugin-transform-es2015-template-literals": "^6.22.0",
+        "babel-plugin-transform-es2015-typeof-symbol": "^6.22.0",
+        "babel-plugin-transform-es2015-unicode-regex": "^6.24.1",
+        "babel-plugin-transform-regenerator": "^6.24.1"
+      }
+    },
+    "babel-preset-stage-0": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-stage-0/-/babel-preset-stage-0-6.24.1.tgz",
+      "integrity": "sha1-VkLRUEL5E4TX5a+LyIsduVsDnmo=",
+      "requires": {
+        "babel-plugin-transform-do-expressions": "^6.22.0",
+        "babel-plugin-transform-function-bind": "^6.22.0",
+        "babel-preset-stage-1": "^6.24.1"
+      }
+    },
+    "babel-preset-stage-1": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-stage-1/-/babel-preset-stage-1-6.24.1.tgz",
+      "integrity": "sha1-dpLNfc1oSZB+auSgqFWJz7niv7A=",
+      "requires": {
+        "babel-plugin-transform-class-constructor-call": "^6.24.1",
+        "babel-plugin-transform-export-extensions": "^6.22.0",
+        "babel-preset-stage-2": "^6.24.1"
+      }
+    },
+    "babel-preset-stage-2": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-stage-2/-/babel-preset-stage-2-6.24.1.tgz",
+      "integrity": "sha1-2eKWD7PXEYfw5k7sYrwHdnIZvcE=",
+      "requires": {
+        "babel-plugin-syntax-dynamic-import": "^6.18.0",
+        "babel-plugin-transform-class-properties": "^6.24.1",
+        "babel-plugin-transform-decorators": "^6.24.1",
+        "babel-preset-stage-3": "^6.24.1"
+      }
+    },
+    "babel-preset-stage-3": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-stage-3/-/babel-preset-stage-3-6.24.1.tgz",
+      "integrity": "sha1-g2raCp56f6N8sTj7kyb4eTSkg5U=",
+      "requires": {
+        "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
+        "babel-plugin-transform-async-generator-functions": "^6.24.1",
+        "babel-plugin-transform-async-to-generator": "^6.24.1",
+        "babel-plugin-transform-exponentiation-operator": "^6.24.1",
+        "babel-plugin-transform-object-rest-spread": "^6.22.0"
+      }
+    },
+    "babel-register": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz",
+      "integrity": "sha1-btAhFz4vy0htestFxgCahW9kcHE=",
+      "requires": {
+        "babel-core": "^6.26.0",
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "home-or-tmp": "^2.0.0",
+        "lodash": "^4.17.4",
+        "mkdirp": "^0.5.1",
+        "source-map-support": "^0.4.15"
+      }
+    },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
+    "babel-template": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz",
+      "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "babel-traverse": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "babylon": "^6.18.0",
+        "lodash": "^4.17.4"
+      }
+    },
+    "babel-traverse": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz",
+      "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=",
+      "requires": {
+        "babel-code-frame": "^6.26.0",
+        "babel-messages": "^6.23.0",
+        "babel-runtime": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "babylon": "^6.18.0",
+        "debug": "^2.6.8",
+        "globals": "^9.18.0",
+        "invariant": "^2.2.2",
+        "lodash": "^4.17.4"
+      },
+      "dependencies": {
+        "globals": {
+          "version": "9.18.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
+          "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ=="
+        }
+      }
+    },
+    "babel-types": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
+      "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "esutils": "^2.0.2",
+        "lodash": "^4.17.4",
+        "to-fast-properties": "^1.0.3"
+      }
+    },
+    "babylon": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -390,11 +1182,46 @@
       "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=",
       "dev": true
     },
+    "convert-source-map": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
+      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+      "requires": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
+    "cross-spawn": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+      "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+      "requires": {
+        "lru-cache": "^4.0.1",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      }
+    },
+    "cross-var": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/cross-var/-/cross-var-1.1.0.tgz",
+      "integrity": "sha1-8PDUuyNdlRONGlOYQtKQ8A23HNY=",
+      "requires": {
+        "babel-preset-es2015": "^6.18.0",
+        "babel-preset-stage-0": "^6.16.0",
+        "babel-register": "^6.18.0",
+        "cross-spawn": "^5.0.1",
+        "exit": "^0.1.2"
+      }
+    },
     "csv-parser": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/csv-parser/-/csv-parser-2.3.2.tgz",
@@ -420,7 +1247,6 @@
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
       "requires": {
         "ms": "2.0.0"
       }
@@ -468,6 +1294,14 @@
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
     },
+    "detect-indent": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
+      "integrity": "sha1-920GQ1LN9Docts5hnE7jqUdd4gg=",
+      "requires": {
+        "repeating": "^2.0.0"
+      }
+    },
     "detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -708,15 +1542,6 @@
             "escape-string-regexp": "^1.0.5"
           }
         },
-        "glob-parent": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
-          "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        },
         "import-fresh": {
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
@@ -1022,8 +1847,12 @@
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
+    },
+    "exit": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+      "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw="
     },
     "extend": {
       "version": "3.0.2",
@@ -1206,6 +2035,15 @@
         "path-is-absolute": "^1.0.0"
       }
     },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -1287,6 +2125,14 @@
         "function-bind": "^1.1.1"
       }
     },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -1303,10 +2149,19 @@
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
     },
+    "home-or-tmp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
+      "integrity": "sha1-42w/LSyufXRqhX440Y1fMqeILbg=",
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.1"
+      }
+    },
     "hosted-git-info": {
-      "version": "2.8.5",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
-      "integrity": "sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg==",
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
     "htmlparser2": {
@@ -1378,9 +2233,9 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
     "inquirer": {
       "version": "7.0.4",
@@ -1470,6 +2325,14 @@
         }
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -1494,6 +2357,11 @@
       "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
       "dev": true
     },
+    "is-finite": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
+      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w=="
+    },
     "is-fullwidth-code-point": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
@@ -1560,8 +2428,7 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
       "version": "3.13.1",
@@ -1578,6 +2445,11 @@
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
       "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
     },
+    "jsesc": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+      "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
+    },
     "json-beautify": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/json-beautify/-/json-beautify-1.1.1.tgz",
@@ -1685,15 +2557,39 @@
       }
     },
     "lodash": {
-      "version": "4.17.19",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
-      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
     },
     "lowercase-keys": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
       "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA=="
     },
+    "lru-cache": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+      "requires": {
+        "pseudomap": "^1.0.2",
+        "yallist": "^2.1.2"
+      },
+      "dependencies": {
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+        }
+      }
+    },
     "mime-db": {
       "version": "1.44.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
@@ -1748,25 +2644,24 @@
       }
     },
     "mkdirp": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
       "requires": {
-        "minimist": "0.0.8"
+        "minimist": "^1.2.5"
       },
       "dependencies": {
         "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
         }
       }
     },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "mustache": {
       "version": "4.0.0",
@@ -1849,6 +2744,14 @@
         "which": "1"
       },
       "dependencies": {
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
         "semver": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
@@ -1896,6 +2799,14 @@
             "abbrev": "1",
             "osenv": "^0.1.4"
           }
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
         }
       }
     },
@@ -1948,9 +2859,9 @@
       }
     },
     "normalize-url": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz",
-      "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ=="
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
+      "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA=="
     },
     "npm-bundled": {
       "version": "1.1.1",
@@ -2166,6 +3077,11 @@
       "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
       "dev": true
     },
+    "private": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
+      "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg=="
+    },
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -2177,6 +3093,11 @@
       "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
       "dev": true
     },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+    },
     "psl": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -2297,12 +3218,63 @@
         "util-deprecate": "~1.0.1"
       }
     },
+    "regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="
+    },
+    "regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+    },
+    "regenerator-transform": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.10.1.tgz",
+      "integrity": "sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==",
+      "requires": {
+        "babel-runtime": "^6.18.0",
+        "babel-types": "^6.19.0",
+        "private": "^0.1.6"
+      }
+    },
     "regexpp": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
       "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==",
       "dev": true
     },
+    "regexpu-core": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-2.0.0.tgz",
+      "integrity": "sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA=",
+      "requires": {
+        "regenerate": "^1.2.1",
+        "regjsgen": "^0.2.0",
+        "regjsparser": "^0.1.4"
+      }
+    },
+    "regjsgen": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
+      "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc="
+    },
+    "regjsparser": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
+      "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
+      "requires": {
+        "jsesc": "~0.5.0"
+      }
+    },
+    "repeating": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
+      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
+      "requires": {
+        "is-finite": "^1.0.0"
+      }
+    },
     "request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -2357,9 +3329,9 @@
       }
     },
     "rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
       "requires": {
         "glob": "^7.1.3"
       }
@@ -2409,7 +3381,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
       "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-      "dev": true,
       "requires": {
         "shebang-regex": "^1.0.0"
       }
@@ -2417,14 +3388,18 @@
     "shebang-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
-      "dev": true
+      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="
     },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
+    "slash": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
+      "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU="
+    },
     "slice-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
@@ -2436,6 +3411,19 @@
         "is-fullwidth-code-point": "^2.0.0"
       }
     },
+    "source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+    },
+    "source-map-support": {
+      "version": "0.4.18",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
+      "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==",
+      "requires": {
+        "source-map": "^0.5.6"
+      }
+    },
     "spdx-correct": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
@@ -2702,6 +3690,11 @@
       "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
       "integrity": "sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg=="
     },
+    "to-fast-properties": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
+      "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc="
+    },
     "to-readable-stream": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-2.1.0.tgz",
@@ -2716,6 +3709,11 @@
         "punycode": "^2.1.1"
       }
     },
+    "trim-right": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
+      "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM="
+    },
     "tslib": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
diff --git a/package.json b/package.json
index c622e1b12..b1750b81e 100644
--- a/package.json
+++ b/package.json
@@ -5,11 +5,15 @@
   "private": true,
   "scripts": {
     "lint": "eslint .",
-    "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"
+    "build": "npm run create-all-tests && npm run review-tests",
+    "validate": "npm run create-all-tests -- --validate",
+    "cleanup": "rimraf build",
+    "create-all-tests": "cross-var node scripts/create-all-tests.js --testplan=$npm_config_testplan",
+    "review-tests": "cross-var node --experimental-modules scripts/test-reviewer.mjs --testplan=$npm_config_testplan",
+    "update-reference": "node scripts/update-reference.js"
   },
   "dependencies": {
+    "cross-var": "^1.1.0",
     "csv-parser": "^2.3.2",
     "fs-extra": "^8.1.0",
     "htmlparser2": "^5.0.1",
@@ -18,7 +22,8 @@
     "minimist": "^1.2.3",
     "mustache": "^4.0.0",
     "node-html-parser": "^1.1.16",
-    "nodegit": "^0.27.0"
+    "nodegit": "^0.27.0",
+    "rimraf": "^3.0.2"
   },
   "devDependencies": {
     "eslint": "^6.1.0",
diff --git a/review/checkbox-tri-state.html b/review/checkbox-tri-state.html
index adde2596e..4aecede4a 100644
--- a/review/checkbox-tri-state.html
+++ b/review/checkbox-tri-state.html
@@ -301,7 +301,7 @@ <h2>Test 1: Navigate forwards to a partially checked checkbox in reading mode</h
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-01-navigate-forwards-to-partially-checked-checkbox-reading.html?at=jaws">jaws</a></li>
@@ -383,7 +383,7 @@ <h2>Test 2: Navigate backwards to a partially checked checkbox in reading mode</
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-02-navigate-backwards-to-partially-checked-checkbox-reading.html?at=jaws">jaws</a></li>
@@ -465,7 +465,7 @@ <h2>Test 3: Navigate forwards to a partially checked checkbox in interaction mod
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-03-navigate-forwards-to-partially-checked-checkbox-interaction.html?at=jaws">jaws</a></li>
@@ -541,7 +541,7 @@ <h2>Test 4: Navigate backwards to a partially checked checkbox in interaction mo
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-04-navigate-backwards-to-partially-checked-checkbox-interaction.html?at=jaws">jaws</a></li>
@@ -617,7 +617,7 @@ <h2>Test 5: Navigate forwards to a partially checked checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-05-navigate-forwards-to-partially-checked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -668,7 +668,7 @@ <h2>Test 6: Navigate backwards to a partially checked checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-06-navigate-backwards-to-partially-checked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -719,7 +719,7 @@ <h2>Test 7: Operate a partially checked checkbox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-07-operate-partially-checked-checkbox-reading.html?at=jaws">jaws</a></li>
@@ -790,7 +790,7 @@ <h2>Test 8: Operate a partially checked checkbox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-08-operate-partially-checked-checkbox-interaction.html?at=jaws">jaws</a></li>
@@ -861,7 +861,7 @@ <h2>Test 9: Operate a partially checked checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-09-operate-partially-checked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -908,7 +908,7 @@ <h2>Test 10: Operate an unchecked checkbox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-10-operate-unchecked-checked-checkbox-reading.html?at=jaws">jaws</a></li>
@@ -980,7 +980,7 @@ <h2>Test 11: Operate an unchecked checkbox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-11-operate-unchecked-checked-checkbox-interaction.html?at=jaws">jaws</a></li>
@@ -1052,7 +1052,7 @@ <h2>Test 12: Operate an unchecked checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-12-operate-unchecked-checked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1100,7 +1100,7 @@ <h2>Test 13: Read a partially checked checkbox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-13-read-partially-checked-checkbox-reading.html?at=jaws">jaws</a></li>
@@ -1178,7 +1178,7 @@ <h2>Test 14: Read a partially checked checkbox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-14-read-partially-checked-checkbox-interaction.html?at=jaws">jaws</a></li>
@@ -1256,7 +1256,7 @@ <h2>Test 15: Read a partially checked checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-15-read-partially-checked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1306,7 +1306,7 @@ <h2>Test 16: Read grouping information of a grouped, partially checked checkbox
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-16-read-checkbox-group-reading.html?at=jaws">jaws</a></li>
@@ -1378,7 +1378,7 @@ <h2>Test 17: Read grouping information of a grouped, partially checked checkbox
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-17-read-checkbox-group-interaction.html?at=jaws">jaws</a></li>
@@ -1450,7 +1450,7 @@ <h2>Test 18: Read grouping information of a grouped, partially checked checkbox<
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-18-read-checkbox-group-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1497,7 +1497,7 @@ <h2>Test 19: Navigate forwards into a checkbox group in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-19-navigate-forwards-into-checkbox-group-reading.html?at=jaws">jaws</a></li>
@@ -1575,7 +1575,7 @@ <h2>Test 20: Navigate backwards out of a checkbox group in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-20-navigate-backwards-out-of-checkbox-group-reading.html?at=jaws">jaws</a></li>
@@ -1649,7 +1649,7 @@ <h2>Test 21: Navigate forwards into a checkbox group in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-21-navigate-forwards-into-checkbox-group-interaction.html?at=jaws">jaws</a></li>
@@ -1723,7 +1723,7 @@ <h2>Test 22: Navigate backwards out of a checkbox group in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-22-navigate-backwards-out-of-checkbox-group-interaction.html?at=jaws">jaws</a></li>
@@ -1797,7 +1797,7 @@ <h2>Test 23: Navigate forwards into a checkbox group</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-23-navigate-forwards-into-checkbox-group-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1844,7 +1844,7 @@ <h2>Test 24: Navigate backwards out of a checkbox group</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox-tri-state/test-24-navigate-backwards-out-of-checkbox-group-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
diff --git a/review/checkbox.html b/review/checkbox.html
index 5ecc6df94..451b040e3 100644
--- a/review/checkbox.html
+++ b/review/checkbox.html
@@ -301,7 +301,7 @@ <h2>Test 1: Navigate to an unchecked checkbox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-01-navigate-to-unchecked-checkbox-reading.html?at=jaws">jaws</a></li>
@@ -374,7 +374,7 @@ <h2>Test 2: Navigate to an unchecked checkbox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-02-navigate-to-unchecked-checkbox-interaction.html?at=jaws">jaws</a></li>
@@ -440,7 +440,7 @@ <h2>Test 3: Navigate to an unchecked checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-03-navigate-to-unchecked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -486,7 +486,7 @@ <h2>Test 4: Navigate to a checked checkbox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-04-navigate-to-checked-checkbox-reading.html?at=jaws">jaws</a></li>
@@ -569,7 +569,7 @@ <h2>Test 5: Navigate to a checked checkbox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-05-navigate-to-checked-checkbox-interaction.html?at=jaws">jaws</a></li>
@@ -645,7 +645,7 @@ <h2>Test 6: Navigate to a checked checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-06-navigate-to-checked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -696,7 +696,7 @@ <h2>Test 7: Operate a checkbox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-07-operate-checkbox-reading.html?at=jaws">jaws</a></li>
@@ -759,7 +759,7 @@ <h2>Test 8: Operate a checkbox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-08-operate-checkbox-interaction.html?at=jaws">jaws</a></li>
@@ -820,7 +820,7 @@ <h2>Test 9: Operate a checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-09-operate-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -862,7 +862,7 @@ <h2>Test 10: Read an unchecked checkbox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-10-read-unchecked-checkbox-reading.html?at=jaws">jaws</a></li>
@@ -940,7 +940,7 @@ <h2>Test 11: Read an unchecked checkbox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-11-read-unchecked-checkbox-interaction.html?at=jaws">jaws</a></li>
@@ -1018,7 +1018,7 @@ <h2>Test 12: Read an unchecked checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-12-read-unchecked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1068,7 +1068,7 @@ <h2>Test 13: Read a checked checkbox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-13-read-checked-checkbox-reading.html?at=jaws">jaws</a></li>
@@ -1146,7 +1146,7 @@ <h2>Test 14: Read a checked checkbox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-14-read-checked-checkbox-interaction.html?at=jaws">jaws</a></li>
@@ -1224,7 +1224,7 @@ <h2>Test 15: Read a checked checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-15-read-checked-checkbox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1274,7 +1274,7 @@ <h2>Test 16: Read grouping information of a grouped checkbox in reading mode</h2
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-16-read-checkbox-group-reading.html?at=jaws">jaws</a></li>
@@ -1338,7 +1338,7 @@ <h2>Test 17: Read grouping information of a grouped checkbox in interaction mode
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-17-read-checkbox-group-interaction.html?at=jaws">jaws</a></li>
@@ -1402,7 +1402,7 @@ <h2>Test 18: Read grouping information of a grouped checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-18-read-checkbox-group-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1446,7 +1446,7 @@ <h2>Test 19: Navigate sequentially through a checkbox group in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-19-navigate-sequentially-through-checkbox-group-reading.html?at=jaws">jaws</a></li>
@@ -1515,7 +1515,7 @@ <h2>Test 20: Navigate sequentially through a checkbox group</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-20-navigate-sequentially-through-checkbox-group-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1561,7 +1561,7 @@ <h2>Test 21: Navigate into a checkbox group in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-21-navigate-into-checkbox-group-reading.html?at=jaws">jaws</a></li>
@@ -1638,7 +1638,7 @@ <h2>Test 22: Navigate into a checkbox group in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-22-navigate-into-checkbox-group-interaction.html?at=jaws">jaws</a></li>
@@ -1707,7 +1707,7 @@ <h2>Test 23: Navigate into a checkbox group</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-23-navigate-into-checkbox-group-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1757,7 +1757,7 @@ <h2>Test 24: Navigate out of a checkbox group  in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-24-navigate-out-of-checkbox-group-reading.html?at=jaws">jaws</a></li>
@@ -1826,7 +1826,7 @@ <h2>Test 25: Navigate out of a checkbox group in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-25-navigate-out-of-checkbox-group-interaction.html?at=jaws">jaws</a></li>
@@ -1895,7 +1895,7 @@ <h2>Test 26: Navigate out of a checkbox group</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/checkbox/test-26-navigate-out-of-checkbox-group-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
diff --git a/review/combobox-autocomplete-both.html b/review/combobox-autocomplete-both.html
index cf19f2cd0..9f9df034b 100644
--- a/review/combobox-autocomplete-both.html
+++ b/review/combobox-autocomplete-both.html
@@ -301,7 +301,7 @@ <h2>Test 1: Navigate to empty, editable combobox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-01-navigate-to-combobox-reading.html?at=jaws">jaws</a></li>
@@ -371,7 +371,7 @@ <h2>Test 2: Navigate sequentially to empty, editable combobox in reading mode</h
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-02-navigate-by-line-to-combobox-reading.html?at=jaws">jaws</a></li>
@@ -437,7 +437,7 @@ <h2>Test 3: Navigate to empty, editable combobox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-03-navigate-to-combobox-interaction.html?at=jaws">jaws</a></li>
@@ -503,7 +503,7 @@ <h2>Test 4: Read empty, editable combobox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-04-read-combobox-reading.html?at=jaws">jaws</a></li>
@@ -569,7 +569,7 @@ <h2>Test 5: Read empty, editable combobox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-05-read-combobox-interaction.html?at=jaws">jaws</a></li>
@@ -635,7 +635,7 @@ <h2>Test 6: Navigate to filled, editable, collapsed  combobox in reading mode</h
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-06-navigate-to-combobox-reading.html?at=jaws">jaws</a></li>
@@ -717,7 +717,7 @@ <h2>Test 7: Navigate to filled, editable, collapsed  combobox in interaction mod
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-07-navigate-to-combobox-interaction.html?at=jaws">jaws</a></li>
@@ -795,7 +795,7 @@ <h2>Test 8: Read filled, editable, collapsed combobox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-08-read-combobox-reading.html?at=jaws">jaws</a></li>
@@ -873,7 +873,7 @@ <h2>Test 9: Read filled, editable, collapsed combobox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-09-read-combobox-interaction.html?at=jaws">jaws</a></li>
@@ -951,7 +951,7 @@ <h2>Test 10: Navigate to filled, editable, expanded combobox in reading mode</h2
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-10-navigate-to-combobox-reading.html?at=jaws">jaws</a></li>
@@ -1033,7 +1033,7 @@ <h2>Test 11: Navigate sequentially to filled, editable, expanded combobox in rea
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-11-navigate-by-line-to-combobox-reading.html?at=jaws">jaws</a></li>
@@ -1101,7 +1101,7 @@ <h2>Test 12: Navigate to filled, editable, expanded combobox in interaction mode
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-12-navigate-to-combobox-interaction.html?at=jaws">jaws</a></li>
@@ -1179,7 +1179,7 @@ <h2>Test 13: Read filled, editable, expanded combobox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-13-read-combobox-reading.html?at=jaws">jaws</a></li>
@@ -1257,7 +1257,7 @@ <h2>Test 14: Read filled, editable, expanded combobox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-14-read-combobox-interaction.html?at=jaws">jaws</a></li>
@@ -1335,7 +1335,7 @@ <h2>Test 15: Navigate to editable combobox with commands that switch mode from r
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-15-navigate-to-combobox-with-keys-that-switch-modes-reading.html?at=jaws">jaws</a></li>
@@ -1395,7 +1395,7 @@ <h2>Test 16: Activate editable combobox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-16-activate-combobox-reading.html?at=jaws">jaws</a></li>
@@ -1465,7 +1465,7 @@ <h2>Test 17: Open combobox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-17-open-combobox-interaction.html?at=jaws">jaws</a></li>
@@ -1539,7 +1539,7 @@ <h2>Test 18: Close combobox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-18-close-combobox-interaction.html?at=jaws">jaws</a></li>
@@ -1609,7 +1609,7 @@ <h2>Test 19: Open combobox with 'States' button in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-19-activate-states-button-reading.html?at=jaws">jaws</a></li>
@@ -1677,7 +1677,7 @@ <h2>Test 20: Open combobox with 'States' button</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-20-activate-states-button-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1720,7 +1720,7 @@ <h2>Test 21: Close combobox with 'States' button in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-21-activate-states-button-reading.html?at=jaws">jaws</a></li>
@@ -1792,7 +1792,7 @@ <h2>Test 22: Close combobox with 'States' button in reading mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-22-activate-states-button-interaction.html?at=jaws">jaws</a></li>
@@ -1862,7 +1862,7 @@ <h2>Test 23: Navigate into popup from empty combobox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-23-navigate-into-popup-from-combobox-interaction.html?at=jaws">jaws</a></li>
@@ -1940,7 +1940,7 @@ <h2>Test 24: Type portion of valid value in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-24-type-in-empty-combobox-interaction.html?at=jaws">jaws</a></li>
@@ -2016,7 +2016,7 @@ <h2>Test 25: Navigate options in popup in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-25-navigate-listbox-popup-interaction.html?at=jaws">jaws</a></li>
@@ -2092,7 +2092,7 @@ <h2>Test 26: Read popup item in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-26-read-option-in-listbox-popup-reading.html?at=jaws">jaws</a></li>
@@ -2167,7 +2167,7 @@ <h2>Test 27: Read popup item in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-27-read-option-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
@@ -2242,7 +2242,7 @@ <h2>Test 28: Activate option in popup in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-28-choose-combobox-option-interaction.html?at=jaws">jaws</a></li>
@@ -2320,7 +2320,7 @@ <h2>Test 29: Cancel option selection in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-29-cancel-selection-interaction.html?at=jaws">jaws</a></li>
@@ -2398,7 +2398,7 @@ <h2>Test 30: Initiate caret movement from listbox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-autocomplete-both/test-30-initiate-caret-movement-from-listbox-interaction.html?at=jaws">jaws</a></li>
diff --git a/review/combobox-select-only.html b/review/combobox-select-only.html
index dbd05c82b..f3c437406 100644
--- a/review/combobox-select-only.html
+++ b/review/combobox-select-only.html
@@ -301,7 +301,7 @@ <h2>Test 1: Navigate forwards to a collapsed select-only combobox in reading mod
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-01-navigate-forwards-to-collapsed-select-only-combobox-reading.html?at=jaws">jaws</a></li>
@@ -386,7 +386,7 @@ <h2>Test 2: Navigate backwards to a collapsed select-only combobox in reading mo
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-02-navigate-backwards-to-collapsed-select-only-combobox-reading.html?at=jaws">jaws</a></li>
@@ -471,7 +471,7 @@ <h2>Test 3: Navigate forwards to a collapsed select-only combobox in interaction
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-03-navigate-forwards-to-collapsed-select-only-combobox-interaction.html?at=jaws">jaws</a></li>
@@ -550,7 +550,7 @@ <h2>Test 4: Navigate backwards to a collapsed select-only combobox in interactio
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-04-navigate-backwards-to-collapsed-select-only-combobox-interaction.html?at=jaws">jaws</a></li>
@@ -629,7 +629,7 @@ <h2>Test 5: Navigate forwards to a collapsed select-only combobox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-05-navigate-forwards-to-collapsed-select-only-combobox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -682,7 +682,7 @@ <h2>Test 6: Navigate backwards to a collapsed select-only combobox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-06-navigate-backwards-to-collapsed-select-only-combobox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -735,7 +735,7 @@ <h2>Test 7: Read information about a collapsed select-only combobox in reading m
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-07-read-information-about-collapsed-select-only-combobox-reading.html?at=jaws">jaws</a></li>
@@ -816,7 +816,7 @@ <h2>Test 8: Read information about a collapsed select-only combobox in interacti
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-08-read-information-about-collapsed-select-only-combobox-interaction.html?at=jaws">jaws</a></li>
@@ -895,7 +895,7 @@ <h2>Test 9: Read information about a collapsed select-only combobox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-09-read-information-about-collapsed-select-only-combobox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -947,7 +947,7 @@ <h2>Test 10: Open a collapsed select-only combobox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-10-open-collapsed-select-only-combobox-reading.html?at=jaws">jaws</a></li>
@@ -1034,7 +1034,7 @@ <h2>Test 11: Open a collapsed select-only combobox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-11-open-collapsed-select-only-combobox-interaction.html?at=jaws">jaws</a></li>
@@ -1129,7 +1129,7 @@ <h2>Test 12: Open a collapsed select-only combobox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-12-open-collapsed-select-only-combobox-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1190,7 +1190,7 @@ <h2>Test 13: Open a collapsed select-only combobox to the first option in intera
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-13-open-collapsed-select-only-combobox-to-first-option-interaction.html?at=jaws">jaws</a></li>
@@ -1277,7 +1277,7 @@ <h2>Test 14: Open a collapsed select-only combobox to the first option</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-14-open-collapsed-select-only-combobox-to-first-option-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1333,7 +1333,7 @@ <h2>Test 15: Open a collapsed select-only combobox to a specific option in inter
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-15-open-collapsed-select-only-combobox-to-specific-option-interaction.html?at=jaws">jaws</a></li>
@@ -1420,7 +1420,7 @@ <h2>Test 16: Open a collapsed select-only combobox to a specific option</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-16-open-collapsed-select-only-combobox-to-specific-option-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1476,7 +1476,7 @@ <h2>Test 17: Open a collapsed select-only combobox to the last option in interac
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-17-open-collapsed-select-only-combobox-to-last-option-interaction.html?at=jaws">jaws</a></li>
@@ -1563,7 +1563,7 @@ <h2>Test 18: Open a collapsed select-only combobox to the last option</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-18-open-collapsed-select-only-combobox-to-last-option-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1619,7 +1619,7 @@ <h2>Test 19: Read information about a listbox popup in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-19-read-information-about-listbox-popup-interaction.html?at=jaws">jaws</a></li>
@@ -1703,7 +1703,7 @@ <h2>Test 20: Read information about a listbox popup</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-20-read-information-about-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1758,7 +1758,7 @@ <h2>Test 21: Navigate forwards to an option in a listbox popup in interaction mo
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-21-navigate-forwards-to-option-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
@@ -1836,7 +1836,7 @@ <h2>Test 22: Navigate backwards to an option in a listbox popup in interaction m
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-22-navigate-backwards-to-option-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
@@ -1914,7 +1914,7 @@ <h2>Test 23: Navigate forwards to an option in a listbox popup</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-23-navigate-forwards-to-option-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1966,7 +1966,7 @@ <h2>Test 24: Navigate backwards to an option in a listbox popup</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-24-navigate-backwards-to-option-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -2018,7 +2018,7 @@ <h2>Test 25: Navigate to a specific option in a listbox popup in interaction mod
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-25-navigate-to-specific-option-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
@@ -2096,7 +2096,7 @@ <h2>Test 26: Navigate to a specific option in a listbox popup</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-26-navigate-to-specific-option-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -2146,7 +2146,7 @@ <h2>Test 27: Navigate to the first option in a listbox popup in interaction mode
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-27-navigate-to-first-option-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
@@ -2224,7 +2224,7 @@ <h2>Test 28: Navigate to the last option in a listbox popup in interaction mode<
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-28-navigate-to-last-option-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
@@ -2302,7 +2302,7 @@ <h2>Test 29: Navigate to the first option in a listbox popup</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-29-navigate-to-first-option-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -2352,7 +2352,7 @@ <h2>Test 30: Navigate to the last option in a listbox popup</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-30-navigate-to-last-option-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -2402,7 +2402,7 @@ <h2>Test 31: Navigate forwards by ten options in a listbox popup in interaction
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-31-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
@@ -2480,7 +2480,7 @@ <h2>Test 32: Navigate backwards by ten options in a listbox popup in interaction
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-32-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
@@ -2558,7 +2558,7 @@ <h2>Test 33: Navigate forwards by ten options in a listbox popup</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-33-navigate-forwards-by-ten-options-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -2608,7 +2608,7 @@ <h2>Test 34: Navigate backwards by ten options in a listbox popup</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-34-navigate-backwards-by-ten-options-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -2658,7 +2658,7 @@ <h2>Test 35: Select an option in a listbox popup in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-35-select-option-in-listbox-popup-interaction.html?at=jaws">jaws</a></li>
@@ -2741,7 +2741,7 @@ <h2>Test 36: Select an option in a listbox popup</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-36-select-option-in-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -2795,7 +2795,7 @@ <h2>Test 37: Close a listbox popup in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-37-close-listbox-popup-interaction.html?at=jaws">jaws</a></li>
@@ -2874,7 +2874,7 @@ <h2>Test 38: Close a listbox popup</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/combobox-select-only/test-38-close-listbox-popup-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
diff --git a/review/menu-button-actions-active-descendant.html b/review/menu-button-actions-active-descendant.html
index e8fb6ea7e..b56964d03 100644
--- a/review/menu-button-actions-active-descendant.html
+++ b/review/menu-button-actions-active-descendant.html
@@ -301,7 +301,7 @@ <h2>Test 1: Navigate forwards to a menu button in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-01-navigate-forwards-to-menu-button-reading.html?at=jaws">jaws</a></li>
@@ -380,7 +380,7 @@ <h2>Test 2: Navigate backwards to a menu button in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-02-navigate-backwards-to-menu-button-reading.html?at=jaws">jaws</a></li>
@@ -459,7 +459,7 @@ <h2>Test 3: Navigate forwards to a menu button in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-03-navigate-forwards-to-menu-button-interaction.html?at=jaws">jaws</a></li>
@@ -532,7 +532,7 @@ <h2>Test 4: Navigate backwards to a menu button in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-04-navigate-backwards-to-menu-button-interaction.html?at=jaws">jaws</a></li>
@@ -605,7 +605,7 @@ <h2>Test 5: Navigate forwards to a menu button</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-05-navigate-forwards-to-menu-button-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -654,7 +654,7 @@ <h2>Test 6: Navigate backwards to a menu button</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-06-navigate-backwards-to-menu-button-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -703,7 +703,7 @@ <h2>Test 7: Read information about a menu button in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-07-read-information-about-menu-button-reading.html?at=jaws">jaws</a></li>
@@ -778,7 +778,7 @@ <h2>Test 8: Read information about a menu button in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-08-read-information-about-menu-button-interaction.html?at=jaws">jaws</a></li>
@@ -853,7 +853,7 @@ <h2>Test 9: Read information about a menu button</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-09-read-information-about-menu-button-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -901,7 +901,7 @@ <h2>Test 10: Open a menu in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-10-open-menu-reading.html?at=jaws">jaws</a></li>
@@ -987,7 +987,7 @@ <h2>Test 11: Open a menu in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-11-open-menu-interaction.html?at=jaws">jaws</a></li>
@@ -1075,7 +1075,7 @@ <h2>Test 12: Open a menu</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-12-open-menu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1131,7 +1131,7 @@ <h2>Test 13: Open a menu to the last item in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-13-open-menu-to-last-item-interaction.html?at=jaws">jaws</a></li>
@@ -1215,7 +1215,7 @@ <h2>Test 14: Open a menu to the last item</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-14-open-menu-to-last-item-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1269,7 +1269,7 @@ <h2>Test 15: Read information about a menu item in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-15-read-information-about-menu-item-interaction.html?at=jaws">jaws</a></li>
@@ -1349,7 +1349,7 @@ <h2>Test 16: Read information about a menu item</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-16-read-information-about-menu-item-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1400,7 +1400,7 @@ <h2>Test 17: Navigate to the first item in a menu in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-17-navigate-to-first-item-in-menu-interaction.html?at=jaws">jaws</a></li>
@@ -1480,7 +1480,7 @@ <h2>Test 18: Navigate to the first item in a menu</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-18-navigate-to-first-item-in-menu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1531,7 +1531,7 @@ <h2>Test 19: Navigate to the last item in a menu in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-19-navigate-to-last-item-in-menu-interaction.html?at=jaws">jaws</a></li>
@@ -1611,7 +1611,7 @@ <h2>Test 20: Navigate to the last item in a menu</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-20-navigate-to-last-item-in-menu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1662,7 +1662,7 @@ <h2>Test 21: Navigate to an item in a menu by typing a character in interaction
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-21-navigate-to-item-in-menu-by-typing-character-interaction.html?at=jaws">jaws</a></li>
@@ -1740,7 +1740,7 @@ <h2>Test 22: Navigate to an item in a menu by typing a character</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-22-navigate-to-item-in-menu-by-typing-character-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1790,7 +1790,7 @@ <h2>Test 23: Activate a menu item in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-23-activate-menu-item-interaction.html?at=jaws">jaws</a></li>
@@ -1863,7 +1863,7 @@ <h2>Test 24: Activate a menu item</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-24-activate-menu-item-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1911,7 +1911,7 @@ <h2>Test 25: Close a menu in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-25-close-menu-interaction.html?at=jaws">jaws</a></li>
@@ -1984,7 +1984,7 @@ <h2>Test 26: Close a menu</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menu-button-actions-active-descendant/test-26-close-menu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
diff --git a/review/menubar-editor.html b/review/menubar-editor.html
index fdafaf20e..003202aa9 100644
--- a/review/menubar-editor.html
+++ b/review/menubar-editor.html
@@ -301,7 +301,7 @@ <h2>Test 1: Navigate to menubar in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-01-navigate-to-menubar-reading.html?at=jaws">jaws</a></li>
@@ -382,7 +382,7 @@ <h2>Test 2: Activate menubar in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-02-activate-menubar-reading.html?at=jaws">jaws</a></li>
@@ -445,7 +445,7 @@ <h2>Test 3: Navigate to menubar with commands that switch mode from reading to i
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-03-tab-to-menubar-reading.html?at=jaws">jaws</a></li>
@@ -526,7 +526,7 @@ <h2>Test 4: Navigate to menubar in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-04-navigate-to-menubar-interaction.html?at=jaws">jaws</a></li>
@@ -605,7 +605,7 @@ <h2>Test 5: Navigate to menubar</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-05-navigate-to-menubar-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -656,7 +656,7 @@ <h2>Test 6: Navigate to menu item in menubar in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-06-navigate-to-menuitem-in-menubar-reading.html?at=jaws">jaws</a></li>
@@ -725,7 +725,7 @@ <h2>Test 7: Navigate to menu item in menubar in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-07-navigate-to-menuitem-in-menubar-interaction.html?at=jaws">jaws</a></li>
@@ -804,7 +804,7 @@ <h2>Test 8: Navigate to menu item in menubar</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-08-navigate-to-menuitem-in-menubar-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -855,7 +855,7 @@ <h2>Test 9: Navigate to open menu item in menubar in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-09-navigate-to-open-menuitem-in-menubar-interaction.html?at=jaws">jaws</a></li>
@@ -934,7 +934,7 @@ <h2>Test 10: Navigate to open menu item in menubar</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-10-navigate-to-open-menuitem-in-menubar-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -984,7 +984,7 @@ <h2>Test 11: Open submenu in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-11-open-submenu-of-menubar-interaction.html?at=jaws">jaws</a></li>
@@ -1064,7 +1064,7 @@ <h2>Test 12: Open submenu</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-12-open-submenu-of-menubar-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1116,7 +1116,7 @@ <h2>Test 13: Close submenu in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-13-close-submenu-of-menubar-interaction.html?at=jaws">jaws</a></li>
@@ -1194,7 +1194,7 @@ <h2>Test 14: Close submenu</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-14-close-submenu-of-menubar-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1244,7 +1244,7 @@ <h2>Test 15: Navigate to checked menu item radio in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-15-navigate-to-checked-menuitemradio-in-submenu-interaction.html?at=jaws">jaws</a></li>
@@ -1322,7 +1322,7 @@ <h2>Test 16: Navigate to checked menu item radio</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-16-navigate-to-checked-menuitemradio-in-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1373,7 +1373,7 @@ <h2>Test 17: Navigate to unchecked menu item radio in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-17-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html?at=jaws">jaws</a></li>
@@ -1451,7 +1451,7 @@ <h2>Test 18: Navigate to unchecked menu item radio</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-18-navigate-to-unchecked-menuitemradio-in-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1502,7 +1502,7 @@ <h2>Test 19: Navigate to unchecked menu item checkbox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-19-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html?at=jaws">jaws</a></li>
@@ -1582,7 +1582,7 @@ <h2>Test 20: Navigate to unchecked menu item checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-20-navigate-to-unchecked-menuitemcheckbox-in-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1634,7 +1634,7 @@ <h2>Test 21: Navigate to checked menu item checkbox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-21-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html?at=jaws">jaws</a></li>
@@ -1720,7 +1720,7 @@ <h2>Test 22: Navigate to checked menu item checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-22-navigate-to-checked-menuitemcheckbox-in-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1775,7 +1775,7 @@ <h2>Test 23: Read menu item in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-23-read-menuitem-in-menubar-reading.html?at=jaws">jaws</a></li>
@@ -1849,7 +1849,7 @@ <h2>Test 24: Read menu item in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-24-read-menuitem-in-menubar-interaction.html?at=jaws">jaws</a></li>
@@ -1933,7 +1933,7 @@ <h2>Test 25: Read menu item</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-25-read-menuitem-in-menubar-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1987,7 +1987,7 @@ <h2>Test 26: Read unchecked menu item radio in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-26-read-unchecked-menuitemradio-in-a-group-in-a-submenu-reading.html?at=jaws">jaws</a></li>
@@ -2071,7 +2071,7 @@ <h2>Test 27: Read unchecked menu item radio in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-27-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html?at=jaws">jaws</a></li>
@@ -2155,7 +2155,7 @@ <h2>Test 28: Read unchecked menu item radio</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-28-read-unchecked-menuitemradio-in-a-group-in-a-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -2209,7 +2209,7 @@ <h2>Test 29: Read checked menu item radio in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-29-read-checked-menuitemradio-in-a-group-in-a-submenu-reading.html?at=jaws">jaws</a></li>
@@ -2293,7 +2293,7 @@ <h2>Test 30: Read checked menu item radio in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-30-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html?at=jaws">jaws</a></li>
@@ -2377,7 +2377,7 @@ <h2>Test 31: Read checked menu item radio</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-31-read-checked-menuitemradio-in-a-group-in-a-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -2431,7 +2431,7 @@ <h2>Test 32: Read unchecked menu item checkbox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-32-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html?at=jaws">jaws</a></li>
@@ -2515,7 +2515,7 @@ <h2>Test 33: Read unchecked menu item checkbox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-33-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html?at=jaws">jaws</a></li>
@@ -2599,7 +2599,7 @@ <h2>Test 34: Read unchecked menu item checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-34-read-unchecked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -2653,7 +2653,7 @@ <h2>Test 35: Read checked menu item checkbox in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-35-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-reading.html?at=jaws">jaws</a></li>
@@ -2737,7 +2737,7 @@ <h2>Test 36: Read checked menu item checkbox in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-36-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html?at=jaws">jaws</a></li>
@@ -2821,7 +2821,7 @@ <h2>Test 37: Read checked menu item checkbox</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-37-read-checked-menuitemcheckbox-in-a-group-in-a-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -2875,7 +2875,7 @@ <h2>Test 38: Read disabled menu item in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-38-read-disabled-menuitem-in-a-submenu-reading.html?at=jaws">jaws</a></li>
@@ -2957,7 +2957,7 @@ <h2>Test 39: Read disabled menu item in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-39-read-disabled-menuitem-in-a-submenu-interaction.html?at=jaws">jaws</a></li>
@@ -3039,7 +3039,7 @@ <h2>Test 40: Read disabled menu item</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/menubar-editor/test-40-read-disabled-menuitem-in-a-submenu-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
diff --git a/review/modal-dialog.html b/review/modal-dialog.html
index 594c438b0..3a0913e22 100644
--- a/review/modal-dialog.html
+++ b/review/modal-dialog.html
@@ -301,7 +301,7 @@ <h2>Test 1: Open a modal dialog in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-01-open-modal-dialog-reading.html?at=jaws">jaws</a></li>
@@ -381,7 +381,7 @@ <h2>Test 2: Open a modal dialog in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-02-open-modal-dialog-interaction.html?at=jaws">jaws</a></li>
@@ -461,7 +461,7 @@ <h2>Test 3: Open a Modal Dialog</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-03-open-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -513,7 +513,7 @@ <h2>Test 4: Close a modal dialog in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-04-close-modal-dialog-reading.html?at=jaws">jaws</a></li>
@@ -585,7 +585,7 @@ <h2>Test 5: Close a modal dialog in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-05-close-modal-dialog-interaction.html?at=jaws">jaws</a></li>
@@ -657,7 +657,7 @@ <h2>Test 6: Close a modal dialog</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-06-close-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -703,7 +703,7 @@ <h2>Test 7: Close a modal dialog using a button in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-07-close-modal-dialog-using-button-reading.html?at=jaws">jaws</a></li>
@@ -777,7 +777,7 @@ <h2>Test 8: Close a modal dialog using a button in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-08-close-modal-dialog-using-button-interaction.html?at=jaws">jaws</a></li>
@@ -851,7 +851,7 @@ <h2>Test 9: Close a modal dialog using a button</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-09-close-modal-dialog-using-button-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -899,7 +899,7 @@ <h2>Test 10: Navigate to the last focusable element in a modal dialog in interac
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-10-navigate-to-last-focusable-element-in-modal-dialog-interaction.html?at=jaws">jaws</a></li>
@@ -971,7 +971,7 @@ <h2>Test 11: Navigate to the last focusable element in a modal dialog</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-11-navigate-to-last-focusable-element-in-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1017,7 +1017,7 @@ <h2>Test 12: Navigate to the first focusable element in a modal dialog in intera
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-12-navigate-to-first-focusable-element-in-modal-dialog-interaction.html?at=jaws">jaws</a></li>
@@ -1089,7 +1089,7 @@ <h2>Test 13: Navigate to the first focusable element in a modal dialog</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-13-navigate-to-first-focusable-element-in-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1135,7 +1135,7 @@ <h2>Test 14: Navigate to the beginning of a modal dialog in reading mode </h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-14-navigate-to-beginning-of-modal-dialog-reading.html?at=jaws">jaws</a></li>
@@ -1209,7 +1209,7 @@ <h2>Test 15: Navigate to the beginning of a modal dialog </h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-15-navigate-to-beginning-of-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1256,7 +1256,7 @@ <h2>Test 16: Navigate to the end of a modal dialog in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-16-navigate-to-end-of-modal-dialog-reading.html?at=jaws">jaws</a></li>
@@ -1328,7 +1328,7 @@ <h2>Test 17: Navigate to the end of a modal dialog</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-17-navigate-to-end-of-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1374,7 +1374,7 @@ <h2>Test 18: Open a nested modal dialog in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-18-open-nested-modal-dialog-reading.html?at=jaws">jaws</a></li>
@@ -1457,7 +1457,7 @@ <h2>Test 19: Open a nested modal dialog in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-19-open-nested-modal-dialog-interaction.html?at=jaws">jaws</a></li>
@@ -1540,7 +1540,7 @@ <h2>Test 20: Open a nested modal dialog</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-20-open-nested-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1594,7 +1594,7 @@ <h2>Test 21: Close a nested modal dialog in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-21-close-nested-modal-dialog-reading.html?at=jaws">jaws</a></li>
@@ -1672,7 +1672,7 @@ <h2>Test 22: Close a nested modal dialog in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-22-close-nested-modal-dialog-interaction.html?at=jaws">jaws</a></li>
@@ -1750,7 +1750,7 @@ <h2>Test 23: Close a nested modal dialog</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-23-close-nested-modal-dialog-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1800,7 +1800,7 @@ <h2>Test 24: Close a nested modal dialog using a button in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-24-close-nested-modal-dialog-using-button-reading.html?at=jaws">jaws</a></li>
@@ -1880,7 +1880,7 @@ <h2>Test 25: Close a nested modal dialog using a button in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-25-close-nested-modal-dialog-using-button-interaction.html?at=jaws">jaws</a></li>
@@ -1960,7 +1960,7 @@ <h2>Test 26: Close a nested modal dialog using a button</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-26-close-nested-modal-dialog-using-button-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -2012,7 +2012,7 @@ <h2>Test 27: Open a nested modal dialog using a link in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-27-open-nested-modal-dialog-using-link-reading.html?at=jaws">jaws</a></li>
@@ -2093,7 +2093,7 @@ <h2>Test 28: Open a nested modal dialog using a link in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-28-open-nested-modal-dialog-using-link-interaction.html?at=jaws">jaws</a></li>
@@ -2174,7 +2174,7 @@ <h2>Test 29: Open a nested modal dialog using a link</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/modal-dialog/test-29-open-nested-modal-dialog-using-link-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
diff --git a/review/tabs-manual-activation.html b/review/tabs-manual-activation.html
index 0f0471cf0..ca184b61a 100644
--- a/review/tabs-manual-activation.html
+++ b/review/tabs-manual-activation.html
@@ -301,7 +301,7 @@ <h2>Test 1: Navigate forwards to a tab list in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-01-navigate-forwards-to-tab-list-reading.html?at=jaws">jaws</a></li>
@@ -390,7 +390,7 @@ <h2>Test 2: Navigate backwards to a tab list in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-02-navigate-backwards-to-tab-list-reading.html?at=jaws">jaws</a></li>
@@ -479,7 +479,7 @@ <h2>Test 3: Navigate forwards to a tab list in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-03-navigate-forwards-to-tab-list-interaction.html?at=jaws">jaws</a></li>
@@ -566,7 +566,7 @@ <h2>Test 4: Navigate backwards to a tab list in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-04-navigate-backwards-to-tab-list-interaction.html?at=jaws">jaws</a></li>
@@ -653,7 +653,7 @@ <h2>Test 5: Navigate forwards to a tab list</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-05-navigate-forwards-to-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -711,7 +711,7 @@ <h2>Test 6: Navigate backwards to a tab list</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-06-navigate-backwards-to-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -769,7 +769,7 @@ <h2>Test 7: Read information about a tab in a tab list in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-07-read-information-about-tab-in-tab-list-reading.html?at=jaws">jaws</a></li>
@@ -852,7 +852,7 @@ <h2>Test 8: Read information about a tab in a tab list in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-08-read-information-about-tab-in-tab-list-interaction.html?at=jaws">jaws</a></li>
@@ -935,7 +935,7 @@ <h2>Test 9: Read information about a tab in a tab list</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-09-read-information-about-tab-in-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -988,7 +988,7 @@ <h2>Test 10: Navigate to the next tab in a tab list in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-10-navigate-to-next-tab-in-tab-list-reading.html?at=jaws">jaws</a></li>
@@ -1066,7 +1066,7 @@ <h2>Test 11: Navigate to the next tab in a tab list in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-11-navigate-to-next-tab-in-tab-list-interaction.html?at=jaws">jaws</a></li>
@@ -1144,7 +1144,7 @@ <h2>Test 12: Navigate to the next tab in a tab list</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-12-navigate-to-next-tab-in-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1194,7 +1194,7 @@ <h2>Test 13: Navigate to the previous tab in a tab list in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-13-navigate-to-previous-tab-in-tab-list-reading.html?at=jaws">jaws</a></li>
@@ -1275,7 +1275,7 @@ <h2>Test 14: Navigate to the previous tab in a tab list in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-14-navigate-to-previous-tab-in-tab-list-interaction.html?at=jaws">jaws</a></li>
@@ -1356,7 +1356,7 @@ <h2>Test 15: Navigate to the previous tab in a tab list</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-15-navigate-to-previous-tab-in-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1408,7 +1408,7 @@ <h2>Test 16: Navigate to the first tab in a tab list in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-16-navigate-to-first-tab-in-tab-list-interaction.html?at=jaws">jaws</a></li>
@@ -1489,7 +1489,7 @@ <h2>Test 17: Navigate to the first tab in a tab list</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-17-navigate-to-first-tab-in-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1541,7 +1541,7 @@ <h2>Test 18: Navigate to the last tab in a tab list in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-18-navigate-to-last-tab-in-tab-list-interaction.html?at=jaws">jaws</a></li>
@@ -1619,7 +1619,7 @@ <h2>Test 19: Navigate to the last tab in a tab list</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-19-navigate-to-last-tab-in-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1669,7 +1669,7 @@ <h2>Test 20: Navigate forwards to a tab panel in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-20-navigate-forwards-to-tab-panel-interaction.html?at=jaws">jaws</a></li>
@@ -1745,7 +1745,7 @@ <h2>Test 21: Navigate backwards to a tab panel in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-21-navigate-backwards-to-tab-panel-interaction.html?at=jaws">jaws</a></li>
@@ -1821,7 +1821,7 @@ <h2>Test 22: Navigate forwards to a tab panel</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-22-navigate-forwards-to-tab-panel-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1871,7 +1871,7 @@ <h2>Test 23: Navigate backwards to a tab panel</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-23-navigate-backwards-to-tab-panel-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -1921,7 +1921,7 @@ <h2>Test 24: Activate a tab in a tab list in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-24-activate-tab-in-tab-list-reading.html?at=jaws">jaws</a></li>
@@ -1994,7 +1994,7 @@ <h2>Test 25: Activate a tab in a tab list in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-25-activate-tab-in-tab-list-interaction.html?at=jaws">jaws</a></li>
@@ -2067,7 +2067,7 @@ <h2>Test 26: Activate a tab in a tab list</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-26-activate-tab-in-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
@@ -2115,7 +2115,7 @@ <h2>Test 27: Delete a tab from a tab list in reading mode</h2>
       <ul>
         <li>Mode: reading</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-27-delete-tab-from-tab-list-reading.html?at=jaws">jaws</a></li>
@@ -2196,7 +2196,7 @@ <h2>Test 28: Delete a tab from a tab list in interaction mode</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: jaws, nvda</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-28-delete-tab-from-tab-list-interaction.html?at=jaws">jaws</a></li>
@@ -2277,7 +2277,7 @@ <h2>Test 29: Delete a tab from a tab list</h2>
       <ul>
         <li>Mode: interaction</li>
         <li>Applies to: voiceover_macos</li>
-        <li>Lasted edited: Thu Jun 3 22:57:25 2021 +0200</li>
+        <li>Last edited: Wed Jun 16 13:18:42 2021 -0500</li>
         <li>Tests:
           <ul>
               <li><a href="../tests/tabs-manual-activation/test-29-delete-tab-from-tab-list-interaction.html?at=voiceover_macos">voiceover_macos</a></li>
diff --git a/scripts/create-all-tests.js b/scripts/create-all-tests.js
index dc2408f4b..63e4405f7 100644
--- a/scripts/create-all-tests.js
+++ b/scripts/create-all-tests.js
@@ -1,12 +1,77 @@
 const path = require('path');
 const fs = require('fs');
-const { createExampleTests } = require('./create-example-tests');
+const {createExampleTests} = require('./create-example-tests');
 
-const scriptDirectory = path.dirname(__filename);
-const rootDirectory = scriptDirectory.split('scripts')[0];
+let successRunsCount = 0;
+let errorRunsCount = 0;
+let totalRunsCount = 0;
+let suppressedMessageCount = 0;
 
-const p = path.join(rootDirectory, 'tests');
+const args = require('minimist')(process.argv.slice(2), {
+  alias: {
+    h: 'help',
+    t: 'testplan',
+    v: 'verbose',
+    V: 'validate'
+  },
+});
 
-fs.readdirSync(p)
-  .filter(f => f !== 'resources' && fs.statSync(path.join(p, f)).isDirectory())
-  .forEach(d => createExampleTests(path.join('tests', d)));
+if (args.help) {
+  console.log(`Default use:
+  No arguments:
+    Generate tests and view report summary.
+  Arguments:
+    -h, --help
+       Show this message.
+    -t, --testplan
+       Generate tests and view a detailed report summary for an individual test plan directory. eg. --testplan=checkbox
+    -v, --verbose
+       Generate tests and view a detailed report summary.
+    -V, --validate
+       Determine whether current test plans are valid (no errors present).
+`);
+  process.exit();
+}
+
+// on some OSes, it seems the the `npm_config_testplan` environment variable will come back as the actual variable name rather than empty if it does not exist
+const TARGET_TEST_PLAN = args.testplan && !args.testplan.includes('npm_config_testplan') ? args.testplan : null; // individual test plan to generate test assets for
+const VERBOSE_CHECK = !!args.verbose;
+const VALIDATE_CHECK = !!args.validate;
+
+const scriptsDirectory = path.dirname(__filename);
+const rootDirectory = scriptsDirectory.split('scripts')[0];
+const testsDirectory = path.join(rootDirectory, 'tests');
+
+const filteredTestPlans = fs.readdirSync(testsDirectory)
+  .filter(f => TARGET_TEST_PLAN ?
+    f !== 'resources' && f === TARGET_TEST_PLAN && fs.statSync(path.join(testsDirectory, f)).isDirectory() : // checking to see if individual test plan has been specified
+    f !== 'resources' && fs.statSync(path.join(testsDirectory, f)).isDirectory()
+  )
+
+if (!filteredTestPlans.length) { // most likely to happen if incorrect testPlan specified
+  console.error('ERROR: Unable to find valid test plan(s).');
+  process.exit();
+}
+
+filteredTestPlans.forEach(async directory => {
+    const {isSuccessfulRun, suppressedMessages} = await createExampleTests({
+      directory: path.join('tests', directory),
+      args
+    });
+    if (isSuccessfulRun) successRunsCount++;
+    else errorRunsCount++;
+
+    // increment total runs completed
+    totalRunsCount = successRunsCount + errorRunsCount;
+
+    // report how many messages have been hidden by not running in verbose mode
+    suppressedMessageCount = suppressedMessages;
+
+    if (totalRunsCount === filteredTestPlans.length) { // last test plan has been ran
+      if (VALIDATE_CHECK) console.log(`(${successRunsCount}) out of (${totalRunsCount}) test plan(s) successfully processed without any validation errors.\n`);
+      else console.log(`(${successRunsCount}) out of (${totalRunsCount}) test plan(s) successfully processed and generated without any validation errors.\n`);
+
+      if (!VERBOSE_CHECK) console.log(`NOTE: ${suppressedMessageCount} messages suppressed. Run 'npm run create-all-tests -- --help' or 'node ./scripts/create-all-tests.js --help' to learn more.`)
+    }
+  }
+);
diff --git a/scripts/create-example-tests.js b/scripts/create-example-tests.js
index d06e7bb6b..e2cefefb9 100644
--- a/scripts/create-example-tests.js
+++ b/scripts/create-example-tests.js
@@ -1,33 +1,88 @@
 'use strict';
-const path = require('path');
+const fs = require('fs');
 const fse = require('fs-extra');
-const inquirer = require('inquirer');
-const util = require('util');
+const path = require('path');
 const csv = require('csv-parser');
-const readline = require('readline');
-const fs = require('fs');
-const beautify = require("json-beautify");
+const beautify = require('json-beautify');
+
+let VERBOSE_CHECK = false;
+let VALIDATE_CHECK = false;
+
+let suppressedMessages = 0;
+
+/**
+ * @param {string} message - message to be logged
+ * @param {boolean} severe=false - indicates whether the message should be viewed as an error or not
+ * @param {boolean} force=false - indicates whether this message should be forced to be outputted regardless of verbosity level
+ */
+const logger = (message, severe = false, force = false) => {
+  if (VERBOSE_CHECK || force) {
+    if (severe) console.error(message)
+    else console.log(message)
+  } else {
+    // Output no logs
+    suppressedMessages += 1; // counter to indicate how many messages were hidden
+  }
+}
 
+/**
+ * @param {string} directory - path to directory of data to be used to generate test
+ * @param {object} args={}
+ */
+const createExampleTests = ({directory, args = {}}) => new Promise(resolve => {
+  // setup from arguments passed to npm script
+  VERBOSE_CHECK = !!args.verbose;
+  VALIDATE_CHECK = !!args.validate;
 
-const createExampleTests = function (directory) {
   const validModes = ['reading', 'interaction', 'item'];
 
-  const scriptDirectory = path.dirname(__filename);
-  const rootDirectory = scriptDirectory.split('scripts')[0];
-  const testDirectory = path.join(rootDirectory, directory);
-  const testDirectoryRelative = directory;
-
-  const keysFile = path.join(rootDirectory, 'tests', 'resources', 'keys.mjs');
-
-  const testsFile = path.join(testDirectory, 'data', 'tests.csv');
-  const atCommandsFile = path.join(testDirectory, 'data', 'commands.csv');
-  const referencesFile = path.join(testDirectory, 'data', 'references.csv');
-  const javascriptDirectory = path.join(testDirectory, 'data', 'js');
-  const indexFile = path.join(testDirectory,'index.html');
+  // cwd; @param rootDirectory is dependent on this file not moving from the scripts folder
+  const scriptsDirectory = path.dirname(__filename);
+  const rootDirectory = scriptsDirectory.split('scripts')[0];
+
+  const testsDirectory = path.join(rootDirectory, 'tests');
+  const testPlanDirectory = path.join(rootDirectory, directory);
+
+  const resourcesDirectory = path.join(testsDirectory, 'resources');
+  const ariaAtHarnessFilePath = path.join(resourcesDirectory, 'aria-at-harness.mjs');
+  const atCommandsFilePath = path.join(resourcesDirectory, 'at-commands.mjs');
+  const keysFilePath = path.join(resourcesDirectory, 'keys.mjs');
+  const supportFilePath = path.join(testsDirectory, 'support.json');
+  const javascriptDirectory = path.join(testPlanDirectory, 'data', 'js');
+  const testsCsvFilePath = path.join(testPlanDirectory, 'data', 'tests.csv');
+  const atCommandsCsvFilePath = path.join(testPlanDirectory, 'data', 'commands.csv');
+  const referencesCsvFilePath = path.join(testPlanDirectory, 'data', 'references.csv');
+  const referenceDirectory = path.join(testPlanDirectory, 'reference')
+
+  // build output folders and file paths setup
+  const buildDirectory = path.join(rootDirectory, 'build');
+  const testsBuildDirectory = path.join(buildDirectory, 'tests');
+  const testPlanBuildDirectory = path.join(buildDirectory, directory);
+  const resourcesBuildDirectory = path.join(testsBuildDirectory, 'resources');
+  const referenceBuildDirectory = path.join(testPlanBuildDirectory, 'reference');
+
+  const indexFileBuildOutputPath = path.join(testPlanBuildDirectory, 'index.html');
+  const supportFileBuildPath = path.join(testsBuildDirectory, 'support.json');
+  const ariaAtHarnessFileBuildPath = path.join(resourcesBuildDirectory, 'aria-at-harness.mjs');
+  const atCommandsFileBuildPath = path.join(resourcesBuildDirectory, 'at-commands.mjs');
+  const keysFileBuildPath = path.join(resourcesBuildDirectory, 'keys.mjs');
+
+  // create directories if not exists
+  fs.existsSync(buildDirectory) || fs.mkdirSync(buildDirectory);
+  fs.existsSync(testsBuildDirectory) || fs.mkdirSync(testsBuildDirectory);
+  fs.existsSync(testPlanBuildDirectory) || fs.mkdirSync(testPlanBuildDirectory);
+  fs.existsSync(resourcesBuildDirectory) || fs.mkdirSync(resourcesBuildDirectory);
+
+  // ensure the build folder has the files it needs for running local server
+  fse.copySync(supportFilePath, supportFileBuildPath, {overwrite: true});
+  fse.copySync(ariaAtHarnessFilePath, ariaAtHarnessFileBuildPath, {overwrite: true});
+  fse.copySync(atCommandsFilePath, atCommandsFileBuildPath, {overwrite: true});
+  fse.copySync(keysFilePath, keysFileBuildPath, {overwrite: true});
+  fse.copySync(referenceDirectory, referenceBuildDirectory, {overwrite: true});
 
   const keyDefs = {};
+  const support = JSON.parse(fse.readFileSync(supportFilePath));
 
-  const support = JSON.parse(fse.readFileSync(path.join(rootDirectory, 'tests', 'support.json')));
   let allATKeys = [];
   let allATNames = [];
   support.ats.forEach(at => {
@@ -38,66 +93,62 @@ const createExampleTests = function (directory) {
   const validAppliesTo = ['Screen Readers', 'Desktop Screen Readers'].concat(allATKeys);
 
   try {
-    fse.statSync(testDirectory);
-  }
-  catch (err) {
-    console.log("The test directory '" + testDirectory + "' does not exist. Check the path to tests.");
+    fse.statSync(testPlanDirectory);
+  } catch (err) {
+    logger(`The test directory '${testPlanDirectory}' does not exist. Check the path to tests.`, true, true);
     process.exit();
   }
 
   try {
-    fse.statSync(testsFile);
-  }
-  catch (err) {
-    console.log("The tests.csv file does not exist. Please create '" + testsFile + "' file.");
+    fse.statSync(testsCsvFilePath);
+  } catch (err) {
+    logger(`The tests.csv file does not exist. Please create '${testsCsvFilePath}' file.`, true, true);
     process.exit();
   }
 
   try {
-    fse.statSync(atCommandsFile);
-  }
-  catch (err) {
-    console.log("The at-commands.csv file does not exist. Please create '" + atCommandsFile + "' file.");
+    fse.statSync(atCommandsCsvFilePath);
+  } catch (err) {
+    logger(`The at-commands.csv file does not exist. Please create '${atCommandsCsvFilePath}' file.`, true, true);
     process.exit();
   }
 
   try {
-    fse.statSync(referencesFile);
-  }
-  catch (err) {
-    console.log("The references.csv file does not exist. Please create '" + referencesFile + "' file.");
+    fse.statSync(referencesCsvFilePath);
+  } catch (err) {
+    logger(`The references.csv file does not exist. Please create '${referencesCsvFilePath}' file.`, true, true);
     process.exit();
   }
 
   // get Keys that are defined
-
   try {
-      // read contents of the file
-      const keys = fs.readFileSync(keysFile, 'UTF-8');
-
-      // split the contents by new line
-      const lines = keys.split(/\r?\n/);
+    // read contents of the file
+    const keys = fs.readFileSync(keysFilePath, 'UTF-8');
 
-      // print all lines
-      lines.forEach((line) => {
-        let parts1 = line.split(' ');
-        let parts2 = line.split('"');
+    // split the contents by new line
+    const lines = keys.split(/\r?\n/);
 
-        if (parts1.length > 3) {
-          let code = parts1[2].trim();
-          keyDefs[code] = parts2[1].trim();
-        }
+    // print all lines
+    lines.forEach((line) => {
+      let parts1 = line.split(' ');
+      let parts2 = line.split('"');
 
-      });
+      if (parts1.length > 3) {
+        let code = parts1[2].trim();
+        keyDefs[code] = parts2[1].trim();
+      }
+    });
   } catch (err) {
-      console.error(err);
+    logger(err, true, true);
   }
 
   // delete test files
-
-  var deleteFilesFromDirectory = function(dirPath) {
-    try { var files = fs.readdirSync(dirPath); }
-    catch(e) { return; }
+  var deleteFilesFromDirectory = function (dirPath) {
+    try {
+      var files = fs.readdirSync(dirPath);
+    } catch (e) {
+      return;
+    }
     if (files.length > 0) {
       for (var i = 0; i < files.length; i++) {
         var filePath = dirPath + '/' + files[i];
@@ -112,11 +163,13 @@ const createExampleTests = function (directory) {
     return task.replace(/'/g, '').replace(/;/g, '').trim().toLowerCase()
   }
 
-  // Create AT commands file
-
-  function createATCommandFile(cmds) {
-
-    const fname = path.join(testDirectory, 'commands.json');
+  /**
+   * Create AT commands file
+   * @param commands
+   * @returns {{}}
+   */
+  function createATCommandFile(commands) {
+    const testPlanAtCommandsJsonFilePath = path.join(testPlanBuildDirectory, 'commands.json');
     let data = {};
 
     function addCommand(task, mode, at, key) {
@@ -138,7 +191,7 @@ const createExampleTests = function (directory) {
         data[task][mode] = {};
       }
 
-      if (typeof data[task][mode][at] !== 'object' ) {
+      if (typeof data[task][mode][at] !== 'object') {
         data[task][mode][at] = [];
       }
 
@@ -157,33 +210,34 @@ const createExampleTests = function (directory) {
       data[task][mode][at].push(items);
     }
 
-    cmds.forEach(function(cmd) {
-
-      addCommand(cmd.task, cmd.mode, cmd.at, cmd.commandA);
-      addCommand(cmd.task, cmd.mode, cmd.at, cmd.commandB);
-      addCommand(cmd.task, cmd.mode, cmd.at, cmd.commandC);
-      addCommand(cmd.task, cmd.mode, cmd.at, cmd.commandD);
-      addCommand(cmd.task, cmd.mode, cmd.at, cmd.commandE);
-      addCommand(cmd.task, cmd.mode, cmd.at, cmd.commandF);
-
+    commands.forEach(function (command) {
+      addCommand(command.task, command.mode, command.at, command.commandA);
+      addCommand(command.task, command.mode, command.at, command.commandB);
+      addCommand(command.task, command.mode, command.at, command.commandC);
+      addCommand(command.task, command.mode, command.at, command.commandD);
+      addCommand(command.task, command.mode, command.at, command.commandE);
+      addCommand(command.task, command.mode, command.at, command.commandF);
     });
 
-    fs.writeFileSync(fname, beautify(data, null, 2, 40));
+    if (!VALIDATE_CHECK) fs.writeFileSync(testPlanAtCommandsJsonFilePath, beautify(data, null, 2, 40));
 
     return data;
-
   }
 
-  // Create Test File
-
-  function createTestFile (test, refs, commands) {
+  /**
+   * Create Test File
+   * @param test
+   * @param refs
+   * @param commands
+   * @returns {(string|*[])[]}
+   */
+  function createTestFile(test, refs, commands) {
     let scripts = [];
 
-
     function getModeValue(value) {
       let v = value.trim().toLowerCase();
       if (!validModes.includes(v)) {
-          addTestError(test.testId, '"' + value + '" is not valid value for "mode" property.')
+        addTestError(test.testId, '"' + value + '" is not valid value for "mode" property.')
       }
       return v;
     }
@@ -199,10 +253,9 @@ const createExampleTests = function (directory) {
     }
 
     function getAppliesToValues(values) {
-
       function checkValue(value) {
         let v1 = value.trim().toLowerCase();
-        for (let i=0; i < validAppliesTo.length; i++) {
+        for (let i = 0; i < validAppliesTo.length; i++) {
           let v2 = validAppliesTo[i];
           if (v1 === v2.toLowerCase()) {
             return v2;
@@ -247,7 +300,7 @@ const createExampleTests = function (directory) {
       }
     }
 
-    function getReferences (example, testRefs) {
+    function getReferences(example, testRefs) {
       let links = '';
 
       if (typeof example === 'string' && example.length) {
@@ -255,14 +308,13 @@ const createExampleTests = function (directory) {
       }
 
       let items = test.refs.split(' ');
-      items.forEach(function(item) {
+      items.forEach(function (item) {
         item = item.trim();
 
         if (item.length) {
           if (typeof refs[item] === 'string') {
             links += `<link rel="help" href="${refs[item]}">\n`;
-          }
-          else {
+          } else {
             addTestError(test.testId, "Reference does not exist: " + item);
           }
         }
@@ -271,28 +323,25 @@ const createExampleTests = function (directory) {
       return links;
     }
 
-    function addSetupScript (scriptName, fname) {
-
+    function addSetupScript(scriptName, filename) {
       let script = '';
-      if (fname.length) {
-
+      if (filename.length) {
         try {
-          fse.statSync(fname);
-        }
-        catch (err) {
-          addTestError(test.testId, "Setup script does not exist: " + fname);
+          fse.statSync(filename);
+        } catch (err) {
+          addTestError(test.testId, "Setup script does not exist: " + filename);
           return '';
         }
 
         try {
-            const data = fs.readFileSync(fname, 'UTF-8');
-            const lines = data.split(/\r?\n/);
-            lines.forEach((line) => {
-              if (line.trim().length)
+          const data = fs.readFileSync(filename, 'UTF-8');
+          const lines = data.split(/\r?\n/);
+          lines.forEach((line) => {
+            if (line.trim().length)
               script += '\t\t\t' + line.trim() + '\n';
-            });
+          });
         } catch (err) {
-            console.error(err);
+          logger(err, true, true);
         }
 
         scripts.push(`\t\t${scriptName}: function(testPageDocument){\n${script}\t\t}`);
@@ -327,7 +376,7 @@ const createExampleTests = function (directory) {
     appliesTo.forEach(at => {
       if (commands[task]) {
         if (!commands[task][mode][at.toLowerCase()]) {
-          addTestError(test.testId, 'command is missing for the combination of task: "' + task + '", mode: "'+mode+'", and AT: "'+at.toLowerCase()+'" ');
+          addTestError(test.testId, 'command is missing for the combination of task: "' + task + '", mode: "' + mode + '", and AT: "' + at.toLowerCase() + '" ');
         }
       }
     });
@@ -338,10 +387,13 @@ const createExampleTests = function (directory) {
     if (parseInt(test.testId) < 10) {
       id = '0' + id;
     }
-    let testFileName = 'test-' + id + '-' +cleanTask(test.task).replace(/\s+/g, '-') + '-' + test.mode.trim().toLowerCase() + '.html';
-    let testJSONFileName = 'test-' + id + '-' +cleanTask(test.task).replace(/\s+/g, '-') + '-' + test.mode.trim().toLowerCase() + '.json';
-    let testFileAbsolute = path.join(testDirectory, testFileName);
-    let testJSONFileAbsolute = path.join(testDirectory, testJSONFileName);
+    let testFileName = 'test-' + id + '-' + cleanTask(test.task).replace(/\s+/g, '-') + '-' + test.mode.trim()
+      .toLowerCase() + '.html';
+    let testJSONFileName = 'test-' + id + '-' + cleanTask(test.task).replace(/\s+/g, '-') + '-' + test.mode.trim()
+      .toLowerCase() + '.json';
+
+    let testPlanHtmlFileBuildPath = path.join(testPlanBuildDirectory, testFileName);
+    let testPlanJsonFileBuildPath = path.join(testPlanBuildDirectory, testJSONFileName);
 
     if (typeof test.setupScript === 'string') {
       let setupScript = test.setupScript.trim();
@@ -350,14 +402,14 @@ const createExampleTests = function (directory) {
       }
     }
 
-    let references  = getReferences(refs.example, test.refs);
+    let references = getReferences(refs.example, test.refs);
     addSetupScript(test.setupScript, setupFileName);
 
-    for (let i=1; i<31; i++) {
-      if (!test["assertion"+i]) {
+    for (let i = 1; i < 31; i++) {
+      if (!test["assertion" + i]) {
         continue;
       }
-      addAssertion(test["assertion"+i]);
+      addAssertion(test["assertion" + i]);
     }
 
     let testData = {
@@ -370,7 +422,7 @@ const createExampleTests = function (directory) {
       output_assertions: assertions
     };
 
-    fse.writeFileSync(testJSONFileAbsolute, JSON.stringify(testData, null, 2), 'utf8');
+    if (!VALIDATE_CHECK) fse.writeFileSync(testPlanJsonFileBuildPath, JSON.stringify(testData, null, 2), 'utf8');
 
     function getTestJson() {
       return JSON.stringify(testData, null, 2);
@@ -405,32 +457,32 @@ ${references}
 </script>
   `;
 
-    fse.writeFileSync(testFileAbsolute, testHTML, 'utf8');
+    if (!VALIDATE_CHECK) fse.writeFileSync(testPlanHtmlFileBuildPath, testHTML, 'utf8');
 
     const applies_to_at = [];
 
-    allATKeys.forEach( at => applies_to_at.push(testData.applies_to.indexOf(at) >= 0));
+    allATKeys.forEach(at => applies_to_at.push(testData.applies_to.indexOf(at) >= 0));
 
     return [testFileName, applies_to_at];
   }
 
-  // Create an index file for a local server
-
+  /**
+   * Create an index file for a local server
+   * @param tasks
+   */
   function createIndexFile(tasks) {
-
     let rows = '';
     let all_ats = '';
 
-    allATNames.forEach( at => all_ats += '<th>' + at + '</th>\n');
+    allATNames.forEach(at => all_ats += '<th>' + at + '</th>\n');
 
-    tasks.forEach( function (task) {
+    tasks.forEach(function (task) {
       rows += `<tr><td>${task.id}</td>`;
       rows += `<td scope="row">${task.title}</td>`;
-      for (let i = 0; i < allATKeys.length; i++ ) {
+      for (let i = 0; i < allATKeys.length; i++) {
         if (task.applies_to_at[i]) {
           rows += `<td class="test"><a href="${task.href}?at=${allATKeys[i]}" aria-label="${allATNames[i]} test for task ${task.id}">${allATNames[i]}</a></td>`;
-        }
-        else {
+        } else {
           rows += `<td class="test none">not included</td>`;
         }
       }
@@ -513,11 +565,10 @@ ${rows}
 </body>
 `;
 
-     fse.writeFileSync(indexFile, indexHTML, 'utf8');
+    if (!VALIDATE_CHECK) fse.writeFileSync(indexFileBuildOutputPath, indexHTML, 'utf8');
   }
 
   // Process CSV files
-
   var refs = {};
   var atCommands = [];
   var tests = [];
@@ -535,59 +586,65 @@ ${rows}
     errors += '[Command]: The key reference "' + key + '" is invalid for the "' + task + '" task.\n';
   }
 
-  fs.createReadStream(referencesFile)
+  fs.createReadStream(referencesCsvFilePath)
     .pipe(csv())
     .on('data', (row) => {
       refs[row.refId] = row.value.trim();
     })
     .on('end', () => {
-      console.log('References CSV file successfully processed');
+      logger(`References CSV file successfully processed: ${referencesCsvFilePath}`);
 
-      fs.createReadStream(atCommandsFile)
+      fs.createReadStream(atCommandsCsvFilePath)
         .pipe(csv())
         .on('data', (row) => {
           atCommands.push(row);
         })
         .on('end', () => {
-          console.log('Commands CSV file successfully processed');
+          logger(`Commands CSV file successfully processed: ${atCommandsCsvFilePath}`);
 
-          fs.createReadStream(testsFile)
+          fs.createReadStream(testsCsvFilePath)
             .pipe(csv())
             .on('data', (row) => {
               tests.push(row);
             })
             .on('end', () => {
-              console.log('Test CSV file successfully processed');
+              logger(`Test CSV file successfully processed: ${testsCsvFilePath}`);
 
-              console.log('Deleting current test files...')
-              deleteFilesFromDirectory(testDirectory);
+              logger('Deleting current test files...')
+              deleteFilesFromDirectory(testPlanDirectory);
 
               atCommands = createATCommandFile(atCommands);
 
-              console.log('Creating the following test files: ')
-              tests.forEach(function(test) {
+              logger('Creating the following test files: ')
+              tests.forEach(function (test) {
                 try {
                   let [url, applies_to_at] = createTestFile(test, refs, atCommands);
-                  indexOfURLs.push({ id: test.testId, title: test.title, href: url, script: test.setupScript, applies_to_at: applies_to_at});
-                  console.log('[Test ' + test.testId + ']: ' + url);
-                }
-                catch (err) {
-                  console.error(err);
+                  indexOfURLs.push({
+                    id: test.testId,
+                    title: test.title,
+                    href: url,
+                    script: test.setupScript,
+                    applies_to_at: applies_to_at
+                  });
+                  logger('[Test ' + test.testId + ']: ' + url);
+                } catch (err) {
+                  logger(err, true, true);
                 }
               });
 
               createIndexFile(indexOfURLs);
 
               if (errorCount) {
-                console.log('\n\n*** ' + errorCount + ' Errors in tests and/or commands ***');
-                console.log(errors);
+                logger(`*** ${errorCount} Errors in tests and/or commands in file [${testsCsvFilePath}] ***`, true, true);
+                logger(errors, true, true);
+                resolve({isSuccessfulRun: false, suppressedMessages});
+              } else {
+                logger('No validation errors detected\n');
+                resolve({isSuccessfulRun: true, suppressedMessages});
               }
-              else {
-                console.log('No validation errors detected');
-              }
-            });
-        });
-    });
-}
+            })
+        })
+    })
+});
 
 exports.createExampleTests = createExampleTests
diff --git a/scripts/review-template.mustache b/scripts/review-template.mustache
index 48105f7e5..22ceccf3a 100644
--- a/scripts/review-template.mustache
+++ b/scripts/review-template.mustache
@@ -112,13 +112,13 @@
     <p>
       <ul>
         <li>Mode: {{mode}}</li>
-        <li>Applies to: {{allReleventATsFormatted}}</li>
+        <li>Applies to: {{allRelevantATsFormatted}}</li>
         <li>Lasted edited: {{lastEdited}}</li>
         <li>Tests:
           <ul>
-            {{#allReleventATs}}
+            {{#allRelevantATs}}
               <li><a href="../tests{{{location}}}?at={{{.}}}">{{{.}}}</a></li>
-            {{/allReleventATs}}
+            {{/allRelevantATs}}
           </ul>
         </li>
         <li>Relevant Specifications:
@@ -166,7 +166,7 @@
             <tr><td>{{priority}}</td><td>{{description}}</td></tr>
           {{/assertions}}
           {{^assertions}}
-            <tr><td colspan="2">No assertions have been listed for {{atName}}. Add assertion or update the "applies_to" to list only the relevent assistive technologies.</td></tr>
+            <tr><td colspan="2">No assertions have been listed for {{atName}}. Add assertion or update the "applies_to" to list only the relevant assistive technologies.</td></tr>
           {{/assertions}}
         </table>
       </div>
diff --git a/scripts/test-reviewer.mjs b/scripts/test-reviewer.mjs
index bb4f5aaf6..f8dc93b8e 100644
--- a/scripts/test-reviewer.mjs
+++ b/scripts/test-reviewer.mjs
@@ -1,212 +1,260 @@
 import path from 'path';
 import fs from 'fs';
 import fse from 'fs-extra';
-import htmlparser2 from 'htmlparser2';
-import { spawnSync } from 'child_process';
+import {spawnSync} from 'child_process';
 import np from 'node-html-parser';
 import mustache from 'mustache';
-import { commandsAPI } from '../tests/resources/at-commands.mjs';
-import * as keys from '../tests/resources/keys.mjs';
+import minimist from 'minimist';
+import {commandsAPI as CommandsAPI} from '../tests/resources/at-commands.mjs';
+
+const args = minimist(process.argv.slice(2), {
+    alias: {
+        h: 'help',
+        t: 'testplan'
+    },
+});
+
+if (args.help) {
+    console.log(`Default use:
+  No arguments:
+    Generate review pages.
+  Arguments:
+    -h, --help
+       Show this message.
+    -t, --testplan
+       Generate review page for an individual test plan directory. eg. --testplan=checkbox
+`);
+    process.exit();
+}
+
+// on some OSes, it seems the the `npm_config_testplan` environment variable will come back as the actual variable name rather than empty if it does not exist
+const TARGET_TEST_PLAN = args.testplan && !args.testplan.includes('npm_config_testplan') ? args.testplan : null; // individual test plan to generate review page assets for
+
+// folders and file paths setup
+const buildDirectory = path.resolve('.', 'build');
+const testsDirectory = path.resolve('.', 'tests');
+const scriptsDirectory = path.resolve('.', 'scripts');
+const testsBuildDirectory = path.resolve(buildDirectory, 'tests');
+const reviewBuildDirectory = path.resolve(buildDirectory, 'review');
+
+const indexFileBuildOutputPath = path.resolve(buildDirectory, 'index.html');
+const supportFilePath = path.join(testsDirectory, 'support.json');
+const reviewTemplateFilePath = path.resolve(scriptsDirectory, 'review-template.mustache');
+const reviewIndexTemplateFilePath = path.resolve(scriptsDirectory, 'review-index-template.mustache');
+
+// create directories if not exists
+fs.existsSync(reviewBuildDirectory) || fs.mkdirSync(reviewBuildDirectory);
 
-const testDir = path.resolve('.', 'tests');
-const templateFile = path.resolve('.', 'scripts', 'review-template.mustache');
-const templateIndexFile = path.resolve('.', 'scripts', 'review-index-template.mustache');
-const reviewDir = path.resolve('.', 'review');
 const allTestsForPattern = {};
-const support = JSON.parse(fse.readFileSync(path.join(testDir, 'support.json')));
+const support = JSON.parse(fse.readFileSync(supportFilePath));
+
 let allATKeys = [];
 support.ats.forEach(at => {
-	allATKeys.push(at.key);
+    allATKeys.push(at.key);
 });
+
 const scripts = [];
 
-const getPriorityString = function(priority) {
-  priority = parseInt(priority);
-  if (priority === 1) {
-    return 'required';
-  }
-  else if (priority === 2) {
-    return 'optional';
-  }
-  return '';
+const getPriorityString = function (priority) {
+    priority = parseInt(priority);
+    if (priority === 1) {
+        return 'required';
+    } else if (priority === 2) {
+        return 'optional';
+    }
+    return '';
 }
 
-fse.readdirSync(testDir).forEach(function (subDir) {
-  const subDirFullPath = path.join(testDir, subDir);
-  const stat = fse.statSync(subDirFullPath);
-  if (
-    stat.isDirectory() &&
-    subDir !== 'resources'
-  ) {
-
-    // Initialize the commands API
-    const commandsJSONFile = path.join(subDirFullPath, 'commands.json');
-    const commands = JSON.parse(fse.readFileSync(commandsJSONFile));
-    const commAPI = new commandsAPI(commands, support);
-
-    const tests = [];
-
-    const referencesCsv = fs.readFileSync(path.join(subDirFullPath, 'data', 'references.csv'), 'UTF-8');
-    const reference = referencesCsv.split(/\r?\n/).find(s => s.startsWith('reference,')).split(',')[1];
-
-    const scriptsPath = path.join(subDirFullPath, 'data', 'js');
-    fse.readdirSync(scriptsPath).forEach(function (scriptFile) {
-      let script = '';
-      try {
-        const data = fs.readFileSync(path.join(scriptsPath, scriptFile), 'UTF-8');
-        const lines = data.split(/\r?\n/);
-        lines.forEach((line) => {
-          if (line.trim().length)
-            script += '\t' + line.trim() + '\n';
+fse.readdirSync(testsDirectory).forEach(function (directory) {
+    const testPlanDirectory = path.join(testsDirectory, directory);
+    const testPlanBuildDirectory = path.join(testsBuildDirectory, directory);
+    const stat = fse.statSync(testPlanDirectory);
+
+    if (stat.isDirectory() && directory !== 'resources') {
+        // Initialize the commands API
+        const commandsJSONFile = path.join(testPlanBuildDirectory, 'commands.json');
+        const commands = JSON.parse(fse.readFileSync(commandsJSONFile));
+        const commandsAPI = new CommandsAPI(commands, support);
+
+        const tests = [];
+
+        const referencesCsv = fs.readFileSync(path.join(testPlanDirectory, 'data', 'references.csv'), 'UTF-8');
+        const reference = referencesCsv.split(/\r?\n/).find(s => s.startsWith('reference,')).split(',')[1];
+
+        const scriptsPath = path.join(testPlanDirectory, 'data', 'js');
+        fse.readdirSync(scriptsPath).forEach(function (scriptFile) {
+            let script = '';
+            try {
+                const data = fs.readFileSync(path.join(scriptsPath, scriptFile), 'UTF-8');
+                const lines = data.split(/\r?\n/);
+                lines.forEach((line) => {
+                    if (line.trim().length)
+                        script += '\t' + line.trim() + '\n';
+                });
+            } catch (err) {
+                console.error(err);
+            }
+            scripts.push(`\t${scriptFile.split('.js')[0]}: function(testPageDocument){\n${script}}`);
+        });
+
+        fse.readdirSync(testPlanBuildDirectory).forEach(function (test) {
+            if (path.extname(test) === '.html' && path.basename(test) !== 'index.html') {
+                const testFile = path.join(testsBuildDirectory, directory, test);
+                const root = np.parse(fse.readFileSync(testFile, 'utf8'), {script: true});
+
+                // Get metadata
+                const testFullName = root.querySelector('title').innerHTML;
+                const helpLinks = [];
+                for (let link of root.querySelectorAll('link')) {
+                    if (link.attributes.rel === 'help') {
+                        let href = link.attributes.href;
+                        let text;
+                        if (href.indexOf('#') >= 0) {
+                            text = `ARIA specification: ${href.split('#')[1]}`;
+                        } else {
+                            text = `APG example: ${href.split('examples/')[1]}`;
+                        }
+
+                        helpLinks.push({
+                            link: href,
+                            text: text
+                        });
+                    }
+                }
+
+                let testData = JSON.parse(fse.readFileSync(path.join(testPlanBuildDirectory, path.parse(test).name + '.json'), 'utf8'));
+
+                const userInstruction = testData.specific_user_instruction;
+                const task = testData.task;
+
+                // This is temporary while transitioning from lists to strings
+                const mode = typeof testData.mode === 'string' ? testData.mode : testData.mode[0];
+
+                const ATTests = [];
+
+                // TODO: These apply_to strings are not standardized yet.
+                let allRelevantATs = [];
+                if (
+                    testData.applies_to[0].toLowerCase() === "desktop screen readers"
+                    || testData.applies_to[0].toLowerCase() === "screen readers"
+                ) {
+                    allRelevantATs = allATKeys;
+                } else {
+                    allRelevantATs = testData.applies_to;
+                }
+
+                for (const atKey of allRelevantATs.map((a) => a.toLowerCase())) {
+                    let commands, assertions;
+                    let at = commandsAPI.isKnownAT(atKey);
+
+                    try {
+                        commands = commandsAPI.getATCommands(mode, task, at);
+                    } catch (error) { // An error will occur if there is no data for a screen reader, ignore it
+                    }
+
+                    if (testData.additional_assertions && testData.additional_assertions[at.key]) {
+                        assertions = testData.additional_assertions[at.key];
+                    } else {
+                        assertions = testData.output_assertions;
+                    }
+
+                    ATTests.push({
+                        atName: at.name,
+                        atKey: at.key,
+                        commands: commands && commands.length ? commands : undefined,
+                        assertions: assertions && assertions.length ? assertions.map(a => ({
+                            priority: getPriorityString(a[0]),
+                            description: a[1]
+                        })) : undefined,
+                        userInstruction,
+                        modeInstruction: commandsAPI.getModeInstructions(mode, at),
+                        setupScriptDescription: testData.setup_script_description,
+                    });
+                }
+
+                // Create the test review pages
+                const testFilePath = path.join(testsBuildDirectory, directory, test);
+                // TODO: useful for determining smart-diffs
+                const output = spawnSync('git', ['log', '-1', '--format="%ad"', testFilePath]);
+                const lastEdited = output.stdout.toString().replace(/"/gi, '').replace('\n', '');
+
+                tests.push({
+                    testNumber: tests.length + 1,
+                    name: testFullName,
+                    location: `/${directory}/${test}`,
+                    reference: `/${directory}/${reference}`,
+                    allRelevantATsFormatted: testData.applies_to.join(', '),
+                    allRelevantATs: testData.applies_to,
+                    setupScriptName: testData.setupTestPage,
+                    task,
+                    mode,
+                    ATTests,
+                    helpLinks,
+                    lastEdited
+                });
+            }
         });
-      } catch (err) {
-        console.error(err);
-      }
-      scripts.push(`\t${scriptFile.split('.js')[0]}: function(testPageDocument){\n${script}}`);
-    });
-
-    fse.readdirSync(subDirFullPath).forEach(function (test) {
-      if (path.extname(test) === '.html' && path.basename(test) !== 'index.html') {
-
-	const testFile = path.join(testDir, subDir, test);
-	const root = np.parse(fse.readFileSync(testFile, 'utf8'), {script: true});
-
-	// Get metadata
-	const testFullName = root.querySelector('title').innerHTML;
-	const helpLinks = [];
-	for (let link of root.querySelectorAll('link')) {
-	  if (link.attributes.rel === 'help') {
-	    let href = link.attributes.href;
-	    let text;
-	    if (href.indexOf('#') >= 0) {
-	      text = `ARIA specification: ${href.split('#')[1]}`;
-	    }
-	    else {
-	      text = `APG example: ${href.split('examples/')[1]}`;
-	    }
-
-	    helpLinks.push({
-	      link: href,
-	      text: text
-	    });
-	  }
-	}
-
-	let testData = JSON.parse(fse.readFileSync(path.join(subDirFullPath, path.parse(test).name+'.json'), 'utf8'));
-
-	const userInstruction = testData.specific_user_instruction;
-	const task = testData.task;
-
-	// This is temporary while transitioning from lists to strings
-	const mode = typeof testData.mode === 'string' ? testData.mode : testData.mode[0];
-
-	const ATTests = [];
-
-	// TODO: These apply_to strings are not standarized yet.
-	let allReleventATs = [];
-	if (
-          testData.applies_to[0].toLowerCase() === "desktop screen readers"
-          || testData.applies_to[0].toLowerCase() === "screen readers"
-        ) {
-	  allReleventATs = allATKeys;
-	}
-	else {
-	  allReleventATs = testData.applies_to;
-	}
-
-	for (const atKey of allReleventATs.map((a) => a.toLowerCase())) {
-	  let commands, assertions;
-	  let at = commAPI.isKnownAT(atKey);
-
-	  try {
-	    commands = commAPI.getATCommands(mode, task, at);
-	  }
-	  catch (error) {
-	  } // An error will occur if there is no data for a screen reader, ignore it
-
-	  if (testData.additional_assertions && testData.additional_assertions[at.key]) {
-	    assertions = testData.additional_assertions[at.key];
-	  }
-	  else {
-	    assertions = testData.output_assertions;
-	  }
-
-	  ATTests.push({
-	    atName: at.name,
-		atKey: at.key,
-	    commands: commands && commands.length ? commands : undefined,
-	    assertions: assertions && assertions.length ? assertions.map(a => ({ priority: getPriorityString(a[0]), description: a[1] })) : undefined,
-	    userInstruction,
-	    modeInstruction: commAPI.getModeInstructions(mode, at),
-	    setupScriptDescription: testData.setup_script_description,
-	  });
-	}
-
-	// Create the test review pages
-	const testFilePath = path.join('.', 'tests', subDir, test);
-	const output = spawnSync('git', ['log', '-1', '--format="%ad"', testFilePath]);
-	const lastEdited = output.stdout.toString().replace(/"/gi, '').replace('\n', '');
-
-	tests.push({
-	  testNumber: tests.length+1,
-	  name: testFullName,
-	  location: `/${subDir}/${test}`,
-          reference: `/${subDir}/${reference}`,
-	  allReleventATsFormatted: testData.applies_to.join(', '),
-	  allReleventATs: testData.applies_to,
-          setupScriptName: testData.setupTestPage,
-	  task,
-	  mode,
-	  ATTests,
-	  helpLinks,
-	  lastEdited
-	});
-      }
-    });
-
-    if (tests.length) {
-      allTestsForPattern[subDir] = tests;
+
+        if (tests.length) {
+            allTestsForPattern[directory] = tests;
+        }
     }
-  }
 });
 
-var template = fse.readFileSync(templateFile, 'utf8');
-if (!fse.existsSync(reviewDir)){
-    fse.mkdirSync(reviewDir);
-}
+let template = fse.readFileSync(reviewTemplateFilePath, 'utf8');
+let indexTemplate = fse.readFileSync(reviewIndexTemplateFilePath, 'utf8');
 
-var indexTemplate = fse.readFileSync(templateIndexFile, 'utf8');
+if (TARGET_TEST_PLAN) {
+    if (allTestsForPattern[TARGET_TEST_PLAN]) {
+        let rendered = mustache.render(template, {
+            pattern: TARGET_TEST_PLAN,
+            totalTests: allTestsForPattern[TARGET_TEST_PLAN].length,
+            tests: allTestsForPattern[TARGET_TEST_PLAN],
+            AToptions: support.ats,
+            setupScripts: scripts
+        });
 
-console.log("\n");
+        let summaryBuildFile = path.resolve(reviewBuildDirectory, `${TARGET_TEST_PLAN}.html`);
+        fse.writeFileSync(summaryBuildFile, rendered);
 
-for (let pattern in allTestsForPattern) {
+        console.log(`Summarized ${TARGET_TEST_PLAN} tests: ${summaryBuildFile}`);
+    } else { // most likely to happen if incorrect directory specified
+        console.error('ERROR: Unable to find valid test plan(s).');
+        process.exit();
+    }
+} else {
+    for (let pattern in allTestsForPattern) {
+        let rendered = mustache.render(template, {
+            pattern: pattern,
+            totalTests: allTestsForPattern[pattern].length,
+            tests: allTestsForPattern[pattern],
+            AToptions: support.ats,
+            setupScripts: scripts
+        });
 
-  var rendered = mustache.render(template, {
-    pattern: pattern,
-    totalTests: allTestsForPattern[pattern].length,
-    tests: allTestsForPattern[pattern],
-    AToptions: support.ats,
-    setupScripts: scripts
-  });
+        let summaryBuildFile = path.resolve(reviewBuildDirectory, `${pattern}.html`);
+        fse.writeFileSync(summaryBuildFile, rendered);
 
-  let summaryFile = path.resolve(reviewDir, `${pattern}.html`);
-  fse.writeFileSync(summaryFile, rendered);
-  console.log(`Summarized ${pattern} tests: ${summaryFile}`);
+        console.log(`Summarized ${pattern} tests: ${summaryBuildFile}`);
+    }
 }
 
 const renderedIndex = mustache.render(indexTemplate, {
-  patterns: Object.keys(allTestsForPattern).map(pattern => {
-    const lastCommit = spawnSync('git', ['log', '-n1', '--oneline', path.join('.', 'tests', pattern)]).stdout.toString();
-    return {
-      name: pattern,
-      numberOfTests: allTestsForPattern[pattern].length,
-      commit: lastCommit.split(' ')[0],
-      commitDescription: lastCommit
-    }
-  })
+    patterns: Object.keys(allTestsForPattern).map(pattern => {
+        // TODO: useful for determining smart-diffs; this has to continue generating for all patterns until smart-diffs come into play
+        const lastCommit = spawnSync('git', ['log', '-n1', '--oneline', path.join('.', 'tests', pattern)])
+            .stdout
+            .toString();
+        return {
+            name: pattern,
+            numberOfTests: allTestsForPattern[pattern].length,
+            commit: lastCommit.split(' ')[0],
+            commitDescription: lastCommit
+        }
+    })
 });
-const indexFile = path.resolve('.', 'index.html');
-fse.writeFileSync(indexFile, renderedIndex);
-console.log(`Generated: ${indexFile}`);
 
-console.log("\n\nDone.");
+fse.writeFileSync(indexFileBuildOutputPath, renderedIndex);
+
+console.log(`\nGenerated index.html: ${indexFileBuildOutputPath}`);
+console.log("\nDone.");