diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 02825e8cb..000000000 --- a/.eslintignore +++ /dev/null @@ -1,5 +0,0 @@ -**/*.min.js -common/ -content/patterns/landmarks/examples/js/visua11y.js -content/shared/js/highlight.pack.js -content/shared/js/skipto.js diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 02e73bdf4..000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,76 +0,0 @@ -{ - "extends": [ - "eslint:recommended", - "plugin:jsdoc/recommended", - "plugin:prettier/recommended" - ], - "env": { - "browser": true, - "es6": true - }, - "parserOptions": { - "ecmaVersion": 6 - }, - "rules": { - "jsdoc/no-undefined-types": 0, - "jsdoc/require-jsdoc": 0, - "jsdoc/require-param-description": 0, - "jsdoc/require-param-type": 0, - "jsdoc/require-returns-description": 0, - "strict": [2, "global"], - "no-console": "error" - }, - "overrides": [ - { - "files": "test/**/*.js", - "parserOptions": { - "ecmaVersion": 8 - }, - "extends": ["plugin:ava/recommended"], - "env": { - "node": true - }, - "rules": { - "no-restricted-properties": [ - 2, - { - "property": "findElements", - "message": "Please use t.context.queryElements()." - } - ] - } - }, - { - "files": "scripts/*.js", - "env": { - "node": true - }, - "parser": "@babel/eslint-parser", - "parserOptions": { - "requireConfigFile": false - }, - "rules": { - "no-console": 0 - } - }, - { - "files": ["**/*.html"], - "plugins": ["html"], - "globals": { - "sourceCode": true - }, - "rules": { - "strict": 0, - "no-unused-vars": ["error", { "varsIgnorePattern": "SkipToConfig" }] - } - }, - { - "files": ["content/shared/js/app.js"], - "parserOptions": { "ecmaVersion": 11 } - }, - { - "files": ["content/shared/js/specLinks.mjs"], - "parserOptions": { "sourceType": "module" } - } - ] -} diff --git a/.github/workflows/coverage-report.yml b/.github/workflows/coverage-report.yml index 43579afa3..2c324ac1f 100644 --- a/.github/workflows/coverage-report.yml +++ b/.github/workflows/coverage-report.yml @@ -16,12 +16,12 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: ref: refs/pull/${{ github.event.pull_request.number }}/head - name: Set up Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: npm @@ -33,7 +33,7 @@ jobs: node test/util/report.js >> coverage.log || true - name: Comment on PR - uses: actions/github-script@v6 + uses: actions/github-script@v7 with: github-token: ${{secrets.GITHUB_TOKEN}} script: | diff --git a/.github/workflows/examples.yml b/.github/workflows/examples.yml index c570c5459..f9168bf30 100644 --- a/.github/workflows/examples.yml +++ b/.github/workflows/examples.yml @@ -25,10 +25,10 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Set up Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: npm @@ -45,10 +45,10 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v4 - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@v4 with: cache: npm diff --git a/.github/workflows/link-checker.yml b/.github/workflows/link-checker.yml index 10407a000..5952e70b1 100644 --- a/.github/workflows/link-checker.yml +++ b/.github/workflows/link-checker.yml @@ -8,10 +8,10 @@ jobs: steps: - name: Clone repository - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Set up Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: npm diff --git a/.github/workflows/lint-css.yml b/.github/workflows/lint-css.yml index 3129b709f..8131cfeae 100644 --- a/.github/workflows/lint-css.yml +++ b/.github/workflows/lint-css.yml @@ -26,17 +26,18 @@ jobs: steps: - name: Clone repository - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Set up Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: npm - - uses: xt0rted/stylelint-problem-matcher@v1 - - name: Install npm dependencies run: npm ci - name: Stylelint - run: npm run lint:css + run: npx stylelint "**/*.css" -f github + + - name: Prettier + run: npx prettier --check "**/*.css" diff --git a/.github/workflows/lint-html.yml b/.github/workflows/lint-html.yml index 0fd34f9ae..10a8020fd 100644 --- a/.github/workflows/lint-html.yml +++ b/.github/workflows/lint-html.yml @@ -32,10 +32,10 @@ jobs: steps: - name: Clone repository - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Set up Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: npm diff --git a/.github/workflows/lint-js.yml b/.github/workflows/lint-js.yml index 400167e2d..16b2f12f9 100644 --- a/.github/workflows/lint-js.yml +++ b/.github/workflows/lint-js.yml @@ -26,12 +26,12 @@ jobs: steps: - name: Clone repository - uses: actions/checkout@v3 + uses: actions/checkout@v4 # setup-node task is used without a particular version in order to load # the ESLint problem matchers - name: Set up Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: npm diff --git a/.github/workflows/regression.yml b/.github/workflows/regression.yml index 7ea03368f..dd69c2940 100644 --- a/.github/workflows/regression.yml +++ b/.github/workflows/regression.yml @@ -28,12 +28,12 @@ jobs: CI_NODE_INDEX: [0, 1, 2, 3, 4] steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 - name: Set up Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: npm diff --git a/.github/workflows/spelling.yml b/.github/workflows/spelling.yml index a466c8c61..9f55dbe8b 100644 --- a/.github/workflows/spelling.yml +++ b/.github/workflows/spelling.yml @@ -29,10 +29,10 @@ jobs: steps: - name: Clone repository - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Set up Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: npm diff --git a/.github/workflows/wai-trigger-cleanup.yml b/.github/workflows/wai-trigger-cleanup.yml index 8366dc8cd..343995231 100644 --- a/.github/workflows/wai-trigger-cleanup.yml +++ b/.github/workflows/wai-trigger-cleanup.yml @@ -13,10 +13,10 @@ jobs: if: ${{ github.event_name == 'delete' && github.event.ref_type == 'branch' }} runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Set up Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: npm @@ -36,10 +36,10 @@ jobs: if: ${{ github.event_name == 'pull_request' || github.event_name == 'pull_request_target' }} runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Set up Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: cache: npm diff --git a/.github/workflows/wai-trigger-deploy.yml b/.github/workflows/wai-trigger-deploy.yml index 1e1b8d60b..2ac561b26 100644 --- a/.github/workflows/wai-trigger-deploy.yml +++ b/.github/workflows/wai-trigger-deploy.yml @@ -14,10 +14,10 @@ jobs: deploy-wai: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Trigger wai-aria-practices update - uses: actions/github-script@v6 + uses: actions/github-script@v7 with: github-token: ${{ secrets.GH_TOKEN }} script: | diff --git a/.github/workflows/wai-trigger-pr.yml b/.github/workflows/wai-trigger-pr.yml index 4a25b4d26..a58116eb8 100644 --- a/.github/workflows/wai-trigger-pr.yml +++ b/.github/workflows/wai-trigger-pr.yml @@ -20,12 +20,12 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: ref: refs/pull/${{ github.event.pull_request.number }}/head - name: Trigger wai-aria-practices PR update - uses: actions/github-script@v6 + uses: actions/github-script@v7 env: APG_BRANCH: ${{ github.head_ref }} APG_SHA: ${{ github.event.pull_request.head.sha }} diff --git a/.husky/pre-commit b/.husky/pre-commit index 36af21989..2312dc587 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - npx lint-staged diff --git a/.link-checker.js b/.link-checker.js index c18538d5d..c8c30267a 100644 --- a/.link-checker.js +++ b/.link-checker.js @@ -7,7 +7,8 @@ const HTMLParser = require('node-html-parser'); // returns undefined. const getAttributeValue = (obj, attribute) => { if (typeof obj !== 'object' || obj === null) return undefined; - if (obj.hasOwnProperty(attribute)) return obj[attribute]; + if (Object.prototype.hasOwnProperty.call(obj, attribute)) + return obj[attribute]; if (Array.isArray(obj)) { for (const element of obj) { diff --git a/.prettierrc b/.prettierrc index 80411df69..0e4df9c48 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,6 @@ { "singleQuote": true, + "trailingComma": "es5", "overrides": [ { "files": ["**/*.css"], diff --git a/.stylelintignore b/.stylelintignore deleted file mode 100644 index a6a99e143..000000000 --- a/.stylelintignore +++ /dev/null @@ -1,3 +0,0 @@ -common -bootstrap.css -bootstrap-theme.css diff --git a/.stylelintrc b/.stylelintrc deleted file mode 100644 index 45eadff29..000000000 --- a/.stylelintrc +++ /dev/null @@ -1,19 +0,0 @@ -{ - "extends": ["stylelint-config-standard"], - "rules": { - "media-feature-name-no-unknown": [ - true, - { - "ignoreMediaFeatureNames": ["forced-colors"] - } - ], - "font-family-no-missing-generic-family-keyword": [ - true, - { - "ignoreFontFamilies": ["Font Awesome 5 Free"] - } - ], - "selector-class-pattern": null, - "selector-id-pattern": null - } -} diff --git a/.stylelintrc.mjs b/.stylelintrc.mjs new file mode 100644 index 000000000..9c963c420 --- /dev/null +++ b/.stylelintrc.mjs @@ -0,0 +1,21 @@ +/** @type {import('stylelint').Config} */ +export default { + extends: ['stylelint-config-standard'], + reportNeedlessDisables: true, + reportInvalidScopeDisables: true, + reportDescriptionlessDisables: true, + rules: { + 'font-family-no-missing-generic-family-keyword': [ + true, + { + ignoreFontFamilies: ['Font Awesome 5 Free'], + }, + ], + 'selector-class-pattern': null, + 'selector-id-pattern': null, + // Fixable Stylelint 16 rules + 'declaration-block-no-redundant-longhand-properties': null, + 'media-feature-range-notation': null, + }, + ignoreFiles: ['node_modules/', 'common/**/*.css', '**/bootstrap*.css'], +}; diff --git a/.vnurc b/.vnurc index e4fd70beb..0a6175d14 100644 --- a/.vnurc +++ b/.vnurc @@ -25,3 +25,5 @@ Bad value “none” for attribute “role” on element “svg”. Bad value “presentation” for attribute “role” on element “svg”. # https://github.com/validator/validator/issues/1122 Element “input” is missing required attribute “aria-checked”. +# https://github.com/w3c/aria-practices/issues/3070 +Attribute “aria-actions” not allowed on element “button” at this point. diff --git a/common/script/participants.js b/common/script/participants.js new file mode 100644 index 000000000..a44728dfd --- /dev/null +++ b/common/script/participants.js @@ -0,0 +1,81 @@ +function getParticipants() { + // Define the W3C's group ID + const GROUP_ID = "83726"; + + // Define the base URL for the API, using the group ID + const BASE_URL = `https://api.w3.org/groups/${GROUP_ID}`; + + // Define the ID of the list element where the user information will be inserted + const LIST_ID = "ack_group"; + + /** + * Fetches users and their affiliations from the API and returns an array of user information. + * Each element in the array is an object containing the user's title and affiliation. + * + * @async + * @function getUsersInfo + * @returns {Promise>} - A promise that resolves to an array of user information. + */ + async function getUsersInfo() { + // Send a GET request to the users endpoint + const response = await fetch(`${BASE_URL}/users`); + // Fetch the JSON data from the response + const data = await response.json(); + // Extract the list of users + const users = data._links.users; + + // Initialize an empty array to store user information + let usersInfo = []; + // Iterate over each user + for (const user of users) { + // Fetch the affiliation of the current user + const affiliation = await getAffiliation(user); + // Push an object containing the user's title and affiliation to the usersInfo array + usersInfo.push({ title: user.title, affiliation: affiliation }); + } + // Return the array containing information of all users + return usersInfo; + } + + /** + * Fetches the affiliation of a given user from the API. + * + * @async + * @function getAffiliation + * @param {Object} user - The user object. + * @returns {Promise} - A promise that resolves to the title of the user's affiliation. + */ + async function getAffiliation(user) { + // Send a GET request to the affiliations endpoint of the user + const response = await fetch(user.href + "/affiliations/"); + + // Fetch the JSON data from the response + const affiliations = await response.json(); + + // Extract the title of the first affiliation + const affiliation = affiliations._links.affiliations[0].title; + + // Return the title of the affiliation + return affiliation; + } + + /** + * Fetches users and their affiliations, creates a list item for each user with their title and affiliation, + * and appends these list items to a specified list in the document. + * + * @async + * @function insertUsersInfoIntoDocument + */ + async function insertUsersInfoIntoDocument() { + const usersInfo = await getUsersInfo(); + const usersList = document.querySelector(`#${LIST_ID} ul`); + + for (const user of usersInfo) { + const li = document.createElement("li"); + li.textContent = `${user.title} (${user.affiliation})`; + usersList.appendChild(li); + } + } + + insertUsersInfoIntoDocument(); +} diff --git a/content-templates/Example-Template.html b/content-templates/Example-Template.html index 4a6231b8e..b68aa9bc5 100644 --- a/content-templates/Example-Template.html +++ b/content-templates/Example-Template.html @@ -118,7 +118,7 @@

Keyboard Support

Use kbd tags,e.g. KeyName. Key names use first-letter caps, e.g., Enter. Single space between multiple Words, e.g., Up Arrow. - Use + to separate modifiers, e.g., Control + Right Arrow. + Use + to separate modifiers, e.g., Control + Right Arrow. One key per row, e.g., do not combine Up Arrow and Down Arrow into a single row. Do not use the word "key", e.g., do not write Enter Key or Enter key. --> @@ -212,11 +212,12 @@

Javascript and CSS Source Code

HTML Source Code

+

To copy the following HTML code, please open it in CodePen.

diff --git a/content/about/about.html b/content/about/about.html index 6433880dd..9a7a5b421 100644 --- a/content/about/about.html +++ b/content/about/about.html @@ -58,6 +58,15 @@

Related Specifi Related Specifications.

+
  • +

    Assistive Technology Support Tables

    +

    + Pages that provide example implementations of APG patterns also, when available, provide a summary of assistive technology support of the ARIA used in those examples. + Learn how to interpret and use data in the + Assistive Technology Support Tables. +

    +
    • +

  • Coverage and Quality Report

    diff --git a/content/about/at-support-tables/at-support-tables.html b/content/about/at-support-tables/at-support-tables.html new file mode 100644 index 000000000..adc8d08e7 --- /dev/null +++ b/content/about/at-support-tables/at-support-tables.html @@ -0,0 +1,122 @@ + + + + + + + AT Support Tables + + + + + + + + + + +

    +

    Assistive Technology Support Tables

    +

    + As the ARIA and Assistive Technologies Project + makes reports on assistive technology interoperability for APG examples available, + the APG Task Force adds summaries of assistive technology support to the relevant example pages. + This page explains how to interpret and use the assistive technology support summaries. +

    + +
    +

    Purpose of AT Support Tables

    +

    + The purpose of the support tables is to provide an actionable summary of the interoperability tests performed by the ARIA-AT project.

    +
    + +
    +

    Meaning of Support Levels

    +

    + The assistive technology support tables present two percentages for each assistive technology and browser combination that have been tested: "Must-Have Behaviors" and "Should-Have Behaviors". + A behavior designated as “Must-Have" is essential; if not provided, users could be blocked from using the UI element. + Failure to provide a “Should-Have” behavior could impede users. + Learn more about ARIA-AT’s + definitions of Must and Should on the project wiki. +

    + +
    +

    Examples of Must-Have Behaviors

    +
      +
    • Convey the name of a radio button.
      • +
    • Convey the state of a checked radio button.
      • +
    +
    + +
    +

    Examples of Should-Have Behaviors

    +
      +
    • Convey the position of a radio button in a radio group, e.g., the button is 1 of 3.
      • +
    • Convey the number of radio buttons in a radio group.
      • +
    +
    + +
    +

    Important Constraints

    +
      +
    • Unless otherwise noted, all testing is done using the assistive technology vendor's default configuration of an assistive technology.
      • +
    • + ARIA-AT interoperability tests do not prescribe exactly how to satisfy a need. + For example, they do not specify exactly what a screen reader should speak. + Two different screen readers may convey the same information in different ways. +
      • +
    +
    +
    + +
    +

    Recommendations

    + +
    +

    Don’t Code to the Bugs

    +

    + ARIA-AT is working with assistive technology vendors to increase their support levels. + This means that assistive technologies that align with ARIA-AT interoperability tests will change over time. + Exercise caution when implementing a pattern where support levels are less than 100%. + Avoid modifying code to accommodate an assistive technology bug unless you are confident the modified code provides an experience that: +

    +
      +
    • Works equally well when using assistive technologies that do not exhibit the bug.
      • +
    • Will work equally well after the assistive technology bug is fixed.
      • +
    +

    + When possible, test implementations of APG patterns with an assistive technology that provides 100% support for both must-have and should-have behaviors. +

    +
    + +
    +

    Design to Mitigate Critical Support Failures

    +

    + Where feasible, avoid designing experiences that rely on features of APG patterns that have less than 100% support for must-have behaviors. + If the must-have support level is less than 100% for one example implementation of a pattern, that does not mean every other way of implementing that pattern will present assistive technology users with the same problems. + In these cases: +

    +
      +
    1. If there are multiple implementation examples of the pattern, compare support levels across examples to discover whether another method of implementation provides better support.
      2. +
    2. learn about the specific aspects of an example implementation that are not fully supported by navigating to the detailed report with the View Complete Report button.
      3. +
    3. If possible, use the guidelines of the pattern to design interactions such that they avoid the problematic features.
      4. +
    +
    + +
    +

    Perform Your Own Tests

    +

    + A primary purpose of ARIA-AT data is to help assistive technology vendors coordinate interoperable rendering of ARIA. + While the ARIA-AT summary tables on APG example pages can be used as a guide of where to prioritize testing, the data is not as a final verdict on whether a feature in a web application will work. + It is essential for all developers to test applications with multiple assistive technologies to ensure a good user experience. +

    +
    + +
    + + +
    + + + \ No newline at end of file diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index f1b521862..95f9be266 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -125,7 +125,7 @@

    Roles with at Least One Guidance or Exampl article - Feed + Infinite Scrolling Feed @@ -145,7 +145,7 @@

    Roles with at Least One Guidance or Exampl feed Feed Pattern - Feed + Infinite Scrolling Feed @@ -647,6 +647,7 @@

    Roles with More than One Guidance or Exa @@ -667,6 +668,7 @@

    Roles with More than One Guidance or Exa @@ -677,6 +679,7 @@

    Roles with More than One Guidance or Exa @@ -759,7 +762,7 @@

    Properties and States with at Least One Gu aria-busy - Feed + Infinite Scrolling Feed @@ -893,6 +896,7 @@

    Properties and States with More than One
  • Actions Menu Button Using aria-activedescendant (HC)
  • Actions Menu Button Using element.focus() (HC)
  • Navigation Menu Button (HC)
    • +
  • Experimental Tabs with Action Buttons (HC)
  • Tabs with Automatic Activation (HC)
  • Tabs with Manual Activation (HC)
  • Toolbar
    • @@ -920,7 +924,7 @@

    Properties and States with More than One
  • Date Picker Combobox (HC)
  • Date Picker Dialog (HC)
  • Modal Dialog
    • -
  • Feed
    • +
  • Infinite Scrolling Feed
  • Table
    • @@ -1042,7 +1046,7 @@

    Properties and States with More than One
  • Editable Combobox with Grid Popup
  • Date Picker Dialog (HC)
  • Modal Dialog
    • -
  • Feed
    • +
  • Infinite Scrolling Feed
  • Data Grid
  • Layout Grid
  • (Deprecated) Collapsible Dropdown Listbox
    • @@ -1063,6 +1067,7 @@

    Properties and States with More than One
  • Vertical Temperature Slider (HC)
  • Date Picker Spin Button
  • Switch Using HTML Button (HC)
    • +
  • Experimental Tabs with Action Buttons (HC)
  • Tabs with Automatic Activation (HC)
  • Tabs with Manual Activation (HC)
  • File Directory Treeview Using Computed Properties
    • @@ -1113,7 +1118,7 @@

    Properties and States with More than One aria-posinset @@ -1174,6 +1179,7 @@

    Properties and States with More than One
  • Listbox with Grouped Options
  • Listboxes with Rearrangeable Options
  • Scrollable Listbox
    • +
  • Experimental Tabs with Action Buttons (HC)
  • Tabs with Automatic Activation (HC)
  • Tabs with Manual Activation (HC)
  • File Directory Treeview Using Computed Properties
    • @@ -1185,7 +1191,7 @@

    Properties and States with More than One aria-setsize @@ -1272,43 +1278,53 @@

    Coding Summary

    Total Examples - 60 + 61 High Contrast Documentation - 31 + 32 Uses SVG - 34 + 35 - Uses forced-color-adjust on SVG - 13 + Uses forced-colors media query + 2 + + Uses currentColor value + 28 + + Uses event.KeyCode 16 Uses event.which - 60 + 8 Use Class - 36 + 37 Use Prototype - 60 + 22 Mouse Events - 15 + 16 Pointer Events - 59 + 11 @@ -1333,29 +1349,29 @@

    Coding Practices

    Accordion - class, prototype + class + - Yes ex1 - 2 1 - 10 + 1 + 5 3 - heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-required,aria-roledescription + aria-hidden,aria-required Alert - prototype - Yes + + ex1 - 2 1 - 8 + 1 + 0 2 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-labelledby,aria-roledescription,aria-live,aria-atomic + aria-live,aria-atomic Alert Dialog @@ -1364,167 +1380,167 @@

    Coding Practices

    Yes ex_alertdialog - 3 2 - 10 + 2 + 5 4 - heading,aria-busy,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription + aria-hidden Breadcrumb - prototype - Yes + + ex1 - 2 + 1 0 - 9 2 - heading,navigation,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby,aria-roledescription + 2 + navigation Button (IDL Version) - prototype - Yes + Yes + example - 2 1 - 9 + 1 2 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-labelledby,aria-roledescription + 2 + Button - prototype - Yes + Yes + example - 2 1 - 9 1 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-labelledby,aria-roledescription + 2 + 1 + aria-hidden Auto-Rotating Image Carousel with Buttons for Slide Control prototype - Yes + ex1 - 3 2 - 10 + 2 + 4 4 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby + Auto-Rotating Image Carousel with Tabs for Slide Control prototype - Yes + Yes ex1 - 5 4 - 11 + 4 5 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby + 5 + Checkbox (Mixed-State) - class, prototype + class + - Yes Yes ex1 - 2 1 - 10 + 1 2 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-labelledby,aria-roledescription + 2 + Checkbox (Two State) - class, prototype + class + - Yes Yes ex1 - 3 2 - 9 2 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription + 2 + 2 + Editable Combobox With Both List and Inline Autocomplete - class, prototype + class + - Yes Yes ex1 - 4 3 - 12 + 3 + 7 6 - heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-labelledby,aria-roledescription + aria-hidden Editable Combobox With List Autocomplete - class, prototype + class + - Yes Yes ex1 - 4 3 - 12 + 3 + 7 6 - heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-labelledby,aria-roledescription + aria-hidden Editable Combobox without Autocomplete - class, prototype + class + - Yes Yes ex1 - 4 3 - 12 + 3 + 7 6 - heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-labelledby,aria-roledescription + aria-hidden Date Picker Combobox - class, prototype + class + - Yes Yes ex1 - 5 + 4 3 - 14 + 11 10 - gridcell,heading,aria-busy,aria-errormessage,aria-hidden,aria-roledescription + gridcell,aria-hidden Select-Only Combobox prototype - Yes + ex1 + 2 3 - 3 - 12 + 6 5 - heading,option,aria-busy,aria-describedby,aria-errormessage,aria-haspopup,aria-hidden,aria-label,aria-roledescription + option,aria-haspopup Editable Combobox with Grid Popup @@ -1533,24 +1549,24 @@

    Coding Practices

    Yes ex1 - 3 + 2 4 - 13 7 - heading,row,gridcell,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription + 7 + row,gridcell Date Picker Dialog - class, prototype + class Yes Yes example - 4 + 3 2 - 11 6 - gridcell,heading,aria-busy,aria-errormessage,aria-expanded,aria-hidden,aria-roledescription + 6 + gridcell Modal Dialog @@ -1559,63 +1575,63 @@

    Coding Practices

    Yes ex1 - 2 1 - 9 + 1 3 - heading,aria-busy,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription + 3 + Disclosure (Show/Hide) for Answers to Frequently Asked Questions - class, prototype + class + - Yes Yes ex1 - 1 0 - 9 + 0 2 - heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-labelledby,aria-roledescription + 2 + Disclosure (Show/Hide) for Image Description - class, prototype + class + - Yes Yes ex1 - 1 0 - 9 + 0 + 3 2 - heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-labelledby,aria-roledescription + aria-labelledby Disclosure Navigation Menu with Top-Level Links class, prototype - Yes + ex1 - 5 + 4 0 - 10 + 5 3 - banner,contentinfo,heading,navigation,region,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-labelledby,aria-roledescription + banner,contentinfo,navigation,region,aria-label,aria-labelledby Disclosure Navigation Menu class, prototype - Yes + Yes ex1 - 3 + 2 0 - 10 + 4 3 - heading,navigation,region,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-labelledby,aria-roledescription + navigation,region,aria-label Feed Display @@ -1631,17 +1647,17 @@

    Coding Practices

    aria-busy,aria-describedby,aria-label,aria-labelledby,aria-posinset,aria-setsize - Feed - prototype + Infinite Scrolling Feed + + - Yes ex1 - 1 + 0 2 - 8 + 0 5 - heading,feed,article,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription,aria-posinset,aria-setsize + feed,article,aria-labelledby,aria-busy,aria-describedby,aria-posinset,aria-setsize Advanced Data Grid @@ -1650,11 +1666,11 @@

    Coding Practices

    Yes ex1 - 1 0 - 13 0 - heading,aria-busy,aria-colindex,aria-controls,aria-describedby,aria-errormessage,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-labelledby,aria-roledescription,aria-rowindex,aria-sort + 5 + 0 + aria-colindex,aria-controls,aria-haspopup,aria-rowindex,aria-sort Data Grid @@ -1663,11 +1679,11 @@

    Coding Practices

    Yes ex1 - 5 + 4 1 - 15 + 8 6 - button,heading,menu,menuitem,aria-busy,aria-controls,aria-describedby,aria-errormessage,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-roledescription + button,menu,menuitem,aria-controls,aria-haspopup Layout Grid @@ -1676,444 +1692,457 @@

    Coding Practices

    Yes ex1 - 6 + 5 3 - 15 + 9 3 - button,heading,region,aria-busy,aria-colindex,aria-describedby,aria-errormessage,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-live,aria-relevant,aria-roledescription,aria-sort + button,region,aria-colindex,aria-haspopup,aria-label,aria-live,aria-relevant,aria-sort Link - prototype - Yes + Yes + not found - 2 1 - 8 1 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby,aria-roledescription + 1 + 1 + (Deprecated) Collapsible Dropdown Listbox class, prototype - Yes + ex - 3 2 - 14 + 2 + 8 5 - heading,aria-busy,aria-describedby,aria-disabled,aria-errormessage,aria-hidden,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription + aria-disabled,aria-keyshortcuts,aria-multiselectable Listbox with Grouped Options class, prototype - Yes + ex - 5 + 4 3 - 13 + 7 4 - heading,presentation,aria-busy,aria-describedby,aria-disabled,aria-errormessage,aria-expanded,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription + presentation,aria-disabled,aria-keyshortcuts,aria-multiselectable Listboxes with Rearrangeable Options class, prototype - Yes + ex1 - 4 + 3 2 - 14 + 9 5 - heading,toolbar,aria-busy,aria-describedby,aria-disabled,aria-errormessage,aria-expanded,aria-keyshortcuts,aria-label,aria-live,aria-roledescription + toolbar,aria-disabled,aria-keyshortcuts,aria-label,aria-live Scrollable Listbox class, prototype - Yes + ex - 3 2 - 13 + 2 + 7 4 - heading,aria-busy,aria-describedby,aria-disabled,aria-errormessage,aria-expanded,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription + aria-disabled,aria-keyshortcuts,aria-multiselectable Actions Menu Button Using aria-activedescendant - class, prototype + class + - Yes Yes ex1 - 3 2 - 11 + 2 + 5 5 - heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription + Actions Menu Button Using element.focus() - class, prototype + class + - Yes Yes ex1 - 3 2 - 10 + 2 + 4 4 - heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription + Navigation Menu Button - class, prototype + class + - Yes Yes ex1 - 4 3 - 10 + 3 + 4 4 - heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription + Editor Menubar - class, prototype + class + - Yes Yes ex1 - 9 + 8 + 7 7 - 12 6 - heading,none,aria-busy,aria-describedby,aria-errormessage,aria-labelledby,aria-orientation,aria-roledescription + none,aria-orientation Navigation Menubar - class, prototype + class + - Yes Yes ex1 - 10 + 9 8 - 11 + 6 5 - heading,separator,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-orientation,aria-roledescription + separator,aria-orientation Meter prototype - Yes + example - 2 1 - 11 + 1 + 5 4 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription + aria-hidden Radio Group Using aria-activedescendant - class, prototype + class + - Yes Yes ex1 - 3 2 - 10 + 2 + 3 3 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription + Rating Radio Group - class, prototype + class + - Yes Yes ex1 - 4 3 - 9 3 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-roledescription - - + 3 + 3 + + + Radio Group Using Roving tabindex - class, prototype + class + - Yes Yes ex1 - 3 2 - 9 2 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription + 2 + 2 + Horizontal Multi-Thumb Slider - class, prototype + class + - Yes Yes ex1 - 3 2 - 11 + 2 + 5 5 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-labelledby,aria-roledescription + Color Viewer Slider - class, prototype + class + - Yes Yes ex1 - 3 2 - 11 + 2 + 5 5 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription + Rating Slider - class, prototype + class + - Yes Yes ex1 - 2 1 - 12 + 1 + 6 6 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription + Media Seek Slider - class, prototype + class + - Yes Yes ex1 - 3 2 - 12 + 2 + 6 6 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription + Vertical Temperature Slider - class, prototype + class + - Yes Yes ex1 - 3 2 - 13 + 2 7 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription + 7 + Date Picker Spin Button prototype Yes - Yes + example - 3 2 - 12 + 2 + 7 7 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-roledescription + Switch Using HTML Button - class, prototype + class + - Yes Yes ex1 - 3 2 - 9 + 2 + 3 3 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription + Switch Using HTML Checkbox Input - class, prototype + class + - Yes Yes ex1 - 2 1 - 8 1 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-labelledby,aria-roledescription + 1 + 1 + Switch - class, prototype + class + - Yes Yes ex1 - 2 1 - 9 + 1 + 2 2 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-labelledby,aria-roledescription + Sortable Table - class, prototype + class + - Yes Yes ex1 - 1 0 - 9 + 0 + 2 2 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-labelledby,aria-roledescription + Table - prototype - Yes + + ex1 - 6 5 - 8 + 5 2 - heading,aria-busy,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby,aria-roledescription + 2 + - Tabs with Automatic Activation - class, prototype + Experimental Tabs with Action Buttons + class + Yes + ex1 + 5 + 3 + 7 + 3 + menu,menuitem,aria-expanded,aria-haspopup,aria-hidden,aria-label + + + Tabs with Automatic Activation + class + + Yes ex1 - 4 3 - 10 3 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription + 3 + 3 + Tabs with Manual Activation - class, prototype + class + - Yes Yes ex1 - 4 3 - 10 3 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription + 3 + 3 + Toolbar - prototype - Yes + + not found - 1 0 - 8 0 - heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-labelledby,aria-roledescription + 0 + 0 + Toolbar prototype Yes - Yes + ex1 - 7 6 - 17 + 6 + 12 12 - heading,aria-busy,aria-describedby,aria-errormessage,aria-labelledby,aria-roledescription + Treegrid Email Inbox prototype Yes - Yes + ex1 - 4 3 - 13 + 3 + 7 5 - heading,aria-activedescendant,aria-busy,aria-current,aria-describedby,aria-errormessage,aria-hidden,aria-labelledby,aria-roledescription + aria-activedescendant,aria-current File Directory Treeview Using Computed Properties prototype Yes - Yes + ex1 - 4 3 - 9 3 - heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription + 4 + 3 + aria-label File Directory Treeview Using Declared Properties prototype Yes - Yes + ex1 - 4 3 - 12 + 3 + 7 6 - heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription + aria-label Navigation Treeview - class, prototype - Yes + class Yes + Yes ex1 - 9 8 - 10 + 8 5 - heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-roledescription + 5 + -

    Graphics Techniques

    +

    SVG and High Contrast Techniques

    @@ -2121,13 +2150,19 @@

    Graphics Techniques

    - - - - + + + + + + + + + + @@ -2135,8 +2170,6 @@

    Graphics Techniques

    - - @@ -2145,8 +2178,6 @@

    Graphics Techniques

    - - @@ -2154,9 +2185,7 @@

    Graphics Techniques

    - - @@ -2164,9 +2193,7 @@

    Graphics Techniques

    - - @@ -2175,8 +2202,6 @@

    Graphics Techniques

    - - @@ -2185,16 +2210,12 @@

    Graphics Techniques

    - - - - @@ -2203,8 +2224,6 @@

    Graphics Techniques

    - - @@ -2214,9 +2233,7 @@

    Graphics Techniques

    - - - + @@ -2224,9 +2241,7 @@

    Graphics Techniques

    - - - + @@ -2234,9 +2249,7 @@

    Graphics Techniques

    - - - + @@ -2245,178 +2258,86 @@

    Graphics Techniques

    - - - - - + + - - - - - + + - + - - - + - + - - - - + - - - + - - + - - - - + - - - - - + + + - - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -2424,9 +2345,7 @@

    Graphics Techniques

    - - - + @@ -2435,8 +2354,6 @@

    Graphics Techniques

    - - @@ -2444,9 +2361,7 @@

    Graphics Techniques

    - - - + @@ -2455,58 +2370,46 @@

    Graphics Techniques

    - - - - - - - + - - - - - + - - - + @@ -2514,29 +2417,23 @@

    Graphics Techniques

    - - - + - - - + - - - + @@ -2545,18 +2442,14 @@

    Graphics Techniques

    - - - - - + @@ -2564,49 +2457,31 @@

    Graphics Techniques

    - - - + - - - - + - - - - - - - - - - - - - + + - - @@ -2614,9 +2489,7 @@

    Graphics Techniques

    - - - +
    SVG in HTML SVG in CSS SVG in JSforced-color-adjustCSS ::beforeCSS ::afterCSS contentforced-colors media querycurrentColor value
    AccordionYes
    Alert Dialog Yes
    Breadcrumb YesYes
    Button (IDL Version) Yes Yes Yes
    Button Yes Yes Yes
    Auto-Rotating Image Carousel with Buttons for Slide Control
    Auto-Rotating Image Carousel with Tabs for Slide Control
    Checkbox (Mixed-State) Yes Yes Yes
    Yes Yes Yes
    Yes Yes
    Editable Combobox With List Autocomplete Yes Yes
    Editable Combobox without Autocomplete Yes Yes
    Date Picker Combobox Yes
    Select-Only ComboboxDisclosure (Show/Hide) for Answers to Frequently Asked Questions Yes YesYes
    Date Picker DialogDisclosure (Show/Hide) for Image Description Yes Yes
    Disclosure (Show/Hide) for Answers to Frequently Asked QuestionsFeed Display Yes YesYes Yes
    Disclosure (Show/Hide) for Image DescriptionLink Yes Yes Yes
    Disclosure Navigation Menu with Top-Level Links(Deprecated) Collapsible Dropdown Listbox YesYes
    Disclosure Navigation MenuListbox with Grouped Options YesYes
    Feed DisplayListboxes with Rearrangeable Options YesYes Yes
    Advanced Data GridScrollable Listbox YesYes
    Data GridActions Menu Button Using aria-activedescendantYesYes YesYes
    Layout GridActions Menu Button Using element.focus()YesYes YesYesYes
    LinkYesYesYes
    (Deprecated) Collapsible Dropdown ListboxYesYesYes
    Listbox with Grouped OptionsYesYesYes
    Listboxes with Rearrangeable OptionsYesYesYes
    Scrollable ListboxYesYesYes
    Actions Menu Button Using aria-activedescendantYesYes
    Actions Menu Button Using element.focus()YesYes
    Navigation Menu Button Yes Yes
    Editor Menubar Yes
    Navigation Menubar Yes Yes Yes
    Meter
    Radio Group Using aria-activedescendant Yes Yes Yes
    Rating Radio Group Yes Yes Yes Yes
    Radio Group Using Roving tabindex Yes Yes Yes
    Horizontal Multi-Thumb Slider Yes Yes YesYes Yes
    Color Viewer Slider Yes Yes YesYes Yes
    Rating Slider Yes Yes YesYes
    Media Seek Slider Yes Yes YesYes Yes
    Vertical Temperature Slider Yes Yes YesYes Yes
    Date Picker Spin Button
    Switch Using HTML Button Yes Yes YesYes Yes
    Sortable Table Yes Yes
    ToolbarExperimental Tabs with Action Buttons Yes Yes YesYesYes
    Treegrid Email InboxToolbar Yes Yes Yes
    File Directory Treeview Using Computed Properties YesYes
    File Directory Treeview Using Declared PropertiesTreegrid Email Inbox Yes Yes Yes
    Navigation Treeview Yes Yes
    @@ -2630,55 +2503,15 @@

    Mouse and Pointer Events

    - - Accordion - - Yes - - - Alert - - Yes - - - Alert Dialog - - Yes - - - Breadcrumb - - Yes - - - Button (IDL Version) - - Yes - - - Button - - Yes - Auto-Rotating Image Carousel with Buttons for Slide Control Yes - Yes + Auto-Rotating Image Carousel with Tabs for Slide Control Yes - Yes - - - Checkbox (Mixed-State) - - Yes - - - Checkbox (Two State) - Yes Editable Combobox With Both List and Inline Autocomplete @@ -2698,107 +2531,52 @@

    Mouse and Pointer Events

    Date Picker Combobox Yes - Yes + Select-Only Combobox Yes - Yes - - - Editable Combobox with Grid Popup - Yes Date Picker Dialog Yes - - Modal Dialog - - Yes - - - Disclosure (Show/Hide) for Answers to Frequently Asked Questions - - Yes - - - Disclosure (Show/Hide) for Image Description - - Yes - - - Disclosure Navigation Menu with Top-Level Links - - Yes - - - Disclosure Navigation Menu - - Yes - - - Feed - - Yes - - - Advanced Data Grid - - Yes - - - Data Grid - - Yes - - - Layout Grid - - Yes - - - Link - - Yes - (Deprecated) Collapsible Dropdown Listbox Yes - Yes + Listbox with Grouped Options Yes - Yes + Listboxes with Rearrangeable Options Yes - Yes + Scrollable Listbox Yes - Yes + Actions Menu Button Using aria-activedescendant Yes - Yes + Actions Menu Button Using element.focus() Yes - Yes + Navigation Menu Button Yes - Yes + Editor Menubar @@ -2810,26 +2588,6 @@

    Mouse and Pointer Events

    Yes - - Meter - - Yes - - - Radio Group Using aria-activedescendant - - Yes - - - Rating Radio Group - - Yes - - - Radio Group Using Roving tabindex - - Yes - Horizontal Multi-Thumb Slider @@ -2856,74 +2614,29 @@

    Mouse and Pointer Events

    Yes - Date Picker Spin Button - - Yes - - - Switch Using HTML Button - - Yes - - - Switch Using HTML Checkbox Input - - Yes - - - Switch - + Experimental Tabs with Action Buttons Yes - - - Sortable Table - Yes - - - Table - - Yes - - - Tabs with Automatic Activation - - Yes - - - Tabs with Manual Activation - - Yes - - - Toolbar - - Yes Toolbar Yes - Yes - - - Treegrid Email Inbox - Yes File Directory Treeview Using Computed Properties Yes - Yes + File Directory Treeview Using Declared Properties Yes - Yes + Navigation Treeview Yes - Yes + diff --git a/content/about/coverage-and-quality/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv index ed19b1025..f0f597ea1 100644 --- a/content/about/coverage-and-quality/prop-coverage.csv +++ b/content/about/coverage-and-quality/prop-coverage.csv @@ -2,14 +2,14 @@ "aria-activedescendant","1","11","Guidance: Managing Focus in Composites Using aria-activedescendant","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Radio Group Using aria-activedescendant" "aria-atomic","0","1","Example: Alert" "aria-autocomplete","0","5","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup" -"aria-busy","0","1","Example: Feed" +"aria-busy","0","1","Example: Infinite Scrolling Feed" "aria-checked","0","9","Example: Checkbox (Mixed-State)","Example: Checkbox (Two State)","Example: Editor Menubar","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Switch Using HTML Button","Example: Switch","Example: Toolbar" "aria-colcount","1","1","Guidance: Using aria-colcount and aria-colindex","Example: Data Grid" "aria-colindex","3","1","Guidance: Using aria-colcount and aria-colindex","Guidance: Using aria-colindex When Column Indices Are Contiguous","Guidance: Using aria-colindex When Column Indices Are Not Contiguous","Example: Data Grid" "aria-colspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" -"aria-controls","0","20","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" +"aria-controls","0","21","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" "aria-current","0","5","Example: Breadcrumb","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Navigation Menubar","Example: Navigation Treeview" -"aria-describedby","1","6","Guidance: Describing by referencing content with aria-describedby","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Table" +"aria-describedby","1","6","Guidance: Describing by referencing content with aria-describedby","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Table" "aria-details","0","0" "aria-disabled","0","3","Example: Alert Dialog","Example: Editor Menubar","Example: Toolbar" "aria-dropeffect","0","0" @@ -22,7 +22,7 @@ "aria-invalid","0","0" "aria-keyshortcuts","0","0" "aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview" -"aria-labelledby","1","40","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" +"aria-labelledby","1","41","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" "aria-level","0","2","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-live","0","5","Example: Alert","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Date Picker Combobox","Example: Date Picker Dialog" "aria-modal","0","4","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog" @@ -31,7 +31,7 @@ "aria-orientation","0","1","Example: Vertical Temperature Slider" "aria-owns","0","1","Example: Navigation Treeview" "aria-placeholder","0","0" -"aria-posinset","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" +"aria-posinset","0","3","Example: Infinite Scrolling Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-pressed","0","3","Example: Button (IDL Version)","Example: Button","Example: Toolbar" "aria-readonly","0","0" "aria-relevant","0","0" @@ -40,8 +40,8 @@ "aria-rowcount","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" "aria-rowindex","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" "aria-rowspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" -"aria-selected","0","16","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties" -"aria-setsize","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" +"aria-selected","0","17","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties" +"aria-setsize","0","3","Example: Infinite Scrolling Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-sort","1","2","Guidance: Indicating sort order with aria-sort","Example: Data Grid","Example: Sortable Table" "aria-valuemax","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" "aria-valuemin","0","8","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv index 104fad9ec..d3d229644 100644 --- a/content/about/coverage-and-quality/role-coverage.csv +++ b/content/about/coverage-and-quality/role-coverage.csv @@ -2,7 +2,7 @@ "alert","2","2","Guidance: Alert Pattern","Guidance: Alert and Message Dialogs Pattern","Example: Alert","Example: Alert Dialog" "alertdialog","0","1","Example: Alert Dialog" "application","0","0" -"article","0","1","Example: Feed" +"article","0","1","Example: Infinite Scrolling Feed" "banner","1","3","Guidance: Banner","Example: Navigation Menubar","Example: Navigation Treeview","Example: Banner Landmark" "button","2","2","Guidance: Button Pattern","Guidance: Menu Button Pattern","Example: Button (IDL Version)","Example: Button" "caption","0","0" @@ -19,7 +19,7 @@ "directory","0","0" "document","0","0" "emphasis","0","0" -"feed","1","1","Guidance: Feed Pattern","Example: Feed" +"feed","1","1","Guidance: Feed Pattern","Example: Infinite Scrolling Feed" "figure","0","0" "form","2","1","Guidance: Form","Guidance: Naming Form Controls with the Label Element","Example: Form Landmark" "generic","0","0" @@ -65,10 +65,10 @@ "spinbutton","1","2","Guidance: Spinbutton Pattern","Example: Date Picker Spin Button","Example: Toolbar" "status","0","0" "switch","1","3","Guidance: Switch Pattern","Example: Switch Using HTML Button","Example: Switch Using HTML Checkbox Input","Example: Switch" -"tab","1","3","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" +"tab","1","4","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" "table","2","1","Guidance: Table Pattern","Guidance: Grid and Table Properties","Example: Table" -"tablist","0","3","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" -"tabpanel","0","3","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" +"tablist","0","4","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" +"tabpanel","0","4","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" "term","0","0" "textbox","0","0" "timer","0","0" diff --git a/content/index/index.html b/content/index/index.html index b004007e8..43027a6d1 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -21,6 +21,7 @@

    About the Index

    Examples by Role

    @@ -48,7 +49,7 @@

    Examples by Role

    article - Feed + Infinite Scrolling Feed banner @@ -125,7 +126,7 @@

    Examples by Role

    feed - Feed + Infinite Scrolling Feed form @@ -483,7 +484,7 @@

    Examples By Properties and States

    aria-busy - Feed + Infinite Scrolling Feed aria-checked @@ -556,7 +557,7 @@

    Examples By Properties and States

  • Date Picker Combobox (HC)
  • Date Picker Dialog (HC)
  • Modal Dialog
    • -
  • Feed
    • +
  • Infinite Scrolling Feed
  • Table
    • @@ -676,7 +677,7 @@

    Examples By Properties and States

  • Editable Combobox with Grid Popup
  • Date Picker Dialog (HC)
  • Modal Dialog
    • -
  • Feed
    • +
  • Infinite Scrolling Feed
  • Data Grid
  • Layout Grid
  • (Deprecated) Collapsible Dropdown Listbox
    • @@ -759,7 +760,7 @@

    Examples By Properties and States

    aria-posinset @@ -829,7 +830,7 @@

    Examples By Properties and States

    aria-setsize @@ -903,6 +904,12 @@

    Examples By Properties and States

    +
    +

    Experimental Examples

    +
    NOTE: The HC abbreviation means example has High Contrast support.
    + +
    diff --git a/content/patterns/accordion/accordion-pattern.html b/content/patterns/accordion/accordion-pattern.html index c39f4e174..6bd2cb18a 100644 --- a/content/patterns/accordion/accordion-pattern.html +++ b/content/patterns/accordion/accordion-pattern.html @@ -59,7 +59,7 @@

    Keyboard Interaction

  • Tab: Moves focus to the next focusable element; all focusable elements in the accordion are included in the page Tab sequence.
    • -
  • Shift + Tab: Moves focus to the previous focusable element; all focusable elements in the accordion are included in the page Tab sequence.
    • +
  • Shift + Tab: Moves focus to the previous focusable element; all focusable elements in the accordion are included in the page Tab sequence.
  • Down Arrow (Optional): If focus is on an accordion header, moves focus to the next accordion header. If focus is on the last accordion header, either does nothing or moves focus to the first accordion header. diff --git a/content/patterns/accordion/examples/accordion.html b/content/patterns/accordion/examples/accordion.html index 565ae39ba..e7510a1c6 100644 --- a/content/patterns/accordion/examples/accordion.html +++ b/content/patterns/accordion/examples/accordion.html @@ -175,7 +175,7 @@

    Keyboard Support

    - Shift + Tab + Shift + Tab
    • Moves focus to the previous focusable element.
      • @@ -255,13 +255,14 @@

      JavaScript and CSS Source Code

    -
    +

    HTML Source Code

    +

    To copy the following HTML code, please open it in CodePen.

    diff --git a/content/patterns/alert/examples/alert.html b/content/patterns/alert/examples/alert.html index 78687d923..745bae013 100644 --- a/content/patterns/alert/examples/alert.html +++ b/content/patterns/alert/examples/alert.html @@ -122,6 +122,7 @@

    Role, Property, State, and Tabindex Attributes

    Assistive Technology Support

    +

    Learn how to interpret and use assistive technology support data

    +
    @@ -68,12 +81,12 @@

    Keyboard Support

    Move focus to previous article. - Control + End + Control + End Move focus to the first focusable element after the feed. - Control + Home - Move focus to the first focusable element before the feed. + Control + Home + Move focus to the first focusable element in the feed. diff --git a/content/patterns/feed/examples/imgs/rating-1.png b/content/patterns/feed/examples/imgs/rating-1.png deleted file mode 100644 index def9a045c..000000000 Binary files a/content/patterns/feed/examples/imgs/rating-1.png and /dev/null differ diff --git a/content/patterns/feed/examples/imgs/rating-2.png b/content/patterns/feed/examples/imgs/rating-2.png deleted file mode 100644 index 72b3ec4b7..000000000 Binary files a/content/patterns/feed/examples/imgs/rating-2.png and /dev/null differ diff --git a/content/patterns/feed/examples/imgs/rating-3.png b/content/patterns/feed/examples/imgs/rating-3.png deleted file mode 100644 index b15fb792d..000000000 Binary files a/content/patterns/feed/examples/imgs/rating-3.png and /dev/null differ diff --git a/content/patterns/feed/examples/imgs/rating-4.png b/content/patterns/feed/examples/imgs/rating-4.png deleted file mode 100644 index 3e9b283ed..000000000 Binary files a/content/patterns/feed/examples/imgs/rating-4.png and /dev/null differ diff --git a/content/patterns/feed/examples/imgs/rating-5.png b/content/patterns/feed/examples/imgs/rating-5.png deleted file mode 100644 index 8472c0e91..000000000 Binary files a/content/patterns/feed/examples/imgs/rating-5.png and /dev/null differ diff --git a/content/patterns/feed/examples/js/main.js b/content/patterns/feed/examples/js/main.js index d889d6b0d..d183f9d5e 100644 --- a/content/patterns/feed/examples/js/main.js +++ b/content/patterns/feed/examples/js/main.js @@ -15,8 +15,9 @@ */ window.addEventListener('load', function () { var feedNode = document.getElementById('restaurant-feed'); - var delaySelect = document.getElementById('delay-time-select'); - var restaurantFeed = new aria.Feed(feedNode, delaySelect); + var delaySelect = window.parent.document.getElementById('delay-time-select'); + var termsOfUse = window.parent.document.getElementById('terms-of-use'); + var restaurantFeed = new aria.Feed(feedNode, termsOfUse); var restaurantFeedDisplay = new aria.FeedDisplay(restaurantFeed, function () { return aria.RestaurantData; diff --git a/content/patterns/feed/feed-pattern.html b/content/patterns/feed/feed-pattern.html index 5e0106121..b4bcc0d1d 100644 --- a/content/patterns/feed/feed-pattern.html +++ b/content/patterns/feed/feed-pattern.html @@ -65,7 +65,7 @@

    About This Pattern

    Example

    - Example Implementation of Feed Pattern + Infinite Scrolling Feed Example

    @@ -79,8 +79,8 @@

    Keyboard Interaction

    • Page Down: Move focus to next article.
    • Page Up: Move focus to previous article.
      • -
    • Control + End: Move focus to the first focusable element after the feed.
      • -
    • Control + Home: Move focus to the first focusable element before the feed.
      • +
    • Control + End: Move focus to the first focusable element after the feed.
      • +
    • Control + Home: Move focus to the first focusable element before the feed.

    Note

    @@ -96,8 +96,8 @@

    Note

    Users move focus into the nested feed from the content of the containing article with Tab. This may be slow if the article contains a significant number of links, buttons, or other widgets.
    • -
  • Provide a key for moving focus from the elements in the containing article to the first item in the nested feed, e.g., Alt + Page Down.
    • -
  • To continue reading the outer feed, Control + End moves focus to the next article in the outer feed.
    • +
  • Provide a key for moving focus from the elements in the containing article to the first item in the nested feed, e.g., Alt + Page Down.
    • +
  • To continue reading the outer feed, Control + End moves focus to the next article in the outer feed.
  • In the rare circumstance that a feed article contains a widget that uses the above suggested keys, the feed navigation key will operate the contained widget, and the user needs to move focus to an element that does not utilize the feed navigation keys in order to navigate the feed.
    • diff --git a/content/patterns/grid/examples/data-grids.html b/content/patterns/grid/examples/data-grids.html index cc4710a34..078472b72 100644 --- a/content/patterns/grid/examples/data-grids.html +++ b/content/patterns/grid/examples/data-grids.html @@ -123,7 +123,7 @@

    Transactions January 1 through January 6

    Notes

      -
    1. Data cells can be focused using standard navigation keys, including directional arrows, Home, End, Control + Home, and Control + End.
      2. +
    2. Data cells can be focused using standard navigation keys, including directional arrows, Home, End, Control + Home, and Control + End.
    3. The Page Down and Page Up keys are not supported since such scroll-like functions are not useful with so few rows.
    4. The links can be activated with the keyboard when focused.
    5. @@ -594,13 +594,13 @@

      Keyboard Support

      - Control + Home + Control + Home moves focus to the first cell in the first row. - Control + End + Control + End moves focus to the last cell in the last row. @@ -769,30 +769,33 @@

      JavaScript and CSS Source Code

      -
      +

      HTML Source Code

      Example 1: Minimal Data Grid

      +

      To copy the following HTML code, please open it in CodePen.

      Example 2: Sortable Data Grid With Editable Cells

      +

      To copy the following HTML code, please open it in CodePen.

      Example 3: Scrollable Data Grid With Column Hiding

      +

      To copy the following HTML code, please open it in CodePen.

      Example 2: Pill List For Components Like a List of Message Recipients

      +

      To copy the following HTML code, please open it in CodePen.

      Example 3: Scrollable Search Results

      +

      To copy the following HTML code, please open it in CodePen.

      diff --git a/content/patterns/link/link-pattern.html b/content/patterns/link/link-pattern.html index 1b18f20ce..21d92f9e8 100644 --- a/content/patterns/link/link-pattern.html +++ b/content/patterns/link/link-pattern.html @@ -40,7 +40,7 @@

      Examples

      Keyboard Interaction

      • Enter: Executes the link and moves focus to the link target.
        • -
      • Shift + F10 (Optional): Opens a context menu for the link.
        • +
      • Shift + F10 (Optional): Opens a context menu for the link.
      diff --git a/content/patterns/listbox/examples/listbox-collapsible.html b/content/patterns/listbox/examples/listbox-collapsible.html index 268962451..5fa595839 100644 --- a/content/patterns/listbox/examples/listbox-collapsible.html +++ b/content/patterns/listbox/examples/listbox-collapsible.html @@ -318,13 +318,14 @@

      JavaScript and CSS Source Code

      -
      +

      HTML Source Code

      +

      To copy the following HTML code, please open it in CodePen.

      diff --git a/content/patterns/listbox/examples/listbox-grouped.html b/content/patterns/listbox/examples/listbox-grouped.html index 37f823744..75ab78eeb 100644 --- a/content/patterns/listbox/examples/listbox-grouped.html +++ b/content/patterns/listbox/examples/listbox-grouped.html @@ -292,13 +292,14 @@

      JavaScript and CSS Source Code

      -
      +

      HTML Source Code

      +

      To copy the following HTML code, please open it in CodePen.

      diff --git a/content/patterns/listbox/examples/listbox-rearrangeable.html b/content/patterns/listbox/examples/listbox-rearrangeable.html index a9500377c..22152fcd1 100644 --- a/content/patterns/listbox/examples/listbox-rearrangeable.html +++ b/content/patterns/listbox/examples/listbox-rearrangeable.html @@ -243,8 +243,8 @@

      Accessibility Features

    6. Action buttons have the following shortcuts:
        -
      • "Up": Alt + Up Arrow
        • -
      • "Down": Alt + Down Arrow
        • +
      • "Up": Alt + Up Arrow
        • +
      • "Down": Alt + Down Arrow
      • "Add": Enter
      • "Not Important", "Important", and "Remove": Delete
      @@ -256,7 +256,7 @@

      Accessibility Features

    7. Using a shortcut key intentionally places focus to optimize both screen reader and keyboard usability. - For example, pressing Alt + Up Arrow in the "Important Features" list keeps focus on the option that is moved up, enabling all keyboard users to easily perform consecutive move operations for an option and screen reader users to hear the position of an option after it is moved. + For example, pressing Alt + Up Arrow in the "Important Features" list keeps focus on the option that is moved up, enabling all keyboard users to easily perform consecutive move operations for an option and screen reader users to hear the position of an option after it is moved. Similarly, pressing Enter in the available options list leaves focus in the available options list. If the option that had focus before the add operation is no longer present in the list, focus lands on the first of the subsequent options that is still present.
      8. @@ -376,24 +376,24 @@

      Multiple selection keys supported in example 2changes the selection state of the focused option . - Shift + Down Arrow + Shift + Down Arrow Moves focus to and selects the next option. - Shift + Up Arrow + Shift + Up Arrow Moves focus to and selects the previous option. - Control + Shift + Home + Control + Shift + Home Selects from the focused option to the beginning of the list. - Control + Shift + End + Control + Shift + End Selects from the focused option to the end of the list. - Control + A (All Platforms)
      + Control + A (All Platforms)
      Command-A (macOS) @@ -525,21 +525,23 @@

      JavaScript and CSS Source Code

      -
      +

      HTML Source Code

      Example 1: Single-Select Listbox

      +

      To copy the following HTML code, please open it in CodePen.

      Example 2: Multi-Select Listbox

      +

      To copy the following HTML code, please open it in CodePen.

      diff --git a/content/patterns/listbox/listbox-pattern.html b/content/patterns/listbox/listbox-pattern.html index 3988a66f2..f17aab71b 100644 --- a/content/patterns/listbox/listbox-pattern.html +++ b/content/patterns/listbox/listbox-pattern.html @@ -109,19 +109,19 @@

      Keyboard Interaction

      Recommended selection model -- holding modifier keys is not necessary:
      • Space: changes the selection state of the focused option.
        • -
      • Shift + Down Arrow (Optional): Moves focus to and toggles the selected state of the next option.
        • -
      • Shift + Up Arrow (Optional): Moves focus to and toggles the selected state of the previous option.
        • -
      • Shift + Space (Optional): Selects contiguous items from the most recently selected item to the focused item.
        • +
      • Shift + Down Arrow (Optional): Moves focus to and toggles the selected state of the next option.
        • +
      • Shift + Up Arrow (Optional): Moves focus to and toggles the selected state of the previous option.
        • +
      • Shift + Space (Optional): Selects contiguous items from the most recently selected item to the focused item.
      • - Control + Shift + Home (Optional): Selects the focused option and all options up to the first option. + Control + Shift + Home (Optional): Selects the focused option and all options up to the first option. Optionally, moves focus to the first option.
      • - Control + Shift + End (Optional): Selects the focused option and all options down to the last option. + Control + Shift + End (Optional): Selects the focused option and all options down to the last option. Optionally, moves focus to the last option.
      • - Control + A (Optional): Selects all options in the list. + Control + A (Optional): Selects all options in the list. Optionally, if all options are selected, it may also unselect all options.
      @@ -129,22 +129,22 @@

      Keyboard Interaction

    8. Alternative selection model -- moving focus without holding a Shift or Control modifier unselects all selected options except the focused option:
        -
      • Shift + Down Arrow: Moves focus to and toggles the selection state of the next option.
        • -
      • Shift + Up Arrow: Moves focus to and toggles the selection state of the previous option.
        • -
      • Control + Down Arrow: Moves focus to the next option without changing its selection state.
        • -
      • Control + Up Arrow: Moves focus to the previous option without changing its selection state.
        • -
      • Control + Space Changes the selection state of the focused option.
        • -
      • Shift + Space (Optional): Selects contiguous items from the most recently selected item to the focused item.
        • +
      • Shift + Down Arrow: Moves focus to and toggles the selection state of the next option.
        • +
      • Shift + Up Arrow: Moves focus to and toggles the selection state of the previous option.
        • +
      • Control + Down Arrow: Moves focus to the next option without changing its selection state.
        • +
      • Control + Up Arrow: Moves focus to the previous option without changing its selection state.
        • +
      • Control + Space Changes the selection state of the focused option.
        • +
      • Shift + Space (Optional): Selects contiguous items from the most recently selected item to the focused item.
      • - Control + Shift + Home (Optional): Selects the focused option and all options up to the first option. + Control + Shift + Home (Optional): Selects the focused option and all options up to the first option. Optionally, moves focus to the first option.
      • - Control + Shift + End (Optional): Selects the focused option and all options down to the last option. + Control + Shift + End (Optional): Selects the focused option and all options down to the last option. Optionally, moves focus to the last option.
      • - Control + A (Optional): Selects all options in the list. + Control + A (Optional): Selects all options in the list. Optionally, if all options are selected, it may also unselect all options.
      diff --git a/content/patterns/menu-button/examples/js/menu-button-actions.js b/content/patterns/menu-button/examples/js/menu-button-actions.js index cd69d5621..bde2c8a25 100644 --- a/content/patterns/menu-button/examples/js/menu-button-actions.js +++ b/content/patterns/menu-button/examples/js/menu-button-actions.js @@ -333,10 +333,15 @@ class MenuButtonActions { // Initialize menu buttons window.addEventListener('load', function () { - document.getElementById('action_output').value = 'none'; + const output = document.getElementById('action_output'); + if (output) { + output.value = 'none'; + } function performMenuAction(node) { - document.getElementById('action_output').value = node.textContent.trim(); + if (output) { + output.value = node.textContent.trim(); + } } var menuButtons = document.querySelectorAll('.menu-button-actions'); diff --git a/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html b/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html index 5c7bde900..18a5cd429 100644 --- a/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html +++ b/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html @@ -338,13 +338,14 @@

      JavaScript and CSS Source Code

      9. -
      +

      HTML Source Code

      +

      To copy the following HTML code, please open it in CodePen.

      diff --git a/content/patterns/menu-button/examples/menu-button-actions.html b/content/patterns/menu-button/examples/menu-button-actions.html index 7ebfec521..94487885d 100644 --- a/content/patterns/menu-button/examples/menu-button-actions.html +++ b/content/patterns/menu-button/examples/menu-button-actions.html @@ -317,13 +317,14 @@

      JavaScript and CSS Source Code

      -
      +

      HTML Source Code

      +

      To copy the following HTML code, please open it in CodePen.

      diff --git a/content/patterns/menu-button/examples/menu-button-links.html b/content/patterns/menu-button/examples/menu-button-links.html index 8da261fc6..a6722a606 100644 --- a/content/patterns/menu-button/examples/menu-button-links.html +++ b/content/patterns/menu-button/examples/menu-button-links.html @@ -334,6 +334,7 @@

      Menu

      Assistive Technology Support

      +

      Learn how to interpret and use assistive technology support data