Skip to content

Commit

Permalink
Carousel Pattern and Example: Link pattern to example and update index
Browse files Browse the repository at this point in the history 
In carousel design pattern section:
1. Add link to review issue 970.
2. Add paragraph under example heading that includes a link to the example page and a description of the example.

On auto-rotating image carousel Example page, update link to review issue to refer to issue 971.

Run reference-tables node script to update index of examples, so it includes carousel example.
  • Loading branch information
@mcking65
mcking65 committed Jan 15, 2019
1 parent 4c846e4 commit 45d342c
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 28 deletions.
8 changes: 6 additions & 2 deletions aria-practices.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -480,6 +480,11 @@ <h4>WAI-ARIA Roles, States, and Properties</h4>

<section class="widget" id="carousel">
<h3>Carousel (Slide Show or Image Rotator)</h3>
<p>
<strong>NOTE:</strong> This is a new pattern as of the January 2019 release of WAI-ARIA Authoring Practices 1.1.
Please provide feedback in
<a href="https://github.com/w3c/aria-practices/issues/970">issue 970.</a>
</p>
<p>
A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.
Typically, one slide is displayed at a time, and users can activate a next or previous slide control that hides the current slide and &quot;rotates&quot; the next or previous slide into view.
Expand Down Expand Up @@ -507,8 +512,7 @@ <h3>Carousel (Slide Show or Image Rotator)</h3>
<section class="notoc">
<h4>Example</h4>
<p>
Development of an example for this pattern is tracked by
<a href="https://github.com/w3c/aria-practices/issues/458">issue 458.</a>
<a href="examples/carousel/carousel-1/carousel-1.html">Auto-Rotating Image Carousel Example:</a> A basic image carousel that demonstrates the accessibility features necessary for carousels that rotate automatically on page load.
</p>
</section>

Expand Down
2 changes: 1 addition & 1 deletion examples/carousel/carousel-1/carousel-1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h1>Auto-Rotating Image Carousel Example</h1>
<p>
<strong>NOTE:</strong> This is a new example as of the January 2019 release of WAI-ARIA Authoring Practices 1.1.
Please provide feedback in
<a href="https://github.com/w3c/aria-practices/issues/968">issue 968.</a>
<a href="https://github.com/w3c/aria-practices/issues/971">issue 971.</a>
</p>
<p>
The following example implementation of the
Expand Down
75 changes: 50 additions & 25 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
</tr><tr>
<td><code>button</code></td>
<td> <ul> <li><a href="../examples//button/button.html">Button </a></li>
<li><a href="../examples//toolbar/toolbar.html">Toolbar </a></li></ul></td>
<li><a href="../examples//carousel/carousel-1/carousel-1.html">Auto-Rotating Image Carousel </a></li></ul></td>
</tr><tr>
<td><code>checkbox</code></td>
<td> <ul> <li><a href="../examples//checkbox/checkbox-1/checkbox-1.html">Checkbox (Two State) </a></li>
Expand Down Expand Up @@ -78,14 +78,15 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
</tr><tr>
<td><code>grid</code></td>
<td> <ul> <li><a href="../examples//combobox/aria1.1pattern/grid-combo.html">ARIA 1.1 Combobox with Grid Popup </a></li>
<li><a href="../examples//grid/LayoutGrids.html">Layout Grid </a></li>
<li><a href="../examples//grid/dataGrids.html">Data Grid </a></li></ul></td>
<li><a href="../examples//grid/dataGrids.html">Data Grid </a></li>
<li><a href="../examples//grid/LayoutGrids.html">Layout Grid </a></li></ul></td>
</tr><tr>
<td><code>gridcell</code></td>
<td> <a href="../examples//grid/LayoutGrids.html">Layout Grid </a></td>
</tr><tr>
<td><code>group</code></td>
<td> <ul> <li><a href="../examples//checkbox/checkbox-1/checkbox-1.html">Checkbox (Two State) </a></li>
<td> <ul> <li><a href="../examples//carousel/carousel-1/carousel-1.html">Auto-Rotating Image Carousel </a></li>
<li><a href="../examples//checkbox/checkbox-1/checkbox-1.html">Checkbox (Two State) </a></li>
<li><a href="../examples//menubar/menubar-2/menubar-2.html">Editor Menubar </a></li>
<li><a href="../examples//treeview/treeview-2/treeview-2a.html">Navigation Treeview Using Computed Properties </a></li>
<li><a href="../examples//treeview/treeview-2/treeview-2b.html">Navigation Treeview Using Declared Properties </a></li></ul></td>
Expand All @@ -110,7 +111,8 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<li><a href="../examples//menu-button/menu-button-actions.html">Actions Menu Button Using element.focus() </a></li>
<li><a href="../examples//menu-button/menu-button-links.html">Navigation Menu Button </a></li>
<li><a href="../examples//menubar/menubar-1/menubar-1.html">Navigation Menubar </a></li>
<li><a href="../examples//menubar/menubar-2/menubar-2.html">Editor Menubar </a></li></ul></td>
<li><a href="../examples//menubar/menubar-2/menubar-2.html">Editor Menubar </a></li>
<li><a href="../examples//toolbar/toolbar.html">Toolbar </a></li></ul></td>
</tr><tr>
<td><code>menubar</code></td>
<td> <ul> <li><a href="../examples//menubar/menubar-1/menubar-1.html">Navigation Menubar </a></li>
Expand All @@ -126,7 +128,8 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<td> <a href="../examples//menubar/menubar-2/menubar-2.html">Editor Menubar </a></td>
</tr><tr>
<td><code>menuitemradio</code></td>
<td> <a href="../examples//menubar/menubar-2/menubar-2.html">Editor Menubar </a></td>
<td> <ul> <li><a href="../examples//menubar/menubar-2/menubar-2.html">Editor Menubar </a></li>
<li><a href="../examples//toolbar/toolbar.html">Toolbar </a></li></ul></td>
</tr><tr>
<td><code>navigation</code></td>
<td> <a href="../examples/landmarks/navigation.html">Navigation Landmark</a></td>
Expand All @@ -143,11 +146,13 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
</tr><tr>
<td><code>radio</code></td>
<td> <ul> <li><a href="../examples//radio/radio-1/radio-1.html">Radio Group Using Roving tabindex </a></li>
<li><a href="../examples//radio/radio-2/radio-2.html">Radio Group Using aria-activedescendant </a></li></ul></td>
<li><a href="../examples//radio/radio-2/radio-2.html">Radio Group Using aria-activedescendant </a></li>
<li><a href="../examples//toolbar/toolbar.html">Toolbar </a></li></ul></td>
</tr><tr>
<td><code>radiogroup</code></td>
<td> <ul> <li><a href="../examples//radio/radio-1/radio-1.html">Radio Group Using Roving tabindex </a></li>
<li><a href="../examples//radio/radio-2/radio-2.html">Radio Group Using aria-activedescendant </a></li></ul></td>
<li><a href="../examples//radio/radio-2/radio-2.html">Radio Group Using aria-activedescendant </a></li>
<li><a href="../examples//toolbar/toolbar.html">Toolbar </a></li></ul></td>
</tr><tr>
<td><code>region</code></td>
<td> <a href="../examples/landmarks/region.html">Region Landmark</a></td>
Expand All @@ -171,6 +176,9 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<td> <ul> <li><a href="../examples//slider/multithumb-slider.html">Horizontal Multi-Thumb Slider </a></li>
<li><a href="../examples//slider/slider-1.html">Horizontal Slider </a></li>
<li><a href="../examples//slider/slider-2.html">Slider with aria-orientation and aria-valuetext </a></li></ul></td>
</tr><tr>
<td><code>spinbutton</code></td>
<td> <a href="../examples//toolbar/toolbar.html">Toolbar </a></td>
</tr><tr>
<td><code>tab</code></td>
<td> <ul> <li><a href="../examples//tabs/tabs-1/tabs.html"> Tabs with Automatic Activation </a></li>
Expand Down Expand Up @@ -205,6 +213,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<li><a href="../examples//treeview/treeview-2/treeview-2a.html">Navigation Treeview Using Computed Properties </a></li>
<li><a href="../examples//treeview/treeview-2/treeview-2b.html">Navigation Treeview Using Declared Properties </a></li></ul></td>
</tr>

</tbody>
</table>

Expand Down Expand Up @@ -248,7 +257,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="../examples//checkbox/checkbox-2/checkbox-2.html">Checkbox (Mixed-State) </a></li>
<li><a href="../examples//menubar/menubar-2/menubar-2.html">Editor Menubar </a></li>
<li><a href="../examples//radio/radio-1/radio-1.html">Radio Group Using Roving tabindex </a></li>
<li><a href="../examples//radio/radio-2/radio-2.html">Radio Group Using aria-activedescendant </a></li></ul></td>
<li><a href="../examples//radio/radio-2/radio-2.html">Radio Group Using aria-activedescendant </a></li>
<li><a href="../examples//toolbar/toolbar.html">Toolbar </a></li></ul></td>
</tr><tr>
<td><code>aria-colcount</code></td>
<td><a href="../examples//grid/dataGrids.html">Data Grid </a></td>
Expand All @@ -264,7 +274,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="../examples//menu-button/menu-button-actions.html">Actions Menu Button Using element.focus() </a></li>
<li><a href="../examples//menu-button/menu-button-links.html">Navigation Menu Button </a></li>
<li><a href="../examples//tabs/tabs-1/tabs.html"> Tabs with Automatic Activation </a></li>
<li><a href="../examples//tabs/tabs-2/tabs.html"> Tabs with Manual Activation </a></li></ul></td>
<li><a href="../examples//tabs/tabs-2/tabs.html"> Tabs with Manual Activation </a></li>
<li><a href="../examples//toolbar/toolbar.html">Toolbar </a></li></ul></td>
</tr><tr>
<td><code>aria-describedby</code></td>
<td> <ul> <li><a href="../examples//dialog-modal/alertdialog.html">Alert Dialog </a></li>
Expand All @@ -274,7 +285,9 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
</tr><tr>
<td><code>aria-disabled</code></td>
<td> <ul> <li><a href="../examples//accordion/accordion.html">Accordion </a></li>
<li><a href="../examples//menubar/menubar-2/menubar-2.html">Editor Menubar </a></li></ul></td>
<li><a href="../examples//carousel/carousel-1/carousel-1.html">Auto-Rotating Image Carousel </a></li>
<li><a href="../examples//menubar/menubar-2/menubar-2.html">Editor Menubar </a></li>
<li><a href="../examples//toolbar/toolbar.html">Toolbar </a></li></ul></td>
</tr><tr>
<td><code>aria-expanded</code></td>
<td> <ul> <li><a href="../examples//accordion/accordion.html">Accordion </a></li>
Expand All @@ -291,6 +304,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="../examples//menu-button/menu-button-links.html">Navigation Menu Button </a></li>
<li><a href="../examples//menubar/menubar-1/menubar-1.html">Navigation Menubar </a></li>
<li><a href="../examples//menubar/menubar-2/menubar-2.html">Editor Menubar </a></li>
<li><a href="../examples//toolbar/toolbar.html">Toolbar </a></li>
<li><a href="../examples//treegrid/treegrid-1.html">Treegrid Email Inbox </a></li>
<li><a href="../examples//treeview/treeview-1/treeview-1a.html">File Directory Treeview Using Computed Properties </a></li>
<li><a href="../examples//treeview/treeview-1/treeview-1b.html">File Directory Treeview Using Declared Properties </a></li>
Expand All @@ -308,13 +322,15 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="../examples//menu-button/menu-button-actions.html">Actions Menu Button Using element.focus() </a></li>
<li><a href="../examples//menu-button/menu-button-links.html">Navigation Menu Button </a></li>
<li><a href="../examples//menubar/menubar-1/menubar-1.html">Navigation Menubar </a></li>
<li><a href="../examples//menubar/menubar-2/menubar-2.html">Editor Menubar </a></li></ul></td>
<li><a href="../examples//menubar/menubar-2/menubar-2.html">Editor Menubar </a></li>
<li><a href="../examples//toolbar/toolbar.html">Toolbar </a></li></ul></td>
</tr><tr>
<td><code>aria-hidden</code></td>
<td><a href="../examples//dialog-modal/alertdialog.html">Alert Dialog </a></td>
</tr><tr>
<td><code>aria-label</code></td>
<td> <ul> <li><a href="../examples//checkbox/checkbox-1/checkbox-1.html">Checkbox (Two State) </a></li>
<td> <ul> <li><a href="../examples//carousel/carousel-1/carousel-1.html">Auto-Rotating Image Carousel </a></li>
<li><a href="../examples//checkbox/checkbox-1/checkbox-1.html">Checkbox (Two State) </a></li>
<li><a href="../examples//combobox/aria1.0pattern/combobox-autocomplete-both.html">Legacy ARIA 1.0 Combobox With Both List and Inline Autocomplete </a></li>
<li><a href="../examples//combobox/aria1.0pattern/combobox-autocomplete-list.html">Legacy ARIA 1.0 Combobox With List Autocomplete </a></li>
<li><a href="../examples//combobox/aria1.0pattern/combobox-autocomplete-none.html">Legacy ARIA 1.0 Combobox without Autocomplete </a></li>
Expand All @@ -323,8 +339,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="../examples//dialog-modal/alertdialog.html">Alert Dialog </a></li>
<li><a href="../examples//dialog-modal/dialog.html">Modal Dialog </a></li>
<li><a href="../examples//feed/feed.html">Feed </a></li>
<li><a href="../examples//grid/LayoutGrids.html">Layout Grid </a></li>
<li><a href="../examples//grid/dataGrids.html">Data Grid </a></li>
<li><a href="../examples//grid/LayoutGrids.html">Layout Grid </a></li>
<li><a href="../examples//listbox/listbox-collapsible.html">Collapsible Dropdown Listbox </a></li>
<li><a href="../examples//listbox/listbox-rearrangeable.html"> Listboxes with Rearrangeable Options </a></li>
<li><a href="../examples//listbox/listbox-scrollable.html">Scrollable Listbox </a></li>
Expand Down Expand Up @@ -352,8 +368,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="../examples//dialog-modal/alertdialog.html">Alert Dialog </a></li>
<li><a href="../examples//dialog-modal/dialog.html">Modal Dialog </a></li>
<li><a href="../examples//feed/feed.html">Feed </a></li>
<li><a href="../examples//grid/LayoutGrids.html">Layout Grid </a></li>
<li><a href="../examples//grid/dataGrids.html">Data Grid </a></li>
<li><a href="../examples//grid/LayoutGrids.html">Layout Grid </a></li>
<li><a href="../examples//listbox/listbox-collapsible.html">Collapsible Dropdown Listbox </a></li>
<li><a href="../examples//listbox/listbox-rearrangeable.html"> Listboxes with Rearrangeable Options </a></li>
<li><a href="../examples//listbox/listbox-scrollable.html">Scrollable Listbox </a></li>
Expand Down Expand Up @@ -382,7 +398,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="../examples//treeview/treeview-2/treeview-2b.html">Navigation Treeview Using Declared Properties </a></li></ul></td>
</tr><tr>
<td><code>aria-live</code></td>
<td><a href="../examples//alert/alert.html">Alert </a></td>
<td> <ul> <li><a href="../examples//alert/alert.html">Alert </a></li>
<li><a href="../examples//carousel/carousel-1/carousel-1.html">Auto-Rotating Image Carousel </a></li></ul></td>
</tr><tr>
<td><code>aria-modal</code></td>
<td><a href="../examples//dialog-modal/alertdialog.html">Alert Dialog </a></td>
Expand All @@ -408,15 +425,19 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="../examples//treeview/treeview-2/treeview-2b.html">Navigation Treeview Using Declared Properties </a></li></ul></td>
</tr><tr>
<td><code>aria-pressed</code></td>
<td><a href="../examples//button/button.html">Button </a></td>
<td> <ul> <li><a href="../examples//button/button.html">Button </a></li>
<li><a href="../examples//toolbar/toolbar.html">Toolbar </a></li></ul></td>
</tr><tr>
<td><code>aria-roledescription</code></td>
<td><a href="../examples//carousel/carousel-1/carousel-1.html">Auto-Rotating Image Carousel </a></td>
</tr><tr>
<td><code>aria-rowcount</code></td>
<td> <ul> <li><a href="../examples//grid/LayoutGrids.html">Layout Grid </a></li>
<li><a href="../examples//grid/dataGrids.html">Data Grid </a></li></ul></td>
<td> <ul> <li><a href="../examples//grid/dataGrids.html">Data Grid </a></li>
<li><a href="../examples//grid/LayoutGrids.html">Layout Grid </a></li></ul></td>
</tr><tr>
<td><code>aria-rowindex</code></td>
<td> <ul> <li><a href="../examples//grid/LayoutGrids.html">Layout Grid </a></li>
<li><a href="../examples//grid/dataGrids.html">Data Grid </a></li></ul></td>
<td> <ul> <li><a href="../examples//grid/dataGrids.html">Data Grid </a></li>
<li><a href="../examples//grid/LayoutGrids.html">Layout Grid </a></li></ul></td>
</tr><tr>
<td><code>aria-selected</code></td>
<td> <ul> <li><a href="../examples//combobox/aria1.1pattern/grid-combo.html">ARIA 1.1 Combobox with Grid Popup </a></li>
Expand All @@ -441,17 +462,21 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td><code>aria-valuemin</code></td>
<td> <ul> <li><a href="../examples//slider/multithumb-slider.html">Horizontal Multi-Thumb Slider </a></li>
<li><a href="../examples//slider/slider-1.html">Horizontal Slider </a></li>
<li><a href="../examples//slider/slider-2.html">Slider with aria-orientation and aria-valuetext </a></li></ul></td>
<li><a href="../examples//slider/slider-2.html">Slider with aria-orientation and aria-valuetext </a></li>
<li><a href="../examples//toolbar/toolbar.html">Toolbar </a></li></ul></td>
</tr><tr>
<td><code>aria-valuenow</code></td>
<td> <ul> <li><a href="../examples//slider/multithumb-slider.html">Horizontal Multi-Thumb Slider </a></li>
<li><a href="../examples//slider/slider-1.html">Horizontal Slider </a></li>
<li><a href="../examples//slider/slider-2.html">Slider with aria-orientation and aria-valuetext </a></li></ul></td>
<li><a href="../examples//slider/slider-2.html">Slider with aria-orientation and aria-valuetext </a></li>
<li><a href="../examples//toolbar/toolbar.html">Toolbar </a></li></ul></td>
</tr><tr>
<td><code>aria-valuetext</code></td>
<td> <ul> <li><a href="../examples//slider/multithumb-slider.html">Horizontal Multi-Thumb Slider </a></li>
<li><a href="../examples//slider/slider-2.html">Slider with aria-orientation and aria-valuetext </a></li></ul></td>
</tr> </tbody>
<li><a href="../examples//slider/slider-2.html">Slider with aria-orientation and aria-valuetext </a></li>
<li><a href="../examples//toolbar/toolbar.html">Toolbar </a></li></ul></td>
</tr>
</tbody>
</table>

</section>
Expand Down

0 comments on commit 45d342c

Please sign in to comment.