Spelling fixes (pull #834)

Fixes 21 errors across 18 files.

* typo: Transcripts
* typo: attribute
* typo: imitate
* typo: Research
* typo: performing
* typo: Transcripts
* typo: left
* typo: arbitrary
* typo: left
* typo: corp
* typo: parent
* typo: selector
* typo: parent
* typo: selector
* typo: accessible
* typo: left
* typo: relevant
* Fixed JS comment block that was HTML
* typo: shortcuts
* typo: selector
* typo: accessible
* typo: information

examples/coding-template/Example-Template.html

@@ -77,7 +77,7 @@ <h2 id="ex_label">Example</h2>
         <!--  Target of previous link will need to be updated when we move the guidelines into the wiki from Ian's repo.  -->
 
         <script type="text/javascript">
-          <!--  Javascript relavant to example -->
+          //  Javascript relevant to example
           var i;
           var str = "text"
           for(i = 0; i < str.length; i++) {
@@ -96,7 +96,7 @@ <h2>Accessibility Features</h2>
       demonstrated in this implementation, such as:</p>
     <ol>
       <li>What distinguishes this example from related examples.</li>
-      <li>Keyboard chortcuts, live regions,  unusual event handling, or other ancillary best practices that are employed.</li>
+      <li>Keyboard shortcuts, live regions,  unusual event handling, or other ancillary best practices that are employed.</li>
       <li>Do not include information that would be repeated in the following keyboard and attribute sections.</li>
       <li>Delete this section if not needed.</li>
     </ol>

examples/combobox/aria1.0pattern/combobox-autocomplete-both.html

@@ -252,7 +252,7 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
           </tr>
           <tr data-test-id="listbox-key-left-arrow">
             <th><kbd>Left Arrow</kbd></th>
-            <td>Moves visual focus to the textbox and moves the editing cursor one character to the leftt.</td>
+            <td>Moves visual focus to the textbox and moves the editing cursor one character to the left.</td>
           </tr>
           <tr data-test-id="listbox-key-home">
             <th><kbd>Home</kbd></th>

examples/combobox/aria1.0pattern/combobox-autocomplete-list.html

@@ -41,7 +41,7 @@ <h1>Legacy ARIA 1.0 Combobox With List Autocomplete Example</h1>
       If the user types one or more characters in the edit box and the typed characters match the beginning of the name of one or more states or territories, a listbox popup appears containing the matching names.
       When the listbox appears, a suggested name is not automatically selected.
       Thus, after typing, if the user tabs or clicks out of the combobox without choosing a value from the listbox, the typed string becomes the value of the combobox.
-      Note that this implementation enables users to input the name of a state or territory, but it does not prevent input of any other arbetrary value.
+      Note that this implementation enables users to input the name of a state or territory, but it does not prevent input of any other arbitrary value.
     </p>
     <p>Similar examples include:</p>
     <ul>
@@ -251,7 +251,7 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
           </tr>
           <tr>
             <th><kbd>Left Arrow</kbd></th>
-            <td>Moves visual focus to the textbox and moves the editing cursor one character to the leftt.</td>
+            <td>Moves visual focus to the textbox and moves the editing cursor one character to the left.</td>
           </tr>
           <tr>
             <th><kbd>Home</kbd></th>

examples/combobox/aria1.0pattern/combobox-autocomplete-none.html

@@ -199,7 +199,7 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
           </tr>
           <tr>
             <th><kbd>Left Arrow</kbd></th>
-            <td>Moves visual focus to the textbox and moves the editing cursor one character to the leftt.</td>
+            <td>Moves visual focus to the textbox and moves the editing cursor one character to the left.</td>
           </tr>
           <tr>
             <th><kbd>Home</kbd></th>

examples/combobox/aria1.1pattern/listbox-combo.html

@@ -46,7 +46,7 @@ <h1>ARIA 1.1 Combobox with Listbox Popup Examples</h1>
       <li><a href="../aria1.0pattern/combobox-autocomplete-list.html">ARIA 1.0 Combobox with List Autocomplete</a>: A combobox that demonstrates the autocomplete behavior known as <q>list with manual selection</q> and uses the ARIA 1.0 implementation pattern.</li>
       <li><a href="../aria1.0pattern/combobox-autocomplete-none.html">ARIA 1.0 Combobox Without Autocomplete</a>: A combo box that demonstrates the behavior associated with <code>aria-autocomplete=none</code> and uses the ARIA 1.0 implementation pattern.</li>
     </ul>
-  
+
     <section>
       <h2 id="ex_label">Examples</h2>
       <h3 id="ex1_label">Example 1: List Autocomplete with Manual Selection</h3>
@@ -92,7 +92,7 @@ <h3 id="ex2_label">Example 2: List Autocomplete with Automatic Selection</h3>
           Choice 2 Fruit or Vegetable
         </label>
         <div class="combobox-wrapper">
-          <div role="combobox" 
+          <div role="combobox"
             aria-expanded="false"
             aria-owns="ex2-listbox"
             aria-haspopup="listbox"
@@ -169,8 +169,8 @@ <h4>Notes</h4>
     <section>
       <h2 id="kbd_label">Keyboard Support</h2>
       <p>
-      The example comboboxes on this page implement the following keyboard interface. 
-        Other variations and options for the keyboard interface are described in the  
+      The example comboboxes on this page implement the following keyboard interface.
+        Other variations and options for the keyboard interface are described in the
         <a href="../../../#combobox_kbd_interaction">Keyboard Interaction section of the combobox design pattern.</a>
       </p>
       <h3 id="kbd_label_textbox">Textbox</h3>
@@ -192,7 +192,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
                     <li>Examples 2 and 3: Moves focus to the second suggested value. Note that the first value is automatically selected.</li>
                   </ul>
                 </li>
-                <li>If the listbox is not displayed, in example 3 only, opens the listbox and moves focus to the first value.</li>           
+                <li>If the listbox is not displayed, in example 3 only, opens the listbox and moves focus to the first value.</li>
               </ul>
             </td>
           </tr>
@@ -201,7 +201,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
             <td>
               <ul>
                 <li>If the listbox is displayed, moves focus to the last suggested value.</li>
-                <li>If the listbox is not displayed, in example 3 only, opens the listbox and moves focus to the last value.</li>           
+                <li>If the listbox is not displayed, in example 3 only, opens the listbox and moves focus to the last value.</li>
               </ul>
             </td>
           </tr>
@@ -243,7 +243,7 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
       <p>
         <strong>NOTE:</strong> When visual focus is in the listbox, DOM focus remains on the textbox and the value of <code>aria-activedescendant</code> on the textbox is set to a value that refers to the listbox option that is visually indicated as focused.
         Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator.
-        For more information about this focus management technique, see 
+        For more information about this focus management technique, see
         <a href="../../../#kbd_focus_activedescendant">Using aria-activedescendant to Manage Focus.</a>
       </p>
       <table aria-labelledby="kbd_label_listbox kbd_label" class="def">
@@ -300,7 +300,7 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
           </tr>
           <tr data-test-id="listbox-key-left-arrow">
             <th><kbd>Left Arrow</kbd></th>
-            <td>Moves focus to the textbox and moves the editing cursor one character to the leftt.</td>
+            <td>Moves focus to the textbox and moves the editing cursor one character to the left.</td>
           </tr>
           <tr data-test-id="listbox-key-home">
             <th><kbd>Home</kbd></th>
@@ -326,8 +326,8 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
     <section>
       <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
       <p>
-        The example comboboxes on this page implement the following ARIA roles, states, and properties. 
-        Information about other ways of applying ARIA roles, states, and properties is available in the    
+        The example comboboxes on this page implement the following ARIA roles, states, and properties.
+        Information about other ways of applying ARIA roles, states, and properties is available in the
         <a href="../../../#combobox_roles_states_props">Roles, States, and Properties section of the combobox design pattern.</a>
       </p>
       <h3 id="rps_label_combobox">Combobox Container</h3>
@@ -455,7 +455,7 @@ <h3 id="rps_label_textbox">Textbox</h3>
                 <li>Note:
                   <ul>
                     <li>In the ARIA 1.0 combobox pattern, the textbox has <code>aria-owns</code> instead of <code>aria-controls</code>.</li>
-                    <li>In this ARIA 1.1 pattern, <code>aria-owns</code> is instead on the parent container so the popup element is a sibling of the textbox instead of a child of the textbox, making it perceivable by screen reader users as an element adjacent to the textbox when using a reading cursor or touch interface.</li> 
+                    <li>In this ARIA 1.1 pattern, <code>aria-owns</code> is instead on the parent container so the popup element is a sibling of the textbox instead of a child of the textbox, making it perceivable by screen reader users as an element adjacent to the textbox when using a reading cursor or touch interface.</li>
                   </ul>
                 </li>
               </ul>
@@ -473,7 +473,7 @@ <h3 id="rps_label_textbox">Textbox</h3>
                 <li>When navigation keys, such as <kbd>Down Arrow</kbd>, are pressed, the JavaScript changes the value.</li>
                 <li>Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the <code>input</code> element.</li>
                 <li>
-                  For more information about this focus management technique, see 
+                  For more information about this focus management technique, see
                   <a href="../../../#kbd_focus_activedescendant">Using aria-activedescendant to Manage Focus.</a>
                 </li>
               </ul>

examples/disclosure/disclosure-faq.html

@@ -97,7 +97,7 @@ <h2>Accessibility Features</h2>
         So that the list structure is communicated to assistive technologies, instead of applying a button role to the <code>dt</code> element, a <code>button</code> element is contained within the <code>dd</code> element.
         Similarly, the container for the answer content that is shown and hidden is inside of the <code>dd</code> element so the <code>dl</code> structure is complete even when the answers are all hidden.
       </li>
-      <li> The visual indication of expanded and collapsed states is synchronized with the value of <code>aria-expanded</code> using a CSS atribute selector and <code>:before</code> pseudo element that generates an image with the <code>content</code> property.</li>
+      <li> The visual indication of expanded and collapsed states is synchronized with the value of <code>aria-expanded</code> using a CSS attribute selector and <code>:before</code> pseudo element that generates an image with the <code>content</code> property.</li>
       <li>The interactivity of the question is visually indicated on focus and hover:
         <ul>
           <li>The CSS <code>:focus</code> pseudo class is used to change the background and border colors.</li>

examples/disclosure/disclosure-img-long-description.html

@@ -48,18 +48,18 @@ <h2 id="ex_label">Example</h2>
         <figcaption>
           <p>
             Figurative Map of the successive losses in men of the French Army in the Russian campaign 1812-1813.
-            Drawn by Mr. Minard, Inspector General of Bridges and Roads in retirement. 
+            Drawn by Mr. Minard, Inspector General of Bridges and Roads in retirement.
             Paris, 20 November 1869.
           </p>
           <p>
-            The numbers of men present are represented by the widths of the colored zones in a rate of one millimeter for ten thousand men; these are also written beside the zones. 
-            Red designates men moving into Russia, black those on retreat. 
+            The numbers of men present are represented by the widths of the colored zones in a rate of one millimeter for ten thousand men; these are also written beside the zones.
+            Red designates men moving into Russia, black those on retreat.
           </p>
           <p>
-            The informations used for drawing the map were taken from the works of Messrs. Thiers, <span lang="fr">de Ségur, de Fezensac, de Chambray</span> and the unpublished diary of Jacob, pharmacist of the Army since 28 October.
+            The information used for drawing the map were taken from the works of Messrs. Thiers, <span lang="fr">de Ségur, de Fezensac, de Chambray</span> and the unpublished diary of Jacob, pharmacist of the Army since 28 October.
           </p>
           <p>
-            In order to facilitate the judgement of the eye regarding the diminution of the army, I supposed that the troops under Prince Jèrôme and under Marshal Davoust, who were sent to Minsk and Mobilow and who rejoined near Orscha and Witebsk, had always marched with the army. 
+            In order to facilitate the judgement of the eye regarding the diminution of the army, I supposed that the troops under Prince Jèrôme and under Marshal Davoust, who were sent to Minsk and Mobilow and who rejoined near Orscha and Witebsk, had always marched with the army.
           </p>
   <p><strong>Note: A French translation from Wikipedia.</strong></p>
         <button aria-expanded="true" aria-controls="id_long_desc">Data Table for Minard's Chart</button>

examples/feed/feed.html

@@ -33,7 +33,7 @@ <h1>Feed Example</h1>
     The example below implements the
     <a href="../../#feed">feed design pattern.</a>
     for a restaurant review site.
-    To immitate an infinitely scrolling set of data, information about ten restaurants is repeatedly loaded as the user reads the feed.
+    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.
   </p>
   <p>
@@ -129,7 +129,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
           <td>
             <ul>
               <li>Identifies an element that contains content for a feed article.</li>
-              <li>Feed articles and their content are Dynamically created in the JavaScript.</li> 
+              <li>Feed articles and their content are Dynamically created in the JavaScript.</li>
             </ul>
           </td>
         </tr>
@@ -165,7 +165,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
             <ul>
               <li>Refers to the list of elements that provide the main content of the article.</li>
               <li>Does not include elements that are identically repeated in every article, e.g., does not include the &quot;Bookmark&quot; button.</li>
-              <li>Enables assistive technology users to skim the feed.</li> 
+              <li>Enables assistive technology users to skim the feed.</li>
             </ul>
           </td>
         </tr>

examples/menubar/menubar-1/mb-academics.html

@@ -43,10 +43,10 @@ <h2 id="academic">Academic Calendar</h2>
         <p><a href="menubar-1.html#code-ex-1">Back to <code>menubar</code> example</a>
 
 
-        <h2 id="tanscripts">Transscripts</h2>
+        <h2 id="transcripts">Transcripts</h2>
         <p><a href="menubar-1.html#code-ex-1">Back to <code>menubar</code> example</a>
 
     </main>
 </body>
 
-</html> 
+</html>

examples/menubar/menubar-1/mb-arts.html

@@ -24,7 +24,7 @@ <h2 id="las">College of Liberal Arts and Sciences</h2>
         <h2 id="cultural-center">Cultural Center</h2>
         <p><a href="menubar-1.html#code-ex-1">Back to <code>menubar</code> example</a></p>
 
-        <h2 id="perfoming-arts">Performing Arts</h2>
+        <h2 id="performing-arts">Performing Arts</h2>
         <p><a href="menubar-1.html#code-ex-1">Back to <code>menubar</code> example</a></p>
 
         <h2 id="art-museum">Art Museum</h2>

examples/menubar/menubar-1/mb-outreach.html

@@ -18,7 +18,7 @@ <h1 id="outreach">Outreach</h1>
         <h2 id="comm-engage">Community Engagement</h2>
         <p><a href="menubar-1.html#code-ex-1">Back to <code>menubar</code> example</a></p>
 
-        <h2 id="copr-rel">Corporate Relations</h2>
+        <h2 id="corp-rel">Corporate Relations</h2>
         <p><a href="menubar-1.html#code-ex-1">Back to <code>menubar</code> example</a></p>
 
         <h2 id="extension">Extension</h2>
@@ -30,4 +30,4 @@ <h2 id="outreach-events">Outreach Events</h2>
     </main>
 </body>
 
-</html> 
+</html>

examples/menubar/menubar-1/mb-research.html

@@ -18,7 +18,7 @@ <h1 id="research">Research</h1>
         <h2 id="res-news">Research News</h2>
         <p><a href="menubar-1.html#code-ex-1">Back to <code>menubar</code> example</a>
 
-        <h2 id="res-centers">Reseach Centers</h2>
+        <h2 id="res-centers">Research Centers</h2>
         <p><a href="menubar-1.html#code-ex-1">Back to <code>menubar</code> example</a>
 
         <h2 id="res-find">Find an Expert</h2>

examples/menubar/menubar-1/menubar-1.html

@@ -151,7 +151,7 @@ <h2 id="ex_label">Example</h2>
                 <a role="menuitem" href="mb-academics.html#academic">Academic Calendar</a>
               </li>
               <li role="none">
-                <a role="menuitem" href="mb-academics.html#tanscripts">Transscripts</a>
+                <a role="menuitem" href="mb-academics.html#tanscripts">Transcripts</a>
               </li>
             </ul>
           </li>
@@ -404,7 +404,7 @@ <h3 id="rps1_label">Menubar</h3>
           <td>
             <ul>
               <li>
-                Defines an acessible name for the <code>menubar</code>.
+                Defines an accessible name for the <code>menubar</code>.
               </li>
               <li>Helps assistive technology users understand the purpose of the menubar and
                 distinguish it from any other menubars or similar elements on the page.</li>
@@ -535,7 +535,7 @@ <h3 id="rps2_label">Submenu</h3>
           <td>
             <ul>
               <li>
-                Defines an acessible name for the <code>menu</code>.
+                Defines an accessible name for the <code>menu</code>.
               </li>
               <li>Helps assistive technology users understand the purpose of the menu and
                 distinguish it from any other menu or similar elements (e.g. menubar) on the page.</li>

examples/menubar/menubar-2/menubar-2.html

@@ -379,7 +379,7 @@ <h3 id="rps1_label">Menubar</h3>
             <td>
               <ul>
                 <li>
-                  Defines an acessible name for the <code>menubar</code>.
+                  Defines an accessible name for the <code>menubar</code>.
                 </li>
                 <li>Helps assistive technology users understand the purpose of the menubar and
                   distinguish it from any other menubars or similar elements on the page.</li>
@@ -509,7 +509,7 @@ <h3 id="rps2_label">Submenu</h3>
             <code>ul</code>
           </td>
           <td>
-            Defines an acessible name for the <code>menu</code>.
+            Defines an accessible name for the <code>menu</code>.
           </td>
         </tr>
         <tr data-test-id="submenu-menuitem-role">