Feed Example: Move display of example from separate page into standar…

…d APG example page (pull #2775) Enables the feed example to be displayed inline within the feed example page using an iframe. Previously, the example had to be opened in a separate page. Also includes some editorial revisions and updates. --------- Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> Co-authored-by: Matt King <a11yThinker@gmail.com> Co-authored-by: Mike Pennisi <mike@mikepennisi.com> Co-authored-by: Howard Edwards <howarde.edwards@gmail.com>
w3c · May 22, 2024 · 0e40c0d · 0e40c0d
1 parent 504391a
commit 0e40c0d
Show file tree

Hide file tree

Showing 15 changed files with 64 additions and 74 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
@@ -125,7 +125,7 @@ <h2 id="roles_with_one_example_label">Roles with at Least One Guidance or Exampl
           <tr>
             <td><code>article</code></td>
             <td></td>
-            <td><a href="../../../content/patterns/feed/examples/feed.html">Feed</a>
+            <td><a href="../../../content/patterns/feed/examples/feed.html">Infinite Scrolling Feed</a>
 </td>
           </tr>
           <tr>
@@ -145,7 +145,7 @@ <h2 id="roles_with_one_example_label">Roles with at Least One Guidance or Exampl
             <td><code>feed</code></td>
             <td><a href="../../../content/patterns/feed/feed-pattern.html#">Feed Pattern</a>
 </td>
-            <td><a href="../../../content/patterns/feed/examples/feed.html">Feed</a>
+            <td><a href="../../../content/patterns/feed/examples/feed.html">Infinite Scrolling Feed</a>
 </td>
           </tr>
           <tr>
@@ -759,7 +759,7 @@ <h2 id="props_with_one_example_label">Properties and States with at Least One Gu
           <tr>
             <td><code>aria-busy</code></td>
             <td></td>
-            <td><a href="../../../content/patterns/feed/examples/feed.html">Feed</a>
+            <td><a href="../../../content/patterns/feed/examples/feed.html">Infinite Scrolling Feed</a>
 </td>
           </tr>
           <tr>
@@ -920,7 +920,7 @@ <h2 id="props_with_more_than_one_label">Properties and States with More than One
                 <li><a href="../../../content/patterns/combobox/examples/combobox-datepicker.html">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../../content/patterns/dialog-modal/examples/datepicker-dialog.html">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../../content/patterns/dialog-modal/examples/dialog.html">Modal Dialog</a></li>
-                <li><a href="../../../content/patterns/feed/examples/feed.html">Feed</a></li>
+                <li><a href="../../../content/patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></li>
                 <li><a href="../../../content/patterns/table/examples/table.html">Table</a></li>
             </ul>
 </td>
@@ -1042,7 +1042,7 @@ <h2 id="props_with_more_than_one_label">Properties and States with More than One
                 <li><a href="../../../content/patterns/combobox/examples/grid-combo.html">Editable Combobox with Grid Popup</a></li>
                 <li><a href="../../../content/patterns/dialog-modal/examples/datepicker-dialog.html">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../../content/patterns/dialog-modal/examples/dialog.html">Modal Dialog</a></li>
-                <li><a href="../../../content/patterns/feed/examples/feed.html">Feed</a></li>
+                <li><a href="../../../content/patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></li>
                 <li><a href="../../../content/patterns/grid/examples/data-grids.html">Data Grid</a></li>
                 <li><a href="../../../content/patterns/grid/examples/layout-grids.html">Layout Grid</a></li>
                 <li><a href="../../../content/patterns/listbox/examples/listbox-collapsible.html">(Deprecated) Collapsible Dropdown Listbox</a></li>
@@ -1113,7 +1113,7 @@ <h2 id="props_with_more_than_one_label">Properties and States with More than One
             <td><code>aria-posinset</code></td>
             <td></td>
             <td><ul>
-                <li><a href="../../../content/patterns/feed/examples/feed.html">Feed</a></li>
+                <li><a href="../../../content/patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></li>
                 <li><a href="../../../content/patterns/treegrid/examples/treegrid-1.html">Treegrid Email Inbox</a></li>
                 <li><a href="../../../content/patterns/treeview/examples/treeview-1b.html">File Directory Treeview  Using Declared Properties</a></li>
             </ul>
@@ -1185,7 +1185,7 @@ <h2 id="props_with_more_than_one_label">Properties and States with More than One
             <td><code>aria-setsize</code></td>
             <td></td>
             <td><ul>
-                <li><a href="../../../content/patterns/feed/examples/feed.html">Feed</a></li>
+                <li><a href="../../../content/patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></li>
                 <li><a href="../../../content/patterns/treegrid/examples/treegrid-1.html">Treegrid Email Inbox</a></li>
                 <li><a href="../../../content/patterns/treeview/examples/treeview-1b.html">File Directory Treeview  Using Declared Properties</a></li>
             </ul>
@@ -1631,7 +1631,7 @@ <h3 id="example_coding_practices">Coding Practices</h3>
             <td>aria-busy,aria-describedby,aria-label,aria-labelledby,aria-posinset,aria-setsize</td>
           </tr>
           <tr>
-            <td><a href="../../../content/patterns/feed/examples/feed.html">Feed</a></td>
+            <td><a href="../../../content/patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></td>
             <td>prototype</td>
             <td></td>
             <td>Yes</td>
@@ -2741,7 +2741,7 @@ <h3 id="example_mouse_pointer">Mouse and Pointer Events</h3>
             <td>Yes</td>
           </tr>
           <tr>
-            <td><a href="../../../content/patterns/feed/examples/feed.html">Feed</a></td>
+            <td><a href="../../../content/patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></td>
             <td></td>
             <td>Yes</td>
           </tr>

diff --git a/content/about/coverage-and-quality/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv
@@ -2,14 +2,14 @@
 "aria-activedescendant","1","11","Guidance: Managing Focus in Composites Using aria-activedescendant","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox  with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button  Using aria-activedescendant","Example: Radio Group  Using aria-activedescendant"
 "aria-atomic","0","1","Example: Alert"
 "aria-autocomplete","0","5","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: Editable Combobox with Grid Popup"
-"aria-busy","0","1","Example: Feed"
+"aria-busy","0","1","Example: Infinite Scrolling Feed"
 "aria-checked","0","9","Example: Checkbox  (Mixed-State)","Example: Checkbox  (Two State)","Example: Editor Menubar","Example: Radio Group  Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group  Using Roving tabindex","Example: Switch  Using HTML Button","Example: Switch","Example: Toolbar"
 "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","20","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: 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: Feed","Example: Table"
+"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"
@@ -22,7 +22,7 @@
 "aria-invalid","0","0"
 "aria-keyshortcuts","0","0"
 "aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel  with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","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: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview"
-"aria-labelledby","1","40","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox  (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox  with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button  Using aria-activedescendant","Example: Actions Menu Button  Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group  Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group  Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch  Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview  Using Computed Properties","Example: File Directory Treeview  Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark"
+"aria-labelledby","1","40","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox  (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox  with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button  Using aria-activedescendant","Example: Actions Menu Button  Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group  Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group  Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch  Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview  Using Computed Properties","Example: File Directory Treeview  Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark"
 "aria-level","0","2","Example: Treegrid Email Inbox","Example: File Directory Treeview  Using Declared Properties"
 "aria-live","0","5","Example: Alert","Example: Auto-Rotating Image Carousel  with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Date Picker Combobox","Example: Date Picker Dialog"
 "aria-modal","0","4","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog"
@@ -31,7 +31,7 @@
 "aria-orientation","0","1","Example: Vertical Temperature Slider"
 "aria-owns","0","1","Example: Navigation Treeview"
 "aria-placeholder","0","0"
-"aria-posinset","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview  Using Declared Properties"
+"aria-posinset","0","3","Example: Infinite Scrolling Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview  Using Declared Properties"
 "aria-pressed","0","3","Example: Button  (IDL Version)","Example: Button","Example: Toolbar"
 "aria-readonly","0","0"
 "aria-relevant","0","0"
@@ -41,7 +41,7 @@
 "aria-rowindex","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid"
 "aria-rowspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan"
 "aria-selected","0","16","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","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: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox  with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview  Using Computed Properties","Example: File Directory Treeview  Using Declared Properties"
-"aria-setsize","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview  Using Declared Properties"
+"aria-setsize","0","3","Example: Infinite Scrolling Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview  Using Declared Properties"
 "aria-sort","1","2","Guidance: Indicating sort order with aria-sort","Example: Data Grid","Example: Sortable Table"
 "aria-valuemax","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar"
 "aria-valuemin","0","8","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar"

diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv
@@ -2,7 +2,7 @@
 "alert","2","2","Guidance: Alert Pattern","Guidance: Alert and Message Dialogs Pattern","Example: Alert","Example: Alert Dialog"
 "alertdialog","0","1","Example: Alert Dialog"
 "application","0","0"
-"article","0","1","Example: Feed"
+"article","0","1","Example: Infinite Scrolling Feed"
 "banner","1","3","Guidance: Banner","Example: Navigation Menubar","Example: Navigation Treeview","Example: Banner Landmark"
 "button","2","2","Guidance: Button Pattern","Guidance: Menu Button Pattern","Example: Button  (IDL Version)","Example: Button"
 "caption","0","0"
@@ -19,7 +19,7 @@
 "directory","0","0"
 "document","0","0"
 "emphasis","0","0"
-"feed","1","1","Guidance: Feed Pattern","Example: Feed"
+"feed","1","1","Guidance: Feed Pattern","Example: Infinite Scrolling Feed"
 "figure","0","0"
 "form","2","1","Guidance: Form","Guidance: Naming Form Controls with the Label Element","Example: Form Landmark"
 "generic","0","0"