apg/issue-2747-feed-example generated by aria-practices

ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md

@@ -69,7 +69,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
   <div>
 
-    <p>Page last updated: April 7, 2024</p>
+    <p>Page last updated: April 30, 2024</p>
     <section>
       <h2>About These Reports</h2>
       <p>
@@ -177,7 +177,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           <tr>
             <td><code>article</code></td>
             <td></td>
-            <td><a href="../../patterns/feed/examples/feed/">Feed</a>
+            <td><a href="../../patterns/feed/examples/feed/">Infinite Scrolling Feed</a>
 </td>
           </tr>
           <tr>
@@ -197,7 +197,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td><code>feed</code></td>
             <td><a href="../../patterns/feed/">Feed Pattern</a>
 </td>
-            <td><a href="../../patterns/feed/examples/feed/">Feed</a>
+            <td><a href="../../patterns/feed/examples/feed/">Infinite Scrolling Feed</a>
 </td>
           </tr>
           <tr>
@@ -811,7 +811,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           <tr>
             <td><code>aria-busy</code></td>
             <td></td>
-            <td><a href="../../patterns/feed/examples/feed/">Feed</a>
+            <td><a href="../../patterns/feed/examples/feed/">Infinite Scrolling Feed</a>
 </td>
           </tr>
           <tr>
@@ -972,7 +972,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <li><a href="../../patterns/combobox/examples/combobox-datepicker/">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../patterns/dialog-modal/examples/datepicker-dialog/">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../patterns/dialog-modal/examples/dialog/">Modal Dialog</a></li>
-                <li><a href="../../patterns/feed/examples/feed/">Feed</a></li>
+                <li><a href="../../patterns/feed/examples/feed/">Infinite Scrolling Feed</a></li>
                 <li><a href="../../patterns/table/examples/table/">Table</a></li>
             </ul>
 </td>
@@ -1094,7 +1094,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <li><a href="../../patterns/combobox/examples/grid-combo/">Editable Combobox with Grid Popup</a></li>
                 <li><a href="../../patterns/dialog-modal/examples/datepicker-dialog/">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../patterns/dialog-modal/examples/dialog/">Modal Dialog</a></li>
-                <li><a href="../../patterns/feed/examples/feed/">Feed</a></li>
+                <li><a href="../../patterns/feed/examples/feed/">Infinite Scrolling Feed</a></li>
                 <li><a href="../../patterns/grid/examples/data-grids/">Data Grid</a></li>
                 <li><a href="../../patterns/grid/examples/layout-grids/">Layout Grid</a></li>
                 <li><a href="../../patterns/listbox/examples/listbox-collapsible/">(Deprecated) Collapsible Dropdown Listbox</a></li>
@@ -1165,7 +1165,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td><code>aria-posinset</code></td>
             <td></td>
             <td><ul>
-                <li><a href="../../patterns/feed/examples/feed/">Feed</a></li>
+                <li><a href="../../patterns/feed/examples/feed/">Infinite Scrolling Feed</a></li>
                 <li><a href="../../patterns/treegrid/examples/treegrid-1/">Treegrid Email Inbox</a></li>
                 <li><a href="../../patterns/treeview/examples/treeview-1b/">File Directory Treeview  Using Declared Properties</a></li>
             </ul>
@@ -1237,7 +1237,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td><code>aria-setsize</code></td>
             <td></td>
             <td><ul>
-                <li><a href="../../patterns/feed/examples/feed/">Feed</a></li>
+                <li><a href="../../patterns/feed/examples/feed/">Infinite Scrolling Feed</a></li>
                 <li><a href="../../patterns/treegrid/examples/treegrid-1/">Treegrid Email Inbox</a></li>
                 <li><a href="../../patterns/treeview/examples/treeview-1b/">File Directory Treeview  Using Declared Properties</a></li>
             </ul>
@@ -1683,7 +1683,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td>aria-busy,aria-describedby,aria-label,aria-labelledby,aria-posinset,aria-setsize</td>
           </tr>
           <tr>
-            <td><a href="../../patterns/feed/examples/feed/">Feed</a></td>
+            <td><a href="../../patterns/feed/examples/feed/">Infinite Scrolling Feed</a></td>
             <td>prototype</td>
             <td></td>
             <td>Yes</td>
@@ -2793,7 +2793,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td>Yes</td>
           </tr>
           <tr>
-            <td><a href="../../patterns/feed/examples/feed/">Feed</a></td>
+            <td><a href="../../patterns/feed/examples/feed/">Infinite Scrolling Feed</a></td>
             <td></td>
             <td>Yes</td>
           </tr>

ARIA/apg/index/index.md

@@ -94,7 +94,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           </tr>
           <tr>
             <td><code>article</code></td>
-            <td><a href="../patterns/feed/examples/feed/">Feed</a></td>
+            <td><a href="../patterns/feed/examples/feed/">Infinite Scrolling Feed</a></td>
           </tr>
           <tr>
             <td><code>banner</code></td>
@@ -171,7 +171,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           </tr>
           <tr>
             <td><code>feed</code></td>
-            <td><a href="../patterns/feed/examples/feed/">Feed</a></td>
+            <td><a href="../patterns/feed/examples/feed/">Infinite Scrolling Feed</a></td>
           </tr>
           <tr>
             <td><code>form</code></td>
@@ -529,7 +529,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           </tr>
           <tr>
             <td><code>aria-busy</code></td>
-            <td><a href="../patterns/feed/examples/feed/">Feed</a></td>
+            <td><a href="../patterns/feed/examples/feed/">Infinite Scrolling Feed</a></td>
           </tr>
           <tr>
             <td><code>aria-checked</code></td>
@@ -602,7 +602,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <li><a href="../patterns/combobox/examples/combobox-datepicker/">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/dialog-modal/examples/datepicker-dialog/">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/dialog-modal/examples/dialog/">Modal Dialog</a></li>
-                <li><a href="../patterns/feed/examples/feed/">Feed</a></li>
+                <li><a href="../patterns/feed/examples/feed/">Infinite Scrolling Feed</a></li>
                 <li><a href="../patterns/table/examples/table/">Table</a></li>
               </ul>
             </td>
@@ -722,7 +722,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <li><a href="../patterns/combobox/examples/grid-combo/">Editable Combobox with Grid Popup</a></li>
                 <li><a href="../patterns/dialog-modal/examples/datepicker-dialog/">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/dialog-modal/examples/dialog/">Modal Dialog</a></li>
-                <li><a href="../patterns/feed/examples/feed/">Feed</a></li>
+                <li><a href="../patterns/feed/examples/feed/">Infinite Scrolling Feed</a></li>
                 <li><a href="../patterns/grid/examples/data-grids/">Data Grid</a></li>
                 <li><a href="../patterns/grid/examples/layout-grids/">Layout Grid</a></li>
                 <li><a href="../patterns/listbox/examples/listbox-collapsible/">(Deprecated) Collapsible Dropdown Listbox</a></li>
@@ -805,7 +805,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td><code>aria-posinset</code></td>
             <td>
               <ul>
-                <li><a href="../patterns/feed/examples/feed/">Feed</a></li>
+                <li><a href="../patterns/feed/examples/feed/">Infinite Scrolling Feed</a></li>
                 <li><a href="../patterns/treegrid/examples/treegrid-1/">Treegrid Email Inbox</a></li>
                 <li><a href="../patterns/treeview/examples/treeview-1b/">File Directory Treeview  Using Declared Properties</a></li>
               </ul>
@@ -875,7 +875,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td><code>aria-setsize</code></td>
             <td>
               <ul>
-                <li><a href="../patterns/feed/examples/feed/">Feed</a></li>
+                <li><a href="../patterns/feed/examples/feed/">Infinite Scrolling Feed</a></li>
                 <li><a href="../patterns/treegrid/examples/treegrid-1/">Treegrid Email Inbox</a></li>
                 <li><a href="../patterns/treeview/examples/treeview-1b/">File Directory Treeview  Using Declared Properties</a></li>
               </ul>

ARIA/apg/patterns/feed/examples/feed-display.html

@@ -26,30 +26,11 @@
     <script src="../../../../../content-assets/wai-aria-practices/patterns/feed/examples/js/main.js"></script>
   </head>
   <body>
-    <main>
-      <h1>Recommended Restaurants</h1>
-
-      <section>
-        <h2>About This Example</h2>
-        <p>
-          <strong>NOTE:</strong> The feed role is a new WAI-ARIA feature, introduced by WAI-ARIA 1.1.
-          This page provides a proposed implementation of a feed component.
-          This proposal does not yet have ARIA Practices Task Force consensus.
-          Feedback is welcome in <a href="https://github.com/w3c/aria-practices/issues/565">issue 565.</a>
-        </p>
-      </section>
+      <h3>Recommended Restaurants</h3>
 
       <section id="main-content">
         <div id="restaurant-feed" role="feed"></div>
       </section>
-
-      <section id="side-panel">
-        <label for="delay-time-select">Select article loading delay</label>
-        <select id="delay-time-select" name="delay_time">
-          <option value="200">200 ms</option>
-          <option value="400">400 ms</option>
-        </select>
-      </section>
-    </main>
+
   </body>
 </html>

ARIA/apg/patterns/feed/examples/feed.md

@@ -1,6 +1,6 @@
 ---
 # This file was generated by scripts/pre-build/library/formatForJekyll.js
-title: "Feed Example"
+title: "Infinite Scrolling Feed Example"
 ref: /ARIA/apg/patterns/feed/examples/feed/
 
 github:
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/feed/examples/feed/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/19'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/19'>View issues related to this example</a></p>        <p>Page last updated: 21 May 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -21,7 +21,7 @@ lang: en
 ---
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Feed Example</title>
+<title>Infinite Scrolling Feed Example</title>
 
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
@@ -88,24 +88,37 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <h2>About This Example</h2>
         <img alt class="example-page-example-icon" src="../../../../../../content-images/wai-aria-practices/images/pattern-feed.svg">
         <p>
-          <strong>NOTE:</strong> The feed role is a new WAI-ARIA feature, introduced by WAI-ARIA 1.1.
-          This page provides a proposed implementation of a feed component.
-          This proposal does not yet have ARIA Practices Task Force consensus.
+          <strong>NOTE:</strong> The feed role was introduced by WAI-ARIA 1.1.
+          Since native desktop operating systems offer only a few conventions that are applicable to the feed pattern, the implementation of a feed illustrated by this example is intended to serve as as a proposal.
           Feedback is welcome in <a href="https://github.com/w3c/aria-practices/issues/565">issue 565.</a>
         </p>
         <p>
           The example below implements the <a href="../../">Feed Pattern</a> for a restaurant review site.
           To imitate an infinitely scrolling set of data, information about ten restaurants is repeatedly loaded as the user reads the feed.
-          Outside of the feed, an article load time selector is available for simulating data fetch delays.
+          This example includes an article load time selector that simulates data fetch delays.
         </p>
-        <p>Unlike other examples in the WAI-ARIA Authoring Practices, the example experience has its own page separate from this documentation page.</p>
+      </section>
+
+      <section>
+        <h2>Example Usage Option</h2>
+        <p id="feed-controls-desc">
+          The following article loading delay time selector enables simulation of different amounts of latency introduced by data fetches.
+          Such latency can affect assistive technology behavior when using assistive technology functions for navigating by article.
+        </p>
+        <label for="delay-time-select"> Loading delay</label>
+        <select id="delay-time-select" name="delay_time" aria-describedby="feed-controls-desc">
+          <option value="200">200 ms</option>
+          <option value="400">400 ms</option>
+        </select>
       </section>
 
       <section>
         <h2 id="ex_label">Example</h2>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
         <div id="ex1">
-          <p>The example feed experience is presented on a separate <a href="../feed-display.html">feed display page.</a></p>
+          <p>The example feed experience below is presented in an iframe in order not to obstruct from the rest of the content of the page.</p>
+          <iframe id="feed_frame" src="../feed-display.html" height="500" title="Feed example" style="width: 100%"></iframe>
+          <button id="terms-of-use" onclick="alert('This is just for demo purposes')">Terms of use</button>
         </div>
         <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
       </section>
@@ -134,7 +147,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             </tr>
             <tr data-test-id="key-control-home">
               <th><kbd>Control + Home</kbd></th>
-              <td>Move focus to the first focusable element before the feed.</td>
+              <td>Move focus to the first focusable element in the feed.</td>
             </tr>
           </tbody>
         </table></div>

ARIA/apg/patterns/feed/feed-pattern.md

@@ -108,7 +108,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <img alt src="../../../../content-images/wai-aria-practices/images/pattern-feed.svg">
         <h2>Example</h2>
         <p>
-          <a href="examples/feed/">Example Implementation of Feed Pattern</a>
+          <a href="examples/feed/">Infinite Scrolling Feed Example</a>
         </p>
       </section>