update to example options

content/patterns/feed/examples/feed.html

@@ -39,19 +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 below is presented in an iframe in order not to obstruct from the rest of the content of the page. </p>
-          <div 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>
-          </div>
-          <iframe id="feed_frame" src="../feed-display.html" height="500" title="Feed example" style="width: 100%"></iframe>
+          <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>