diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 02825e8cb0..0000000000 --- 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 02e73bdf48..0000000000 --- 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 43579afa38..2c324ac1f3 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 c570c54592..f9168bf300 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 10407a0000..5952e70b18 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 3129b709f7..8131cfeaef 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 0fd34f9aeb..10a8020fd6 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 400167e2d8..16b2f12f98 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 7ea03368f5..dd69c29409 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 a466c8c61a..9f55dbe8b2 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 8366dc8cdf..3439952315 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 1e1b8d60bd..2ac561b269 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 4a25b4d26c..a58116eb85 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 36af219892..2312dc587f 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 c18538d5d8..c8c30267ae 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 80411df699..0e4df9c484 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 a6a99e143a..0000000000 --- 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 45eadff29b..0000000000 --- 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 0000000000..9c963c4204 --- /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/common/script/participants.js b/common/script/participants.js new file mode 100644 index 0000000000..a44728dfd9 --- /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 4a6231b8e7..e22469348f 100644 --- a/content-templates/Example-Template.html +++ b/content-templates/Example-Template.html @@ -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 6433880dd1..9a7a5b4214 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 0000000000..adc8d08e76 --- /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 f1b521862a..80325c249d 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 @@ -759,7 +759,7 @@

    Properties and States with at Least One Gu aria-busy - Feed + Infinite Scrolling Feed @@ -920,7 +920,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 +1042,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
    • @@ -1113,7 +1113,7 @@

    Properties and States with More than One aria-posinset @@ -1185,7 +1185,7 @@

    Properties and States with More than One aria-setsize @@ -1283,16 +1283,26 @@

    Coding Summary

    34 - Uses forced-color-adjust on SVG - 13 + Uses forced-colors media query + 2 + + Uses currentColor value + 27 + + Uses event.KeyCode 16 Uses event.which - 60 + 8 Use Class @@ -1300,7 +1310,7 @@

    Coding Summary

    Use Prototype - 60 + 22 Mouse Events @@ -1308,7 +1318,7 @@

    Coding Summary

    Pointer Events - 59 + 11 @@ -1333,29 +1343,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 +1374,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 +1543,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 +1569,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 +1641,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 +1660,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 +1673,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 +1686,444 @@

    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 + 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 + 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 +2131,19 @@

    Graphics Techniques

    - - - - + + + + + + + + + + @@ -2135,8 +2151,6 @@

    Graphics Techniques

    - - @@ -2145,8 +2159,6 @@

    Graphics Techniques

    - - @@ -2154,9 +2166,7 @@

    Graphics Techniques

    - - @@ -2164,9 +2174,7 @@

    Graphics Techniques

    - - @@ -2175,8 +2183,6 @@

    Graphics Techniques

    - - @@ -2185,16 +2191,12 @@

    Graphics Techniques

    - - - - @@ -2203,8 +2205,6 @@

    Graphics Techniques

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

    Graphics Techniques

    - - - + @@ -2224,9 +2222,7 @@

    Graphics Techniques

    - - - + @@ -2234,9 +2230,7 @@

    Graphics Techniques

    - - - + @@ -2245,198 +2239,102 @@

    Graphics Techniques

    - - - - - + + - - - - - + + - + - - - + - + - - - - + - - - + - - + - - - - + - - - - - + + + - - - - + + + + + + + + + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -2444,9 +2342,7 @@

    Graphics Techniques

    - - - + @@ -2455,58 +2351,46 @@

    Graphics Techniques

    - - - - - - - + - - - - - + - - - + @@ -2514,29 +2398,23 @@

    Graphics Techniques

    - - - + - - - + - - - + @@ -2545,18 +2423,14 @@

    Graphics Techniques

    - - - - - + @@ -2564,8 +2438,6 @@

    Graphics Techniques

    - - @@ -2574,39 +2446,15 @@

    Graphics Techniques

    - - - - - - - - - - - - - - - - - - + - - - - - - - @@ -2614,9 +2462,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 Yes
    Navigation Menu ButtonYes Yes Yes
    LinkEditor Menubar Yes Yes Yes
    (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 ButtonYesYes
    Editor MenubarYesYes
    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
    Yes YesYesYes
    Treegrid Email Inbox YesYesYes
    File Directory Treeview Using Computed PropertiesYesTreegrid Email Inbox Yes
    File Directory Treeview Using Declared Properties YesYes
    Navigation Treeview Yes Yes
    @@ -2630,55 +2476,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 +2504,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 +2561,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 @@ -2855,75 +2586,25 @@

    Mouse and Pointer Events

    Yes - - Date Picker Spin Button - - Yes - - - Switch Using HTML Button - - Yes - - - Switch Using HTML Checkbox Input - - Yes - - - Switch - - 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 ed19b10250..7effc0b049 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-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","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: 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: 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" @@ -41,7 +41,7 @@ "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-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 104fad9ec2..cbebe3fb38 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" diff --git a/content/index/index.html b/content/index/index.html index b004007e85..983d2a2aa3 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,7 @@

    Examples By Properties and States

    + diff --git a/content/patterns/accordion/examples/accordion.html b/content/patterns/accordion/examples/accordion.html index 565ae39baa..7eca23f625 100644 --- a/content/patterns/accordion/examples/accordion.html +++ b/content/patterns/accordion/examples/accordion.html @@ -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 78687d9239..745bae013f 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

    +
    @@ -73,7 +86,7 @@

    Keyboard Support

    Control + Home - Move focus to the first focusable element before the feed. + 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 def9a045cf..0000000000 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 72b3ec4b77..0000000000 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 b15fb792d5..0000000000 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 3e9b283ed2..0000000000 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 8472c0e912..0000000000 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 d889d6b0d0..d183f9d5e0 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 5e01061210..7ae27f47f0 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

    diff --git a/content/patterns/grid/examples/data-grids.html b/content/patterns/grid/examples/data-grids.html index cc4710a342..36d0c4c98b 100644 --- a/content/patterns/grid/examples/data-grids.html +++ b/content/patterns/grid/examples/data-grids.html @@ -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/listbox/examples/listbox-collapsible.html b/content/patterns/listbox/examples/listbox-collapsible.html index 2689624519..5fa5958390 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 37f8237441..75ab78eebf 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 a9500377ce..bce043d135 100644 --- a/content/patterns/listbox/examples/listbox-rearrangeable.html +++ b/content/patterns/listbox/examples/listbox-rearrangeable.html @@ -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/menu-button/examples/menu-button-actions-active-descendant.html b/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html index 5c7bde9003..18a5cd4295 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

    -
    +

    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 7ebfec5219..94487885dc 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 8da261fc6d..a6722a606b 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