Add “expandable region” pattern

content/about/coverage-and-quality/coverage-and-quality-report.html

@@ -893,6 +893,7 @@ <h2 id="props_with_more_than_one_label">Properties and States with More than One
                 <li><a href="../../../content/patterns/disclosure/examples/disclosure-image-description.html">Disclosure (Show/Hide) for Image Description</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../../content/patterns/disclosure/examples/disclosure-navigation-hybrid.html">Disclosure Navigation Menu with Top-Level Links</a></li>
                 <li><a href="../../../content/patterns/disclosure/examples/disclosure-navigation.html">Disclosure Navigation Menu</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../../../content/patterns/expandable-region/examples/expandable-region.html">Expandable Region</a></li>
                 <li><a href="../../../content/patterns/menu-button/examples/menu-button-actions-active-descendant.html">Actions Menu Button  Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../../content/patterns/menu-button/examples/menu-button-actions.html">Actions Menu Button  Using element.focus()</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../../content/patterns/menu-button/examples/menu-button-links.html">Navigation Menu Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -1278,19 +1279,19 @@ <h3 id="example_summary">Coding Summary</h3>
         <tbody>
           <tr>
             <th scope="row">Total Examples</th>
-            <td id="example_summary_total">61</td>
+            <td id="example_summary_total">62</td>
           </tr>
           <tr>
             <th scope="row">High Contrast Documentation</th>
             <td id="example_summary_hc">32</td>
           </tr>
           <tr>
             <th scope="row">Uses SVG</th>
-            <td id="example_summary_svg">35</td>
+            <td id="example_summary_svg">36</td>
           </tr>
           <tr>
             <th scope="row">Uses <code>forced-colors</code> media query</th>
-            <td id="example_summary_force_colors">2</td>
+            <td id="example_summary_force_colors">3</td>
           </tr>
           <tr>
             <th scope="row">Uses <code>currentColor</code> value</th>
@@ -1320,7 +1321,7 @@ <h3 id="example_summary">Coding Summary</h3>
           </tr>
           <tr>
             <th scope="row">Mouse Events</th>
-            <td id="example_summary_mouse">16</td>
+            <td id="example_summary_mouse">17</td>
           </tr>
           <tr>
             <th scope="row">Pointer Events</th>
@@ -1633,6 +1634,19 @@ <h3 id="example_coding_practices">Coding Practices</h3>
             <td>3</td>
             <td>navigation,region,aria-label</td>
           </tr>
+          <tr>
+            <td><a href="../../../content/patterns/expandable-region/examples/expandable-region.html">Expandable Region</a></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td>ex1</td>
+            <td>2</td>
+            <td>0</td>
+            <td>4</td>
+            <td>1</td>
+            <td>banner,region,aria-expanded,aria-hidden,aria-labelledby</td>
+          </tr>
           <tr>
             <td><a href="../../../content/patterns/feed/examples/feed-display.html">Feed Display</a></td>
             <td>prototype</td>
@@ -2275,6 +2289,14 @@ <h3 id="example_graphics_techniques">SVG and High Contrast Techniques</h3>
             <td></td>
             <td>Yes</td>
           </tr>
+          <tr>
+            <td><a href="../../../content/patterns/expandable-region/examples/expandable-region.html">Expandable Region</a></td>
+            <td>Yes</td>
+            <td>Yes</td>
+            <td></td>
+            <td>Yes</td>
+            <td></td>
+          </tr>
           <tr>
             <td><a href="../../../content/patterns/feed/examples/feed-display.html">Feed Display</a></td>
             <td></td>
@@ -2543,6 +2565,11 @@ <h3 id="example_mouse_pointer">Mouse and Pointer Events</h3>
             <td></td>
             <td>Yes</td>
           </tr>
+          <tr>
+            <td><a href="../../../content/patterns/expandable-region/examples/expandable-region.html">Expandable Region</a></td>
+            <td>Yes</td>
+            <td></td>
+          </tr>
           <tr>
             <td><a href="../../../content/patterns/listbox/examples/listbox-collapsible.html">(Deprecated) Collapsible Dropdown Listbox</a></td>
             <td>Yes</td>

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"

content/index/index.html

@@ -528,6 +528,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="../patterns/disclosure/examples/disclosure-image-description.html">Disclosure (Show/Hide) for Image Description</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/disclosure/examples/disclosure-navigation-hybrid.html">Disclosure Navigation Menu with Top-Level Links</a></li>
                 <li><a href="../patterns/disclosure/examples/disclosure-navigation.html">Disclosure Navigation Menu</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="../patterns/expandable-region/examples/expandable-region.html">Expandable Region</a></li>
                 <li><a href="../patterns/menu-button/examples/menu-button-actions-active-descendant.html">Actions Menu Button  Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/menu-button/examples/menu-button-actions.html">Actions Menu Button  Using element.focus()</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/menu-button/examples/menu-button-links.html">Navigation Menu Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>

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;
+      }
+    }
+  }
+}