From c2fec91d882563478232e99909ff5cc59b6e72a3 Mon Sep 17 00:00:00 2001 From: Alexander Flenniken Date: Mon, 17 Jun 2024 10:54:54 -0400 Subject: [PATCH 01/13] Add support for experimental content (#310) * Add support for experimental content * Add required attribute for experimental content * Update based on latest aria-practice 'experimental-content' branchh * Sync submodules --------- Co-authored-by: Stalgia Grigg --- ARIA/apg/index/index.md | 2 ++ _external/aria-practices | 2 +- _external/data | 2 +- .../wai-aria-practices/shared/js/app.js | 14 +++++++---- .../pre-build/library/determineContentType.js | 5 +++- scripts/pre-build/library/transformExample.js | 24 +++++++++++++++---- 6 files changed, 38 insertions(+), 11 deletions(-) diff --git a/ARIA/apg/index/index.md b/ARIA/apg/index/index.md index 13e067517..c3ccfc95e 100644 --- a/ARIA/apg/index/index.md +++ b/ARIA/apg/index/index.md @@ -67,6 +67,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

Examples by Role

@@ -949,6 +950,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
+ diff --git a/_external/aria-practices b/_external/aria-practices index 39fb654e5..4e77bdba9 160000 --- a/_external/aria-practices +++ b/_external/aria-practices @@ -1 +1 @@ -Subproject commit 39fb654e5146151ee70675af6ae755a72d8f7ff4 +Subproject commit 4e77bdba904bc1fdff5976057d5ce135804acd6c diff --git a/_external/data b/_external/data index 2fa5e7cb6..b371a9ab8 160000 --- a/_external/data +++ b/_external/data @@ -1 +1 @@ -Subproject commit 2fa5e7cb6f4eb5f35583a94b9a5890a0f2a0a9ec +Subproject commit b371a9ab89b8e5e848f399e0186b64e3ecf810f6 diff --git a/content-assets/wai-aria-practices/shared/js/app.js b/content-assets/wai-aria-practices/shared/js/app.js index 58cbd1e86..05f444abf 100644 --- a/content-assets/wai-aria-practices/shared/js/app.js +++ b/content-assets/wai-aria-practices/shared/js/app.js @@ -20,14 +20,20 @@ // Determine we are on an example page if (!document.location.href.match(/examples\/[^/]+\.html/)) return; + const isExperimental = + document.querySelector('main')?.getAttribute('data-content-phase') === + 'experimental'; + + const usageWarningLink = isExperimental + ? '/templates/experimental-example-usage-warning.html' + : '/templates/example-usage-warning.html'; + // Generate the usage warning link using app.js link as a starting point const scriptSource = document .querySelector('[src$="app.js"]') .getAttribute('src'); - const fetchSource = scriptSource.replace( - '/js/app.js', - '/templates/example-usage-warning.html' - ); + + const fetchSource = scriptSource.replace('/js/app.js', usageWarningLink); // Load and parse the usage warning and insert it before the h1 const html = await (await fetch(fetchSource)).text(); diff --git a/scripts/pre-build/library/determineContentType.js b/scripts/pre-build/library/determineContentType.js index 5fb11c0cf..56305599a 100644 --- a/scripts/pre-build/library/determineContentType.js +++ b/scripts/pre-build/library/determineContentType.js @@ -45,7 +45,10 @@ const determineContentType = (sourcePath) => { } if ( sourcePath.endsWith("shared/templates/read-this-first.html") || - sourcePath.endsWith("shared/templates/example-usage-warning.html") + sourcePath.endsWith("shared/templates/example-usage-warning.html") || + sourcePath.endsWith( + "shared/templates/experimental-example-usage-warning.html" + ) ) { return "template"; } diff --git a/scripts/pre-build/library/transformExample.js b/scripts/pre-build/library/transformExample.js index c8546049f..09cb349de 100644 --- a/scripts/pre-build/library/transformExample.js +++ b/scripts/pre-build/library/transformExample.js @@ -9,8 +9,14 @@ const wrapTablesWithResponsiveDiv = require("./wrapTablesWithResponsiveDiv"); const removeConflictingCss = require("./removeConflictingCss"); const getExampleLastModifiedDate = require("./getExampleLastModifiedDate"); -const loadNotice = async () => { - const relativePath = "content/shared/templates/example-usage-warning.html"; +const loadNoticeCommon = async ({ isExperimental }) => { + let relativePath; + if (isExperimental) { + relativePath = + "content/shared/templates/experimental-example-usage-warning.html"; + } else { + relativePath = "content/shared/templates/example-usage-warning.html"; + } const templateSourcePath = path.resolve(sourceRoot, relativePath); const noticeContent = await fs.readFile(templateSourcePath, { encoding: "utf8", @@ -28,7 +34,8 @@ const loadNotice = async () => { }; }; -const loadedNotice = loadNotice(); +const loadedNotice = loadNoticeCommon({ isExperimental: false }); +const loadedExperimentalNotice = loadNoticeCommon({ isExperimental: true }); const transformExample = async (sourcePath, sourceContents) => { const { sitePath, githubPath } = rewriteSourcePath(sourcePath); @@ -46,7 +53,16 @@ const transformExample = async (sourcePath, sourceContents) => { await rewriteElementPaths(html, { onSourcePath: sourcePath }); - const getNotice = await loadedNotice; + const isExperimental = + html.querySelector("main")?.getAttribute("data-content-phase") === + "experimental"; + + let getNotice; + if (isExperimental) { + getNotice = await loadedExperimentalNotice; + } else { + getNotice = await loadedNotice; + } const notice = await getNotice(sourcePath); html.querySelector("body").insertAdjacentHTML("afterbegin", notice); From afadb2f8e8c0567c40a6a08c99f65508b6cbc5c9 Mon Sep 17 00:00:00 2001 From: Howard Edwards Date: Tue, 25 Jun 2024 12:21:59 -0400 Subject: [PATCH 02/13] Remove unexpected shared/js/app.js change not yet in w3c/aria-practices (#330) --- ARIA/apg/index/index.md | 2 -- .../wai-aria-practices/shared/js/app.js | 14 ++++------- scripts/pre-build/library/transformExample.js | 23 +++++++++++++++---- 3 files changed, 23 insertions(+), 16 deletions(-) diff --git a/ARIA/apg/index/index.md b/ARIA/apg/index/index.md index c3ccfc95e..13e067517 100644 --- a/ARIA/apg/index/index.md +++ b/ARIA/apg/index/index.md @@ -67,7 +67,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

Examples by Role

@@ -950,7 +949,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
- diff --git a/content-assets/wai-aria-practices/shared/js/app.js b/content-assets/wai-aria-practices/shared/js/app.js index 05f444abf..58cbd1e86 100644 --- a/content-assets/wai-aria-practices/shared/js/app.js +++ b/content-assets/wai-aria-practices/shared/js/app.js @@ -20,20 +20,14 @@ // Determine we are on an example page if (!document.location.href.match(/examples\/[^/]+\.html/)) return; - const isExperimental = - document.querySelector('main')?.getAttribute('data-content-phase') === - 'experimental'; - - const usageWarningLink = isExperimental - ? '/templates/experimental-example-usage-warning.html' - : '/templates/example-usage-warning.html'; - // Generate the usage warning link using app.js link as a starting point const scriptSource = document .querySelector('[src$="app.js"]') .getAttribute('src'); - - const fetchSource = scriptSource.replace('/js/app.js', usageWarningLink); + const fetchSource = scriptSource.replace( + '/js/app.js', + '/templates/example-usage-warning.html' + ); // Load and parse the usage warning and insert it before the h1 const html = await (await fetch(fetchSource)).text(); diff --git a/scripts/pre-build/library/transformExample.js b/scripts/pre-build/library/transformExample.js index 09cb349de..858d36e55 100644 --- a/scripts/pre-build/library/transformExample.js +++ b/scripts/pre-build/library/transformExample.js @@ -12,15 +12,30 @@ const getExampleLastModifiedDate = require("./getExampleLastModifiedDate"); const loadNoticeCommon = async ({ isExperimental }) => { let relativePath; if (isExperimental) { + // Depends on https://github.com/w3c/aria-practices/pull/2977 being merged relativePath = "content/shared/templates/experimental-example-usage-warning.html"; } else { relativePath = "content/shared/templates/example-usage-warning.html"; } - const templateSourcePath = path.resolve(sourceRoot, relativePath); - const noticeContent = await fs.readFile(templateSourcePath, { - encoding: "utf8", - }); + + let templateSourcePath = path.resolve(sourceRoot, relativePath); + + let noticeContent; + try { + noticeContent = await fs.readFile(templateSourcePath, { + encoding: "utf8", + }); + } catch (e) { + console.warn(`${e.message}\nReverting to using default example-usage-warning.html ...\n`); + + // Could happen if experimental-example-usage-warning.html doesn't exist + relativePath = "content/shared/templates/example-usage-warning.html"; + templateSourcePath = path.resolve(sourceRoot, relativePath); + noticeContent = await fs.readFile(templateSourcePath, { + encoding: "utf8", + }); + } return async (sourcePath) => { const html = parseHtml(noticeContent); From facdb184f5135610b0646439bfe17fa459f3ad36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Re=CC=81mi=20Be=CC=81tin?= Date: Tue, 2 Jul 2024 19:41:36 +0200 Subject: [PATCH 03/13] Update to Ruby 3.3.3 --- Gemfile.lock | 91 +++++++++++++++++++++++++++++++------------------- _external/data | 2 +- netlify.toml | 2 +- 3 files changed, 58 insertions(+), 37 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 579793eb2..977e37875 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -10,30 +10,41 @@ PATH jekyll-remote-theme jekyll-seo-tag jekyll-sitemap - rouge (= 3.30.0) wai-website-plugin GEM remote: https://rubygems.org/ specs: - addressable (2.8.1) - public_suffix (>= 2.0.2, < 6.0) + addressable (2.8.7) + public_suffix (>= 2.0.2, < 7.0) + bigdecimal (3.1.8) colorator (1.1.0) - concurrent-ruby (1.1.10) + concurrent-ruby (1.3.3) em-websocket (0.5.3) eventmachine (>= 0.12.9) http_parser.rb (~> 0) eventmachine (1.2.7) - faraday (2.6.0) - faraday-net_http (>= 2.0, < 3.1) - ruby2_keywords (>= 0.0.4) - faraday-net_http (3.0.1) - ffi (1.15.5) + faraday (2.9.2) + faraday-net_http (>= 2.0, < 3.2) + faraday-net_http (3.1.0) + net-http + ffi (1.17.0) + ffi (1.17.0-arm64-darwin) + ffi (1.17.0-x86_64-linux-gnu) forwardable-extended (2.6.0) + google-protobuf (4.27.2) + bigdecimal + rake (>= 13) + google-protobuf (4.27.2-arm64-darwin) + bigdecimal + rake (>= 13) + google-protobuf (4.27.2-x86_64-linux) + bigdecimal + rake (>= 13) http_parser.rb (0.8.0) - i18n (1.12.0) + i18n (1.14.5) concurrent-ruby (~> 1.0) - jekyll (4.3.1) + jekyll (4.3.3) addressable (~> 2.4) colorator (~> 1.0) em-websocket (~> 0.5) @@ -49,23 +60,23 @@ GEM safe_yaml (~> 1.0) terminal-table (>= 1.8, < 4.0) webrick (~> 1.7) - jekyll-github-metadata (2.15.0) + jekyll-github-metadata (2.16.1) jekyll (>= 3.4, < 5.0) - octokit (~> 4.0, != 4.4.0) + octokit (>= 4, < 7, != 4.4.0) jekyll-include-cache (0.2.1) jekyll (>= 3.7, < 5.0) jekyll-paginate (1.1.0) jekyll-redirect-from (0.16.0) jekyll (>= 3.3, < 5.0) - jekyll-relative-links (0.6.1) + jekyll-relative-links (0.7.0) jekyll (>= 3.3, < 5.0) jekyll-remote-theme (0.4.3) addressable (~> 2.0) jekyll (>= 3.5, < 5.0) jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0) rubyzip (>= 1.3.0, < 3.0) - jekyll-sass-converter (2.2.0) - sassc (> 2.0.1, < 3.0) + jekyll-sass-converter (3.0.0) + sass-embedded (~> 1.54) jekyll-seo-tag (2.8.0) jekyll (>= 3.8, < 5.0) jekyll-sitemap (1.4.0) @@ -76,45 +87,55 @@ GEM rexml kramdown-parser-gfm (1.1.0) kramdown (~> 2.0) - liquid (4.0.3) - listen (3.7.1) + liquid (4.0.4) + listen (3.9.0) rb-fsevent (~> 0.10, >= 0.10.3) rb-inotify (~> 0.9, >= 0.9.10) mercenary (0.4.0) - mini_portile2 (2.8.0) - nokogiri (1.13.9) - mini_portile2 (~> 2.8.0) + mini_portile2 (2.8.7) + net-http (0.4.1) + uri + nokogiri (1.16.6) + mini_portile2 (~> 2.8.2) racc (~> 1.4) - nokogiri (1.13.9-arm64-darwin) + nokogiri (1.16.6-arm64-darwin) racc (~> 1.4) - nokogiri (1.13.9-x86_64-linux) + nokogiri (1.16.6-x86_64-darwin) racc (~> 1.4) - octokit (4.25.1) + nokogiri (1.16.6-x86_64-linux) + racc (~> 1.4) + octokit (6.1.1) faraday (>= 1, < 3) sawyer (~> 0.9) pathutil (0.16.2) forwardable-extended (~> 2.6) - public_suffix (5.0.0) - racc (1.6.0) + public_suffix (6.0.0) + racc (1.8.0) + rake (13.2.1) rb-fsevent (0.11.2) - rb-inotify (0.10.1) + rb-inotify (0.11.1) ffi (~> 1.0) - rexml (3.2.5) - rouge (3.30.0) - ruby2_keywords (0.0.5) + rexml (3.3.1) + strscan + rouge (4.3.0) rubyzip (2.3.2) safe_yaml (1.0.5) - sassc (2.4.0) - ffi (~> 1.9) + sass-embedded (1.77.5) + google-protobuf (>= 3.25, < 5.0) + rake (>= 13) + sass-embedded (1.77.5-x86_64-darwin) + google-protobuf (>= 3.25, < 5.0) sawyer (0.9.2) addressable (>= 2.3.5) faraday (>= 0.17.3, < 3) + strscan (3.1.0) terminal-table (3.0.2) unicode-display_width (>= 1.1.1, < 3) - unicode-display_width (2.3.0) + unicode-display_width (2.5.0) + uri (0.13.0) wai-website-plugin (0.2) jekyll (>= 3.6, < 5.0) - webrick (1.7.0) + webrick (1.8.1) PLATFORMS ruby @@ -126,4 +147,4 @@ DEPENDENCIES wai-gems! BUNDLED WITH - 2.3.10 + 2.5.14 diff --git a/_external/data b/_external/data index b371a9ab8..bb1336392 160000 --- a/_external/data +++ b/_external/data @@ -1 +1 @@ -Subproject commit b371a9ab89b8e5e848f399e0186b64e3ecf810f6 +Subproject commit bb1336392685c5dec9dbf30c5fb5c9e0c0c9260d diff --git a/netlify.toml b/netlify.toml index 29cc3ea22..df0a92105 100644 --- a/netlify.toml +++ b/netlify.toml @@ -3,7 +3,7 @@ command = "git submodule update --init --remote && bundle exec jekyll build --co publish = "_site" [build.environment] -RUBY_VERSION = "2.6.2" +RUBY_VERSION = "3.3.3" [[redirects]] from = "/" From 3ed13ad762dfdb47575f00947ee874ff65e8527f Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 15 Jul 2024 11:52:19 +0200 Subject: [PATCH 04/13] Update ruby and actions version --- .github/workflows/pr-create.yml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/pr-create.yml b/.github/workflows/pr-create.yml index d6cb1f247..579105ba8 100644 --- a/.github/workflows/pr-create.yml +++ b/.github/workflows/pr-create.yml @@ -28,21 +28,21 @@ jobs: github_token: ${{ secrets.GITHUB_TOKEN }} job_name: create-pr - - uses: actions/checkout@v2 + - uses: actions/checkout@v4 with: submodules: true fetch-depth: 0 - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@v4 with: cache: npm cache-dependency-path: scripts/pre-build/package-lock.json - - name: Set up Ruby 2.6.2 + - name: Set up Ruby 3.3 uses: ruby/setup-ruby@v1 with: - ruby-version: 2.6.2 + ruby-version: 3.3 - name: Update git submodules if: github.event.inputs.fork_path == 'false' From fb6fae3e5990c0132e091317c19d6e427087d84d Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 15 Jul 2024 12:18:45 +0200 Subject: [PATCH 05/13] Update ruby version and actions --- .github/workflows/deploy.yml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 91830dec0..4a3d9fb01 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -8,21 +8,21 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v4 with: submodules: true fetch-depth: 0 - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@v4 with: cache: npm cache-dependency-path: scripts/pre-build/package-lock.json - - name: Set up Ruby 2.6.2 + - name: Set up Ruby 3.3 uses: ruby/setup-ruby@v1 with: - ruby-version: 2.6.2 + ruby-version: 3.3 bundler-cache: true - name: Update git submodules From b0bdc4b3f1ec6cf88d38f8b13f5118d791b9d722 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 23 Jul 2024 05:46:23 +0000 Subject: [PATCH 06/13] Commit changes --- ARIA/apg/patterns/slider/examples/slider-rating.md | 2 +- _external/aria-practices | 2 +- .../patterns/slider/examples/css/slider-rating.css | 10 +++++----- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md index e602051d0..f60c7686b 100644 --- a/ARIA/apg/patterns/slider/examples/slider-rating.md +++ b/ARIA/apg/patterns/slider/examples/slider-rating.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 23 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/_external/aria-practices b/_external/aria-practices index 4e77bdba9..19347dd22 160000 --- a/_external/aria-practices +++ b/_external/aria-practices @@ -1 +1 @@ -Subproject commit 4e77bdba904bc1fdff5976057d5ce135804acd6c +Subproject commit 19347dd2211e743afcf3962c0ced13b5987fd86d diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css index 0dc3c3fc0..2a966d635 100644 --- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css +++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css @@ -67,23 +67,23 @@ @media (forced-colors: active) { .rating-slider svg .focus-ring { - fill: linktext; + fill: buttontext; } .rating-slider svg .target { - stroke: linktext; + stroke: buttontext; } .rating-slider svg .label { - fill: linktext; + fill: buttontext; } .rating-slider svg .description { - fill: linktext; + fill: buttontext; } .rating-slider svg .current .target { - fill: linktext; + fill: buttontext; } .rating-slider svg .current .label { From 68fb1808f30dd7bc8b3194d8742e78dbee3458c5 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 23 Jul 2024 06:24:10 +0000 Subject: [PATCH 07/13] Commit changes --- .../coverage-and-quality-report.md | 229 +++--------------- _external/aria-practices | 2 +- 2 files changed, 36 insertions(+), 195 deletions(-) diff --git a/ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md b/ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md index b1af83db1..f58f72eef 100644 --- a/ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md +++ b/ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md @@ -69,7 +69,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-

Page last updated: May 23, 2024

+

Page last updated: July 23, 2024

About These Reports

@@ -1335,9 +1335,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); 34 - Uses forced-color-adjust on SVG - 13 + Uses forced-colors media query + 2 + + Uses currentColor value + 27 + + Uses event.KeyCode 16 @@ -2165,7 +2170,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

-

Graphics Techniques

+

SVG and High Contrast Techniques

@@ -2173,13 +2178,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - - + + + + + + + + + + @@ -2187,8 +2198,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - @@ -2197,8 +2206,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - @@ -2206,9 +2213,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - @@ -2216,9 +2221,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - @@ -2227,8 +2230,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - @@ -2237,16 +2238,12 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - - @@ -2255,8 +2252,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - @@ -2266,9 +2261,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - + @@ -2276,9 +2269,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - + @@ -2286,9 +2277,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - + @@ -2297,36 +2286,12 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - - - - - - - - - - - - - - - - - - - - - - @@ -2335,68 +2300,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -2406,9 +2317,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - @@ -2417,8 +2326,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - @@ -2427,8 +2334,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - @@ -2437,8 +2342,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - @@ -2447,8 +2350,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - @@ -2456,9 +2357,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - + @@ -2466,9 +2365,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - + @@ -2476,9 +2373,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - + @@ -2487,8 +2382,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - @@ -2496,9 +2389,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - + @@ -2507,58 +2398,46 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - - - - - + - - - - - + - - - + @@ -2566,29 +2445,23 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - + - - - + - - - + @@ -2597,18 +2470,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - - - + @@ -2616,8 +2485,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - @@ -2626,39 +2493,15 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - - - - - - - - - - - - - - - - + - - - - - - - @@ -2666,9 +2509,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - - - +
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
ButtonYes 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 AutocompleteYes Yes
Editable Combobox without AutocompleteYes Yes
Date Picker Combobox Yes
Select-Only ComboboxYesYes
Date Picker DialogYes
Disclosure (Show/Hide) for Answers to Frequently Asked Questions Yes Yes Yes
Yes Yes Yes
Disclosure Navigation Menu with Top-Level LinksYesYes
Disclosure Navigation MenuYesYes
Feed Display Yes YesYes
Advanced Data GridYesYes
Data GridYesYes
Layout GridYes Yes Yes
Yes Yes Yes
(Deprecated) Collapsible Dropdown Listbox YesYesYes
Listbox with Grouped Options YesYesYes
Listboxes with Rearrangeable Options YesYesYes
Scrollable Listbox YesYesYes
Actions Menu Button Using aria-activedescendantYes Yes
Actions Menu Button Using element.focus()Yes Yes
Navigation Menu ButtonYes Yes
Editor Menubar Yes
Navigation MenubarYes 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 SliderYes 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 InboxYesYes Yes
File Directory Treeview Using Computed PropertiesYesTreegrid Email Inbox Yes
File Directory Treeview Using Declared Properties YesYes
Navigation TreeviewYes Yes
diff --git a/_external/aria-practices b/_external/aria-practices index 19347dd22..cb74ba2d8 160000 --- a/_external/aria-practices +++ b/_external/aria-practices @@ -1 +1 @@ -Subproject commit 19347dd2211e743afcf3962c0ced13b5987fd86d +Subproject commit cb74ba2d812a07779f83119459f2289bb3d29f96 From bd03df28d9cd2be9d10788ec82953db760c67bdb Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Sat, 27 Jul 2024 20:54:22 +0000 Subject: [PATCH 08/13] Commit changes --- .../patterns/accordion/examples/accordion.md | 7 ++++--- ARIA/apg/patterns/alert/examples/alert.md | 7 ++++--- .../alertdialog/examples/alertdialog.md | 7 ++++--- .../patterns/breadcrumb/examples/breadcrumb.md | 7 ++++--- ARIA/apg/patterns/button/examples/button.md | 7 ++++--- .../apg/patterns/button/examples/button_idl.md | 7 ++++--- .../carousel/examples/carousel-1-prev-next.md | 7 ++++--- .../carousel/examples/carousel-2-tablist.md | 7 ++++--- .../checkbox/examples/checkbox-mixed.md | 7 ++++--- .../apg/patterns/checkbox/examples/checkbox.md | 7 ++++--- .../examples/combobox-autocomplete-both.md | 7 ++++--- .../examples/combobox-autocomplete-list.md | 7 ++++--- .../examples/combobox-autocomplete-none.md | 7 ++++--- .../combobox/examples/combobox-datepicker.md | 7 ++++--- .../combobox/examples/combobox-select-only.md | 7 ++++--- .../patterns/combobox/examples/grid-combo.md | 7 ++++--- .../dialog-modal/examples/datepicker-dialog.md | 7 ++++--- .../patterns/dialog-modal/examples/dialog.md | 7 ++++--- .../disclosure/examples/disclosure-faq.md | 7 ++++--- .../examples/disclosure-image-description.md | 7 ++++--- .../examples/disclosure-navigation-hybrid.md | 7 ++++--- .../examples/disclosure-navigation.md | 7 ++++--- ARIA/apg/patterns/grid/examples/data-grids.md | 13 ++++++++----- .../apg/patterns/grid/examples/layout-grids.md | 13 ++++++++----- ARIA/apg/patterns/link/examples/link.md | 13 ++++++++----- .../listbox/examples/listbox-collapsible.md | 7 ++++--- .../listbox/examples/listbox-grouped.md | 7 ++++--- .../listbox/examples/listbox-rearrangeable.md | 10 ++++++---- .../listbox/examples/listbox-scrollable.md | 7 ++++--- .../menu-button-actions-active-descendant.md | 7 ++++--- .../examples/menu-button-actions.md | 7 ++++--- .../menu-button/examples/menu-button-links.md | 7 ++++--- .../menubar/examples/menubar-editor.md | 7 ++++--- .../menubar/examples/menubar-navigation.md | 7 ++++--- ARIA/apg/patterns/meter/examples/meter.md | 7 ++++--- .../radio/examples/radio-activedescendant.md | 7 ++++--- .../patterns/radio/examples/radio-rating.md | 7 ++++--- ARIA/apg/patterns/radio/examples/radio.md | 7 ++++--- .../examples/slider-multithumb.md | 7 ++++--- .../slider/examples/slider-color-viewer.md | 7 ++++--- .../patterns/slider/examples/slider-rating.md | 7 ++++--- .../patterns/slider/examples/slider-seek.md | 7 ++++--- .../slider/examples/slider-temperature.md | 7 ++++--- .../examples/datepicker-spinbuttons.md | 7 ++++--- .../patterns/switch/examples/switch-button.md | 7 ++++--- .../switch/examples/switch-checkbox.md | 7 ++++--- ARIA/apg/patterns/switch/examples/switch.md | 7 ++++--- .../patterns/table/examples/sortable-table.md | 7 ++++--- ARIA/apg/patterns/table/examples/table.md | 7 ++++--- .../patterns/tabs/examples/tabs-automatic.md | 7 ++++--- ARIA/apg/patterns/tabs/examples/tabs-manual.md | 7 ++++--- ARIA/apg/patterns/toolbar/examples/toolbar.md | 7 ++++--- .../patterns/treegrid/examples/treegrid-1.md | 7 ++++--- .../patterns/treeview/examples/treeview-1a.md | 7 ++++--- .../patterns/treeview/examples/treeview-1b.md | 7 ++++--- .../treeview/examples/treeview-navigation.md | 7 ++++--- _external/aria-practices | 2 +- .../wai-aria-practices/shared/css/core.css | 1 + .../wai-aria-practices/shared/js/examples.js | 18 ++++++++++++++++-- 59 files changed, 256 insertions(+), 178 deletions(-) diff --git a/ARIA/apg/patterns/accordion/examples/accordion.md b/ARIA/apg/patterns/accordion/examples/accordion.md index 1bd018521..e780440d6 100644 --- a/ARIA/apg/patterns/accordion/examples/accordion.md +++ b/ARIA/apg/patterns/accordion/examples/accordion.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/accordion/examples/accordion/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -317,13 +317,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); -
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/alert/examples/alert.md b/ARIA/apg/patterns/alert/examples/alert.md index bcc67aaa9..6c4f041c3 100644 --- a/ARIA/apg/patterns/alert/examples/alert.md +++ b/ARIA/apg/patterns/alert/examples/alert.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alert/examples/alert/ sidebar: true -footer: "

View issues related to this example

Page last updated: 22 May 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -211,13 +211,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/alertdialog/examples/alertdialog.md b/ARIA/apg/patterns/alertdialog/examples/alertdialog.md index e1e917001..149eabebd 100644 --- a/ARIA/apg/patterns/alertdialog/examples/alertdialog.md +++ b/ARIA/apg/patterns/alertdialog/examples/alertdialog.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alertdialog/examples/alertdialog/ sidebar: true -footer: "

View issues related to this example

Page last updated: 1 May 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -296,13 +296,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md b/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md index a158af063..d24bd5a15 100644 --- a/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md +++ b/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/breadcrumb/examples/breadcrumb/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -190,13 +190,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/button/examples/button.md b/ARIA/apg/patterns/button/examples/button.md index e5ddc8a53..a44d341f9 100644 --- a/ARIA/apg/patterns/button/examples/button.md +++ b/ARIA/apg/patterns/button/examples/button.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button/ sidebar: true -footer: "

View issues related to this example

Page last updated: 22 May 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -269,13 +269,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/button/examples/button_idl.md b/ARIA/apg/patterns/button/examples/button_idl.md index d3f4887a7..2cb7b759e 100644 --- a/ARIA/apg/patterns/button/examples/button_idl.md +++ b/ARIA/apg/patterns/button/examples/button_idl.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button_idl/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -262,13 +262,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md b/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md index bd6a0798d..53a142688 100644 --- a/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md +++ b/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -589,13 +589,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md b/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md index 9a28767a1..641473ec6 100644 --- a/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md +++ b/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/carousel/examples/carousel-2-tablist/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -773,13 +773,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md b/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md index faf127755..16bb8fb50 100644 --- a/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md +++ b/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/checkbox/examples/checkbox-mixed/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -271,13 +271,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/checkbox/examples/checkbox.md b/ARIA/apg/patterns/checkbox/examples/checkbox.md index 1fcd2e102..297fc559e 100644 --- a/ARIA/apg/patterns/checkbox/examples/checkbox.md +++ b/ARIA/apg/patterns/checkbox/examples/checkbox.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/checkbox/examples/checkbox/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -258,14 +258,15 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

Simple Two-State Checkbox Example

+

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

diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md index 5d58ab7b6..327fd671d 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -594,13 +594,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md index 91c2d8822..67b243c04 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -588,13 +588,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md index 2c684d0d6..d00c09e6b 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -530,13 +530,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md b/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md index 2233babf2..547052b9a 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-datepicker/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -778,13 +778,14 @@ Moves focus to the day of the month that has the same number.
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/combobox/examples/combobox-select-only.md b/ARIA/apg/patterns/combobox/examples/combobox-select-only.md index 31d7444e9..6039648d5 100644 --- a/ARIA/apg/patterns/combobox/examples/combobox-select-only.md +++ b/ARIA/apg/patterns/combobox/examples/combobox-select-only.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-select-only/ sidebar: true -footer: "

View issues related to this example

Page last updated: 7 April 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -470,13 +470,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/combobox/examples/grid-combo.md b/ARIA/apg/patterns/combobox/examples/grid-combo.md index 86670758a..af25cd836 100644 --- a/ARIA/apg/patterns/combobox/examples/grid-combo.md +++ b/ARIA/apg/patterns/combobox/examples/grid-combo.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/grid-combo/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -449,13 +449,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md b/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md index ad3bbf454..a46a704b7 100644 --- a/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md +++ b/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -712,13 +712,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/dialog-modal/examples/dialog.md b/ARIA/apg/patterns/dialog-modal/examples/dialog.md index 09746f641..98cda45ce 100644 --- a/ARIA/apg/patterns/dialog-modal/examples/dialog.md +++ b/ARIA/apg/patterns/dialog-modal/examples/dialog.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/dialog-modal/examples/dialog/ sidebar: true -footer: "

View issues related to this example

Page last updated: 22 May 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -418,13 +418,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md b/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md index d713b8272..11639f8c6 100644 --- a/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md +++ b/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-faq/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -289,13 +289,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md index 62d77dd17..096ebbd00 100644 --- a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md +++ b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-image-description/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -426,13 +426,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md index 9a806d661..a75336a21 100644 --- a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md +++ b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -429,13 +429,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md index 3159d8188..d996d1ece 100644 --- a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md +++ b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-navigation/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -424,13 +424,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/grid/examples/data-grids.md b/ARIA/apg/patterns/grid/examples/data-grids.md index 5b986ff8e..0ccbcd1b6 100644 --- a/ARIA/apg/patterns/grid/examples/data-grids.md +++ b/ARIA/apg/patterns/grid/examples/data-grids.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/data-grids/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -835,30 +835,33 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

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/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md b/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md index 3881203eb..3112ae17a 100644 --- a/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md +++ b/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-collapsible/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -381,13 +381,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/listbox/examples/listbox-grouped.md b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md index d9f01e70d..adfd3e725 100644 --- a/ARIA/apg/patterns/listbox/examples/listbox-grouped.md +++ b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-grouped/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -355,13 +355,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md b/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md index c2606f0de..92297d78e 100644 --- a/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md +++ b/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-rearrangeable/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -588,21 +588,23 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

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/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md b/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md index 190635f04..6a3468cbb 100644 --- a/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md +++ b/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-de sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -401,13 +401,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md b/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md index 6f7d9f31c..cf90eb9d8 100644 --- a/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md +++ b/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-actions/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -380,13 +380,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-links.md b/ARIA/apg/patterns/menu-button/examples/menu-button-links.md index 81096a586..f0878d4e1 100644 --- a/ARIA/apg/patterns/menu-button/examples/menu-button-links.md +++ b/ARIA/apg/patterns/menu-button/examples/menu-button-links.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-links/ sidebar: true -footer: "

View issues related to this example

Page last updated: 22 May 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -415,13 +415,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/menubar/examples/menubar-editor.md b/ARIA/apg/patterns/menubar/examples/menubar-editor.md index f5d0c93b9..dc5fc8709 100644 --- a/ARIA/apg/patterns/menubar/examples/menubar-editor.md +++ b/ARIA/apg/patterns/menubar/examples/menubar-editor.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menubar/examples/menubar-editor/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -843,13 +843,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/menubar/examples/menubar-navigation.md b/ARIA/apg/patterns/menubar/examples/menubar-navigation.md index 7dba01984..fdfab3113 100644 --- a/ARIA/apg/patterns/menubar/examples/menubar-navigation.md +++ b/ARIA/apg/patterns/menubar/examples/menubar-navigation.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menubar/examples/menubar-navigation/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -872,13 +872,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/meter/examples/meter.md b/ARIA/apg/patterns/meter/examples/meter.md index b64e5d079..c7487ca5e 100644 --- a/ARIA/apg/patterns/meter/examples/meter.md +++ b/ARIA/apg/patterns/meter/examples/meter.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/meter/examples/meter/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -198,13 +198,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/radio/examples/radio-activedescendant.md b/ARIA/apg/patterns/radio/examples/radio-activedescendant.md index f722af01a..14df3d86e 100644 --- a/ARIA/apg/patterns/radio/examples/radio-activedescendant.md +++ b/ARIA/apg/patterns/radio/examples/radio-activedescendant.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio-activedescendant/ sidebar: true -footer: "

View issues related to this example

Page last updated: 22 May 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -327,13 +327,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/radio/examples/radio-rating.md b/ARIA/apg/patterns/radio/examples/radio-rating.md index df3b2a22b..66695709b 100644 --- a/ARIA/apg/patterns/radio/examples/radio-rating.md +++ b/ARIA/apg/patterns/radio/examples/radio-rating.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio-rating/ sidebar: true -footer: "

View issues related to this example

Page last updated: 7 April 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -346,13 +346,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/radio/examples/radio.md b/ARIA/apg/patterns/radio/examples/radio.md index 61c941690..b3538534c 100644 --- a/ARIA/apg/patterns/radio/examples/radio.md +++ b/ARIA/apg/patterns/radio/examples/radio.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio/ sidebar: true -footer: "

View issues related to this example

Page last updated: 7 April 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -317,13 +317,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md b/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md index 6f1edcbd0..7bfdee015 100644 --- a/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md +++ b/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -326,13 +326,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md index f77c5d71c..85e5b458c 100644 --- a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md +++ b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-color-viewer/ sidebar: true -footer: "

View issues related to this example

Page last updated: 22 May 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -374,13 +374,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md index f60c7686b..07179442a 100644 --- a/ARIA/apg/patterns/slider/examples/slider-rating.md +++ b/ARIA/apg/patterns/slider/examples/slider-rating.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/ sidebar: true -footer: "

View issues related to this example

Page last updated: 23 July 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -377,13 +377,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/slider/examples/slider-seek.md b/ARIA/apg/patterns/slider/examples/slider-seek.md index 712f1fc93..210d17ba0 100644 --- a/ARIA/apg/patterns/slider/examples/slider-seek.md +++ b/ARIA/apg/patterns/slider/examples/slider-seek.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-seek/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -369,13 +369,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/slider/examples/slider-temperature.md b/ARIA/apg/patterns/slider/examples/slider-temperature.md index 5d7c7608d..6b98f8ed8 100644 --- a/ARIA/apg/patterns/slider/examples/slider-temperature.md +++ b/ARIA/apg/patterns/slider/examples/slider-temperature.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-temperature/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -350,13 +350,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md b/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md index 8f33812d5..30437c920 100644 --- a/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md +++ b/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -391,13 +391,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/switch/examples/switch-button.md b/ARIA/apg/patterns/switch/examples/switch-button.md index e308d9aaa..e56272acd 100644 --- a/ARIA/apg/patterns/switch/examples/switch-button.md +++ b/ARIA/apg/patterns/switch/examples/switch-button.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/switch/examples/switch-button/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -289,13 +289,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/switch/examples/switch-checkbox.md b/ARIA/apg/patterns/switch/examples/switch-checkbox.md index 3d12de9b5..5ea4affa1 100644 --- a/ARIA/apg/patterns/switch/examples/switch-checkbox.md +++ b/ARIA/apg/patterns/switch/examples/switch-checkbox.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/switch/examples/switch-checkbox/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -247,13 +247,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/switch/examples/switch.md b/ARIA/apg/patterns/switch/examples/switch.md index 6bd484bbc..f67508901 100644 --- a/ARIA/apg/patterns/switch/examples/switch.md +++ b/ARIA/apg/patterns/switch/examples/switch.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/switch/examples/switch/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -253,13 +253,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/table/examples/sortable-table.md b/ARIA/apg/patterns/table/examples/sortable-table.md index af1b6b140..485177774 100644 --- a/ARIA/apg/patterns/table/examples/sortable-table.md +++ b/ARIA/apg/patterns/table/examples/sortable-table.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/table/examples/sortable-table/ sidebar: true -footer: "

View issues related to this example

Page last updated: 26 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -270,13 +270,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/table/examples/table.md b/ARIA/apg/patterns/table/examples/table.md index 21a1cfaa7..b6152fd3b 100644 --- a/ARIA/apg/patterns/table/examples/table.md +++ b/ARIA/apg/patterns/table/examples/table.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/table/examples/table/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -234,13 +234,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/tabs/examples/tabs-automatic.md b/ARIA/apg/patterns/tabs/examples/tabs-automatic.md index e1505f8ed..b44504822 100644 --- a/ARIA/apg/patterns/tabs/examples/tabs-automatic.md +++ b/ARIA/apg/patterns/tabs/examples/tabs-automatic.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/tabs/examples/tabs-automatic/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -410,13 +410,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/tabs/examples/tabs-manual.md b/ARIA/apg/patterns/tabs/examples/tabs-manual.md index 6f10d79a8..03e27d01f 100644 --- a/ARIA/apg/patterns/tabs/examples/tabs-manual.md +++ b/ARIA/apg/patterns/tabs/examples/tabs-manual.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/tabs/examples/tabs-manual/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -404,13 +404,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/toolbar/examples/toolbar.md b/ARIA/apg/patterns/toolbar/examples/toolbar.md index 1b09b0f01..0de29f4dc 100644 --- a/ARIA/apg/patterns/toolbar/examples/toolbar.md +++ b/ARIA/apg/patterns/toolbar/examples/toolbar.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/toolbar/examples/toolbar/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -1022,13 +1022,14 @@ But, in a larger sense, we can not dedicate, we can not consecrate, we can not h
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/treegrid/examples/treegrid-1.md b/ARIA/apg/patterns/treegrid/examples/treegrid-1.md index 6b1b1b554..ef6ffd2f6 100644 --- a/ARIA/apg/patterns/treegrid/examples/treegrid-1.md +++ b/ARIA/apg/patterns/treegrid/examples/treegrid-1.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treegrid/examples/treegrid-1/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -521,13 +521,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/treeview/examples/treeview-1a.md b/ARIA/apg/patterns/treeview/examples/treeview-1a.md index faf5a902f..9ffb4e553 100644 --- a/ARIA/apg/patterns/treeview/examples/treeview-1a.md +++ b/ARIA/apg/patterns/treeview/examples/treeview-1a.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-1a/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -485,13 +485,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/treeview/examples/treeview-1b.md b/ARIA/apg/patterns/treeview/examples/treeview-1b.md index 9b95fe6c0..b519aac25 100644 --- a/ARIA/apg/patterns/treeview/examples/treeview-1b.md +++ b/ARIA/apg/patterns/treeview/examples/treeview-1b.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-1b/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -511,13 +511,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/ARIA/apg/patterns/treeview/examples/treeview-navigation.md b/ARIA/apg/patterns/treeview/examples/treeview-navigation.md index b0588751d..dd25bde9a 100644 --- a/ARIA/apg/patterns/treeview/examples/treeview-navigation.md +++ b/ARIA/apg/patterns/treeview/examples/treeview-navigation.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-navigation/ sidebar: true -footer: "

View issues related to this example

Page last updated: 13 February 2024

" +footer: "

View issues related to this example

Page last updated: 27 July 2024

" # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -747,13 +747,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
+

HTML Source Code

+

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

diff --git a/_external/aria-practices b/_external/aria-practices index cb74ba2d8..b28a984ee 160000 --- a/_external/aria-practices +++ b/_external/aria-practices @@ -1 +1 @@ -Subproject commit cb74ba2d812a07779f83119459f2289bb3d29f96 +Subproject commit b28a984eef2669c5809444222babe39c7fe72ca9 diff --git a/content-assets/wai-aria-practices/shared/css/core.css b/content-assets/wai-aria-practices/shared/css/core.css index ab1619cdb..f6b1f1068 100644 --- a/content-assets/wai-aria-practices/shared/css/core.css +++ b/content-assets/wai-aria-practices/shared/css/core.css @@ -69,6 +69,7 @@ th .example-header { margin-left: 1em; } +.example-code button, .example-header button { display: inline-block; position: relative; diff --git a/content-assets/wai-aria-practices/shared/js/examples.js b/content-assets/wai-aria-practices/shared/js/examples.js index 27beafe0e..ac03b91d9 100644 --- a/content-assets/wai-aria-practices/shared/js/examples.js +++ b/content-assets/wai-aria-practices/shared/js/examples.js @@ -54,6 +54,7 @@ aria.widget.SourceCode = function () { this.code = new Array(); this.exampleHeader = new Array(); this.resources = new Array(); + this.HTMLDescription = new Array(); }; /** @@ -63,6 +64,7 @@ aria.widget.SourceCode = function () { * @param {string} codeId - ID of element containing only and all of the html used to render the example widget * @param {string} exampleHeaderId - ID of header element under which the "Open in Codepen" button belongs * @param {string} cssJsFilesId - ID of element containing links to all the relevant js and css files used for the example widget + * @param {string} HTMLDescriptionId - ID of the separator element under the HTML Source Code which the "Open in Codepen" button belongs * @function add * @memberof aria.widget.SourceCode */ @@ -70,11 +72,13 @@ aria.widget.SourceCode.prototype.add = function ( locationId, codeId, exampleHeaderId, - cssJsFilesId + cssJsFilesId, + HTMLDescriptionId ) { this.location[this.location.length] = locationId; this.code[this.code.length] = codeId; this.exampleHeader[this.exampleHeader.length] = exampleHeaderId; + this.HTMLDescription[this.HTMLDescription.length] = HTMLDescriptionId; this.resources[this.resources.length] = cssJsFilesId; }; @@ -88,10 +92,20 @@ aria.widget.SourceCode.prototype.make = function () { for (var i = 0; i < this.location.length; i++) { var sourceCodeNode = document.getElementById(this.location[i]); var nodeCode = document.getElementById(this.code[i]); + var exampleAmount = document.querySelectorAll('[id^="ex"]'); sourceCodeNode.className = 'sourcecode'; this.createCode(sourceCodeNode, nodeCode, 0, true); + if (this.HTMLDescription[i]) { + addOpenInCodePenForm( + i + exampleAmount, + this.HTMLDescription[i], + this.code[i], + this.resources[i] + ); + } + // Remove unnecessary `
` element. if (sourceCodeNode.innerHTML.startsWith('
')) { sourceCodeNode.innerHTML = sourceCodeNode.innerHTML.replace('
', ''); @@ -369,7 +383,7 @@ function addOpenInCodePenForm( exampleFilesId ) { var jsonInputId = 'codepen-data-ex-' + exampleIndex; - var buttonId = exampleCodeId + '-codepenbutton'; + var buttonId = exampleHeaderId + '-codepenbutton'; var form = document.createElement('form'); form.setAttribute('action', 'https://codepen.io/pen/define'); From 0adbc072711760bfe4cfbcd1859c95129d0e2a9f Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Sun, 28 Jul 2024 17:07:13 +0000 Subject: [PATCH 09/13] Commit changes --- ARIA/apg/index/index.md | 2 ++ _external/aria-practices | 2 +- content-assets/wai-aria-practices/shared/js/app.js | 14 ++++++++++---- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/ARIA/apg/index/index.md b/ARIA/apg/index/index.md index 13e067517..c3ccfc95e 100644 --- a/ARIA/apg/index/index.md +++ b/ARIA/apg/index/index.md @@ -67,6 +67,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

Examples by Role

@@ -949,6 +950,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
+ diff --git a/_external/aria-practices b/_external/aria-practices index b28a984ee..2a2e1484c 160000 --- a/_external/aria-practices +++ b/_external/aria-practices @@ -1 +1 @@ -Subproject commit b28a984eef2669c5809444222babe39c7fe72ca9 +Subproject commit 2a2e1484c90063f1bd72f52594e4e7d41c39daf8 diff --git a/content-assets/wai-aria-practices/shared/js/app.js b/content-assets/wai-aria-practices/shared/js/app.js index 58cbd1e86..05f444abf 100644 --- a/content-assets/wai-aria-practices/shared/js/app.js +++ b/content-assets/wai-aria-practices/shared/js/app.js @@ -20,14 +20,20 @@ // Determine we are on an example page if (!document.location.href.match(/examples\/[^/]+\.html/)) return; + const isExperimental = + document.querySelector('main')?.getAttribute('data-content-phase') === + 'experimental'; + + const usageWarningLink = isExperimental + ? '/templates/experimental-example-usage-warning.html' + : '/templates/example-usage-warning.html'; + // Generate the usage warning link using app.js link as a starting point const scriptSource = document .querySelector('[src$="app.js"]') .getAttribute('src'); - const fetchSource = scriptSource.replace( - '/js/app.js', - '/templates/example-usage-warning.html' - ); + + const fetchSource = scriptSource.replace('/js/app.js', usageWarningLink); // Load and parse the usage warning and insert it before the h1 const html = await (await fetch(fetchSource)).text(); From 1a3d452ca06a764954904f3cecbff1763d936b5a Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 30 Jul 2024 07:07:29 +0000 Subject: [PATCH 10/13] Commit changes --- ARIA/apg/patterns/patterns.md | 237 +++++++++++------- _external/aria-practices | 2 +- .../shared/js/filterBySearch.js | 175 +++++++++++++ 3 files changed, 322 insertions(+), 92 deletions(-) create mode 100644 content-assets/wai-aria-practices/shared/js/filterBySearch.js diff --git a/ARIA/apg/patterns/patterns.md b/ARIA/apg/patterns/patterns.md index 1071f0b85..904ff9bea 100644 --- a/ARIA/apg/patterns/patterns.md +++ b/ARIA/apg/patterns/patterns.md @@ -26,6 +26,7 @@ lang: en + -
  • +
    +

    Filter Patterns

    +
    +
    + + + +
    +
    + + +
    +
    +
    +
      +
    • -

      +

      Accordion (Sections With Show/Hide Functionality)

      -
      +
      An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.
      • -
    • +
    • -

      +

      Alert

      -
      +
      An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
      • -
    • +
    • -

      +

      Alert and Message Dialogs

      -
      +
      An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.
      • -
    • +
    • -

      +

      Breadcrumb

      -
      +
      A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order.
      • -
    • +
    • -

      +

      Button

      -
      +
      A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
      • -
    • +
    • -

      +

      Carousel (Slide Show or Image Rotator)

      -
      +
      A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.
      • -
    • +
    • -

      +

      Checkbox

      -
      +
      WAI-ARIA supports two types of checkbox widgets: dual-state checkboxes toggle between two choices -- checked and not checked -- and tri-state checkboxes, which allow an additional third state known as partially checked.
      • -
    • +
    • -

      +

      Combobox

      -
      +
      A combobox is an input widget that has an associated popup.
      • -
    • +
    • -

      +

      Dialog (Modal)

      -
      +
      A dialog is a window overlaid on either the primary window or another dialog window.
      • -
    • +
    • -

      +

      Disclosure (Show/Hide)

      -
      +
      A disclosure is a widget that enables content to be either collapsed (hidden) or expanded (visible).
      • -
    • +
    • -

      +

      Feed

      -
      +
      A feed is a section of a page that automatically loads new sections of content as the user scrolls.
      • -
    • +
    • -

      +

      Grid (Interactive Tabular Data and Layout Containers)

      -
      +
      A grid widget is a container that enables users to navigate the information or interactive elements it contains using directional navigation keys, such as arrow keys, Home, and End.
      • -
    • +
    • -

      +

      Landmarks

      -
      +
      Landmarks are a set of eight roles that identify the major sections of a page.
      • -
    • +
    • -

      +

      Link

      -
      +
      A link widget provides an interactive reference to a resource.
      • -
    • +
    • -

      +

      Listbox

      -
      +
      A listbox widget presents a list of options and allows a user to select one or more of them.
      • -
    • +
    • -

      +

      Menu and Menubar

      -
      +
      A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
      • -
    • +
    • -

      +

      Menu Button

      -
      +
      A menu button is a button that opens a menu as described in the Menu and Menubar Pattern.
      • -
    • +
    • -

      +

      Meter

      -
      +
      A meter is a graphical display of a numeric value that varies within a defined range.
      • -
    • +
    • -

      +

      Radio Group

      -
      +
      A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
      • -
    • +
    • -

      +

      Slider

      -
      +
      A slider is an input where the user selects a value from within a given range.
      • -
    • +
    • -

      +

      Slider (Multi-Thumb)

      -
      +
      A multi-thumb slider implements the Slider Pattern but includes two or more thumbs, often on a single rail.
      • -
    • +
    • -

      +

      Spinbutton

      -
      +
      A spinbutton is an input widget that restricts its value to a set or range of discrete values.
      • -
    • +
    • -

      +

      Switch

      -
      +
      A switch is an input widget that allows users to choose one of two values: on or off.
      • -
    • +
    • -

      +

      Table

      -
      +
      Like an HTML table element, a WAI-ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget.
      • -
    • +
    • -

      +

      Tabs

      -
      +
      Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
      • -
    • +
    • -

      +

      Toolbar

      -
      +
      A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.
      • -
    • +
    • -

      +

      Tooltip

      -
      +
      A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
      • -
    • +
    • -

      +

      Tree View

      -
      +
      A tree view widget presents a hierarchical list.
      • -
    • +
    • -

      +

      Treegrid

      -
      +
      A treegrid widget presents a hierarchical data grid consisting of tabular information that is editable or interactive.
      • -
    • +
    • -

      +

      Window Splitter

      -
      +
      A window splitter is a moveable separator between two sections, or panes, of a window that enables users to change the relative size of the panes.
      • + +
    diff --git a/_external/aria-practices b/_external/aria-practices index 2a2e1484c..8e5825a25 160000 --- a/_external/aria-practices +++ b/_external/aria-practices @@ -1 +1 @@ -Subproject commit 2a2e1484c90063f1bd72f52594e4e7d41c39daf8 +Subproject commit 8e5825a2543cf503b62c0558d480290dab66a02f diff --git a/content-assets/wai-aria-practices/shared/js/filterBySearch.js b/content-assets/wai-aria-practices/shared/js/filterBySearch.js new file mode 100644 index 000000000..38b3e14a2 --- /dev/null +++ b/content-assets/wai-aria-practices/shared/js/filterBySearch.js @@ -0,0 +1,175 @@ +'use strict'; + +/** + * @namespace aria + */ + +var aria = aria || {}; + +/* ---------------------------------------------------------------- */ +/* ARIA Filter Namespace */ +/* ---------------------------------------------------------------- */ + +aria.Filter = aria.Filter || {}; + +/** + * Filters list items within a container based on a search term. + * + * @function + * @memberof aria.Filter + * @param {string} searchTerm - The term to filter the list items by. + * @param {string} containerSelector - The CSS selector for the container holding the list items. + * @param {string} className - The class name of the elements within each list item to be checked against the search term. + * @param {string} noResultsElementId - The id of the element to show when no results are found. + * @description + * This function filters the list items within a specified container by comparing the text content + * of elements with a given class name to the provided search term. List items that do not match + * the search term will be hidden. + */ +aria.Filter.filterListItems = function ( + searchTerm, + containerSelector, + className, + noResultsElementId +) { + const container = document.querySelector(containerSelector); + const listItems = container.getElementsByTagName('li'); + const filter = searchTerm.toUpperCase(); + let hasResults = false; + Array.from(listItems).forEach((element) => { + const isMatch = aria.Filter.applyFilterToElement( + element, + filter, + className + ); + if (isMatch) { + hasResults = true; + } + }); + aria.Filter.updateVisibility(noResultsElementId, !hasResults); +}; + +/** + * Updates the visibility of an element based on the search results. + * + * @function updateVisibility + * @param {string} id - The id of the element to update. + * @param {boolean} isVisible - True if the element should be visible, false otherwise. + */ +aria.Filter.updateVisibility = function (id, isVisible) { + const el = document.getElementById(id); + el.style.display = isVisible ? '' : 'none'; + el.setAttribute('aria-hidden', String(!isVisible)); +}; + +/** + * This function checks if the text content of the child element with the specified class name contains the filter term. + * If the text content matches the filter, th + * + * @function applyFilterToElement + * @param {HTMLElement} element - The element to which the visibility filter will be applied. + * @param {string} filter - The text filter term, already converted to uppercase. + * @param {string} className - The class name of the child element whose text content is checked against the filter. + * @returns {boolean} True if the filter term is found in the text value, false otherwise. + */ +aria.Filter.applyFilterToElement = function (element, filter, className) { + const targetElement = element.getElementsByClassName(className)[0]; + if (targetElement) { + const textValue = targetElement.textContent || targetElement.innerText; + const isMatch = aria.Filter.isTextMatch(textValue, filter); + element.style.display = isMatch ? '' : 'none'; + return isMatch; + } + return false; +}; + +/** + * Clears the input element and filters the list items based on the empty string. + * Sets focus back to the input element. + * + * @param {HTMLElement} inputElement - The input element to clear. + * @param {string} containerSelector - The CSS selector for the container holding the list items. + * @param {string} className - The class name of the elements within each list item to be checked against the search term. + * @param {string} noResultsElementId - The id of the element to show when no results are found. + */ +aria.Filter.clearInput = function ( + inputElement, + containerSelector, + className, + noResultsElementId +) { + inputElement.value = ''; + aria.Filter.filterListItems( + '', + containerSelector, + className, + noResultsElementId + ); + inputElement.focus(); +}; + +/** + * Determines if the provided text value contains the filter term, ignoring case. + * + * @function isTextMatch + * @param {string} textValue - The text to search within. + * @param {string} filter - The term to search for, which should already be in uppercase. + * @returns {boolean} True if the filter term is found in the text value, false otherwise. + */ +aria.Filter.isTextMatch = function (textValue, filter) { + return textValue.toUpperCase().indexOf(filter) > -1; +}; + +/** + * Handles the click event for a pattern results view button. + * + * @param {HTMLElement} selectedViewButton - The view button that was clicked. + */ +aria.Filter.onViewButtonClicked = function (selectedViewButton) { + aria.Filter.deactivateAllViewButtons(); + aria.Filter.updateActiveViewButton(selectedViewButton); + + const newViewClassName = aria.Filter.getNewViewClassName(selectedViewButton); + aria.Filter.setResultsViewClass(newViewClassName); +}; + +/** + * Deactivates all view buttons by setting aria-pressed attribute and removing 'active' class + */ +aria.Filter.deactivateAllViewButtons = function () { + const buttons = document.querySelectorAll('.view-toggle button'); + buttons.forEach((btn) => { + btn.setAttribute('aria-pressed', 'false'); + btn.classList.remove('active'); + }); +}; + +/** + * Determines the new view class name based on the selected view button. + * + * @param {HTMLElement} selectedViewButton - The view button that was clicked. + * @returns {string} The new view class name. + */ +aria.Filter.getNewViewClassName = function (selectedViewButton) { + return selectedViewButton.id === 'listViewButton' ? 'list' : 'tiles'; +}; + +/** + * Updates the active view button by setting aria-pressed attribute and adding 'active' class + * + * @param {HTMLElement} selectedViewButton - The view button that was clicked. + */ +aria.Filter.updateActiveViewButton = function (selectedViewButton) { + selectedViewButton.setAttribute('aria-pressed', 'true'); + selectedViewButton.classList.add('active'); +}; + +/** + * Sets the class name of the patterns result container to either 'list' or 'tiles' based on the selected view button + * + * @param {string} viewClass - The class name of the patterns result container. + */ +aria.Filter.setResultsViewClass = function (viewClass) { + const patternsContainer = document.getElementById('patterns'); + patternsContainer.className = viewClass; +}; From 2f061a96e074568463aeb16991cf5e5f0527d6e5 Mon Sep 17 00:00:00 2001 From: Stalgia Grigg Date: Wed, 31 Jul 2024 06:57:22 -0700 Subject: [PATCH 11/13] Feature: Search for patterns, toggle grid/list view (#329) * Update with APG feature branch content * Initial style updates * layout for search form * Final pass on styles, built MD file * Remove unused icon assetts * Update build repo after moving view toggle js code * Styles for accessible h2 for Filter form * No results found element and styles * Fix styling for practices tiles * Updates for clear button and removal of submit in filter patterns * Update aria-practices gitmodule latest commit --------- Co-authored-by: Howard Edwards --- content-assets/wai-aria-practices/styles.css | 184 +++++++++++++++++-- 1 file changed, 172 insertions(+), 12 deletions(-) diff --git a/content-assets/wai-aria-practices/styles.css b/content-assets/wai-aria-practices/styles.css index 66e05d655..3971ff7be 100644 --- a/content-assets/wai-aria-practices/styles.css +++ b/content-assets/wai-aria-practices/styles.css @@ -87,6 +87,105 @@ a.skip-main:focus, a.skip-main:active { } /* Patterns and Practices */ +.pattern-filter-section { + background-color: var(--cloudy-subtle); + padding: 2em 1em; + margin: 1em 0; + border-radius: 4px; +} + +.pattern-filter-section h2 { + margin-top: 0; +} + +.pattern-filter-flex-container { + display: flex; + flex-direction: row; + align-items: center; +} + +.pattern-filter-section form { + display: flex; + flex: 1; + margin-right: 1em; +} + +.pattern-filter-section form svg { + background-color: var(--pure-white); + border: solid 1px var(--light-blue); + border-right: none; + color: var(--grey); + padding: 0 0.25em 0 0.5em; + border-radius: 4px 0 0 4px; +} + +.pattern-filter-section form input { + flex: 1; + margin-right: 0; + border-left: none !important; + border-right: none !important; +} + +.pattern-filter-section form input, +.pattern-filter-section form svg, +#clear-pattern-filter { + border-color: #8fadce !important; +} + +.pattern-filter-section form input::placeholder { + font-style: normal; + font-size: 1em; +} + +#clear-pattern-filter { + background-color: var(--pure-white); + border: solid 1px; + border-left: none; + color: var(--grey); + padding: 0 0.25em 0 0.5em; + border-radius: 0 4px 4px 0; + cursor: pointer; +} + +#clear-pattern-filter svg { + border: none; +} + +.view-toggle { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 0; +} + +.view-toggle button { + padding: 0.3em; + background-color: #e7eff7; + border: solid 1px #8fadce; + color: #8fadce; + width: 28px; + height: 35px; +} + +.view-toggle button.active { + color: var(--wai-green); + background-color: var(--lt-off-white); +} + +.view-toggle button svg { + width: 22px; + height: auto; +} + +.view-toggle button:first-child { + border-radius: 4px 0 0 4px; +} + +.view-toggle button:last-child { + border-radius: 0 4px 4px 0; + border-left: none; +} + ul.tiles { display: grid; row-gap: 50px; @@ -97,71 +196,131 @@ ul.tiles { grid-template-columns: 49% 49%; column-gap: 2%; } + + .view-toggle button { + width: 40px; + height: 40px; + } } @media screen and (min-width: 70em) { ul.tiles { grid-template-columns: 32% 32% 32%; column-gap: 2%; } + + .view-toggle button svg { + width: 22px; + height: auto; + } +} + +ul.list { + display: grid; + grid-template-columns: 1fr; + row-gap: 0; + padding: 2em; + background: #ffffff; + border: 1px solid var(--line-grey); + border-radius: 4px; + row-gap: 1em; +} + +ul.list img { + width: 46px; + height: auto; } -li.tile { +#patterns #no-patterns-found { + list-style: none; +} + +#patterns #no-patterns-found h2 { + border: none; +} + +li.tile, +li.pattern { align-self: stretch; list-style: none; margin: 0; padding: 2em 2em 0; - background: #ffffff; height: 100%; border: 1px solid var(--line-grey); border-radius: 4px; } -li.tile a { +ul.list li.pattern { + border: none; + border-bottom: 1px solid var(--line-grey); + padding: 0.6em 0 0.5em 0; +} + +ul.list li.pattern:last-child { + border-bottom: none; +} + +li.tile a, +li.pattern a { display: block; text-decoration: none; color: var(--wai-green); } -li.tile a:hover { +li.tile a:hover, +li.pattern a:hover { text-decoration: underline; } -li.tile a:focus { +li.tile a:focus, +li.pattern a:focus { outline-offset: 8px; outline-color: #113362; } -li.tile a:visited { +li.tile a:visited, +li.pattern a:visited { color: var(--wai-green); } -li.tile h2.tile-name { +li.tile h2.tile-name, +li.pattern h2.pattern-name { margin: 0; border: none; display: flex; align-items: flex-start; } -li.tile img { +li.pattern img { margin-right: 1em; } @media screen and (max-width: 23em) { - li.tile h2.tile-name { + li.tile h2.tile-name, + li.pattern h2.pattern-name { flex-direction: column; } - li.tile h2.tile-name span { + li.tile h2.tile-name span, + li.pattern h2.pattern-name span { margin-top: 0.5em; } } -li.tile .tile-introduction { +li.tile .tile-introduction, +li.pattern .pattern-introduction { float: left; border-top: 1px solid var(--line-grey); padding-top: 1em; margin-top: 1.25em; } +ul.list .pattern-introduction { + border-top: none; + padding-top: 0; + margin-top: -12px; + margin-left: 4.25em; + max-width: 820px; +} + ul.content-list { list-style-type: none; padding: 0 1.5em; @@ -263,7 +422,8 @@ ul.sidebar-list li a code { display: inline-block; } -li .tile-introduction { +li .tile-introduction, +li .pattern-introduction { color: rgb(29, 29, 29); } From 3e4a870925d809fb9d4dceed9d2bababb30bf562 Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Wed, 31 Jul 2024 15:17:12 +0000 Subject: [PATCH 12/13] Commit changes --- ARIA/apg/patterns/grid/examples/data-grids.md | 2 +- ARIA/apg/patterns/grid/examples/layout-grids.md | 2 +- _external/aria-practices | 2 +- .../wai-aria-practices/patterns/grid/examples/js/dataGrid.js | 5 +++-- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/ARIA/apg/patterns/grid/examples/data-grids.md b/ARIA/apg/patterns/grid/examples/data-grids.md index 0ccbcd1b6..f5fc642f2 100644 --- a/ARIA/apg/patterns/grid/examples/data-grids.md +++ b/ARIA/apg/patterns/grid/examples/data-grids.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/data-grids/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 27 July 2024

    " +footer: "

    View issues related to this example

    Page last updated: 31 July 2024

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/ARIA/apg/patterns/grid/examples/layout-grids.md b/ARIA/apg/patterns/grid/examples/layout-grids.md index 5312e04c2..d6db96be9 100644 --- a/ARIA/apg/patterns/grid/examples/layout-grids.md +++ b/ARIA/apg/patterns/grid/examples/layout-grids.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/layout-grids/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 27 July 2024

    " +footer: "

    View issues related to this example

    Page last updated: 31 July 2024

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG diff --git a/_external/aria-practices b/_external/aria-practices index 8e5825a25..081e028f2 160000 --- a/_external/aria-practices +++ b/_external/aria-practices @@ -1 +1 @@ -Subproject commit 8e5825a2543cf503b62c0558d480290dab66a02f +Subproject commit 081e028f2fb171617e1a91cafa096f9ef60a0c07 diff --git a/content-assets/wai-aria-practices/patterns/grid/examples/js/dataGrid.js b/content-assets/wai-aria-practices/patterns/grid/examples/js/dataGrid.js index 375fd4063..0c1a0dcf7 100644 --- a/content-assets/wai-aria-practices/patterns/grid/examples/js/dataGrid.js +++ b/content-assets/wai-aria-practices/patterns/grid/examples/js/dataGrid.js @@ -194,9 +194,10 @@ aria.Grid.prototype.isValidCell = function (row, col) { * Returns whether or not the cell has been hidden. */ aria.Grid.prototype.isHidden = function (row, col) { + // prettier-ignore var cell = this.gridNode - .querySelectorAll(aria.GridSelector.ROW) - [row].querySelectorAll(aria.GridSelector.CELL)[col]; + .querySelectorAll(aria.GridSelector.ROW)[row] + .querySelectorAll(aria.GridSelector.CELL)[col]; return aria.Utils.hasClass(cell, aria.CSSClass.HIDDEN); }; From 57c39fa952ee13dae85a6eb1daf52d1cfa6cd9bf Mon Sep 17 00:00:00 2001 From: daniel-montalvo Date: Tue, 6 Aug 2024 16:13:32 +0000 Subject: [PATCH 13/13] Commit changes --- ARIA/apg/practices/read-me-first/read-me-first-practice.md | 4 ++-- _external/aria-practices | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ARIA/apg/practices/read-me-first/read-me-first-practice.md b/ARIA/apg/practices/read-me-first/read-me-first-practice.md index 3ce8c21c3..604ff865b 100644 --- a/ARIA/apg/practices/read-me-first/read-me-first-practice.md +++ b/ARIA/apg/practices/read-me-first/read-me-first-practice.md @@ -101,8 +101,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); </table> <ul role="navigation"> <!-- This is a navigation region, not a list. --> - <li><a href="uri1">nav link 1</li> - <li><a href="uri2">nav link 2</li> + <li><a href="uri1">nav link 1</a></li> + <li><a href="uri2">nav link 2</a></li> <!-- ERROR! Previous list items are not in a list! --> </ul>
    • diff --git a/_external/aria-practices b/_external/aria-practices index 081e028f2..2d60c413e 160000 --- a/_external/aria-practices +++ b/_external/aria-practices @@ -1 +1 @@ -Subproject commit 081e028f2fb171617e1a91cafa096f9ef60a0c07 +Subproject commit 2d60c413ec23875a30162364a7e715b26875d9db