fix: disallow compound words with cSpell (#1703)

README.md

@@ -1,4 +1,4 @@
-[![Build Status](https://travis-ci.com/w3c/aria-practices.svg?branch=master)](https://travis-ci.com/w3c/aria-practices) [![Greenkeeper badge](https://badges.greenkeeper.io/w3c/aria-practices.svg)](https://greenkeeper.io/)
+[![Build Status](https://travis-ci.com/w3c/aria-practices.svg?branch=master)](https://travis-ci.com/w3c/aria-practices)
 
 # WAI-ARIA: Authoring Practices Guide
 

cspell.json

@@ -7,6 +7,7 @@
         "npm"
     ],
     "words": [
+        "activedescendants",
         "affordance",
         "alertdialog",
         "Anjou",
@@ -23,11 +24,18 @@
         "Bosc",
         "Botr",
         "Bucketwheat",
+        "camelcase",
         "Capitan",
         "Carron",
+        "checkmark",
         "Chjat",
+        "citystate",
+        "Claremont",
+        "Codepen",
+        "codepenbutton",
         "colheader",
         "Colom",
+        "combobox's",
         "comboboxes",
         "commenters",
         "contenteditable",
@@ -43,6 +51,7 @@
         "datepicker",
         "Davoust",
         "Defocus",
+        "Deletable",
         "Deque",
         "DHTML",
         "dialog's",
@@ -64,14 +73,18 @@
         "Foltz",
         "Foyle",
         "Frahm",
+        "funders",
         "Gaelle",
         "Garaventa",
+        "geckodriver",
         "Geppy",
+        "gridbox",
         "gridcells",
         "GUIs",
         "Gunderson",
         "Hassium",
         "Hausler",
+        "highlighttext",
         "Higley",
         "Hillen",
         "hljs",
@@ -88,6 +101,7 @@
         "Kasper",
         "kbdshortcuts",
         "Kowno",
+        "Labelable",
         "Lauke",
         "Leventhal",
         "Lewandowski",
@@ -111,7 +125,9 @@
         "Moscovium",
         "MSAA",
         "multithumb",
+        "Navs",
         "Nemeth",
+        "nightmode",
         "Nihonium",
         "nodir",
         "norotate",
@@ -125,21 +141,29 @@
         "Orscha",
         "outdent",
         "Paciello",
+        "PAGEDOWN",
         "PAGEUP",
         "perceivability",
         "Philipp",
         "PIAS",
         "Pieters",
         "Polovnyov",
+        "polyline",
+        "Popout",
         "portlet",
         "Presentational",
         "Pseudocereal",
+        "radiogroups",
+        "rawgit",
         "Rearrangeable",
         "refreshable",
         "respec",
+        "roadmap",
         "Roentgenium",
+        "rowgroups",
         "rtrim",
         "Rudloff",
+        "ruleset",
         "Sakura",
         "Sanaullah",
         "Scheuhammer",
@@ -152,18 +176,24 @@
         "shizzle",
         "Shopify",
         "Smorgeni",
+        "sourcecode",
         "Spinbuttons",
         "Starkrimson",
         "Studienska",
+        "stylelint",
+        "subfolders",
         "submenu",
         "submenu's",
         "submenus",
         "Sulaiman",
         "tabbable",
-        "tabindex",
+        "tablist",
+        "tablist’s",
         "tablists",
+        "tabpanels",
         "Tatiana",
         "Tennessine",
+        "textarea's",
         "textfield",
         "Thaarup",
         "Thiel",
@@ -174,6 +204,7 @@
         "transuranic",
         "Transuranium",
         "Treegrids",
+        "treeitems",
         "Treeview",
         "Tryens",
         "uncheck",
@@ -212,13 +243,17 @@
         "for=\"(?:[^\\\"]+|\\.)*\"",
         "url\\(\"data\\:image/svg\\+xml.*\"\\)[,;]"
     ],
-    "allowCompoundWords": true,
+    "allowCompoundWords": false,
     "ignorePaths": [
+        "cspell.json",
         "**/*.min.js",
         "**/*.pack.js",
         "**/*.paint",
         "aria-practices-DeletedSectionsArchive.html",
+        "examples/css/github.css",
         "examples/landmarks/css/bootstrap.css",
+        "examples/landmarks/css/bootstrap-theme.css",
+        "examples/landmarks/js/visua11y.js",
         "common/**",
         "node_modules/**",
         "package*.json",

examples/disclosure/css/disclosure-navigation.css

@@ -79,11 +79,11 @@
 }
 
 /* Styles for example page content section */
-.disclosure-pagecontent {
+.disclosure-page-content {
   border: 1px solid #ccc;
   padding: 1em;
 }
 
-.disclosure-pagecontent h3 {
+.disclosure-page-content h3 {
   margin-top: 0.5em;
 }

examples/disclosure/disclosure-navigation.html

@@ -127,7 +127,7 @@ <h2 id="ex_label">Example</h2>
           </li>
         </ul>
       </nav>
-      <div id="mythical-page-content" class="disclosure-pagecontent" tabindex="-1" role="region" aria-label="Mythical University sample page content">
+      <div id="mythical-page-content" class="disclosure-page-content" tabindex="-1" role="region" aria-label="Mythical University sample page content">
         <h3 id="mythical-page-heading">Mythical University</h3>
         <p>Sample content section. Activating a link above will update and navigate to this region.</p>
       </div>

examples/feed/css/feedDisplay.css

@@ -3,7 +3,7 @@ body {
   font-family: Helvetica, Arial, sans-serif;
 }
 
-#sidepanel {
+#side-panel {
   box-sizing: border-box;
   display: inline-block;
   padding-left: 1.5em;

examples/feed/feedDisplay.html

@@ -21,7 +21,7 @@ <h2>Recommended Restaurants</h2>
       <div id="restaurant-feed" role="feed">
       </div>
     </section>
-    <section id="sidepanel">
+    <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>

examples/js/examples.js

@@ -62,7 +62,7 @@ aria.widget.SourceCode = function () {
  * @param {string} locationId      - ID of `code` element that will display the example html
  * @param {string} codeId          - ID of element containing only and all of the html used to render the example widget
  * @param {string} exampleHeaderId - ID of header element under which the "Open in Codepen" button belongs
- * @param {string} cssJsFilesId    - ID of element containing links to all the relevent js and css files used for the example widget
+ * @param {string} cssJsFilesId    - ID of element containing links to all the relevant js and css files used for the example widget
  *
  * @function add
  * @memberof aria.widget.SourceCode
@@ -362,7 +362,7 @@ function indentLines(input, indentation) {
  * @param {string} exampleIndex - the example number, if there are multiple examples
  * @param {string} exampleHeaderId - the example header to place the button next to
  * @param {string} exampleCodeId - the example html code
- * @param {string} exampleFilesId - the element containing all relevent CSS and JS file
+ * @param {string} exampleFilesId - the element containing all relevant CSS and JS file
  */
 function addOpenInCodePenForm(
   exampleIndex,

examples/listbox/js/listbox.js

@@ -359,7 +359,7 @@ aria.Listbox.prototype.checkClickItem = function (evt) {
 };
 
 /**
- * Prevent text selection on shift + click for multiselect listboxes
+ * Prevent text selection on shift + click for multi-select listboxes
  *
  * @param evt
  */

examples/tabs/tabs-1/js/tabs.js

@@ -29,7 +29,7 @@
     delete: 46,
   };
 
-  // Add or substract depending on key pressed
+  // Add or subtract depending on key pressed
   var direction = {
     37: -1,
     38: -1,

examples/tabs/tabs-1/tabs.html

@@ -46,7 +46,7 @@ <h2 id="ex_label">Example</h2>
             <div role="tablist" aria-label="Entertainment">
               <button type="button" role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">Nils Frahm</button>
               <button type="button" role="tab" aria-selected="false" aria-controls="agnes-tab" id="agnes" tabindex="-1">Agnes Obel</button>
-              <button type="button" role="tab" aria-selected="false" aria-controls="complexcomplex" id="complex" tabindex="-1" data-deletable>Joke</button>
+              <button type="button" role="tab" aria-selected="false" aria-controls="complex-complex" id="complex" tabindex="-1" data-deletable>Joke</button>
             </div>
 
             <div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils">
@@ -57,7 +57,7 @@ <h2 id="ex_label">Example</h2>
               <p>Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.</p>
             </div>
 
-            <div tabindex="0" role="tabpanel" id="complexcomplex" aria-labelledby="complex" class="is-hidden">
+            <div tabindex="0" role="tabpanel" id="complex-complex" aria-labelledby="complex" class="is-hidden">
               <p>Fear of complicated buildings:</p>
               <p>A complex complex complex.</p>
             </div>

examples/tabs/tabs-2/tabs.html

@@ -46,7 +46,7 @@ <h2 id="ex_label">Example</h2>
             <div role="tablist" aria-label="Entertainment">
               <button type="button" role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">Nils Frahm</button>
               <button type="button" role="tab" aria-selected="false" aria-controls="agnes-tab" id="agnes" tabindex="-1">Agnes Obel</button>
-              <button type="button" role="tab" aria-selected="false" aria-controls="complexcomplex" id="complex" tabindex="-1" data-deletable>Joke</button>
+              <button type="button" role="tab" aria-selected="false" aria-controls="complex-complex" id="complex" tabindex="-1" data-deletable>Joke</button>
             </div>
 
             <div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils">
@@ -57,7 +57,7 @@ <h2 id="ex_label">Example</h2>
               <p>Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.</p>
             </div>
 
-            <div tabindex="0" role="tabpanel" id="complexcomplex" aria-labelledby="complex" class="is-hidden">
+            <div tabindex="0" role="tabpanel" id="complex-complex" aria-labelledby="complex" class="is-hidden">
               <p>Fear of complicated buildings:</p>
               <p>A complex complex complex.</p>
             </div>

examples/treeview/treeview-1/treeview-1a.html

@@ -428,7 +428,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                  </ul>
               </td>
             </tr>
-            <tr data-test-id="treeitem-ariaexpanded">
+            <tr data-test-id="treeitem-aria-expanded">
               <td></td>
               <th scope="row"><code>aria-expanded=&quot;false&quot;</code></th>
               <td><code>li</code></td>
@@ -440,7 +440,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                 </ul>
               </td>
             </tr>
-            <tr data-test-id="treeitem-ariaexpanded">
+            <tr data-test-id="treeitem-aria-expanded">
               <td></td>
               <th scope="row"><code>aria-expanded=&quot;true&quot;</code></th>
               <td><code>li</code></td>

examples/treeview/treeview-1/treeview-1b.html

@@ -549,7 +549,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                 </ul>
               </td>
             </tr>
-            <tr data-test-id="tree-arialabelledby">
+            <tr data-test-id="tree-aria-labelledby">
               <td></td>
               <th scope="row"><code>aria-labelledby=&quot;IDREF&quot;</code></th>
               <td><code>ul</code></td>

scripts/create-gh-project.js

@@ -1,6 +1,6 @@
 /**
  * Create a file '.env' with the following:
- *   GITHUB_TOKEN=yourkey
+ *   GITHUB_TOKEN=yourKey
  *   GITHUB_PROJECT_COLUMN_ID=yourColumnId
  *
  * If you want a new project created, you do not have to include a GITHUB_PROJECT_COLUMN_ID

test/tests/carousel_carousel-1-prev-next.js

@@ -50,7 +50,7 @@ ariaTest(
   exampleFile,
   'carousel-region-aria-roledescription',
   async (t) => {
-    // check the aria-roledescrption set to carousel
+    // check the aria-roledescription set to carousel
     await assertAttributeValues(
       t,
       ex.landmarkSelector,
@@ -163,7 +163,7 @@ ariaTest(
   exampleFile,
   'carousel-group-aria-roledescription',
   async (t) => {
-    // check the aria-roledescrption set to carousel
+    // check the aria-roledescription set to carousel
     await assertAttributeValues(
       t,
       ex.slideSelector,

test/tests/carousel_carousel-2-tablist.js

@@ -320,7 +320,7 @@ ariaTest(
   async (t) => {
     t.plan(1);
 
-    // check the aria-roledescrption set to carousel
+    // check the aria-roledescription set to carousel
     await assertAttributeValues(
       t,
       ex.landmarkSelector,

test/tests/checkbox_checkbox-2.js

@@ -66,7 +66,7 @@ ariaTest(
       ex.numCondiments,
       'The attribute "aria-controls" should have ' +
         ex.numCondiments +
-        ' values seperated by spaces'
+        ' values separated by spaces'
     );
 
     for (let id of controls) {