From c7cefbda2ebba67e209dfebbeed4d4468fa2c68a Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 18 Mar 2025 15:49:28 -0700 Subject: [PATCH 01/23] initial commit --- .../examples/css/expandable-region.css | 264 ++++++++++++++ .../examples/expandable-region.html | 324 ++++++++++++++++++ .../examples/js/expandable-region.js | 44 +++ .../expandable-region/expandable-region.html | 43 +++ content/patterns/patterns.html | 12 + 5 files changed, 687 insertions(+) create mode 100644 content/patterns/expandable-region/examples/css/expandable-region.css create mode 100644 content/patterns/expandable-region/examples/expandable-region.html create mode 100644 content/patterns/expandable-region/examples/js/expandable-region.js create mode 100644 content/patterns/expandable-region/expandable-region.html diff --git a/content/patterns/expandable-region/examples/css/expandable-region.css b/content/patterns/expandable-region/examples/css/expandable-region.css new file mode 100644 index 0000000000..e406673816 --- /dev/null +++ b/content/patterns/expandable-region/examples/css/expandable-region.css @@ -0,0 +1,264 @@ +.expandable-regions { + interpolate-size: allow-keywords; + --color-interactive-idle: transparent; + --color-interactive-hover: gray; + --color-interactive-hover-text: black; + --color-interactive-focus: blue; + --color-interactive-focus-text: blue; + --transition-duration: 0.15s; + + @media (forced-colors: active) { + --color-interactive-idle: Canvas; + --color-interactive-hover: Highlight; + --color-interactive-hover-text: Highlight; + --color-interactive-focus: Highlight; + --color-interactive-focus-text: Highlight; + --transition-duration: 0; + } + + font-family: system-ui, sans-serif; + font-size: calc(10/16 * 1rem); + line-height: 1.4; + background-color: ghostwhite; + margin-inline: -2em; + padding: 2em; + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + *:focus { + outline: calc(0.25rem * 10/16) solid var(--color-interactive-focus); + outline-offset: calc(0.25rem * 10/16); + } + + h1, h2, h3, h4, h5, h6 { + line-height: 1.25; + text-wrap: balance; + } + + h3 { + font-weight: 500; + font-size: calc(3.2rem * 10/16); + } + + h4 { + font-size: calc(1.8rem * 10/16); + font-weight: 500; + margin-block: 0 calc(2rem * 10/16); + text-transform: uppercase; + color: darkslategray; + } + + button { + appearance: none; + font: inherit; + color: inherit; + border: none; + background: none; + } + + button:not([aria-expanded]) { + font-size: calc(20/16 * 1rem); + padding: 0.5ch 1ch; + border: 1px solid black; + color: white; + font-weight: bold; + background-color: rebeccapurple; + border-radius: calc(0.25rem * 10/16); + + &:hover, &:focus { + background-color: darkorchid; + } + + &:active { + background-color: midnightblue; + } + } + + .expandable { + border: 0.2em solid transparent; + outline: 0 solid transparent; + outline-offset: 0; + transition: + outline-offset var(--transition-duration) ease, + outline-width var(--transition-duration) ease, + outline-color var(--transition-duration) ease, + border-color var(--transition-duration) ease; + + &:has(button[aria-expanded]:focus), + &[data-being-pressed] { + outline-offset: 0.25em; + outline-width: 0.3em; + outline-color: var(--color-interactive-focus); + + button[aria-expanded] { + color: var(--color-interactive-focus-text); + text-decoration-color: var(--color-interactive-focus); + } + } + + &[data-being-pressed] { + outline-width: 0.6em; + } + + button[aria-expanded] { + display: inline-flex; + gap: 0.175ch; + border: 0; + outline: 0; + font-weight: 600; + text-decoration: underline; + text-underline-offset: calc(1.4rem * 10/16); + text-decoration-color: var(--color-interactive-idle); + text-decoration-thickness: calc(0.2rem * 10/16); + + transition: + color var(--transition-duration) ease, + text-underline-offset var(--transition-duration) ease, + text-decoration-color var(--transition-duration) ease; + + svg { + scale: 0.8; + rotate: 0; + transition: + scale var(--transition-duration) ease, + rotate var(--transition-duration) ease; + } + + &[aria-expanded="true"] svg { + rotate: -180deg; + } + } + + &:hover { + border-color: var(--color-interactive-hover); + } + + &:has(button[aria-expanded]:focus), + &:hover { + [aria-expanded] { + color: var(--color-interactive-hover-text); + text-underline-offset: calc(.4rem * 10/16); + text-decoration-color: var(--color-interactive-hover-text); + + svg { + scale: 1; + } + } + } + } + + main, .days, .sessions { + list-style: none; + display: flex; + flex-wrap: wrap; + gap: 2em; + } + + main, .sessions { + flex-direction: column; + } + + .days { + margin-block: 2em; + } + + .days, .sessions { + gap: 1em; + } + + .session { + padding: 1.5em 1.5em 0 1.5em; + background-color: white; + box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.2); + margin: 0.25em; + border-radius: 0.25em; + max-inline-size: calc(39rem * 10/16); + + header, hgroup { + display: flex; + flex-direction: column; + gap: 0.5em; + color: darkslategray; + } + + hgroup { + color: black; + font-weight: 400; + + h5 { + color: black; + font-size: 2.0em; + font-style: normal; + font-weight: 700; + } + + p { + font-size: 1.8em; + } + } + + hgroup + p { + display: flex; + flex-wrap: wrap; + font-size: 1.6em; + margin-block-start: calc(1rem * 10/16); + } + + .location { + padding-inline-end: 1ch; + border-inline-end: calc(0.175rem * 10/16) solid lightgray; + margin-inline-end: 0.75ch; + } + } + + .details { + block-size: auto; + opacity: 1; + overflow-y: clip; + font-size: 1.6em; + transition: all 0.5s ease; + padding-block-end: calc(1.5rem * 10/16); + + &[inert] { + block-size: 0; + opacity: 0; + } + + .description { + display: flex; + flex-direction: column; + gap: calc(1.5rem * 10/16); + padding-block-start: calc(1.5rem * 10/16); + + > *:first-child { + border-block-start: calc(0.175rem * 10/16) solid lightgray; + padding-block-start: calc(1.5rem * 10/16); + } + } + + form { + display: flex; + flex-direction: column; + gap: calc(1.6rem * 10/16); + margin-block-start: calc(1.5rem * 10/16); + border-block-start: calc(0.175rem * 10/16) solid lightgray; + padding-block-start: calc(1.5rem * 10/16); + + h6 { + font-size: calc(20/16 * 1em); + font-weight: 600; + font-variant-caps: normal; + } + + label:has(input[type="checkbox"]) { + display: flex; + gap: 0.75ch; + align-items: baseline; + } + } + } +} diff --git a/content/patterns/expandable-region/examples/expandable-region.html b/content/patterns/expandable-region/examples/expandable-region.html new file mode 100644 index 0000000000..6f4427d871 --- /dev/null +++ b/content/patterns/expandable-region/examples/expandable-region.html @@ -0,0 +1,324 @@ + + + + + + Example Expandable Region + + + + + + + + + + + + + + + +
+

Example Expandable Region

+ +
+

About This Example

+

Content TBD

+
+ +
+
+

Example

+
+ +
+

Highwind Accessibility Conference

+
    +
  1. +

    Monday

    +
      +
    1. + +
    2. + +
      3. +
    3. + +
      4. +
    +
    2. +
  2. +

    Tuesday

    +
      +
    1. + +
      2. +
    2. + +
      3. +
    3. + +
      4. +
    +
    3. +
+
+ +
+ +
+

Accessibility Features

+

Content TBD

+
+ +
+

Keyboard Support

+

Content TBD

+ + + + + + + + + + + + + +
KeyFunction
+ Tab
+ Shift + Tab + 		Content TBD
+
+ +
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
+ aria-controls="IDREF" + + button + Content TBD
+
+ +
+

JavaScript and CSS Source Code

+ + +
+ +
+

HTML Source Code

+

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

+ +
+ + +
+
+ + diff --git a/content/patterns/expandable-region/examples/js/expandable-region.js b/content/patterns/expandable-region/examples/js/expandable-region.js new file mode 100644 index 0000000000..dd88bbad8e --- /dev/null +++ b/content/patterns/expandable-region/examples/js/expandable-region.js @@ -0,0 +1,44 @@ +/* + * This content is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * + * Supplemental JS for expandable region event handling + */ + +'use strict'; + +document.addEventListener('click', (e) => { handleInteraction(e, true); }); +document.addEventListener('mousedown', (e) => { handleInteraction(e, false); }); +document.addEventListener('mouseup', handlePressEnd); + +function handleInteraction(e, isClick) { + const expandable = e.target.closest('.expandable'); + if (!expandable) return; + + const button = expandable.querySelector('button[aria-expanded]'); + const isTextSelected = window.getSelection().toString().length > 0; + const target = e.target; + const targetTag = target.tagName.toLowerCase(); + + // Don’t proceed if the user has: + // - Triggered event on any nested focusable other than the expandable button + // - Triggered event on a label element + // - Triggered event via text selection + if (button !== target && (isFocusable(target) || targetTag === 'label') || isTextSelected) return; + + if (isClick) { + const isExpanded = button.ariaExpanded === 'true'; + const details = expandable.querySelector('.details'); + button.ariaExpanded = isExpanded ? 'false' : 'true'; + details.inert = isExpanded; + button.focus(); + } else { + expandable.setAttribute('data-being-pressed', 'true'); + } +} + +function handlePressEnd() { + document.querySelector('.expandable[data-being-pressed]')?.removeAttribute('data-being-pressed'); +} + +const isFocusable = (element) => element.tabIndex >= 0 && !element.disabled; diff --git a/content/patterns/expandable-region/expandable-region.html b/content/patterns/expandable-region/expandable-region.html new file mode 100644 index 0000000000..3d9c77b33e --- /dev/null +++ b/content/patterns/expandable-region/expandable-region.html @@ -0,0 +1,43 @@ + + + + + + Expandable Region Pattern + + + + + + + + + +
+

Expandable Region Pattern

+ +
+

About This Pattern

+

Content TBD

+
+ +
+ +

Examples

+ +
+ +
+

Keyboard Interaction

+

Content TBD

+
+ +
+

WAI-ARIA Roles, States, and Properties

+

Content TBD

+
+
+ + diff --git a/content/patterns/patterns.html b/content/patterns/patterns.html index 88689af939..de7d0e3d39 100644 --- a/content/patterns/patterns.html +++ b/content/patterns/patterns.html @@ -190,6 +190,18 @@

+
  • + +

    + + Expandable region +

    +     +
    + Content TBD +
    +
    • +

  • From a274b6db0850447f30d7d860584ab3760a7a7ab1 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 18 Mar 2025 15:54:31 -0700 Subject: [PATCH 02/23] lint fixes --- .../coverage-and-quality-report.html | 35 ++++++++++++++++--- .../coverage-and-quality/prop-coverage.csv | 2 +- content/index/index.html | 1 + .../examples/expandable-region.html | 13 +++---- 4 files changed, 40 insertions(+), 11 deletions(-) diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index 95f9be2669..24c330fd8d 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -893,6 +893,7 @@

    Properties and States with More than One
  • Disclosure (Show/Hide) for Image Description (HC)
  • Disclosure Navigation Menu with Top-Level Links
  • Disclosure Navigation Menu (HC)
    • +
  • Expandable Region
  • Actions Menu Button Using aria-activedescendant (HC)
  • Actions Menu Button Using element.focus() (HC)
  • Navigation Menu Button (HC)
    • @@ -1278,7 +1279,7 @@

    Coding Summary

    Total Examples - 61 + 62 High Contrast Documentation @@ -1286,11 +1287,11 @@

    Coding Summary

    Uses SVG - 35 + 36 Uses forced-colors media query - 2 + 3 Uses currentColor value @@ -1320,7 +1321,7 @@

    Coding Summary

    Mouse Events - 16 + 17 Pointer Events @@ -1633,6 +1634,19 @@

    Coding Practices

    3 navigation,region,aria-label + + Expandable Region + + + + + ex1 + 2 + 0 + 4 + 1 + banner,region,aria-expanded,aria-hidden,aria-labelledby + Feed Display prototype @@ -2275,6 +2289,14 @@

    SVG and High Contrast Techniques

    Yes + + Expandable Region + Yes + Yes + + Yes + + Feed Display @@ -2543,6 +2565,11 @@

    Mouse and Pointer Events

    Yes + + Expandable Region + Yes + + (Deprecated) Collapsible Dropdown Listbox Yes diff --git a/content/about/coverage-and-quality/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv index f0f597ea16..2220097a27 100644 --- a/content/about/coverage-and-quality/prop-coverage.csv +++ b/content/about/coverage-and-quality/prop-coverage.csv @@ -7,7 +7,7 @@ "aria-colcount","1","1","Guidance: Using aria-colcount and aria-colindex","Example: Data Grid" "aria-colindex","3","1","Guidance: Using aria-colcount and aria-colindex","Guidance: Using aria-colindex When Column Indices Are Contiguous","Guidance: Using aria-colindex When Column Indices Are Not Contiguous","Example: Data Grid" "aria-colspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" -"aria-controls","0","21","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" +"aria-controls","0","22","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Expandable Region","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" "aria-current","0","5","Example: Breadcrumb","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Navigation Menubar","Example: Navigation Treeview" "aria-describedby","1","6","Guidance: Describing by referencing content with aria-describedby","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Table" "aria-details","0","0" diff --git a/content/index/index.html b/content/index/index.html index 43027a6d1a..2e9cd9ce8d 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -528,6 +528,7 @@

    Examples By Properties and States

  • Disclosure (Show/Hide) for Image Description (HC)
  • Disclosure Navigation Menu with Top-Level Links
  • Disclosure Navigation Menu (HC)
    • +
  • Expandable Region
  • Actions Menu Button Using aria-activedescendant (HC)
  • Actions Menu Button Using element.focus() (HC)
  • Navigation Menu Button (HC)
    • diff --git a/content/patterns/expandable-region/examples/expandable-region.html b/content/patterns/expandable-region/examples/expandable-region.html index 6f4427d871..c65c7e3236 100644 --- a/content/patterns/expandable-region/examples/expandable-region.html +++ b/content/patterns/expandable-region/examples/expandable-region.html @@ -66,13 +66,14 @@

    From Fire to Flare
    Session registration
    +
  • - +

    Expandable region From ea9d357e1a95cf4d7a65684b5595979b5844745f Mon Sep 17 00:00:00 2001 From: Adam Page Date: Wed, 19 Mar 2025 13:21:46 -0700 Subject: [PATCH 05/23] rename expandable region pattern index file --- .../{expandable-region.html => expandable-region-pattern.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename content/patterns/expandable-region/{expandable-region.html => expandable-region-pattern.html} (100%) diff --git a/content/patterns/expandable-region/expandable-region.html b/content/patterns/expandable-region/expandable-region-pattern.html similarity index 100% rename from content/patterns/expandable-region/expandable-region.html rename to content/patterns/expandable-region/expandable-region-pattern.html From fc167fbbccfcd68f8c68e6a0f8e250af901c2a64 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Thu, 1 May 2025 18:58:17 -0700 Subject: [PATCH 06/23] relocate example to disclosure pattern --- .../disclosure/disclosure-pattern.html | 1 + .../examples/css/disclosure-card.css | 278 ++++++++++++ .../disclosure/examples/disclosure-card.html | 400 ++++++++++++++++++ .../disclosure/examples/js/disclosure-card.js | 54 +++ 4 files changed, 733 insertions(+) create mode 100644 content/patterns/disclosure/examples/css/disclosure-card.css create mode 100644 content/patterns/disclosure/examples/disclosure-card.html create mode 100644 content/patterns/disclosure/examples/js/disclosure-card.js diff --git a/content/patterns/disclosure/disclosure-pattern.html b/content/patterns/disclosure/disclosure-pattern.html index c6ccdefbb2..cd28cc7b61 100644 --- a/content/patterns/disclosure/disclosure-pattern.html +++ b/content/patterns/disclosure/disclosure-pattern.html @@ -34,6 +34,7 @@

    Examples

  • Disclosure (Show/Hide) of Answers to Frequently Asked Questions
  • Disclosure (Show/Hide) Navigation Menu
  • Disclosure (Show/Hide) Navigation Menu with Top-Level Links
    • +
  • Disclosure Card
    • diff --git a/content/patterns/disclosure/examples/css/disclosure-card.css b/content/patterns/disclosure/examples/css/disclosure-card.css new file mode 100644 index 0000000000..46d8904ad9 --- /dev/null +++ b/content/patterns/disclosure/examples/css/disclosure-card.css @@ -0,0 +1,278 @@ +.disclosure-cards { + interpolate-size: allow-keywords; + --color-interactive-idle: transparent; + --color-interactive-hover: gray; + --color-interactive-hover-text: black; + --color-interactive-focus: blue; + --color-interactive-focus-text: blue; + --transition-duration: 0.15s; + + @media (forced-colors: active) { + --color-interactive-idle: Canvas; + --color-interactive-hover: Highlight; + --color-interactive-hover-text: Highlight; + --color-interactive-focus: Highlight; + --color-interactive-focus-text: Highlight; + --transition-duration: 0; + } + + font-family: system-ui, + sans-serif; + font-size: calc(10/16 * 1rem); + line-height: 1.4; + background-color: ghostwhite; + margin-inline: -2em; + padding: 2em; + + *, + *::before, + *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + *:focus { + outline: calc(0.25rem * 10/16) solid var(--color-interactive-focus); + outline-offset: calc(0.25rem * 10/16); + } + + h1, + h2, + h3, + h4, + h5, + h6 { + line-height: 1.25; + text-wrap: balance; + } + + h3 { + font-weight: 500; + font-size: calc(3.2rem * 10/16); + } + + h4 { + font-size: calc(1.8rem * 10/16); + font-weight: 500; + margin-block: 0 calc(2rem * 10/16); + text-transform: uppercase; + color: darkslategray; + } + + button { + appearance: none; + font: inherit; + color: inherit; + border: none; + background: none; + } + + button:not([aria-expanded]) { + font-size: calc(20/16 * 1rem); + padding: 0.5ch 1ch; + border: 1px solid black; + color: white; + font-weight: bold; + background-color: rebeccapurple; + border-radius: calc(0.25rem * 10/16); + + &:hover, + &:focus { + background-color: darkorchid; + } + + &:active { + background-color: midnightblue; + } + } + + .disclosure-card { + border: 0.2em solid transparent; + outline: 0 solid transparent; + outline-offset: 0; + transition: + outline-offset var(--transition-duration) ease, + outline-width var(--transition-duration) ease, + outline-color var(--transition-duration) ease, + border-color var(--transition-duration) ease; + + &:has(button[aria-expanded]:focus), + &[data-being-pressed] { + outline-offset: 0.25em; + outline-width: 0.3em; + outline-color: var(--color-interactive-focus); + + button[aria-expanded] { + color: var(--color-interactive-focus-text); + text-decoration-color: var(--color-interactive-focus); + } + } + + &[data-being-pressed] { + outline-width: 0.6em; + } + + button[aria-expanded] { + display: inline-flex; + gap: 0.175ch; + border: 0; + outline: 0; + font-weight: 600; + text-decoration: underline; + text-underline-offset: calc(1.4rem * 10/16); + text-decoration-color: var(--color-interactive-idle); + text-decoration-thickness: calc(0.2rem * 10/16); + + transition: + color var(--transition-duration) ease, + text-underline-offset var(--transition-duration) ease, + text-decoration-color var(--transition-duration) ease; + + svg { + scale: 0.8; + rotate: 0; + transition: + scale var(--transition-duration) ease, + rotate var(--transition-duration) ease; + } + + &[aria-expanded="true"] svg { + rotate: -180deg; + } + } + + &:hover { + border-color: var(--color-interactive-hover); + } + + &:has(button[aria-expanded]:focus), + &:hover { + [aria-expanded] { + color: var(--color-interactive-hover-text); + text-underline-offset: calc(.4rem * 10/16); + text-decoration-color: var(--color-interactive-hover-text); + + svg { + scale: 1; + } + } + } + } + + main, + .days, + .sessions { + list-style: none; + display: flex; + flex-wrap: wrap; + gap: 2em; + } + + main, + .sessions { + flex-direction: column; + } + + .days { + margin-block: 2em; + } + + .days, + .sessions { + gap: 1em; + } + + .session { + padding: 1.5em 1.5em 0 1.5em; + background-color: white; + box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.2); + margin: 0.25em; + border-radius: 0.25em; + max-inline-size: calc(39rem * 10/16); + + header, + hgroup { + display: flex; + flex-direction: column; + gap: 0.5em; + color: darkslategray; + } + + hgroup { + color: black; + font-weight: 400; + + h5 { + color: black; + font-size: 2.0em; + font-style: normal; + font-weight: 700; + } + + p { + font-size: 1.8em; + } + } + + hgroup+p { + display: flex; + flex-wrap: wrap; + font-size: 1.6em; + margin-block-start: calc(1rem * 10/16); + } + + .location { + padding-inline-end: 1ch; + border-inline-end: calc(0.175rem * 10/16) solid lightgray; + margin-inline-end: 0.75ch; + } + } + + .details { + block-size: auto; + opacity: 1; + overflow-y: clip; + font-size: 1.6em; + transition: all 0.5s ease; + padding-block-end: calc(1.5rem * 10/16); + + &[inert] { + block-size: 0; + opacity: 0; + } + + .description { + display: flex; + flex-direction: column; + gap: calc(1.5rem * 10/16); + padding-block-start: calc(1.5rem * 10/16); + + >*:first-child { + border-block-start: calc(0.175rem * 10/16) solid lightgray; + padding-block-start: calc(1.5rem * 10/16); + } + } + + form { + display: flex; + flex-direction: column; + gap: calc(1.6rem * 10/16); + margin-block-start: calc(1.5rem * 10/16); + border-block-start: calc(0.175rem * 10/16) solid lightgray; + padding-block-start: calc(1.5rem * 10/16); + + h6 { + font-size: calc(20/16 * 1em); + font-weight: 600; + font-variant-caps: normal; + } + + label:has(input[type="checkbox"]) { + display: flex; + gap: 0.75ch; + align-items: baseline; + } + } + } +} diff --git a/content/patterns/disclosure/examples/disclosure-card.html b/content/patterns/disclosure/examples/disclosure-card.html new file mode 100644 index 0000000000..d7a7af36e4 --- /dev/null +++ b/content/patterns/disclosure/examples/disclosure-card.html @@ -0,0 +1,400 @@ + + + + + + Example Disclosure Card + + + + + + + + + + + + + + + +
    +

    Example Disclosure Card

    + +
    +

    About This Example

    + +

    + The following example demonstrates using the Disclosure Pattern to create an expandable card. +

    +

    Similar examples include:

    + +
    + +
    +
    +

    Example

    +
    + +
    +

    Highwind Accessibility Conference

    +
      +
    1. +

      Monday

      +
        +
      1. +
        +
        +
        +
        From Fire to Flare
        +

        Terra Branford

        +
        +

        + 7 AM in Narshe + +

        +
        +
        +
        +

        Terra kicks off the conference by drawing parallels between her journey of self-discovery and the evolution of accessible design. Just as a simple Fire spell can grow into a powerful Flare, small accessibility improvements can build into transformative user experiences. She explains how progressive enhancement — starting with a solid foundation and layering on more advanced functionality — mirrors the way magic strengthens over time, unlocking new potential without leaving anyone behind.

        +

        With a mix of inspiration and technical insight, Terra dives into practical strategies for ensuring every user, regardless of ability or device, can experience a website’s full power. She reminds developers that accessibility isn’t a static checklist—it’s an ongoing progression, much like a hero’s growth. By embracing this mindset, designers and developers can craft experiences that don’t just function but truly ignite.

        +
        + +
        Session registration
        + + + +
        +
        +
        2. +
      2. +
        +
        +
        +
        Impostor syndrome
        +

        Gogo

        +
        +

        + 8 AM in Zone Eater’s Belly + +

        +
        +
        +
        +

        Gogo takes the stage to explore the perilous and persnickety art of role hijacking in web development. With his uncanny ability to imitate others, he explains how generic divs and spans can be repurposed to mimic native semantic elements. However, he warns that without careful consideration, essential functionality might be lost—much like an echo that never quite captures the original voice.

        +

        Throughout his session, Gogo shares real-world examples where imitating components enhanced a design, but also instances where it led to confusion and usability issues. His playful yet insightful approach encourages developers to experiment boldly—but always with an eye on preserving accessibility and clarity.

        +
        +
        +
        Session registration
        + + +
        +
        +
        +
        3. +
      3. +
        +
        +
        +
        Blitzing through barriers
        +

        Sabin Rene Figaro

        +
        +

        + 8 AM in Duncan’s Dojo + +

        +
        +
        +
        +

        Sabin’s session is a high-energy exploration of performance and responsive design, delivered with the force of his signature blitz techniques. He compares the need for rapid load times and smooth interactions to his own lightning-fast martial arts moves. Every pixel and piece of code should strike decisively, overcoming obstacles in the blink of an eye.

        +

        Through dynamic demonstrations and lively anecdotes, Sabin shows that speed and accessibility go hand in hand. His message is clear: just as a well-timed attack can change the tide of battle, a swift and accessible website can win over even the most demanding users.

        +
        +
        +
        Session registration
        + + +
        +
        +
        +
        4. +
      +
      2. +
    2. +

      Tuesday

      +
        +
      1. +
        +
        +
        +
        Stealthy techniques with aria-hidden
        +

        Shadow

        +
        +

        + 7 AM in Cave on the Veldt + +

        +
        +
        +
        +

        In a session as enigmatic as he is, Shadow unveils the secrets of ARIA’s aria-hidden attribute. True to his nature as a stealthy ninja, he explains how selectively hiding decorative elements can create a smoother experience for screen reader users—keeping the focus on what truly matters. Like disappearing into the shadows, unnecessary clutter can vanish without a trace.

        +

        Shadow mixes technical details with tales from his covert adventures, demonstrating how subtle adjustments can yield powerful results. His humorous insights make it clear that when used correctly, aria-hidden is the secret weapon every developer needs in their accessibility toolkit.

        +
        +
        +
        Session registration
        + + +
        +
        +
        +
        2. +
      2. +
        +
        +
        +
        Vivid visions with color contrast
        +

        Relm Arrowny

        +
        +

        + 8 AM in Thamasa + +

        +
        +
        +
        +

        Relm, with her discerning eye as a painter, brings her passion for color to the realm of web accessibility. She explains that just as a masterful painting relies on the deliberate use of contrasting hues to evoke emotion and clarity, a website must employ thoughtful color contrast to ensure legibility and engagement. For Relm, choosing the right palette isn’t just about aesthetics—it’s about creating an inclusive visual experience.

        +

        In her session, Relm offers practical tips on selecting color schemes that meet accessibility guidelines without sacrificing artistic expression. She showcases examples of vibrant designs where contrast elevates both form and function, inspiring developers to view color not only as decoration but as a critical element of accessible design.

        +
        +
        +
        Session registration
        + + +
        +
        +
        +
        3. +
      3. +
        +
        +
        +
        Embracing chaos
        +

        Kefka Palazzo

        +
        +

        + 9 AM in Kefka's Tower + +

        +
        +
        +
        +

        Kefka rounds out the conference with a session that is as unpredictable as it is entertaining. With his trademark manic glee, he presents a tongue-in-cheek critique of what happens when accessibility guidelines are tossed aside. His talk is a wild ride through the pitfalls of chaotic design—where confusion reigns and users are left to fend for themselves, much to his twisted delight.

        +

        Yet, beneath the chaos, Kefka’s message is surprisingly clear: ignoring accessibility can lead to catastrophic outcomes that even a madman can’t laugh off. With a mix of dark humor and unexpected insight, he challenges developers to embrace structure and clarity, proving that even in a world of madness, order is the ultimate act of rebellion.

        +
        +
        +
        Session registration
        + + +
        +
        +
        +
        4. +
      +
      3. +
    +
    + +
    + +
    +

    Accessibility Features

    +

    Content TBD

    +
    + +
    +

    Keyboard Support

    + + + + + + + + + + + + + + + + + +
    KeyFunction
    + Tab + Moves keyboard focus to the disclosure button.
    + Space or
    + Enter +     		Activates the disclosure button, which toggles the visibility of the + answer to the question.
    +
    + +
    +

    Role, Property, State, and Tabindex Attributes

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    RoleAttributeElementUsage
    + aria-controls="ID_REFERENCE" + buttonIdentifies the element controlled by the disclosure button.
    + aria-expanded="false" + + button + +
      +
    • Indicates that the container controlled by the disclosure button + is hidden.
      • +
    • + CSS attribute selectors (e.g. + [aria-expanded="false"]) are used to synchronize the + visual states with the value of the aria-expanded + attribute. +
      • +
    • The visual indicator of the show/hide state is created using CSS + :before pseudo element and content + property so the image is reliably rendered in high contrast mode + of operating systems and browsers.
      • +
    +
    + aria-expanded="true" + + button + +
      +
    • Indicates that the container controlled by the disclosure button + is visible.
      • +
    • + CSS attribute selectors (e.g. [aria-expanded="true"]) + are used to synchronize the visual states with the value of the + aria-expanded attribute. +
      • +
    • The visual indicator of the show/hide state is created using CSS + :before pseudo element and content + property so the image is reliably rendered in high contrast mode + of operating systems and browsers.
      • +
    +
    +
    + +
    +

    JavaScript and CSS Source Code

    + + +
    + +
    +

    HTML Source Code

    +

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

    + +
    + + +
    +
    + + diff --git a/content/patterns/disclosure/examples/js/disclosure-card.js b/content/patterns/disclosure/examples/js/disclosure-card.js new file mode 100644 index 0000000000..991a3ac9e2 --- /dev/null +++ b/content/patterns/disclosure/examples/js/disclosure-card.js @@ -0,0 +1,54 @@ +/* + * This content is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * + * Supplemental JS for disclosure card event handling + */ + +'use strict'; + +document.addEventListener('click', (e) => { + handleInteraction(e, true); +}); +document.addEventListener('mousedown', (e) => { + handleInteraction(e, false); +}); +document.addEventListener('mouseup', handlePressEnd); + +function handleInteraction(e, isClick) { + const disclosureCard = e.target.closest('.disclosure-card'); + if (!disclosureCard) return; + + const button = disclosureCard.querySelector('button[aria-expanded]'); + const isTextSelected = window.getSelection().toString().length > 0; + const target = e.target; + const targetTag = target.tagName.toLowerCase(); + + // Don’t proceed if the user has: + // - Triggered event on any nested focusable other than the card’s button + // - Triggered event on a label element + // - Triggered event via text selection + if ( + (button !== target && (isFocusable(target) || targetTag === 'label')) || + isTextSelected + ) + return; + + if (isClick) { + const isExpanded = button.ariaExpanded === 'true'; + const details = disclosureCard.querySelector('.details'); + button.ariaExpanded = isExpanded ? 'false' : 'true'; + details.inert = isExpanded; + button.focus(); + } else { + disclosureCard.setAttribute('data-being-pressed', 'true'); + } +} + +function handlePressEnd() { + document + .querySelector('.disclosure-card[data-being-pressed]') + ?.removeAttribute('data-being-pressed'); +} + +const isFocusable = (element) => element.tabIndex >= 0 && !element.disabled; From 9ee5a7fc12d6b1f1397c5f603515cf883ad0a3cc Mon Sep 17 00:00:00 2001 From: Adam Page Date: Thu, 1 May 2025 18:59:01 -0700 Subject: [PATCH 07/23] add related link to other disclosure examples --- .../coverage-and-quality-report.html | 43 ++++++++++++++++--- .../coverage-and-quality/prop-coverage.csv | 4 +- .../coverage-and-quality/role-coverage.csv | 2 +- content/index/index.html | 2 + .../disclosure/examples/disclosure-faq.html | 1 + .../disclosure-image-description.html | 1 + .../disclosure-navigation-hybrid.html | 1 + .../examples/disclosure-navigation.html | 1 + 8 files changed, 46 insertions(+), 9 deletions(-) diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index 24c330fd8d..4876b0e3f3 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -581,7 +581,10 @@

    Roles with More than One Guidance or Exa region - Region +
    • Accordion
      • @@ -889,6 +892,7 @@

      Properties and States with More than One
    • Date Picker Combobox (HC)
    • Select-Only Combobox
    • Editable Combobox with Grid Popup
      • +
    • Disclosure Card (HC)
    • Disclosure (Show/Hide) for Answers to Frequently Asked Questions (HC)
    • Disclosure (Show/Hide) for Image Description (HC)
    • Disclosure Navigation Menu with Top-Level Links
      • @@ -951,6 +955,7 @@

      Properties and States with More than One
    • Date Picker Combobox (HC)
    • Select-Only Combobox
    • Editable Combobox with Grid Popup
      • +
    • Disclosure Card (HC)
    • Disclosure (Show/Hide) for Answers to Frequently Asked Questions (HC)
    • Disclosure (Show/Hide) for Image Description (HC)
    • Disclosure Navigation Menu with Top-Level Links
      • @@ -1279,19 +1284,19 @@

      Coding Summary

      Total Examples - 62 + 63 High Contrast Documentation - 32 + 33 Uses SVG - 36 + 37 Uses forced-colors media query - 3 + 4 Uses currentColor value @@ -1321,7 +1326,7 @@

      Coding Summary

      Mouse Events - 17 + 18 Pointer Events @@ -1582,6 +1587,19 @@

      Coding Practices

      3 + + Disclosure Card + + + + Yes + ex1 + 2 + 0 + 4 + 2 + banner,region,aria-hidden,aria-labelledby + Disclosure (Show/Hide) for Answers to Frequently Asked Questions class @@ -2273,6 +2291,14 @@

      SVG and High Contrast Techniques

      + + Disclosure Card + Yes + Yes + + Yes + + Disclosure (Show/Hide) for Answers to Frequently Asked Questions @@ -2565,6 +2591,11 @@

      Mouse and Pointer Events

      Yes + + Disclosure Card + Yes + + Expandable Region Yes diff --git a/content/about/coverage-and-quality/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv index 2220097a27..3fd89437f2 100644 --- a/content/about/coverage-and-quality/prop-coverage.csv +++ b/content/about/coverage-and-quality/prop-coverage.csv @@ -7,14 +7,14 @@ "aria-colcount","1","1","Guidance: Using aria-colcount and aria-colindex","Example: Data Grid" "aria-colindex","3","1","Guidance: Using aria-colcount and aria-colindex","Guidance: Using aria-colindex When Column Indices Are Contiguous","Guidance: Using aria-colindex When Column Indices Are Not Contiguous","Example: Data Grid" "aria-colspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" -"aria-controls","0","22","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Expandable Region","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" +"aria-controls","0","23","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure Card","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Expandable Region","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" "aria-current","0","5","Example: Breadcrumb","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Navigation Menubar","Example: Navigation Treeview" "aria-describedby","1","6","Guidance: Describing by referencing content with aria-describedby","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Table" "aria-details","0","0" "aria-disabled","0","3","Example: Alert Dialog","Example: Editor Menubar","Example: Toolbar" "aria-dropeffect","0","0" "aria-errormessage","0","0" -"aria-expanded","0","22","Example: Accordion","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"aria-expanded","0","23","Example: Accordion","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure Card","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" "aria-flowto","0","0" "aria-grabbed","0","0" "aria-haspopup","0","9","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar" diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv index d3d2296440..922a681191 100644 --- a/content/about/coverage-and-quality/role-coverage.csv +++ b/content/about/coverage-and-quality/role-coverage.csv @@ -53,7 +53,7 @@ "progressbar","0","0" "radio","3","4","Guidance: Radio Group Pattern","Guidance: For Radio Groups Not Contained in a Toolbar","Guidance: For Radio Group Contained in a Toolbar","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Toolbar" "radiogroup","0","4","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Toolbar" -"region","1","6","Guidance: Region","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Navigation Menubar","Example: Navigation Treeview","Example: Region Landmark" +"region","2","6","Guidance: Expandable Region Pattern","Guidance: Region","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Navigation Menubar","Example: Navigation Treeview","Example: Region Landmark" "row","0","4","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Table","Example: Treegrid Email Inbox" "rowgroup","0","1","Example: Table" "rowheader","0","0" diff --git a/content/index/index.html b/content/index/index.html index 2e9cd9ce8d..b5f61f2511 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -524,6 +524,7 @@

      Examples By Properties and States

    • Date Picker Combobox (HC)
    • Select-Only Combobox
    • Editable Combobox with Grid Popup
      • +
    • Disclosure Card (HC)
    • Disclosure (Show/Hide) for Answers to Frequently Asked Questions (HC)
    • Disclosure (Show/Hide) for Image Description (HC)
    • Disclosure Navigation Menu with Top-Level Links
      • @@ -584,6 +585,7 @@

      Examples By Properties and States

    • Date Picker Combobox (HC)
    • Select-Only Combobox
    • Editable Combobox with Grid Popup
      • +
    • Disclosure Card (HC)
    • Disclosure (Show/Hide) for Answers to Frequently Asked Questions (HC)
    • Disclosure (Show/Hide) for Image Description (HC)
    • Disclosure Navigation Menu with Top-Level Links
      • diff --git a/content/patterns/disclosure/examples/disclosure-faq.html b/content/patterns/disclosure/examples/disclosure-faq.html index 4e24bac2bd..fbb8af2e9e 100644 --- a/content/patterns/disclosure/examples/disclosure-faq.html +++ b/content/patterns/disclosure/examples/disclosure-faq.html @@ -42,6 +42,7 @@

      About This Example

      Example Disclosure Navigation Menu
    • Example Disclosure Navigation Menu with Top-Level Links
      • +
    • Disclosure Card
    diff --git a/content/patterns/disclosure/examples/disclosure-image-description.html b/content/patterns/disclosure/examples/disclosure-image-description.html index 05403b9fb1..4f0deaf416 100644 --- a/content/patterns/disclosure/examples/disclosure-image-description.html +++ b/content/patterns/disclosure/examples/disclosure-image-description.html @@ -42,6 +42,7 @@

    About This Example

    Example Disclosure Navigation Menu

  • Example Disclosure Navigation Menu with Top-Level Links
    • +
  • Disclosure Card
    • diff --git a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html index c81306ac3b..4d1cb20ffb 100644 --- a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html +++ b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html @@ -48,6 +48,7 @@

    Important

  • Example Disclosure Navigation Menu
  • Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions
  • Example Disclosure (Show/Hide) for an Image Description
    • +
  • Disclosure Card
  • Navigation Menubar Example

    • Example Usage Options

    diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html index ba579db817..a956dd7b41 100644 --- a/content/patterns/disclosure/examples/disclosure-navigation.html +++ b/content/patterns/disclosure/examples/disclosure-navigation.html @@ -48,6 +48,7 @@

    Important

  • Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions
  • Example Disclosure (Show/Hide) for an Image Description
  • Example Disclosure Navigation Menu with Top-Level Links
    • +
  • Disclosure Card
  • Navigation Menubar Example

    • Example Usage Options

    From 98ba4866a3b272e4d0d6ff2322c76ba01518d3e7 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Thu, 1 May 2025 19:00:14 -0700 Subject: [PATCH 08/23] remove expandable region --- .../examples/css/expandable-region.css | 264 -------------- .../examples/expandable-region.html | 325 ------------------ .../examples/js/expandable-region.js | 44 --- .../expandable-region-pattern.html | 43 --- content/patterns/patterns.html | 12 - 5 files changed, 688 deletions(-) delete mode 100644 content/patterns/expandable-region/examples/css/expandable-region.css delete mode 100644 content/patterns/expandable-region/examples/expandable-region.html delete mode 100644 content/patterns/expandable-region/examples/js/expandable-region.js delete mode 100644 content/patterns/expandable-region/expandable-region-pattern.html diff --git a/content/patterns/expandable-region/examples/css/expandable-region.css b/content/patterns/expandable-region/examples/css/expandable-region.css deleted file mode 100644 index e406673816..0000000000 --- a/content/patterns/expandable-region/examples/css/expandable-region.css +++ /dev/null @@ -1,264 +0,0 @@ -.expandable-regions { - interpolate-size: allow-keywords; - --color-interactive-idle: transparent; - --color-interactive-hover: gray; - --color-interactive-hover-text: black; - --color-interactive-focus: blue; - --color-interactive-focus-text: blue; - --transition-duration: 0.15s; - - @media (forced-colors: active) { - --color-interactive-idle: Canvas; - --color-interactive-hover: Highlight; - --color-interactive-hover-text: Highlight; - --color-interactive-focus: Highlight; - --color-interactive-focus-text: Highlight; - --transition-duration: 0; - } - - font-family: system-ui, sans-serif; - font-size: calc(10/16 * 1rem); - line-height: 1.4; - background-color: ghostwhite; - margin-inline: -2em; - padding: 2em; - - *, *::before, *::after { - box-sizing: border-box; - margin: 0; - padding: 0; - } - - *:focus { - outline: calc(0.25rem * 10/16) solid var(--color-interactive-focus); - outline-offset: calc(0.25rem * 10/16); - } - - h1, h2, h3, h4, h5, h6 { - line-height: 1.25; - text-wrap: balance; - } - - h3 { - font-weight: 500; - font-size: calc(3.2rem * 10/16); - } - - h4 { - font-size: calc(1.8rem * 10/16); - font-weight: 500; - margin-block: 0 calc(2rem * 10/16); - text-transform: uppercase; - color: darkslategray; - } - - button { - appearance: none; - font: inherit; - color: inherit; - border: none; - background: none; - } - - button:not([aria-expanded]) { - font-size: calc(20/16 * 1rem); - padding: 0.5ch 1ch; - border: 1px solid black; - color: white; - font-weight: bold; - background-color: rebeccapurple; - border-radius: calc(0.25rem * 10/16); - - &:hover, &:focus { - background-color: darkorchid; - } - - &:active { - background-color: midnightblue; - } - } - - .expandable { - border: 0.2em solid transparent; - outline: 0 solid transparent; - outline-offset: 0; - transition: - outline-offset var(--transition-duration) ease, - outline-width var(--transition-duration) ease, - outline-color var(--transition-duration) ease, - border-color var(--transition-duration) ease; - - &:has(button[aria-expanded]:focus), - &[data-being-pressed] { - outline-offset: 0.25em; - outline-width: 0.3em; - outline-color: var(--color-interactive-focus); - - button[aria-expanded] { - color: var(--color-interactive-focus-text); - text-decoration-color: var(--color-interactive-focus); - } - } - - &[data-being-pressed] { - outline-width: 0.6em; - } - - button[aria-expanded] { - display: inline-flex; - gap: 0.175ch; - border: 0; - outline: 0; - font-weight: 600; - text-decoration: underline; - text-underline-offset: calc(1.4rem * 10/16); - text-decoration-color: var(--color-interactive-idle); - text-decoration-thickness: calc(0.2rem * 10/16); - - transition: - color var(--transition-duration) ease, - text-underline-offset var(--transition-duration) ease, - text-decoration-color var(--transition-duration) ease; - - svg { - scale: 0.8; - rotate: 0; - transition: - scale var(--transition-duration) ease, - rotate var(--transition-duration) ease; - } - - &[aria-expanded="true"] svg { - rotate: -180deg; - } - } - - &:hover { - border-color: var(--color-interactive-hover); - } - - &:has(button[aria-expanded]:focus), - &:hover { - [aria-expanded] { - color: var(--color-interactive-hover-text); - text-underline-offset: calc(.4rem * 10/16); - text-decoration-color: var(--color-interactive-hover-text); - - svg { - scale: 1; - } - } - } - } - - main, .days, .sessions { - list-style: none; - display: flex; - flex-wrap: wrap; - gap: 2em; - } - - main, .sessions { - flex-direction: column; - } - - .days { - margin-block: 2em; - } - - .days, .sessions { - gap: 1em; - } - - .session { - padding: 1.5em 1.5em 0 1.5em; - background-color: white; - box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.2); - margin: 0.25em; - border-radius: 0.25em; - max-inline-size: calc(39rem * 10/16); - - header, hgroup { - display: flex; - flex-direction: column; - gap: 0.5em; - color: darkslategray; - } - - hgroup { - color: black; - font-weight: 400; - - h5 { - color: black; - font-size: 2.0em; - font-style: normal; - font-weight: 700; - } - - p { - font-size: 1.8em; - } - } - - hgroup + p { - display: flex; - flex-wrap: wrap; - font-size: 1.6em; - margin-block-start: calc(1rem * 10/16); - } - - .location { - padding-inline-end: 1ch; - border-inline-end: calc(0.175rem * 10/16) solid lightgray; - margin-inline-end: 0.75ch; - } - } - - .details { - block-size: auto; - opacity: 1; - overflow-y: clip; - font-size: 1.6em; - transition: all 0.5s ease; - padding-block-end: calc(1.5rem * 10/16); - - &[inert] { - block-size: 0; - opacity: 0; - } - - .description { - display: flex; - flex-direction: column; - gap: calc(1.5rem * 10/16); - padding-block-start: calc(1.5rem * 10/16); - - > *:first-child { - border-block-start: calc(0.175rem * 10/16) solid lightgray; - padding-block-start: calc(1.5rem * 10/16); - } - } - - form { - display: flex; - flex-direction: column; - gap: calc(1.6rem * 10/16); - margin-block-start: calc(1.5rem * 10/16); - border-block-start: calc(0.175rem * 10/16) solid lightgray; - padding-block-start: calc(1.5rem * 10/16); - - h6 { - font-size: calc(20/16 * 1em); - font-weight: 600; - font-variant-caps: normal; - } - - label:has(input[type="checkbox"]) { - display: flex; - gap: 0.75ch; - align-items: baseline; - } - } - } -} diff --git a/content/patterns/expandable-region/examples/expandable-region.html b/content/patterns/expandable-region/examples/expandable-region.html deleted file mode 100644 index 52d53c63a2..0000000000 --- a/content/patterns/expandable-region/examples/expandable-region.html +++ /dev/null @@ -1,325 +0,0 @@ - - - - - - Example Expandable Region - - - - - - - - - - - - - - - -
    -

    Example Expandable Region

    - -
    -

    About This Example

    -

    Content TBD

    -
    - -
    -
    -

    Example

    -
    - -
    -

    Highwind Accessibility Conference

    -
      -
    1. -

      Monday

      -
        -
      1. - -
        2. -
      2. - -
        3. -
      3. - -
        4. -
      -
      2. -
    2. -

      Tuesday

      -
        -
      1. - -
        2. -
      2. - -
        3. -
      3. - -
        4. -
      -
      3. -
    -
    - -
    - -
    -

    Accessibility Features

    -

    Content TBD

    -
    - -
    -

    Keyboard Support

    -

    Content TBD

    - - - - - - - - - - - - - -
    KeyFunction
    - Tab
    - Shift + Tab -     		Content TBD
    -
    - -
    -

    Role, Property, State, and Tabindex Attributes

    - - - - - - - - - - - - - - - - - -
    RoleAttributeElementUsage
    - aria-controls="IDREF" - - button - Content TBD
    -
    - -
    -

    JavaScript and CSS Source Code

    - - -
    - -
    -

    HTML Source Code

    -

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

    - -
    - - -
    -
    - - diff --git a/content/patterns/expandable-region/examples/js/expandable-region.js b/content/patterns/expandable-region/examples/js/expandable-region.js deleted file mode 100644 index dd88bbad8e..0000000000 --- a/content/patterns/expandable-region/examples/js/expandable-region.js +++ /dev/null @@ -1,44 +0,0 @@ -/* - * This content is licensed according to the W3C Software License at - * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document - * - * Supplemental JS for expandable region event handling - */ - -'use strict'; - -document.addEventListener('click', (e) => { handleInteraction(e, true); }); -document.addEventListener('mousedown', (e) => { handleInteraction(e, false); }); -document.addEventListener('mouseup', handlePressEnd); - -function handleInteraction(e, isClick) { - const expandable = e.target.closest('.expandable'); - if (!expandable) return; - - const button = expandable.querySelector('button[aria-expanded]'); - const isTextSelected = window.getSelection().toString().length > 0; - const target = e.target; - const targetTag = target.tagName.toLowerCase(); - - // Don’t proceed if the user has: - // - Triggered event on any nested focusable other than the expandable button - // - Triggered event on a label element - // - Triggered event via text selection - if (button !== target && (isFocusable(target) || targetTag === 'label') || isTextSelected) return; - - if (isClick) { - const isExpanded = button.ariaExpanded === 'true'; - const details = expandable.querySelector('.details'); - button.ariaExpanded = isExpanded ? 'false' : 'true'; - details.inert = isExpanded; - button.focus(); - } else { - expandable.setAttribute('data-being-pressed', 'true'); - } -} - -function handlePressEnd() { - document.querySelector('.expandable[data-being-pressed]')?.removeAttribute('data-being-pressed'); -} - -const isFocusable = (element) => element.tabIndex >= 0 && !element.disabled; diff --git a/content/patterns/expandable-region/expandable-region-pattern.html b/content/patterns/expandable-region/expandable-region-pattern.html deleted file mode 100644 index 3d9c77b33e..0000000000 --- a/content/patterns/expandable-region/expandable-region-pattern.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - Expandable Region Pattern - - - - - - - - - -
    -

    Expandable Region Pattern

    - -
    -

    About This Pattern

    -

    Content TBD

    -
    - -
    - -

    Examples

    - -
    - -
    -

    Keyboard Interaction

    -

    Content TBD

    -
    - -
    -

    WAI-ARIA Roles, States, and Properties

    -

    Content TBD

    -
    -
    - - diff --git a/content/patterns/patterns.html b/content/patterns/patterns.html index a25a425188..88689af939 100644 --- a/content/patterns/patterns.html +++ b/content/patterns/patterns.html @@ -190,18 +190,6 @@

    -
  • - -

    - - Expandable region -

    -     -
    - Content TBD -
    -
    • -

  • From c08ff502e7b8c1bfcac73a370061043109fbe0ee Mon Sep 17 00:00:00 2001 From: Adam Page Date: Thu, 1 May 2025 19:07:36 -0700 Subject: [PATCH 09/23] add unknown words to cspell config --- cspell.json | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/cspell.json b/cspell.json index 3c2860ba09..fb82228b17 100644 --- a/cspell.json +++ b/cspell.json @@ -11,6 +11,7 @@ "alertdialogs", "Anjou", "Aristov", + "Arrowny", "avacmd", "AXAPI", "Balusani", @@ -24,6 +25,7 @@ "Bookmarklets", "Bosc", "Botr", + "Branford", "Brinza", "Bucketwheat", "buttontext", @@ -106,6 +108,7 @@ "Henriette", "Hickson", "highlighttext", + "Highwind", "Higley", "Hillen", "hljs", @@ -125,6 +128,9 @@ "Joanmarie", "Kasper", "kbdshortcuts", + "Kefka", + "Kefka's", + "Kefka’s", "Kesteren", "Kiærskou", "Kowno", @@ -166,6 +172,7 @@ "Nemeth", "nightmode", "Nihonium", + "Narshe", "nodir", "norotate", "Nurthen", @@ -198,6 +205,7 @@ "rawgit", "Rearrangeable", "refreshable", + "Relm", "Renée", "respec", "Rhincodon", @@ -249,6 +257,7 @@ "textarea's", "textfield", "Thaarup", + "Thamasa", "Theresia", "Thiel", "Thiers", From 7c2189b9a18ff030f5563949e7c6fa9f7b3870bc Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 27 May 2025 10:27:47 -0700 Subject: [PATCH 10/23] simplify example content --- .../examples/css/disclosure-card.css | 23 +- .../disclosure/examples/disclosure-card.html | 283 ++++++------------ 2 files changed, 95 insertions(+), 211 deletions(-) diff --git a/content/patterns/disclosure/examples/css/disclosure-card.css b/content/patterns/disclosure/examples/css/disclosure-card.css index 46d8904ad9..f144edb842 100644 --- a/content/patterns/disclosure/examples/css/disclosure-card.css +++ b/content/patterns/disclosure/examples/css/disclosure-card.css @@ -52,14 +52,6 @@ font-size: calc(3.2rem * 10/16); } - h4 { - font-size: calc(1.8rem * 10/16); - font-weight: 500; - margin-block: 0 calc(2rem * 10/16); - text-transform: uppercase; - color: darkslategray; - } - button { appearance: none; font: inherit; @@ -161,7 +153,6 @@ } main, - .days, .sessions { list-style: none; display: flex; @@ -173,13 +164,9 @@ .sessions { flex-direction: column; } - - .days { - margin-block: 2em; - } - - .days, + .sessions { + margin-block: 2em; gap: 1em; } @@ -189,7 +176,7 @@ box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.2); margin: 0.25em; border-radius: 0.25em; - max-inline-size: calc(39rem * 10/16); + max-inline-size: calc(48rem * 10/16); header, hgroup { @@ -203,7 +190,7 @@ color: black; font-weight: 400; - h5 { + h4 { color: black; font-size: 2.0em; font-style: normal; @@ -262,7 +249,7 @@ border-block-start: calc(0.175rem * 10/16) solid lightgray; padding-block-start: calc(1.5rem * 10/16); - h6 { + h5 { font-size: calc(20/16 * 1em); font-weight: 600; font-variant-caps: normal; diff --git a/content/patterns/disclosure/examples/disclosure-card.html b/content/patterns/disclosure/examples/disclosure-card.html index d7a7af36e4..8849a67b2c 100644 --- a/content/patterns/disclosure/examples/disclosure-card.html +++ b/content/patterns/disclosure/examples/disclosure-card.html @@ -55,202 +55,99 @@

    Example

    Highwind Accessibility Conference

    -
      +
      1. -

        Monday

        -
          -
        1. -
          -
          -
          -
          From Fire to Flare
          -

          Terra Branford

          -
          -

          - 7 AM in Narshe - -

          -
          -
          -
          -

          Terra kicks off the conference by drawing parallels between her journey of self-discovery and the evolution of accessible design. Just as a simple Fire spell can grow into a powerful Flare, small accessibility improvements can build into transformative user experiences. She explains how progressive enhancement — starting with a solid foundation and layering on more advanced functionality — mirrors the way magic strengthens over time, unlocking new potential without leaving anyone behind.

          -

          With a mix of inspiration and technical insight, Terra dives into practical strategies for ensuring every user, regardless of ability or device, can experience a website’s full power. She reminds developers that accessibility isn’t a static checklist—it’s an ongoing progression, much like a hero’s growth. By embracing this mindset, designers and developers can craft experiences that don’t just function but truly ignite.

          -
          -
          -
          Session registration
          - - -
          -
          -
          -
          2. -
        2. -
          -
          -
          -
          Impostor syndrome
          -

          Gogo

          -
          -

          - 8 AM in Zone Eater’s Belly - -

          -
          -
          -
          -

          Gogo takes the stage to explore the perilous and persnickety art of role hijacking in web development. With his uncanny ability to imitate others, he explains how generic divs and spans can be repurposed to mimic native semantic elements. However, he warns that without careful consideration, essential functionality might be lost—much like an echo that never quite captures the original voice.

          -

          Throughout his session, Gogo shares real-world examples where imitating components enhanced a design, but also instances where it led to confusion and usability issues. His playful yet insightful approach encourages developers to experiment boldly—but always with an eye on preserving accessibility and clarity.

          -
          -
          -
          Session registration
          - - -
          -
          -
          -
          3. -
        3. -
          -
          -
          -
          Blitzing through barriers
          -

          Sabin Rene Figaro

          -
          -

          - 8 AM in Duncan’s Dojo - -

          -
          -
          -
          -

          Sabin’s session is a high-energy exploration of performance and responsive design, delivered with the force of his signature blitz techniques. He compares the need for rapid load times and smooth interactions to his own lightning-fast martial arts moves. Every pixel and piece of code should strike decisively, overcoming obstacles in the blink of an eye.

          -

          Through dynamic demonstrations and lively anecdotes, Sabin shows that speed and accessibility go hand in hand. His message is clear: just as a well-timed attack can change the tide of battle, a swift and accessible website can win over even the most demanding users.

          -
          -
          -
          Session registration
          - - -
          -
          -
          -
          4. -
        +
        +
        +
        +

        From Fire to Flare

        +

        Terra Branford

        +
        +

        + 7 AM in Narshe + +

        +
        +
        +
        +

        Terra kicks off the conference by drawing parallels between her journey of self-discovery and the evolution of accessible design. Just as a simple Fire spell can grow into a powerful Flare, small accessibility improvements can build into transformative user experiences. She explains how progressive enhancement — starting with a solid foundation and layering on more advanced functionality — mirrors the way magic strengthens over time, unlocking new potential without leaving anyone behind.

        +

        With a mix of inspiration and technical insight, Terra dives into practical strategies for ensuring every user, regardless of ability or device, can experience a website’s full power. She reminds developers that accessibility isn’t a static checklist—it’s an ongoing progression, much like a hero’s growth. By embracing this mindset, designers and developers can craft experiences that don’t just function but truly ignite.

        +
        +
        +
        Session registration
        + + +
        +
        +
      2. -

        Tuesday

        -
          -
        1. -
          -
          -
          -
          Stealthy techniques with aria-hidden
          -

          Shadow

          -
          -

          - 7 AM in Cave on the Veldt - -

          -
          -
          -
          -

          In a session as enigmatic as he is, Shadow unveils the secrets of ARIA’s aria-hidden attribute. True to his nature as a stealthy ninja, he explains how selectively hiding decorative elements can create a smoother experience for screen reader users—keeping the focus on what truly matters. Like disappearing into the shadows, unnecessary clutter can vanish without a trace.

          -

          Shadow mixes technical details with tales from his covert adventures, demonstrating how subtle adjustments can yield powerful results. His humorous insights make it clear that when used correctly, aria-hidden is the secret weapon every developer needs in their accessibility toolkit.

          -
          -
          -
          Session registration
          - - -
          -
          -
          -
          2. -
        2. -
          -
          -
          -
          Vivid visions with color contrast
          -

          Relm Arrowny

          -
          -

          - 8 AM in Thamasa - -

          -
          -
          -
          -

          Relm, with her discerning eye as a painter, brings her passion for color to the realm of web accessibility. She explains that just as a masterful painting relies on the deliberate use of contrasting hues to evoke emotion and clarity, a website must employ thoughtful color contrast to ensure legibility and engagement. For Relm, choosing the right palette isn’t just about aesthetics—it’s about creating an inclusive visual experience.

          -

          In her session, Relm offers practical tips on selecting color schemes that meet accessibility guidelines without sacrificing artistic expression. She showcases examples of vibrant designs where contrast elevates both form and function, inspiring developers to view color not only as decoration but as a critical element of accessible design.

          -
          -
          -
          Session registration
          - - -
          -
          -
          -
          3. -
        3. -
          -
          -
          -
          Embracing chaos
          -

          Kefka Palazzo

          -
          -

          - 9 AM in Kefka's Tower - -

          -
          -
          -
          -

          Kefka rounds out the conference with a session that is as unpredictable as it is entertaining. With his trademark manic glee, he presents a tongue-in-cheek critique of what happens when accessibility guidelines are tossed aside. His talk is a wild ride through the pitfalls of chaotic design—where confusion reigns and users are left to fend for themselves, much to his twisted delight.

          -

          Yet, beneath the chaos, Kefka’s message is surprisingly clear: ignoring accessibility can lead to catastrophic outcomes that even a madman can’t laugh off. With a mix of dark humor and unexpected insight, he challenges developers to embrace structure and clarity, proving that even in a world of madness, order is the ultimate act of rebellion.

          -
          -
          -
          Session registration
          - - -
          -
          -
          -
          4. -
        +
        +
        +
        +

        Impostor syndrome

        +

        Gogo

        +
        +

        + 8 AM in Zone Eater’s Belly + +

        +
        +
        +
        +

        Gogo takes the stage to explore the perilous and persnickety art of role hijacking in web development. With his uncanny ability to imitate others, he explains how generic divs and spans can be repurposed to mimic native semantic elements. However, he warns that without careful consideration, essential functionality might be lost—much like an echo that never quite captures the original voice.

        +

        Throughout his session, Gogo shares real-world examples where imitating components enhanced a design, but also instances where it led to confusion and usability issues. His playful yet insightful approach encourages developers to experiment boldly—but always with an eye on preserving accessibility and clarity.

        +
        +
        +
        Session registration
        + + +
        +
        +
        +
        3. +
      3. +
        +
        +
        +

        Blitzing through barriers

        +

        Sabin Rene Figaro

        +
        +

        + 8 AM in Duncan’s Dojo + +

        +
        +
        +
        +

        Sabin’s session is a high-energy exploration of performance and responsive design, delivered with the force of his signature blitz techniques. He compares the need for rapid load times and smooth interactions to his own lightning-fast martial arts moves. Every pixel and piece of code should strike decisively, overcoming obstacles in the blink of an eye.

        +

        Through dynamic demonstrations and lively anecdotes, Sabin shows that speed and accessibility go hand in hand. His message is clear: just as a well-timed attack can change the tide of battle, a swift and accessible website can win over even the most demanding users.

        +
        +
        +
        Session registration
        + + +
        +
        +
    From 2de0c8809c8d0a0ce255cd024bcfaa8eaa7b36b3 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 27 May 2025 10:44:31 -0700 Subject: [PATCH 11/23] replace regions with articles --- .../disclosure/examples/disclosure-card.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/patterns/disclosure/examples/disclosure-card.html b/content/patterns/disclosure/examples/disclosure-card.html index 8849a67b2c..b9e68eb696 100644 --- a/content/patterns/disclosure/examples/disclosure-card.html +++ b/content/patterns/disclosure/examples/disclosure-card.html @@ -57,7 +57,7 @@

    Example

    Highwind Accessibility Conference

    1. -
      +

      From Fire to Flare

      @@ -85,10 +85,10 @@
      Session registration
      -
      +
    2. -
      +

      Impostor syndrome

      @@ -116,10 +116,10 @@
      Session registration
      -
      +
    3. -
      +

      Blitzing through barriers

      @@ -147,7 +147,7 @@
      Session registration
      -
      +
    From 44fc935efeb9cffb05a298c7e2a8cec161f79a27 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 27 May 2025 10:57:39 -0700 Subject: [PATCH 12/23] rewrite example content theme --- .../examples/css/disclosure-card.css | 2 +- .../disclosure/examples/disclosure-card.html | 50 +++++++++---------- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/content/patterns/disclosure/examples/css/disclosure-card.css b/content/patterns/disclosure/examples/css/disclosure-card.css index f144edb842..059d6e9e2c 100644 --- a/content/patterns/disclosure/examples/css/disclosure-card.css +++ b/content/patterns/disclosure/examples/css/disclosure-card.css @@ -176,7 +176,7 @@ box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.2); margin: 0.25em; border-radius: 0.25em; - max-inline-size: calc(48rem * 10/16); + max-inline-size: calc(56rem * 10/16); header, hgroup { diff --git a/content/patterns/disclosure/examples/disclosure-card.html b/content/patterns/disclosure/examples/disclosure-card.html index b9e68eb696..dff38ed3a9 100644 --- a/content/patterns/disclosure/examples/disclosure-card.html +++ b/content/patterns/disclosure/examples/disclosure-card.html @@ -54,27 +54,27 @@

    Example

    -

    Highwind Accessibility Conference

    +

    Musical Education Conference

    1. -
      +
      -

      From Fire to Flare

      -

      Terra Branford

      +

      Symphonic Structure: Form, Function, and Feeling

      +

      Ludwig van Beethoven

      - 7 AM in Narshe -

      -
      +
      -

      Terra kicks off the conference by drawing parallels between her journey of self-discovery and the evolution of accessible design. Just as a simple Fire spell can grow into a powerful Flare, small accessibility improvements can build into transformative user experiences. She explains how progressive enhancement — starting with a solid foundation and layering on more advanced functionality — mirrors the way magic strengthens over time, unlocking new potential without leaving anyone behind.

      -

      With a mix of inspiration and technical insight, Terra dives into practical strategies for ensuring every user, regardless of ability or device, can experience a website’s full power. She reminds developers that accessibility isn’t a static checklist—it’s an ongoing progression, much like a hero’s growth. By embracing this mindset, designers and developers can craft experiences that don’t just function but truly ignite.

      +

      Beethoven invites you to uncover the architectural principles that make a composition — or a curriculum — sing. He compares symphonic form to effective educational frameworks, emphasizing how recurring motifs and variations foster retention, engagement, and deep emotional resonance. He asserts that structure should never constrain passion; rather, it channels it into something truly enduring.

      +

      Blending musical theory with pedagogical insight, Beethoven encourages educators to embrace contrast, conflict, and resolution in their lesson planning. Just as the second movement of a symphony can be a quiet reflection following a turbulent first, so too should pacing and emotional cadence be considered in designing impactful learning experiences.

      Session registration
      @@ -88,24 +88,24 @@
      Session registration
    2. -
      +
      -

      Impostor syndrome

      -

      Gogo

      +

      Folk Futures: Tradition in the Classroom

      +

      Antonín Dvořák

      - 8 AM in Zone Eater’s Belly -

      -
      +
      -

      Gogo takes the stage to explore the perilous and persnickety art of role hijacking in web development. With his uncanny ability to imitate others, he explains how generic divs and spans can be repurposed to mimic native semantic elements. However, he warns that without careful consideration, essential functionality might be lost—much like an echo that never quite captures the original voice.

      -

      Throughout his session, Gogo shares real-world examples where imitating components enhanced a design, but also instances where it led to confusion and usability issues. His playful yet insightful approach encourages developers to experiment boldly—but always with an eye on preserving accessibility and clarity.

      +

      Dvořák explores the power of cultural roots in modern music education, drawing from his own deep connection to the folk melodies of Bohemia. He demonstrates how incorporating regional traditions into teaching not only diversifies students’ musical vocabulary, but fosters a sense of identity and continuity across generations. Through examples from his own works, he illustrates how authenticity can coexist with innovation.

      +

      Attendees will learn strategies to weave traditional forms into contemporary curricula, using rhythm, language, and storytelling as tools of engagement. Dvořák makes the case that honoring heritage doesn’t mean resisting progress—instead, it provides a vibrant foundation on which students can build their own musical voices.

      Session registration
      @@ -119,24 +119,24 @@
      Session registration
    3. -
      +
      -

      Blitzing through barriers

      -

      Sabin Rene Figaro

      +

      Playful Dissonance: Teaching with Wit and Wonder

      +

      Francis Poulenc

      - 8 AM in Duncan’s Dojo -

      -
      +
      -

      Sabin’s session is a high-energy exploration of performance and responsive design, delivered with the force of his signature blitz techniques. He compares the need for rapid load times and smooth interactions to his own lightning-fast martial arts moves. Every pixel and piece of code should strike decisively, overcoming obstacles in the blink of an eye.

      -

      Through dynamic demonstrations and lively anecdotes, Sabin shows that speed and accessibility go hand in hand. His message is clear: just as a well-timed attack can change the tide of battle, a swift and accessible website can win over even the most demanding users.

      +

      Poulenc brings charm and surprise to the spotlight, making a compelling case for humor as pedagogy. Through anecdotes, musical excerpts, and sly asides, he reveals how wit and whimsy can disarm resistance and unlock creativity in learners of all ages. He shows that even dissonance, when playfully framed, becomes an invitation rather than a disruption.

      +

      This session challenges the notion that music education must be rigid or overly serious. Poulenc encourages instructors to embrace imperfection, joy, and even contradiction in their teaching. The result? A classroom atmosphere that not only nurtures skill but sparks lifelong curiosity and delight.

      Session registration
      From 7f637e3f93e2afc9abdd13d9d9a9ceed176f2d9a Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 27 May 2025 11:17:55 -0700 Subject: [PATCH 13/23] finesse --- .../patterns/disclosure/examples/css/disclosure-card.css | 1 + content/patterns/disclosure/examples/disclosure-card.html | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/content/patterns/disclosure/examples/css/disclosure-card.css b/content/patterns/disclosure/examples/css/disclosure-card.css index 059d6e9e2c..752edb7938 100644 --- a/content/patterns/disclosure/examples/css/disclosure-card.css +++ b/content/patterns/disclosure/examples/css/disclosure-card.css @@ -253,6 +253,7 @@ font-size: calc(20/16 * 1em); font-weight: 600; font-variant-caps: normal; + font-style: normal; } label:has(input[type="checkbox"]) { diff --git a/content/patterns/disclosure/examples/disclosure-card.html b/content/patterns/disclosure/examples/disclosure-card.html index dff38ed3a9..0cfda766ac 100644 --- a/content/patterns/disclosure/examples/disclosure-card.html +++ b/content/patterns/disclosure/examples/disclosure-card.html @@ -80,7 +80,7 @@

      Symphonic Structure: Form, Function, and FeelingSession registration

      @@ -111,7 +111,7 @@

      Folk Futures: Tradition in the Classroom

      Session registration
      @@ -142,7 +142,7 @@

      Playful Dissonance: Teaching with Wit and Wonder

      Session registration

    From 1bbd14babb88cc21565f771d8ccbe7680d54dffd Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 27 May 2025 11:19:57 -0700 Subject: [PATCH 14/23] run coverage report --- .../coverage-and-quality-report.html | 44 +++---------------- .../coverage-and-quality/prop-coverage.csv | 2 +- .../coverage-and-quality/role-coverage.csv | 2 +- 3 files changed, 9 insertions(+), 39 deletions(-) diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index 4876b0e3f3..0d7b7f6259 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -581,10 +581,7 @@

    Roles with More than One Guidance or Exa region - + Region
    • Accordion
      • @@ -897,7 +894,6 @@

      Properties and States with More than One
    • Disclosure (Show/Hide) for Image Description (HC)
    • Disclosure Navigation Menu with Top-Level Links
    • Disclosure Navigation Menu (HC)
      • -
    • Expandable Region
    • Actions Menu Button Using aria-activedescendant (HC)
    • Actions Menu Button Using element.focus() (HC)
    • Navigation Menu Button (HC)
      • @@ -1284,7 +1280,7 @@

      Coding Summary

      Total Examples - 63 + 62 High Contrast Documentation @@ -1292,11 +1288,11 @@

      Coding Summary

      Uses SVG - 37 + 36 Uses forced-colors media query - 4 + 3 Uses currentColor value @@ -1326,7 +1322,7 @@

      Coding Summary

      Mouse Events - 18 + 17 Pointer Events @@ -1594,11 +1590,11 @@

      Coding Practices

      Yes ex1 - 2 + 1 0 4 2 - banner,region,aria-hidden,aria-labelledby + banner,aria-hidden,aria-labelledby Disclosure (Show/Hide) for Answers to Frequently Asked Questions @@ -1652,19 +1648,6 @@

      Coding Practices

      3 navigation,region,aria-label - - Expandable Region - - - - - ex1 - 2 - 0 - 4 - 1 - banner,region,aria-expanded,aria-hidden,aria-labelledby - Feed Display prototype @@ -2315,14 +2298,6 @@

      SVG and High Contrast Techniques

      Yes - - Expandable Region - Yes - Yes - - Yes - - Feed Display @@ -2596,11 +2571,6 @@

      Mouse and Pointer Events

      Yes - - Expandable Region - Yes - - (Deprecated) Collapsible Dropdown Listbox Yes diff --git a/content/about/coverage-and-quality/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv index 3fd89437f2..f418f4b097 100644 --- a/content/about/coverage-and-quality/prop-coverage.csv +++ b/content/about/coverage-and-quality/prop-coverage.csv @@ -7,7 +7,7 @@ "aria-colcount","1","1","Guidance: Using aria-colcount and aria-colindex","Example: Data Grid" "aria-colindex","3","1","Guidance: Using aria-colcount and aria-colindex","Guidance: Using aria-colindex When Column Indices Are Contiguous","Guidance: Using aria-colindex When Column Indices Are Not Contiguous","Example: Data Grid" "aria-colspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" -"aria-controls","0","23","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure Card","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Expandable Region","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" +"aria-controls","0","22","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure Card","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" "aria-current","0","5","Example: Breadcrumb","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Navigation Menubar","Example: Navigation Treeview" "aria-describedby","1","6","Guidance: Describing by referencing content with aria-describedby","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Table" "aria-details","0","0" diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv index 922a681191..d3d2296440 100644 --- a/content/about/coverage-and-quality/role-coverage.csv +++ b/content/about/coverage-and-quality/role-coverage.csv @@ -53,7 +53,7 @@ "progressbar","0","0" "radio","3","4","Guidance: Radio Group Pattern","Guidance: For Radio Groups Not Contained in a Toolbar","Guidance: For Radio Group Contained in a Toolbar","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Toolbar" "radiogroup","0","4","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Toolbar" -"region","2","6","Guidance: Expandable Region Pattern","Guidance: Region","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Navigation Menubar","Example: Navigation Treeview","Example: Region Landmark" +"region","1","6","Guidance: Region","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Navigation Menubar","Example: Navigation Treeview","Example: Region Landmark" "row","0","4","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Table","Example: Treegrid Email Inbox" "rowgroup","0","1","Example: Table" "rowheader","0","0" From c91bd1bda3d8495efaedcfa72071da9918bb8766 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 27 May 2025 11:35:43 -0700 Subject: [PATCH 15/23] Revert "add unknown words to cspell config" This reverts commit c08ff502e7b8c1bfcac73a370061043109fbe0ee. --- cspell.json | 9 --------- 1 file changed, 9 deletions(-) diff --git a/cspell.json b/cspell.json index fb82228b17..3c2860ba09 100644 --- a/cspell.json +++ b/cspell.json @@ -11,7 +11,6 @@ "alertdialogs", "Anjou", "Aristov", - "Arrowny", "avacmd", "AXAPI", "Balusani", @@ -25,7 +24,6 @@ "Bookmarklets", "Bosc", "Botr", - "Branford", "Brinza", "Bucketwheat", "buttontext", @@ -108,7 +106,6 @@ "Henriette", "Hickson", "highlighttext", - "Highwind", "Higley", "Hillen", "hljs", @@ -128,9 +125,6 @@ "Joanmarie", "Kasper", "kbdshortcuts", - "Kefka", - "Kefka's", - "Kefka’s", "Kesteren", "Kiærskou", "Kowno", @@ -172,7 +166,6 @@ "Nemeth", "nightmode", "Nihonium", - "Narshe", "nodir", "norotate", "Nurthen", @@ -205,7 +198,6 @@ "rawgit", "Rearrangeable", "refreshable", - "Relm", "Renée", "respec", "Rhincodon", @@ -257,7 +249,6 @@ "textarea's", "textfield", "Thaarup", - "Thamasa", "Theresia", "Thiel", "Thiers", From 3ee63beb116f9a5a9adfcafed1a92dd1487f837a Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 27 May 2025 11:42:31 -0700 Subject: [PATCH 16/23] add unknown words to cspell config --- cspell.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/cspell.json b/cspell.json index 3c2860ba09..8c9940634a 100644 --- a/cspell.json +++ b/cspell.json @@ -10,6 +10,7 @@ "alertdialog", "alertdialogs", "Anjou", + "Antonín", "Aristov", "avacmd", "AXAPI", @@ -75,6 +76,8 @@ "dropup", "Dubnium", "Dušek", + "Dvořák", + "Église", "Elasmobranchii", "entrypoints", "EXPANDO", @@ -206,10 +209,12 @@ "Rhinodontidae", "roadmap", "Roentgenium", + "Roch", "rowgroups", "Royds", "rtrim", "Rudloff", + "Rudolfinum", "ruleset", "Sakura", "Sanaullah", From 99251228d367aceedd7450cdfc3e44c51d388492 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 27 May 2025 12:45:32 -0700 Subject: [PATCH 17/23] fix css lint errors --- .../examples/css/disclosure-card.css | 171 +++++++++--------- 1 file changed, 83 insertions(+), 88 deletions(-) diff --git a/content/patterns/disclosure/examples/css/disclosure-card.css b/content/patterns/disclosure/examples/css/disclosure-card.css index 752edb7938..83cc0262a6 100644 --- a/content/patterns/disclosure/examples/css/disclosure-card.css +++ b/content/patterns/disclosure/examples/css/disclosure-card.css @@ -1,5 +1,6 @@ .disclosure-cards { interpolate-size: allow-keywords; + --color-interactive-idle: transparent; --color-interactive-hover: gray; --color-interactive-hover-text: black; @@ -16,9 +17,8 @@ --transition-duration: 0; } - font-family: system-ui, - sans-serif; - font-size: calc(10/16 * 1rem); + font-family: system-ui, sans-serif; + font-size: calc(10 / 16 * 1rem); line-height: 1.4; background-color: ghostwhite; margin-inline: -2em; @@ -33,8 +33,8 @@ } *:focus { - outline: calc(0.25rem * 10/16) solid var(--color-interactive-focus); - outline-offset: calc(0.25rem * 10/16); + outline: calc(0.25rem * 10 / 16) solid var(--color-interactive-focus); + outline-offset: calc(0.25rem * 10 / 16); } h1, @@ -49,7 +49,7 @@ h3 { font-weight: 500; - font-size: calc(3.2rem * 10/16); + font-size: calc(3.2rem * 10 / 16); } button { @@ -58,64 +58,17 @@ color: inherit; border: none; background: none; - } - - button:not([aria-expanded]) { - font-size: calc(20/16 * 1rem); - padding: 0.5ch 1ch; - border: 1px solid black; - color: white; - font-weight: bold; - background-color: rebeccapurple; - border-radius: calc(0.25rem * 10/16); - - &:hover, - &:focus { - background-color: darkorchid; - } - - &:active { - background-color: midnightblue; - } - } - - .disclosure-card { - border: 0.2em solid transparent; - outline: 0 solid transparent; - outline-offset: 0; - transition: - outline-offset var(--transition-duration) ease, - outline-width var(--transition-duration) ease, - outline-color var(--transition-duration) ease, - border-color var(--transition-duration) ease; - - &:has(button[aria-expanded]:focus), - &[data-being-pressed] { - outline-offset: 0.25em; - outline-width: 0.3em; - outline-color: var(--color-interactive-focus); - - button[aria-expanded] { - color: var(--color-interactive-focus-text); - text-decoration-color: var(--color-interactive-focus); - } - } - - &[data-being-pressed] { - outline-width: 0.6em; - } - button[aria-expanded] { + &[aria-expanded] { display: inline-flex; gap: 0.175ch; border: 0; outline: 0; font-weight: 600; text-decoration: underline; - text-underline-offset: calc(1.4rem * 10/16); + text-underline-offset: calc(1.4rem * 10 / 16); text-decoration-color: var(--color-interactive-idle); - text-decoration-thickness: calc(0.2rem * 10/16); - + text-decoration-thickness: calc(0.2rem * 10 / 16); transition: color var(--transition-duration) ease, text-underline-offset var(--transition-duration) ease, @@ -128,21 +81,72 @@ scale var(--transition-duration) ease, rotate var(--transition-duration) ease; } + } + + &[aria-expanded="true"] svg { + rotate: -180deg; + } + + &:not([aria-expanded]) { + font-size: calc(20 / 16 * 1rem); + padding: 0.5ch 1ch; + border: 1px solid black; + color: white; + font-weight: bold; + background-color: rebeccapurple; + border-radius: calc(0.25rem * 10 / 16); + + &:hover, + &:focus { + background-color: darkorchid; + } - &[aria-expanded="true"] svg { - rotate: -180deg; + &:active { + background-color: midnightblue; } } + } + + .disclosure-card { + border: 0.2em solid transparent; + outline: 0 solid transparent; + outline-offset: 0; + transition: + outline-offset var(--transition-duration) ease, + outline-width var(--transition-duration) ease, + outline-color var(--transition-duration) ease, + border-color var(--transition-duration) ease; &:hover { border-color: var(--color-interactive-hover); } + &[data-being-pressed] button[aria-expanded] { + color: var(--color-interactive-focus-text); + text-decoration-color: var(--color-interactive-focus); + } + &:has(button[aria-expanded]:focus), - &:hover { + &[data-being-pressed] { + outline-offset: 0.25em; + outline-width: 0.3em; + outline-color: var(--color-interactive-focus); + } + + &:has(button[aria-expanded]:focus) button[aria-expanded] { + color: var(--color-interactive-focus-text); + text-decoration-color: var(--color-interactive-focus); + } + + &[data-being-pressed] { + outline-width: 0.6em; + } + + &:hover, + &:has(button[aria-expanded]:focus) { [aria-expanded] { color: var(--color-interactive-hover-text); - text-underline-offset: calc(.4rem * 10/16); + text-underline-offset: calc(0.4rem * 10 / 16); text-decoration-color: var(--color-interactive-hover-text); svg { @@ -152,31 +156,22 @@ } } - main, .sessions { list-style: none; display: flex; flex-wrap: wrap; - gap: 2em; - } - - main, - .sessions { + gap: 1em; flex-direction: column; - } - - .sessions { margin-block: 2em; - gap: 1em; } .session { - padding: 1.5em 1.5em 0 1.5em; + padding: 1.5em 1.5em 0; background-color: white; - box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.2); + box-shadow: 0 0.25em 0.5em rgba(0 0 0 / 20%); margin: 0.25em; border-radius: 0.25em; - max-inline-size: calc(56rem * 10/16); + max-inline-size: calc(56rem * 10 / 16); header, hgroup { @@ -192,7 +187,7 @@ h4 { color: black; - font-size: 2.0em; + font-size: 2em; font-style: normal; font-weight: 700; } @@ -202,16 +197,16 @@ } } - hgroup+p { + hgroup + p { display: flex; flex-wrap: wrap; font-size: 1.6em; - margin-block-start: calc(1rem * 10/16); + margin-block-start: calc(1rem * 10 / 16); } .location { padding-inline-end: 1ch; - border-inline-end: calc(0.175rem * 10/16) solid lightgray; + border-inline-end: calc(0.175rem * 10 / 16) solid lightgray; margin-inline-end: 0.75ch; } } @@ -222,7 +217,7 @@ overflow-y: clip; font-size: 1.6em; transition: all 0.5s ease; - padding-block-end: calc(1.5rem * 10/16); + padding-block-end: calc(1.5rem * 10 / 16); &[inert] { block-size: 0; @@ -232,25 +227,25 @@ .description { display: flex; flex-direction: column; - gap: calc(1.5rem * 10/16); - padding-block-start: calc(1.5rem * 10/16); + gap: calc(1.5rem * 10 / 16); + padding-block-start: calc(1.5rem * 10 / 16); - >*:first-child { - border-block-start: calc(0.175rem * 10/16) solid lightgray; - padding-block-start: calc(1.5rem * 10/16); + > *:first-child { + border-block-start: calc(0.175rem * 10 / 16) solid lightgray; + padding-block-start: calc(1.5rem * 10 / 16); } } form { display: flex; flex-direction: column; - gap: calc(1.6rem * 10/16); - margin-block-start: calc(1.5rem * 10/16); - border-block-start: calc(0.175rem * 10/16) solid lightgray; - padding-block-start: calc(1.5rem * 10/16); + gap: calc(1.6rem * 10 / 16); + margin-block-start: calc(1.5rem * 10 / 16); + border-block-start: calc(0.175rem * 10 / 16) solid lightgray; + padding-block-start: calc(1.5rem * 10 / 16); h5 { - font-size: calc(20/16 * 1em); + font-size: calc(20 / 16 * 1em); font-weight: 600; font-variant-caps: normal; font-style: normal; From ee76847f1bed7969c626a32852e6c8f735cf65ee Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 27 May 2025 12:55:21 -0700 Subject: [PATCH 18/23] add vnurc filter for false positive: bad "image" role on svg --- .vnurc | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.vnurc b/.vnurc index 0a6175d14b..06224b84ce 100644 --- a/.vnurc +++ b/.vnurc @@ -27,3 +27,5 @@ Bad value “presentation” for attribute “role” on element “svg”. Element “input” is missing required attribute “aria-checked”. # https://github.com/w3c/aria-practices/issues/3070 Attribute “aria-actions” not allowed on element “button” at this point. +# https://github.com/w3c/aria-practices/issues/3215 +Bad value “image” for attribute “role” on element “svg”. From 9c3ae030024cf40acdc5277e3681d1f248a174d9 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 27 May 2025 13:42:31 -0700 Subject: [PATCH 19/23] run reference tables --- content/index/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/content/index/index.html b/content/index/index.html index b5f61f2511..64a09fd7b3 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -529,7 +529,6 @@

      Examples By Properties and States

    • Disclosure (Show/Hide) for Image Description (HC)
    • Disclosure Navigation Menu with Top-Level Links
    • Disclosure Navigation Menu (HC)
      • -
    • Expandable Region
    • Actions Menu Button Using aria-activedescendant (HC)
    • Actions Menu Button Using element.focus() (HC)
    • Navigation Menu Button (HC)
      • From 4f1d95e4cf80736012816c1b7c773e64c39b30d4 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 27 May 2025 13:50:35 -0700 Subject: [PATCH 20/23] =?UTF-8?q?add=20=E2=80=9Cshow/hide=E2=80=9D=20to=20?= =?UTF-8?q?example=20name?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../coverage-and-quality-report.html | 10 +++++----- content/about/coverage-and-quality/prop-coverage.csv | 4 ++-- content/index/index.html | 4 ++-- content/patterns/disclosure/disclosure-pattern.html | 2 +- .../patterns/disclosure/examples/disclosure-card.html | 4 ++-- .../patterns/disclosure/examples/disclosure-faq.html | 2 +- .../examples/disclosure-image-description.html | 2 +- .../examples/disclosure-navigation-hybrid.html | 2 +- .../disclosure/examples/disclosure-navigation.html | 2 +- 9 files changed, 16 insertions(+), 16 deletions(-) diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index 0d7b7f6259..a2d5050005 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -889,7 +889,7 @@

      Properties and States with More than One
    • Date Picker Combobox (HC)
    • Select-Only Combobox
    • Editable Combobox with Grid Popup
      • -
    • Disclosure Card (HC)
      • +
    • Disclosure (Show/Hide) Card (HC)
    • Disclosure (Show/Hide) for Answers to Frequently Asked Questions (HC)
    • Disclosure (Show/Hide) for Image Description (HC)
    • Disclosure Navigation Menu with Top-Level Links
      • @@ -951,7 +951,7 @@

      Properties and States with More than One
    • Date Picker Combobox (HC)
    • Select-Only Combobox
    • Editable Combobox with Grid Popup
      • -
    • Disclosure Card (HC)
      • +
    • Disclosure (Show/Hide) Card (HC)
    • Disclosure (Show/Hide) for Answers to Frequently Asked Questions (HC)
    • Disclosure (Show/Hide) for Image Description (HC)
    • Disclosure Navigation Menu with Top-Level Links
      • @@ -1584,7 +1584,7 @@

      Coding Practices

      - Disclosure Card + Disclosure (Show/Hide) Card @@ -2275,7 +2275,7 @@

      SVG and High Contrast Techniques

      - Disclosure Card + Disclosure (Show/Hide) Card Yes Yes @@ -2567,7 +2567,7 @@

      Mouse and Pointer Events

      Yes - Disclosure Card + Disclosure (Show/Hide) Card Yes diff --git a/content/about/coverage-and-quality/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv index f418f4b097..64c42b359d 100644 --- a/content/about/coverage-and-quality/prop-coverage.csv +++ b/content/about/coverage-and-quality/prop-coverage.csv @@ -7,14 +7,14 @@ "aria-colcount","1","1","Guidance: Using aria-colcount and aria-colindex","Example: Data Grid" "aria-colindex","3","1","Guidance: Using aria-colcount and aria-colindex","Guidance: Using aria-colindex When Column Indices Are Contiguous","Guidance: Using aria-colindex When Column Indices Are Not Contiguous","Example: Data Grid" "aria-colspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" -"aria-controls","0","22","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure Card","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" +"aria-controls","0","22","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) Card","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" "aria-current","0","5","Example: Breadcrumb","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Navigation Menubar","Example: Navigation Treeview" "aria-describedby","1","6","Guidance: Describing by referencing content with aria-describedby","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Table" "aria-details","0","0" "aria-disabled","0","3","Example: Alert Dialog","Example: Editor Menubar","Example: Toolbar" "aria-dropeffect","0","0" "aria-errormessage","0","0" -"aria-expanded","0","23","Example: Accordion","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure Card","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"aria-expanded","0","23","Example: Accordion","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) Card","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" "aria-flowto","0","0" "aria-grabbed","0","0" "aria-haspopup","0","9","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar" diff --git a/content/index/index.html b/content/index/index.html index 64a09fd7b3..60064c41d8 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -524,7 +524,7 @@

      Examples By Properties and States

    • Date Picker Combobox (HC)
    • Select-Only Combobox
    • Editable Combobox with Grid Popup
      • -
    • Disclosure Card (HC)
      • +
    • Disclosure (Show/Hide) Card (HC)
    • Disclosure (Show/Hide) for Answers to Frequently Asked Questions (HC)
    • Disclosure (Show/Hide) for Image Description (HC)
    • Disclosure Navigation Menu with Top-Level Links
      • @@ -584,7 +584,7 @@

      Examples By Properties and States

    • Date Picker Combobox (HC)
    • Select-Only Combobox
    • Editable Combobox with Grid Popup
      • -
    • Disclosure Card (HC)
      • +
    • Disclosure (Show/Hide) Card (HC)
    • Disclosure (Show/Hide) for Answers to Frequently Asked Questions (HC)
    • Disclosure (Show/Hide) for Image Description (HC)
    • Disclosure Navigation Menu with Top-Level Links
      • diff --git a/content/patterns/disclosure/disclosure-pattern.html b/content/patterns/disclosure/disclosure-pattern.html index cd28cc7b61..b30eb449f1 100644 --- a/content/patterns/disclosure/disclosure-pattern.html +++ b/content/patterns/disclosure/disclosure-pattern.html @@ -34,7 +34,7 @@

      Examples

    • Disclosure (Show/Hide) of Answers to Frequently Asked Questions
    • Disclosure (Show/Hide) Navigation Menu
    • Disclosure (Show/Hide) Navigation Menu with Top-Level Links
      • -
    • Disclosure Card
      • +
    • Disclosure (Show/Hide) Card
    diff --git a/content/patterns/disclosure/examples/disclosure-card.html b/content/patterns/disclosure/examples/disclosure-card.html index 0cfda766ac..251b95946f 100644 --- a/content/patterns/disclosure/examples/disclosure-card.html +++ b/content/patterns/disclosure/examples/disclosure-card.html @@ -3,7 +3,7 @@ - Example Disclosure Card + Example Disclosure (Show/Hide) Card @@ -25,7 +25,7 @@
    -

    Example Disclosure Card

    +

    Example Disclosure (Show/Hide) Card

    About This Example

    diff --git a/content/patterns/disclosure/examples/disclosure-faq.html b/content/patterns/disclosure/examples/disclosure-faq.html index fbb8af2e9e..bff048b64c 100644 --- a/content/patterns/disclosure/examples/disclosure-faq.html +++ b/content/patterns/disclosure/examples/disclosure-faq.html @@ -42,7 +42,7 @@

    About This Example

    Example Disclosure Navigation Menu

  • Example Disclosure Navigation Menu with Top-Level Links
    • -
  • Disclosure Card
    • +
  • Disclosure (Show/Hide) Card
    • diff --git a/content/patterns/disclosure/examples/disclosure-image-description.html b/content/patterns/disclosure/examples/disclosure-image-description.html index 4f0deaf416..cf1b1afe9a 100644 --- a/content/patterns/disclosure/examples/disclosure-image-description.html +++ b/content/patterns/disclosure/examples/disclosure-image-description.html @@ -42,7 +42,7 @@

    About This Example

    Example Disclosure Navigation Menu
  • Example Disclosure Navigation Menu with Top-Level Links
    • -
  • Disclosure Card
    • +
  • Disclosure (Show/Hide) Card
    • diff --git a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html index 4d1cb20ffb..768a8437c1 100644 --- a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html +++ b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html @@ -48,7 +48,7 @@

    Important

  • Example Disclosure Navigation Menu
  • Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions
  • Example Disclosure (Show/Hide) for an Image Description
    • -
  • Disclosure Card
    • +
  • Disclosure (Show/Hide) Card
  • Navigation Menubar Example

    • Example Usage Options

    diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html index a956dd7b41..8e721ceb9b 100644 --- a/content/patterns/disclosure/examples/disclosure-navigation.html +++ b/content/patterns/disclosure/examples/disclosure-navigation.html @@ -48,7 +48,7 @@

    Important

  • Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions
  • Example Disclosure (Show/Hide) for an Image Description
  • Example Disclosure Navigation Menu with Top-Level Links
    • -
  • Disclosure Card
    • +
  • Disclosure (Show/Hide) Card
  • Navigation Menubar Example

    • Example Usage Options

    From 230638c4da8a359d221e8e9ce5143a39169dbc1c Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 27 May 2025 13:55:33 -0700 Subject: [PATCH 21/23] fix codepen integration --- .../disclosure/examples/disclosure-card.html | 190 +++++++++--------- 1 file changed, 96 insertions(+), 94 deletions(-) diff --git a/content/patterns/disclosure/examples/disclosure-card.html b/content/patterns/disclosure/examples/disclosure-card.html index 251b95946f..0559a214f4 100644 --- a/content/patterns/disclosure/examples/disclosure-card.html +++ b/content/patterns/disclosure/examples/disclosure-card.html @@ -53,103 +53,105 @@

    About This Example

    Example

    -
    -

    Musical Education Conference

    -
      -
    1. -
      -
      -
      -

      Symphonic Structure: Form, Function, and Feeling

      -

      Ludwig van Beethoven

      -
      -

      - 7 AM in Theater an der Wien - -

      -
      -
      -
      -

      Beethoven invites you to uncover the architectural principles that make a composition — or a curriculum — sing. He compares symphonic form to effective educational frameworks, emphasizing how recurring motifs and variations foster retention, engagement, and deep emotional resonance. He asserts that structure should never constrain passion; rather, it channels it into something truly enduring.

      -

      Blending musical theory with pedagogical insight, Beethoven encourages educators to embrace contrast, conflict, and resolution in their lesson planning. Just as the second movement of a symphony can be a quiet reflection following a turbulent first, so too should pacing and emotional cadence be considered in designing impactful learning experiences.

      +
      +
      +

      Musical Education Conference

      +
        +
      1. +
        +
        +
        +

        Symphonic Structure: Form, Function, and Feeling

        +

        Ludwig van Beethoven

        +
        +

        + 7 AM in Theater an der Wien + +

        +
        +
        +
        +

        Beethoven invites you to uncover the architectural principles that make a composition — or a curriculum — sing. He compares symphonic form to effective educational frameworks, emphasizing how recurring motifs and variations foster retention, engagement, and deep emotional resonance. He asserts that structure should never constrain passion; rather, it channels it into something truly enduring.

        +

        Blending musical theory with pedagogical insight, Beethoven encourages educators to embrace contrast, conflict, and resolution in their lesson planning. Just as the second movement of a symphony can be a quiet reflection following a turbulent first, so too should pacing and emotional cadence be considered in designing impactful learning experiences.

        +
        +
        +
        Session registration
        + + +
        -
        -
        Session registration
        - - -
        -
      -
      -
      2. -
    2. -
      -
      -
      -

      Folk Futures: Tradition in the Classroom

      -

      Antonín Dvořák

      -
      -

      - 8 AM in Rudolfinum Hall - -

      -
      -
      -
      -

      Dvořák explores the power of cultural roots in modern music education, drawing from his own deep connection to the folk melodies of Bohemia. He demonstrates how incorporating regional traditions into teaching not only diversifies students’ musical vocabulary, but fosters a sense of identity and continuity across generations. Through examples from his own works, he illustrates how authenticity can coexist with innovation.

      -

      Attendees will learn strategies to weave traditional forms into contemporary curricula, using rhythm, language, and storytelling as tools of engagement. Dvořák makes the case that honoring heritage doesn’t mean resisting progress—instead, it provides a vibrant foundation on which students can build their own musical voices.

      +
      +
      3. +
    3. +
      +
      +
      +

      Folk Futures: Tradition in the Classroom

      +

      Antonín Dvořák

      +
      +

      + 8 AM in Rudolfinum Hall + +

      +
      +
      +
      +

      Dvořák explores the power of cultural roots in modern music education, drawing from his own deep connection to the folk melodies of Bohemia. He demonstrates how incorporating regional traditions into teaching not only diversifies students’ musical vocabulary, but fosters a sense of identity and continuity across generations. Through examples from his own works, he illustrates how authenticity can coexist with innovation.

      +

      Attendees will learn strategies to weave traditional forms into contemporary curricula, using rhythm, language, and storytelling as tools of engagement. Dvořák makes the case that honoring heritage doesn’t mean resisting progress—instead, it provides a vibrant foundation on which students can build their own musical voices.

      +
      +
      +
      Session registration
      + + +
      -
      -
      Session registration
      - - -
      -
    - - -
  • -
    -
    -
    -

    Playful Dissonance: Teaching with Wit and Wonder

    -

    Francis Poulenc

    -
    -

    - 9 AM in Église Saint-Roch - -

    -
    -
    -
    -

    Poulenc brings charm and surprise to the spotlight, making a compelling case for humor as pedagogy. Through anecdotes, musical excerpts, and sly asides, he reveals how wit and whimsy can disarm resistance and unlock creativity in learners of all ages. He shows that even dissonance, when playfully framed, becomes an invitation rather than a disruption.

    -

    This session challenges the notion that music education must be rigid or overly serious. Poulenc encourages instructors to embrace imperfection, joy, and even contradiction in their teaching. The result? A classroom atmosphere that not only nurtures skill but sparks lifelong curiosity and delight.

    +
    +
    • +
  • +
    +
    +
    +

    Playful Dissonance: Teaching with Wit and Wonder

    +

    Francis Poulenc

    +
    +

    + 9 AM in Église Saint-Roch + +

    +
    +
    +
    +

    Poulenc brings charm and surprise to the spotlight, making a compelling case for humor as pedagogy. Through anecdotes, musical excerpts, and sly asides, he reveals how wit and whimsy can disarm resistance and unlock creativity in learners of all ages. He shows that even dissonance, when playfully framed, becomes an invitation rather than a disruption.

    +

    This session challenges the notion that music education must be rigid or overly serious. Poulenc encourages instructors to embrace imperfection, joy, and even contradiction in their teaching. The result? A classroom atmosphere that not only nurtures skill but sparks lifelong curiosity and delight.

    +
    +
    +
    Session registration
    + + +
    -
    -
    Session registration
    - - -
    - -
    -
    • - + + + + From 0b92ccb696de1fe0de747a72a6a309b0a8d1c073 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 27 May 2025 14:07:46 -0700 Subject: [PATCH 22/23] wrap for readability --- .../disclosure/examples/disclosure-card.html | 191 ++++++++++++++++-- 1 file changed, 173 insertions(+), 18 deletions(-) diff --git a/content/patterns/disclosure/examples/disclosure-card.html b/content/patterns/disclosure/examples/disclosure-card.html index 0559a214f4..942e2d4f54 100644 --- a/content/patterns/disclosure/examples/disclosure-card.html +++ b/content/patterns/disclosure/examples/disclosure-card.html @@ -58,24 +58,76 @@

    Example

    Musical Education Conference

    1. -
      +
      -

      Symphonic Structure: Form, Function, and Feeling

      +

      + Symphonic Structure: Form, Function, and Feeling +

      Ludwig van Beethoven

      7 AM in Theater an der Wien -

      -

      Beethoven invites you to uncover the architectural principles that make a composition — or a curriculum — sing. He compares symphonic form to effective educational frameworks, emphasizing how recurring motifs and variations foster retention, engagement, and deep emotional resonance. He asserts that structure should never constrain passion; rather, it channels it into something truly enduring.

      -

      Blending musical theory with pedagogical insight, Beethoven encourages educators to embrace contrast, conflict, and resolution in their lesson planning. Just as the second movement of a symphony can be a quiet reflection following a turbulent first, so too should pacing and emotional cadence be considered in designing impactful learning experiences.

      +

      + Beethoven invites you to uncover the architectural + principles that make a composition — or a curriculum — + sing. He compares symphonic form to + effective educational frameworks, emphasizing how + recurring motifs and variations foster retention, + engagement, and deep emotional resonance. He asserts + that structure should never constrain passion; rather, + it channels it into something truly enduring. +

      +

      + Blending musical theory with pedagogical insight, + Beethoven encourages educators to embrace contrast, + conflict, and resolution in their lesson planning. Just + as the second movement of a symphony can be a quiet + reflection following a turbulent first, so too should + pacing and emotional cadence be considered in designing + impactful learning experiences. +

      Session registration
      @@ -89,24 +141,77 @@
      Session registration
    2. -
      +
      -

      Folk Futures: Tradition in the Classroom

      +

      + Folk Futures: Tradition in the Classroom +

      Antonín Dvořák

      8 AM in Rudolfinum Hall -

      -

      Dvořák explores the power of cultural roots in modern music education, drawing from his own deep connection to the folk melodies of Bohemia. He demonstrates how incorporating regional traditions into teaching not only diversifies students’ musical vocabulary, but fosters a sense of identity and continuity across generations. Through examples from his own works, he illustrates how authenticity can coexist with innovation.

      -

      Attendees will learn strategies to weave traditional forms into contemporary curricula, using rhythm, language, and storytelling as tools of engagement. Dvořák makes the case that honoring heritage doesn’t mean resisting progress—instead, it provides a vibrant foundation on which students can build their own musical voices.

      +

      + Dvořák explores the power of cultural roots in modern + music education, drawing from his own deep connection to + the folk melodies of Bohemia. He demonstrates how + incorporating regional traditions into + teaching not only diversifies students’ musical + vocabulary, but fosters a sense of identity and + continuity across generations. Through examples from his + own works, he illustrates how authenticity can coexist + with innovation. +

      +

      + Attendees will learn strategies to weave traditional + forms into contemporary curricula, using rhythm, + language, and storytelling as tools of engagement. + Dvořák makes the case that honoring heritage doesn’t + mean resisting progress—instead, it provides a vibrant + foundation on which students can build their own musical + voices. +

      Session registration
      @@ -120,24 +225,74 @@
      Session registration
    3. -
      +
      -

      Playful Dissonance: Teaching with Wit and Wonder

      +

      + Playful Dissonance: Teaching with Wit and Wonder +

      Francis Poulenc

      9 AM in Église Saint-Roch -

      -

      Poulenc brings charm and surprise to the spotlight, making a compelling case for humor as pedagogy. Through anecdotes, musical excerpts, and sly asides, he reveals how wit and whimsy can disarm resistance and unlock creativity in learners of all ages. He shows that even dissonance, when playfully framed, becomes an invitation rather than a disruption.

      -

      This session challenges the notion that music education must be rigid or overly serious. Poulenc encourages instructors to embrace imperfection, joy, and even contradiction in their teaching. The result? A classroom atmosphere that not only nurtures skill but sparks lifelong curiosity and delight.

      +

      + Poulenc brings charm and surprise to the spotlight, + making a compelling case for humor as + pedagogy. Through anecdotes, musical excerpts, and + sly asides, he reveals how wit and whimsy can disarm + resistance and unlock creativity in learners of all + ages. He shows that even dissonance, when playfully + framed, becomes an invitation rather than a disruption. +

      +

      + This session challenges the notion that music education + must be rigid or overly serious. Poulenc encourages + instructors to embrace imperfection, joy, and even + contradiction in their teaching. The result? A classroom + atmosphere that not only nurtures skill but sparks + lifelong curiosity and delight. +

      Session registration
      From ebd26b4826cefddf0badc6db8bcef17a55f843f9 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 27 May 2025 14:19:29 -0700 Subject: [PATCH 23/23] relate list to heading --- content/patterns/disclosure/examples/disclosure-card.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/patterns/disclosure/examples/disclosure-card.html b/content/patterns/disclosure/examples/disclosure-card.html index 942e2d4f54..d905253b85 100644 --- a/content/patterns/disclosure/examples/disclosure-card.html +++ b/content/patterns/disclosure/examples/disclosure-card.html @@ -55,8 +55,8 @@

      Example

      -

      Musical Education Conference

      -
        +

        Musical Education Conference

        +