Feed Example: Move display of example from separate page into standard APG example page

content/index/index.html

@@ -47,7 +47,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
           </tr>
           <tr>
             <td><code>article</code></td>
-            <td><a href="../patterns/feed/examples/feed.html">Feed</a></td>
+            <td><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></td>
           </tr>
           <tr>
             <td><code>banner</code></td>
@@ -124,7 +124,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
           </tr>
           <tr>
             <td><code>feed</code></td>
-            <td><a href="../patterns/feed/examples/feed.html">Feed</a></td>
+            <td><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></td>
           </tr>
           <tr>
             <td><code>form</code></td>
@@ -482,7 +482,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
           </tr>
           <tr>
             <td><code>aria-busy</code></td>
-            <td><a href="../patterns/feed/examples/feed.html">Feed</a></td>
+            <td><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></td>
           </tr>
           <tr>
             <td><code>aria-checked</code></td>
@@ -555,7 +555,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="../patterns/combobox/examples/combobox-datepicker.html">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/dialog-modal/examples/datepicker-dialog.html">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/dialog-modal/examples/dialog.html">Modal Dialog</a></li>
-                <li><a href="../patterns/feed/examples/feed.html">Feed</a></li>
+                <li><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></li>
                 <li><a href="../patterns/table/examples/table.html">Table</a></li>
               </ul>
             </td>
@@ -672,7 +672,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="../patterns/combobox/examples/grid-combo.html">Editable Combobox with Grid Popup</a></li>
                 <li><a href="../patterns/dialog-modal/examples/datepicker-dialog.html">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/dialog-modal/examples/dialog.html">Modal Dialog</a></li>
-                <li><a href="../patterns/feed/examples/feed.html">Feed</a></li>
+                <li><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></li>
                 <li><a href="../patterns/grid/examples/data-grids.html">Data Grid</a></li>
                 <li><a href="../patterns/grid/examples/layout-grids.html">Layout Grid</a></li>
                 <li><a href="../patterns/listbox/examples/listbox-collapsible.html">(Deprecated) Collapsible Dropdown Listbox</a></li>
@@ -755,7 +755,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-posinset</code></td>
             <td>
               <ul>
-                <li><a href="../patterns/feed/examples/feed.html">Feed</a></li>
+                <li><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></li>
                 <li><a href="../patterns/treegrid/examples/treegrid-1.html">Treegrid Email Inbox</a></li>
                 <li><a href="../patterns/treeview/examples/treeview-1b.html">File Directory Treeview  Using Declared Properties</a></li>
               </ul>
@@ -825,7 +825,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-setsize</code></td>
             <td>
               <ul>
-                <li><a href="../patterns/feed/examples/feed.html">Feed</a></li>
+                <li><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></li>
                 <li><a href="../patterns/treegrid/examples/treegrid-1.html">Treegrid Email Inbox</a></li>
                 <li><a href="../patterns/treeview/examples/treeview-1b.html">File Directory Treeview  Using Declared Properties</a></li>
               </ul>

content/patterns/feed/examples/feed-display.html

@@ -22,30 +22,11 @@
     <script src="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>

content/patterns/feed/examples/feed.html

@@ -3,7 +3,7 @@
   <head>
     <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>
 
     <!-- Core JS and CSS shared by all examples -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -21,7 +21,7 @@
       </ul>
     </nav>
     <main>
-      <h1>Feed Example</h1>
+      <h1>Infinite Scrolling Feed Example</h1>
 
       <section>
         <h2>About This Example</h2>
@@ -39,11 +39,29 @@ <h2>About This Example</h2>
         <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 Options</h2>
+
+        <fieldset class="feed-options">
+          <legend>Feed Options</legend>
+
+          <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>
+          <label for="delay-time-select"> Loading delay</label>
+
+          <p id="feed-controls-desc">This option determines the article loading delay time in this feed example.</p>
+
+        </fieldset>
+      </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>
         </div>
         <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
       </section>

content/patterns/feed/examples/js/main.js

@@ -15,7 +15,7 @@
  */
 window.addEventListener('load', function () {
   var feedNode = document.getElementById('restaurant-feed');
-  var delaySelect = document.getElementById('delay-time-select');
+  var delaySelect = window.parent.document.getElementById('delay-time-select');
   var restaurantFeed = new aria.Feed(feedNode, delaySelect);
 
   var restaurantFeedDisplay = new aria.FeedDisplay(restaurantFeed, function () {

test/tests/feed_feed.js

@@ -10,7 +10,7 @@ const assertAriaDescribedby = require('../util/assertAriaDescribedby');
 const exampleFile = 'content/patterns/feed/examples/feed.html';
 
 const ex = {
-  feedLinkSelector: '#ex1 a',
+  frameID: 'feed_frame',
   feedSelector: '[role="feed"]',
   articleSelector: '[role="article"]',
   timeToLoad10Articles: 2500,
@@ -19,17 +19,7 @@ const ex = {
 };
 
 const navigateToFeed = async function (t) {
-  await t.context.session.findElement(By.css(ex.feedLinkSelector)).click();
-
-  return t.context.session.wait(
-    () => {
-      return t.context.session.getCurrentUrl().then((url) => {
-        return url != t.context.url;
-      });
-    },
-    t.context.waitTime,
-    'The feed url did not load after clicking: ' + ex.feedLinkSelector
-  );
+  await t.context.session.switchTo().frame(ex.frameID);
 };
 
 const waitForArticlesToLoad = async function (t) {