AriaRoles: Remove pagemacro (#3392)

* AriaRoles: Remove pagemacro * also add Xpath/CSS comparision
mdn · Mar 23, 2021 · 1e8c048 · 1e8c048
1 parent 4c33fc2
commit 1e8c048
Show file tree

Hide file tree

Showing 38 changed files with 288 additions and 100 deletions.
diff --git a/files/en-us/web/accessibility/aria/roles/alert_role/index.html b/files/en-us/web/accessibility/aria/roles/alert_role/index.html
@@ -8,7 +8,6 @@
   - ARIA widget
   - Reference
 ---
-<div>{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}</div>
 
 <p class="summary"><span class="seoSummary">The <a href="https://www.w3.org/TR/wai-aria-1.1/#alert">alert</a> role can be used to tell the user an element has been dynamically updated. Screen readers will instantly start reading out the updated content when the role is added. If the user is expected to close the alert, then the <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a> role should be used instead.</span></p>
 
@@ -71,3 +70,11 @@ <h2 id="See_also">See also</h2>
  <li><a href="https://developer.paciellogroup.com/blog/2017/04/aria-alert-support/">ARIA alert support - The Paciello Group</a></li>
  <li>ARIA Live Regions</li>
 </ul>
+
+
+<section id="Quick_links">
+  <ol>
+   <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
+
diff --git a/files/en-us/web/accessibility/aria/roles/application_role/index.html b/files/en-us/web/accessibility/aria/roles/application_role/index.html
@@ -8,8 +8,6 @@
   - Reference
   - Role application
 ---
-<div>{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}</div>
-
 <p><span class="seoSummary">The <code>application</code> role indicates to assistive technologies that an element <em>and all of its children</em> should be treated similar to a desktop application, and no traditional HTML interpretation techniques should be used. This role should only be used to define very dynamic and desktop-like web applications.</span></p>
 
 <pre class="brush: html">&lt;div role="application"&gt;...&lt;/div&gt;
@@ -109,3 +107,9 @@ <h2 id="Precedence_order">Precedence order</h2>
 <ul>
  <li><a href="https://www.marcozehe.de/2012/02/06/if-you-use-the-wai-aria-role-application-please-do-so-wisely/">If you use the WAI-ARIA role "application", please do so wisely</a> - blog post by Marco Zehe</li>
 </ul>
+
+<section id="Quick_links">
+  <ol>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/en-us/web/accessibility/aria/roles/aria_timer_role/index.html b/files/en-us/web/accessibility/aria/roles/aria_timer_role/index.html
@@ -8,7 +8,7 @@
   - Reference
   - Role Timer
 ---
-<p>{{draft}}{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}</p>
+<p>{{draft}}</p>
 
 <p><span class="seoSummary">The timer role indicates to assistive technologies that an element is a numerical counter listing the amount of elapsed time from a starting point or the remaining time until an end point.</span></p>
 
@@ -113,3 +113,11 @@ <h2 id="Specifications">Specifications</h2>
 <h2 id="Precedence_order">Precedence order</h2>
 
 <p>Applying the <code>timer</code> role will cause this and all of the descendant elements of this element to be treated like XXX</p>
+
+
+<section id="Quick_links">
+  <ol>
+   <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
+
diff --git a/files/en-us/web/accessibility/aria/roles/article_role/index.html b/files/en-us/web/accessibility/aria/roles/article_role/index.html
@@ -9,8 +9,6 @@
   - Article role
   - Reference
 ---
-<div>{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}</div>
-
 <p class="summary"><span class="seoSummary">The <code>article</code> role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. It is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page.</span></p>
 
 <pre class="brush: html">&lt;div role="article"&gt;
@@ -114,5 +112,12 @@ <h2 id="See_also">See also</h2>
  <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Feed_Role">feed role</a></li>
  <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Section_Role">section role</a></li>
  <li><a href="/en-US/docs/Web/HTML/Element/article">&lt;article&gt; element</a></li>
- <li><a href="/en-US/docs/Web/RSS/Article">RSS Article</a></li>
+ <li>{{Glossary("RSS")}}</li>
 </ul>
+
+<section id="Quick_links">
+  <ol>
+   <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
+
diff --git a/files/en-us/web/accessibility/aria/roles/banner_role/index.html b/files/en-us/web/accessibility/aria/roles/banner_role/index.html
@@ -92,3 +92,9 @@ <h2 id="See_also">See also</h2>
  <li><a href="/en-US/docs/Web/HTML/Element/header">HTML <code>header</code> element</a></li>
  <li><a href="https://w3c.github.io/aria-practices/examples/landmarks/banner.html">WC3 Landmarks Example</a></li>
 </ul>
+
+<section id="Quick_links">
+  <ol>
+   <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/en-us/web/accessibility/aria/roles/button_role/index.html b/files/en-us/web/accessibility/aria/roles/button_role/index.html
@@ -278,3 +278,10 @@ <h3 id="Additional_resources">Additional resources</h3>
  <li><a href="https://www.w3.org/TR/wai-aria-practices/examples/button/button.html">Official WAI-ARIA example code</a></li>
  <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/menubutton_role">ARIA menubutton role</a></li>
 </ul>
+
+
+<section id="Quick_links">
+  <ol>
+   <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/en-us/web/accessibility/aria/roles/cell_role/index.html b/files/en-us/web/accessibility/aria/roles/cell_role/index.html
@@ -7,8 +7,6 @@
   - cell
   - table
 ---
-<div>{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}</div>
-
 <p>The <code>cell</code> value of the ARIA <em>role</em> attribute identifies an element as being a cell in a tabular container that does not contain column or row header information. To be supported, the cell must be nested in an element with the role of <code>row</code>.</p>
 
 <pre class="brush: html">&lt;div role="row"&gt;
@@ -190,3 +188,9 @@ <h2 id="See_also">See also</h2>
  <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></li>
  <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></li>
 </ul>
+
+<section id="Quick_links">
+  <ol>
+   <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/en-us/web/accessibility/aria/roles/checkbox_role/index.html b/files/en-us/web/accessibility/aria/roles/checkbox_role/index.html
@@ -7,8 +7,6 @@
   - NeedsContent
   - Role
 ---
-<p>{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}</p>
-
 <p><span class="seoSummary">The <a href="https://www.w3.org/TR/wai-aria-1.1/#checkbox">checkbox role</a> is used for checkable interactive controls. Elements containing <code>role="checkbox"</code> must also include the <code>aria-checked</code> attribute to expose the checkbox's state to assistive technology.</span></p>
 
 <pre class="brush: html">&lt;span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"&gt;
@@ -143,3 +141,10 @@ <h2 id="See_also">See also</h2>
  <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role">ARIA: switch role</a></li>
  <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_role">ARIA: option role</a></li>
 </ul>
+
+
+<section id="Quick_links">
+    <ol>
+        <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+    </ol>
+</section>
diff --git a/files/en-us/web/accessibility/aria/roles/comment_role/index.html b/files/en-us/web/accessibility/aria/roles/comment_role/index.html
@@ -8,8 +8,6 @@
   - Reference
   - annotations
 ---
-<div>{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}</div>
-
 <p>The <code>comment</code> <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">landmark role</a> semantically denotes a comment/reaction to some content on the page, or to a previous comment.</p>
 
 <h2 id="Examples">Examples</h2>
@@ -84,3 +82,10 @@ <h2 id="See_also">See also</h2>
 <ul>
  <li><a href="/en-US/docs/Web/Accessibility/ARIA/Annotations">ARIA annotations</a></li>
 </ul>
+
+
+<section id="Quick_links">
+  <ol>
+      <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/en-us/web/accessibility/aria/roles/complementary_role/index.html b/files/en-us/web/accessibility/aria/roles/complementary_role/index.html
@@ -7,8 +7,6 @@
   - Reference
   - role-complementary
 ---
-<div>{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}</div>
-
 <p><span class="seoSummary">The <code>complementary</code> <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">landmark role</a> is used to designate a supporting section that relates to the main content, yet can stand alone when separated. These sections are frequently presented as sidebars or call-out boxes. If possible, use the <a href="/en-US/docs/Web/HTML/Element/aside">HTML &lt;aside&gt; element</a> instead.</span></p>
 
 <pre class="brush: html">&lt;div role="complementary"&gt;
@@ -114,3 +112,9 @@ <h2 id="See_also">See also</h2>
  <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li>
  <li><a href="http://html5doctor.com/aside-revisited/">Aside Revisited | HTML5 Doctor</a></li>
 </ul>
+
+<section id="Quick_links">
+  <ol>
+      <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/en-us/web/accessibility/aria/roles/contentinfo_role/index.html b/files/en-us/web/accessibility/aria/roles/contentinfo_role/index.html
@@ -7,8 +7,6 @@
   - Reference
   - role-contentinfo
 ---
-<div>{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}</div>
-
 <p>The <code>contentinfo</code> <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">landmark role</a> is used to identify information repeated at the end of every page of a website, including copyright information, navigation links, and privacy statements. This section is commonly called a footer.</p>
 
 <pre class="brush: html">&lt;div role="contentinfo"&gt;
@@ -145,3 +143,9 @@ <h2 id="See_also">See also</h2>
  <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li>
  <li><a href="http://html5doctor.com/the-footer-element-update/">The Footer Element Update | HTML5 Doctor</a></li>
 </ul>
+
+<section id="Quick_links">
+  <ol>
+      <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/en-us/web/accessibility/aria/roles/dialog_role/index.html b/files/en-us/web/accessibility/aria/roles/dialog_role/index.html
@@ -7,8 +7,6 @@
   - NeedsContent
   - Web Development
 ---
-<p>{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}</p>
-
 <p><span class="seoSummary">The <code><a href="https://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog">dialog</a></code> role is used to mark up an HTML based application dialog or window that separates content or UI from the rest of the web application or page. Dialogs are generally placed on top of the rest of the page content using an overlay. Dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with).</span></p>
 
 <pre class="brush: html">&lt;div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>&gt;
@@ -143,3 +141,10 @@ <h2 id="See_also">See also</h2>
  <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">ARIA: alertdialog role</a></li>
  <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">Using the alertdialog role</a></li>
 </ul>
+
+
+<section id="Quick_links">
+  <ol>
+      <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/en-us/web/accessibility/aria/roles/document_role/index.html b/files/en-us/web/accessibility/aria/roles/document_role/index.html
@@ -7,7 +7,6 @@
   - Document
   - Reference
 ---
-<div>{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}</div>
 <p><span class="seoSummary">Generally used in complex composite <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/widget_Role">widgets</a> or <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Application_Role">applications</a>, the <code>document</code> role can inform assistive technologies to switch context to a reading mode: The <code>document</code> role tells assistive technologies with reading or browse modes to use the document mode to read the content contained within this element.</span></p>
 
 <pre class="brush: html">&lt;div role="dialog"&gt;
@@ -20,7 +19,7 @@
 &lt;/div&gt;
 </pre>
 
-<p>This example shows a <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/diialog_Role">dialog</a> widget with some controls and a section with some informational text that the assistive technology user can read when tabbing to it.</p>
+<p>This example shows a <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">dialog</a> widget with some controls and a section with some informational text that the assistive technology user can read when tabbing to it.</p>
 
 <h2 id="Description">Description</h2>
 
@@ -88,3 +87,9 @@ <h2 id="See_also">See also</h2>
  <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/widget_Role">ARIA:widget role</a> </li>
  <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Application_Role">ARIA: application role</a></li>
 </ul>
+
+<section id="Quick_links">
+  <ol>
+      <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/en-us/web/accessibility/aria/roles/feed_role/index.html b/files/en-us/web/accessibility/aria/roles/feed_role/index.html
@@ -7,8 +7,6 @@
   - Reference
   - feed
 ---
-<p>{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}</p>
-
 <p><span class="seoSummary">A <code>feed</code> is a dynamic scrollable <code>list</code> of <code>articles</code> in which articles are added to or removed from either end of the list as the user scrolls. A <code>feed</code> enables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads.</span></p>
 
 <pre class="brush: html">&lt;section role="feed" <a class="state-reference" href="https://w3c.github.io/aria/#aria-busy">aria-busy</a>="false"&gt;
@@ -113,3 +111,9 @@ <h2 id="See_also">See also</h2>
  <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">ARIA: list role</a></li>
  <li><cite><a href="https://www.w3.org/TR/wai-aria-practices-1.1/"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Authoring Practices</a></cite> - additional details on implementing a feed design pattern.</li>
 </ul>
+
+<section id="Quick_links">
+  <ol>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/en-us/web/accessibility/aria/roles/figure_role/index.html b/files/en-us/web/accessibility/aria/roles/figure_role/index.html
@@ -10,8 +10,6 @@
   - Role
   - figure
 ---
-<div>{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}</div>
-
 <p>The ARIA <code>figure</code> role can be used to identify a figure inside page content where appropriate semantics do not already exist. A figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.</p>
 
 <pre class="brush: html">&lt;div role="figure" aria-labelledby="caption"&gt;
@@ -145,3 +143,9 @@ <h2 id="See_also">See also</h2>
  <li><a href="/en-US/docs/Web/HTML/Element/figure">HTML &lt;figure&gt; element</a></li>
  <li><a href="/en-US/docs/Web/HTML/Element/figcaption">HTML &lt;figcaption&gt; element</a></li>
 </ul>
+
+<section id="Quick_links">
+  <ol>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/en-us/web/accessibility/aria/roles/form_role/index.html b/files/en-us/web/accessibility/aria/roles/form_role/index.html
@@ -10,8 +10,6 @@
   - Role
   - form
 ---
-<div>{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}</div>
-
 <p>The <code>form</code> <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">landmark role</a> can be used to identify a group of elements on a page that provide equivalent functionality to an HTML form.</p>
 
 <pre class="brush: html">&lt;div role="form" id="contact-info" aria-label="Contact information"&gt;
@@ -153,3 +151,9 @@ <h2 id="See_also">See also</h2>
  <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li>
  <li><a href="https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013 | The Paciello Group</a></li>
 </ul>
+
+<section id="Quick_links">
+  <ol>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>