v1.7.0 -> staging

.about.yml

@@ -22,8 +22,8 @@ stack:
 - Rails
 - elasticsearch
 contact:
-- url: mailto:holly.allen@gsa.gov
-  text: Holly Allen
+- url: mailto:alexandra.bisker@gsa.gov
+  text: Alex Bisker
 team:
 - github: ultrasaurus
 - github: shawnbot

_config.yml

@@ -13,7 +13,7 @@ baseurl:
 url: https://collegescorecard.ed.gov
 
 # app version number
-version: v1.6.0
+version: v1.7.0
 
 # Build settings
 markdown: kramdown

_includes/head.html

@@ -48,6 +48,7 @@
   <meta name="twitter:image" content="{{ canonical_base_url }}/img/hero-small.jpg">
 
   <!-- description -->
+  <meta name="description" content="{{ site.description }}">
   <meta property="og:description" content="{{ site.description }}">
   <meta name="twitter:description" content="{{ site.description }}">
 

_includes/search-form.html

@@ -6,9 +6,9 @@
     <aria-accordion id="school-degree" class="container">
 
       <h1 class="search_category">
-        <a aria-expanded="false" aria-controls="major-content">
+        <button aria-expanded="false" aria-controls="major-content">
           Programs/Degrees
-        </a>
+        </button>
       </h1>
       <div id="major-content" aria-hidden="true" class="accordion-div">
 
@@ -31,7 +31,7 @@ <h1 class="search_category">
 
       </div>
 
-      <input type="submit" value="Submit" class="sr-only">
+      <input type="submit" value="Submit" class="sr-only" tabindex="-1">
 
     </aria-accordion>
 
@@ -43,9 +43,9 @@ <h1 class="search_category">
     <aria-accordion id="school-location" class="container">
 
       <h1 class="search_category">
-        <a aria-expanded="false" aria-controls="location-content">
+        <button aria-expanded="false" aria-controls="location-content">
           Location
-        </a>
+        </button>
       </h1>
 
       <div id="location-content" aria-hidden="true" class="accordion-div">
@@ -125,7 +125,7 @@ <h1 class="search_category">
 
       </div>
 
-      <input type="submit" value="Submit" class="sr-only">
+      <input type="submit" value="Submit" class="sr-only" tabindex="-1">
 
     </aria-accordion>
 
@@ -137,9 +137,9 @@ <h1 class="search_category">
     <aria-accordion id="school-size" class="container">
 
       <h1 class="search_category">
-        <a aria-expanded="false" aria-controls="size-content">
+        <button aria-expanded="false" aria-controls="size-content">
           Size
-        </a>
+        </button>
       </h1>
 
       <div id="size-content" aria-hidden="true">
@@ -173,7 +173,7 @@ <h1>Undergraduate Student Body</h1>
 
       </div>
 
-      <input type="submit" value="Submit" class="sr-only">
+      <input type="submit" value="Submit" class="sr-only" tabindex="-1">
 
     </aria-accordion>
 
@@ -185,17 +185,17 @@ <h1>Undergraduate Student Body</h1>
     <aria-accordion id="school-name" class="container">
 
       <h1 class="search_category">
-        <a aria-expanded="false" aria-controls="name-content">
+        <button aria-expanded="false" aria-controls="name-content">
           Name
-        </a>
+        </button>
       </h1>
 
       <div id="name-content" aria-hidden="false" class="accordion-div">
         <label for="name-school">School name</label>
         <input id="name-school" name="name" type="text" placeholder="e.g., USA University" {{ common_input_attributes }}>
       </div>
 
-      <input type="submit" value="Submit" class="sr-only">
+      <input type="submit" value="Submit" class="sr-only" tabindex="-1">
 
     </aria-accordion>
 
@@ -206,9 +206,9 @@ <h1 class="search_category">
 
     <aria-accordion class="container">
       <h1 class="search_category">
-        <a aria-expanded="false" aria-controls="type-content">
+        <button aria-expanded="false" aria-controls="type-content">
           Advanced Search
-        </a>
+        </button>
       </h1>
 
       <div id="type-content" aria-hidden="false">
@@ -261,7 +261,7 @@ <h1>Type of school</h1>
 
       </div>
 
-      <input type="submit" value="Submit" class="sr-only">
+      <input type="submit" value="Submit" class="sr-only" tabindex="-1">
 
     </aria-accordion>
 
@@ -276,16 +276,16 @@ <h1>Type of school</h1>
           <legend>Advanced Search</legend>
 
           <div class="advanced_search-title">
-            <a aria-expanded="false" aria-controls="advanced-content" class="button link-more advanced_search-control">
+            <button aria-expanded="false" aria-controls="advanced-content" class="button link-more advanced_search-control">
               Advanced Search <i class="fa fa-plus"></i>
-            </a>
+            </button>
           </div>
 
         <div id="advanced-content" class="advanced-content" aria-hidden="false">
 
         </div>
 
-        <input type="submit" value="Submit" class="sr-only">
+        <input type="submit" value="Submit" class="sr-only" tabindex="-1">
 
       </aria-accordion>
 

_sass/base/blocks/_school.scss

@@ -26,8 +26,11 @@
 
 .school-right {
   margin-top: $base-padding;
+  padding-top: $base-padding;
   padding-left: $base-padding;
   padding-right: $base-padding;
+  background-color: $white;
+  border-radius: 0.4em;
 
   h2 {
     padding-bottom: $base-padding;
@@ -60,8 +63,6 @@
   @include respond-to(medium-up) {
     @include span-columns(3);
     @include omega();
-    padding-left: 0;
-    padding-right: 0;
     margin-top: $base-padding;
 
     h2 {

_sass/base/components/_aria-accordion.scss

@@ -1,21 +1,32 @@
 aria-accordion {
-  $button-size: 34px;
-  $button-margin: 9px;
+  $toggle-size: 34px;
+  $toggle-margin: 9px;
 
   @include transition(height 1s linear);
 
   display: block;
-  min-height: $button-size + ($button-margin * 2);
+  min-height: $toggle-size + ($toggle-margin * 2);
   padding-bottom: $base-padding-lite;
 
   @include respond-to(tiny-up) {
-    min-height: $button-size + ($button-margin * 3);
+    min-height: $toggle-size + ($toggle-margin * 3);
   }
 
   [aria-controls] {
+    // reset all of the button styles...
+    background: transparent;
+    border-radius: 0;
     display: block;
-    cursor: pointer;
+    font: inherit;
+    height: auto;
+    letter-spacing: 0;
+    margin: 0;
+    padding: 0;
     position: relative;
+    text-align: left;
+    text-transform: none;
+    vertical-align: baseline;
+    width: 100%;
   }
 
   [aria-controls]:after {
@@ -24,16 +35,16 @@ aria-accordion {
     border-radius: 500px;
     color: #999;
     display: inline-block;
-    font-size: $button-size;
+    font-size: $toggle-size;
     font-weight: normal;
-    height: $button-size;
+    height: $toggle-size;
     line-height: 1.075;
     padding-left: 0.02em;
     position: absolute;
     text-align: center;
-    top: $button-margin;
+    top: $toggle-margin;
     right: 0; // XXX
-    width: $button-size;
+    width: $toggle-size;
   }
 
   [aria-controls]:after {

circle.yml

@@ -28,7 +28,20 @@ test:
     # <https://github.com/webdriverio/webdriverio/issues/926>
     - ln -s /tmp
 
+    # build the site and start the server (this exits when the server is
+    # available at localhost:4000)
+    - ./test/server.sh:
+        background: true
+
+    # wait for the http server to start
+    - wget --retry-connrefused --waitretry=1 -T 5 -t 30 -qO- http://localhost:4000 > /dev/null
+
     # run the browser tests
-    - ./test/ci.sh
+    - npm run test-ci
+
+    # run the accessibility tests
+    - npm run test-a11y
+
   post:
-    - killall --wait sc  # wait for Sauce Connect to close the tunnel
+    # wait for Sauce Connect to close the tunnel
+    - killall --wait sc

js/src/components/aria-accordion.js

@@ -10,10 +10,16 @@
       {
         attachedCallback: {value: function() {
           var trigger = this.__trigger = getTrigger(this);
-          if (!trigger) return;
+          if (!trigger) {
+            return;
+          }
 
           var content = this.__content = getContent(this, trigger);
-          if (!content) return;
+          if (!content) {
+            return;
+          }
+
+          trigger.setAttribute('tabindex', 0);
 
           // set role="button" on the trigger element if it's not a <button>
           if (trigger.nodeName !== 'BUTTON' && !trigger.hasAttribute('role')) {

package.json

@@ -18,7 +18,7 @@
     "test": "wdio test/wdio.conf.js",
     "test-quick": "wdio test/wdio.quick.js",
     "test-sauce": "wdio test/wdio.sauce.js",
-    "test-ci": "./test/ci.sh"
+    "test-ci": "wdio test/wdio.ci.js"
   },
   "dependencies": {
     "aight": "^2.1.1",
@@ -32,7 +32,6 @@
   "devDependencies": {
     "browserify": "^12.0.1",
     "extend": "^3.0.0",
-    "http-server": "^0.8.5",
     "jshint": "^2.8.0",
     "minifyify": "^7.1.0",
     "mocha": "*",

school/index.html

@@ -159,9 +159,9 @@ <h2 class="figure-heading constrain_width" aria-describedby="tip-avg-salary">
               <div>
 
                 <h1 class="search_category">
-                  <a aria-expanded="false" aria-controls="costs-content">
+                  <button aria-expanded="false" aria-controls="costs-content">
                     Costs
-                  </a>
+                  </button>
                 </h1>
 
                 <div id="costs-content" aria-hidden="true">
@@ -251,9 +251,9 @@ <h2>By Family Income</h2>
             <aria-accordion id="finaid" class="school-two_col">
               <div>
                 <h1 class="search_category">
-                  <a aria-expanded="false" aria-controls="finaid-content">
+                  <button aria-expanded="false" aria-controls="finaid-content">
                     Financial Aid &amp; Debt
-                  </a>
+                  </button>
                 </h1>
 
                 <div id="finaid-content" aria-hidden="true">
@@ -359,9 +359,9 @@ <h2>Get Help Paying for College</h2>
             <aria-accordion id="graduation" class="school-two_col">
               <div>
                 <h1 class="search_category">
-                  <a aria-expanded="false" aria-controls="graduation-content">
+                  <button aria-expanded="false" aria-controls="graduation-content">
                     Graduation &amp; Retention
-                  </a>
+                  </button>
                 </h1>
 
                 <div id="graduation-content" aria-hidden="true">
@@ -440,9 +440,9 @@ <h2 class="figure-heading" aria-describedby="tip-retention-rate">
             <aria-accordion id="earnings" class="school-two_col">
               <div>
                 <h1 class="search_category">
-                  <a aria-expanded="false" aria-controls="earnings-content">
+                  <button aria-expanded="false" aria-controls="earnings-content">
                     Earnings After School
-                  </a>
+                  </button>
                 </h1>
 
                 <div id="earnings-content" aria-hidden="true">
@@ -501,9 +501,9 @@ <h2 class="figure-heading" aria-describedby="tip-avg-salary">
             <aria-accordion id="demographics" class="school-two_col">
               <div>
                 <h1 class="search_category">
-                  <a aria-expanded="false" aria-controls="student-content">
+                  <button aria-expanded="false" aria-controls="student-content">
                     Student Body
-                  </a>
+                  </button>
                 </h1>
 
                 <div id="student-content" aria-hidden="true">
@@ -593,9 +593,9 @@ <h2 aria-describedby="tip-socio-eco">
             <aria-accordion id="selectivity" class="school-two_col">
               <div>
                 <h1 class="search_category">
-                  <a aria-expanded="false" aria-controls="selectivity-content">
+                  <button aria-expanded="false" aria-controls="selectivity-content">
                     SAT/ACT Scores
-                  </a>
+                  </button>
                 </h1>
 
                 <div id="selectivity-content" aria-hidden="true">
@@ -660,9 +660,9 @@ <h3 class="h2">ACT</h3>
             <aria-accordion id="academics" class="school-two_col">
               <div>
                 <h1 class="search_category">
-                  <a aria-expanded="false" aria-controls="academics-content">
+                  <button aria-expanded="false" aria-controls="academics-content">
                     Academic Programs
-                  </a>
+                  </button>
                 </h1>
 
                 <div id="academics-content" aria-hidden="true">