Skip to content

Commit 8267510

Browse files
adampagehoward-emcking65
authored
Add “expandable card/region” example to disclosure pattern (pull #3251)
Resolves issue #3215 by adding a new example page under the disclosure pattern that illustrates cards that can be expanded and collapsed. --------- Co-authored-by: Howard Edwards <[email protected]> Co-authored-by: Matt King <[email protected]>
1 parent 02b8edd commit 8267510

15 files changed

+1205
-20
lines changed

.vnurc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,5 @@ Element “search” not allowed as child of element “div” in this context.*
3232
# https://github.com/validator/validator/issues/1364
3333
The “role” attribute must not be used on a “td” element which has a “table” ancestor with no “role” attribute, or with a “role” attribute whose value is “table”, “grid”, or “treegrid”.
3434
The “role” attribute must not be used on a “tr” element which has a “table” ancestor with no “role” attribute, or with a “role” attribute whose value is “table”, “grid”, or “treegrid”.
35+
# https://github.com/w3c/aria-practices/issues/3215
36+
Bad value “image” for attribute “role” on element “svg”.

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

Lines changed: 47 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ <h2>About These Reports</h2>
5454
<ul>
5555
<li><a href="#csv_files">CSV Files of Role, Properties and States Coverage</a></li>
5656
<li><a href="#roles_with_no_examples">Roles with no Guidance or Examples (<span class="roles_with_no_examples_count">28</span>)</a></li>
57-
<li><a href="#roles_with_one_example">Roles with at Least One Guidance or Example (<span class="roles_with_one_example_count">13</span>)</a></li>
58-
<li><a href="#roles_with_more_than_one_example">Roles with More than One Guidance or Example (<span class="roles_with_more_than_one_examples_count">37</span>)</a></li>
57+
<li><a href="#roles_with_one_example">Roles with at Least One Guidance or Example (<span class="roles_with_one_example_count">12</span>)</a></li>
58+
<li><a href="#roles_with_more_than_one_example">Roles with More than One Guidance or Example (<span class="roles_with_more_than_one_examples_count">38</span>)</a></li>
5959
<li><a href="#props_with_no_examples">Properties and States with no Examples (<span class="props_with_no_examples_count">12</span>)</a></li>
6060
<li><a href="#props_with_one_example">Properties and States with One Examples (<span class="props_with_one_example_count">8</span>)</a></li>
6161
<li><a href="#props_with_more_than_one_example">Properties and States with More than One Example (<span class="props_with_more_than_one_examples_count">28</span>)</a></li>
@@ -105,7 +105,7 @@ <h2 id="roles_with_no_examples_label">Roles with No Guidance or Examples (<span
105105
</section>
106106

107107
<section id="roles_with_one_example">
108-
<h2 id="roles_with_one_example_label">Roles with at Least One Guidance or Example (<span class="roles_with_one_example_count">13</span>)</h2>
108+
<h2 id="roles_with_one_example_label">Roles with at Least One Guidance or Example (<span class="roles_with_one_example_count">12</span>)</h2>
109109
<div><strong>NOTE:</strong> The HC abbreviation means example has High Contrast support.</div>
110110
<table aria-labelledby="roles_with_one_example_label" class="data attributes">
111111
<thead>
@@ -120,12 +120,6 @@ <h2 id="roles_with_one_example_label">Roles with at Least One Guidance or Exampl
120120
<td><code>alertdialog</code></td>
121121
<td></td>
122122
<td><a href="../../../content/patterns/alertdialog/examples/alertdialog.html">Alert Dialog</a>
123-
</td>
124-
</tr>
125-
<tr>
126-
<td><code>article</code></td>
127-
<td></td>
128-
<td><a href="../../../content/patterns/feed/examples/feed.html">Infinite Scrolling Feed</a>
129123
</td>
130124
</tr>
131125
<tr>
@@ -204,7 +198,7 @@ <h2 id="roles_with_one_example_label">Roles with at Least One Guidance or Exampl
204198
</section>
205199

206200
<section id="roles_with_more_than_one_example">
207-
<h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Example (<span class="roles_with_more_than_one_examples_count">37</span>)</h2>
201+
<h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Example (<span class="roles_with_more_than_one_examples_count">38</span>)</h2>
208202
<div><strong>NOTE:</strong> The HC abbreviation means example has High Contrast support.</div>
209203
<table aria-labelledby="roles_with_more_than_one_label" class="data attributes">
210204
<thead>
@@ -226,6 +220,15 @@ <h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Exa
226220
<li><a href="../../../content/patterns/alert/examples/alert.html">Alert</a></li>
227221
<li><a href="../../../content/patterns/alertdialog/examples/alertdialog.html">Alert Dialog</a></li>
228222
</ul>
223+
</td>
224+
</tr>
225+
<tr>
226+
<td><code>article</code></td>
227+
<td></td>
228+
<td><ul>
229+
<li><a href="../../../content/patterns/disclosure/examples/disclosure-card.html">Disclosure (Show/Hide) Card</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
230+
<li><a href="../../../content/patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></li>
231+
</ul>
229232
</td>
230233
</tr>
231234
<tr>
@@ -889,6 +892,7 @@ <h2 id="props_with_more_than_one_label">Properties and States with More than One
889892
<li><a href="../../../content/patterns/combobox/examples/combobox-datepicker.html">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
890893
<li><a href="../../../content/patterns/combobox/examples/combobox-select-only.html">Select-Only Combobox</a></li>
891894
<li><a href="../../../content/patterns/combobox/examples/grid-combo.html">Editable Combobox with Grid Popup</a></li>
895+
<li><a href="../../../content/patterns/disclosure/examples/disclosure-card.html">Disclosure (Show/Hide) Card</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
892896
<li><a href="../../../content/patterns/disclosure/examples/disclosure-faq.html">Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
893897
<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>
894898
<li><a href="../../../content/patterns/disclosure/examples/disclosure-navigation-hybrid.html">Disclosure Navigation Menu with Top-Level Links</a></li>
@@ -950,6 +954,7 @@ <h2 id="props_with_more_than_one_label">Properties and States with More than One
950954
<li><a href="../../../content/patterns/combobox/examples/combobox-datepicker.html">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
951955
<li><a href="../../../content/patterns/combobox/examples/combobox-select-only.html">Select-Only Combobox</a></li>
952956
<li><a href="../../../content/patterns/combobox/examples/grid-combo.html">Editable Combobox with Grid Popup</a></li>
957+
<li><a href="../../../content/patterns/disclosure/examples/disclosure-card.html">Disclosure (Show/Hide) Card</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
953958
<li><a href="../../../content/patterns/disclosure/examples/disclosure-faq.html">Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
954959
<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>
955960
<li><a href="../../../content/patterns/disclosure/examples/disclosure-navigation-hybrid.html">Disclosure Navigation Menu with Top-Level Links</a></li>
@@ -1278,23 +1283,23 @@ <h3 id="example_summary">Coding Summary</h3>
12781283
<tbody>
12791284
<tr>
12801285
<th scope="row">Total Examples</th>
1281-
<td id="example_summary_total">61</td>
1286+
<td id="example_summary_total">62</td>
12821287
</tr>
12831288
<tr>
12841289
<th scope="row">High Contrast Documentation</th>
1285-
<td id="example_summary_hc">32</td>
1290+
<td id="example_summary_hc">33</td>
12861291
</tr>
12871292
<tr>
12881293
<th scope="row">Uses SVG</th>
1289-
<td id="example_summary_svg">35</td>
1294+
<td id="example_summary_svg">36</td>
12901295
</tr>
12911296
<tr>
12921297
<th scope="row">Uses <code>forced-colors</code> media query</th>
1293-
<td id="example_summary_force_colors">2</td>
1298+
<td id="example_summary_force_colors">3</td>
12941299
</tr>
12951300
<tr>
12961301
<th scope="row">Uses <code>currentColor</code> value</th>
1297-
<td id="example_summary_current_color">28</td>
1302+
<td id="example_summary_current_color">29</td>
12981303
</tr>
12991304
<!--
13001305
<tr>
@@ -1320,7 +1325,7 @@ <h3 id="example_summary">Coding Summary</h3>
13201325
</tr>
13211326
<tr>
13221327
<th scope="row">Mouse Events</th>
1323-
<td id="example_summary_mouse">16</td>
1328+
<td id="example_summary_mouse">17</td>
13241329
</tr>
13251330
<tr>
13261331
<th scope="row">Pointer Events</th>
@@ -1581,6 +1586,19 @@ <h3 id="example_coding_practices">Coding Practices</h3>
15811586
<td>3</td>
15821587
<td></td>
15831588
</tr>
1589+
<tr>
1590+
<td><a href="../../../content/patterns/disclosure/examples/disclosure-card.html">Disclosure (Show/Hide) Card</a></td>
1591+
<td></td>
1592+
<td></td>
1593+
<td></td>
1594+
<td>Yes</td>
1595+
<td>ex1</td>
1596+
<td>1</td>
1597+
<td>1</td>
1598+
<td>4</td>
1599+
<td>2</td>
1600+
<td>banner,article,aria-hidden,aria-labelledby</td>
1601+
</tr>
15841602
<tr>
15851603
<td><a href="../../../content/patterns/disclosure/examples/disclosure-faq.html">Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a></td>
15861604
<td>class</td>
@@ -2259,6 +2277,14 @@ <h3 id="example_graphics_techniques">SVG and High Contrast Techniques</h3>
22592277
<td></td>
22602278
<td></td>
22612279
</tr>
2280+
<tr>
2281+
<td><a href="../../../content/patterns/disclosure/examples/disclosure-card.html">Disclosure (Show/Hide) Card</a></td>
2282+
<td>Yes</td>
2283+
<td>Yes</td>
2284+
<td></td>
2285+
<td>Yes</td>
2286+
<td>Yes</td>
2287+
</tr>
22622288
<tr>
22632289
<td><a href="../../../content/patterns/disclosure/examples/disclosure-faq.html">Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a></td>
22642290
<td></td>
@@ -2543,6 +2569,11 @@ <h3 id="example_mouse_pointer">Mouse and Pointer Events</h3>
25432569
<td></td>
25442570
<td>Yes</td>
25452571
</tr>
2572+
<tr>
2573+
<td><a href="../../../content/patterns/disclosure/examples/disclosure-card.html">Disclosure (Show/Hide) Card</a></td>
2574+
<td>Yes</td>
2575+
<td></td>
2576+
</tr>
25462577
<tr>
25472578
<td><a href="../../../content/patterns/listbox/examples/listbox-collapsible.html">(Deprecated) Collapsible Dropdown Listbox</a></td>
25482579
<td>Yes</td>

content/about/coverage-and-quality/prop-coverage.csv

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
"aria-colcount","1","1","Guidance: Using aria-colcount and aria-colindex","Example: Data Grid"
88
"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"
99
"aria-colspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan"
10-
"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"
10+
"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"
1111
"aria-current","0","5","Example: Breadcrumb","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Navigation Menubar","Example: Navigation Treeview"
1212
"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"
1313
"aria-details","0","0"
1414
"aria-disabled","0","3","Example: Alert Dialog","Example: Editor Menubar","Example: Toolbar"
1515
"aria-dropeffect","0","0"
1616
"aria-errormessage","0","0"
17-
"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"
17+
"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"
1818
"aria-flowto","0","0"
1919
"aria-grabbed","0","0"
2020
"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"

content/about/coverage-and-quality/role-coverage.csv

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"alert","2","2","Guidance: Alert Pattern","Guidance: Alert and Message Dialogs Pattern","Example: Alert","Example: Alert Dialog"
33
"alertdialog","0","1","Example: Alert Dialog"
44
"application","0","0"
5-
"article","0","1","Example: Infinite Scrolling Feed"
5+
"article","0","2","Example: Disclosure (Show/Hide) Card","Example: Infinite Scrolling Feed"
66
"banner","1","3","Guidance: Banner","Example: Navigation Menubar","Example: Navigation Treeview","Example: Banner Landmark"
77
"button","2","2","Guidance: Button Pattern","Guidance: Menu Button Pattern","Example: Button (IDL Version)","Example: Button"
88
"caption","0","0"

content/index/index.html

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,12 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
4949
</tr>
5050
<tr>
5151
<td><code>article</code></td>
52-
<td><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></td>
52+
<td>
53+
<ul>
54+
<li><a href="../patterns/disclosure/examples/disclosure-card.html">Disclosure (Show/Hide) Card</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
55+
<li><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></li>
56+
</ul>
57+
</td>
5358
</tr>
5459
<tr>
5560
<td><code>banner</code></td>
@@ -524,6 +529,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
524529
<li><a href="../patterns/combobox/examples/combobox-datepicker.html">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
525530
<li><a href="../patterns/combobox/examples/combobox-select-only.html">Select-Only Combobox</a></li>
526531
<li><a href="../patterns/combobox/examples/grid-combo.html">Editable Combobox with Grid Popup</a></li>
532+
<li><a href="../patterns/disclosure/examples/disclosure-card.html">Disclosure (Show/Hide) Card</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
527533
<li><a href="../patterns/disclosure/examples/disclosure-faq.html">Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
528534
<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>
529535
<li><a href="../patterns/disclosure/examples/disclosure-navigation-hybrid.html">Disclosure Navigation Menu with Top-Level Links</a></li>
@@ -583,6 +589,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
583589
<li><a href="../patterns/combobox/examples/combobox-datepicker.html">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
584590
<li><a href="../patterns/combobox/examples/combobox-select-only.html">Select-Only Combobox</a></li>
585591
<li><a href="../patterns/combobox/examples/grid-combo.html">Editable Combobox with Grid Popup</a></li>
592+
<li><a href="../patterns/disclosure/examples/disclosure-card.html">Disclosure (Show/Hide) Card</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
586593
<li><a href="../patterns/disclosure/examples/disclosure-faq.html">Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
587594
<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>
588595
<li><a href="../patterns/disclosure/examples/disclosure-navigation-hybrid.html">Disclosure Navigation Menu with Top-Level Links</a></li>

0 commit comments

Comments
 (0)