@code.gov/code-gov-style - npm Package Compare versions

Comparing version 1.14.1 to 1.15.0-0

components/autocomplete.md

@@ -12,3 +12,3 @@ ---
     <div style="margin: 0 auto; position: relative; width: 400px;">
-      <input placeholder="Search Thousands of Projects..." type="search" style="width: 100%">
+      <input placeholder="Search Thousands of Projects..." type="search" style="width: 100%" aria-label="search">
       <ul class="autocomplete">
@@ -41,3 +41,3 @@ <li>
     <div style="margin: 0 auto; width: 400px;">
-      <input placeholder="Search Thousands of Projects..." type="search" style="width: 100%">
+      <input placeholder="Search Thousands of Projects..." type="search" style="width: 100%" aria-label="search">
       <ul class="autocomplete">
@@ -44,0 +44,0 @@ <li>

components/footers.md

@@ -51,3 +51,3 @@ ---
           <a>
-            <img src="../assets/img/whitehouse.png">
+            <img src="../assets/img/whitehouse.png" alt="white house logo">
             <span>The White House</span>
@@ -58,3 +58,3 @@ </a>
           <a>
-            <img src="../assets/img/PIF.png">
+            <img src="../assets/img/PIF.png" alt="pif logo">
             <span>PIF</span>
@@ -65,3 +65,3 @@ </a>
           <a>
-            <img src="../assets/img/GSA.svg">
+            <img src="../assets/img/GSA.svg" alt="gsa logo">
             <span>GSA</span>
@@ -91,3 +91,3 @@ </a>
           <a>
-            <img src="../assets/img/whitehouse.png">
+            <img src="../assets/img/whitehouse.png" alt="white house logo">
             <span>The White House</span>
@@ -98,3 +98,3 @@ </a>
           <a>
-            <img src="../assets/img/PIF.png">
+            <img src="../assets/img/PIF.png" alt="pif logo">
             <span>PIF</span>
@@ -101,0 +101,0 @@ </a>

components/forms.md

@@ -11,36 +11,38 @@ ---
   <form class="filter-form">
-    <fieldset>
       <ul>
         <li class="category">
-          <div class="category-title">Skill Level</div>
-          <ul>
-            <li class="category-option">
-              <input type="checkbox">
-              <label>Beginner</label>
-            </li>
-            <li class="category-option">
-              <input type="checkbox">
-              <label>Intermediate</label>
-            </li>
-            <li class="category-option">
-              <input type="checkbox">
-              <label>Advanced</label>
-            </li>
-          </ul>
+          <fieldset>
+            <legend class="category-title">Skill Level</legend>
+            <ul>
+              <li class="category-option">
+                <input id="beginner" type="checkbox">
+                <label for="beginner">Beginner</label>
+              </li>
+              <li class="category-option">
+                <input id="intermediate" type="checkbox">
+                <label for="intermediate">Intermediate</label>
+              </li>
+              <li class="category-option">
+                <input id="advanced" type="checkbox">
+                <label for="advanced">Advanced</label>
+              </li>
+            </ul>
+          </fieldset>
         </li>
         <li class="category">
-          <div class="category-title">Type</div>
-          <ul>
-            <li class="category-option">
-              <input type="checkbox">
-              <label>Bug</label>
-            </li>
-            <li class="category-option">
-              <input type="checkbox">
-              <label>Enhancement</label>
-            </li>
-          </ul>
+          <fieldset>
+            <legend class="category-title">Type</legend>
+            <ul>
+              <li class="category-option">
+                <input id="bug" type="checkbox">
+                <label for="bug">Bug</label>
+              </li>
+              <li class="category-option">
+                <input id="enhancement" type="checkbox">
+                <label for="enhancement">Enhancement</label>
+              </li>
+            </ul>
+          </fieldset>
         </li>
       </ul>
-    </fieldset>
   </form>
@@ -51,38 +53,40 @@ </div>
   <form class="filter-form">
-    <fieldset>
       <ul>
         <li class="category">
-          <div class="category-title">Skill Level</div>
-          <ul>
-            <li class="category-option">
-              <input type="checkbox">
-              <label>Beginner</label>
-            </li>
-            <li class="category-option">
-              <input type="checkbox">
-              <label>Intermediate</label>
-            </li>
-            <li class="category-option">
-              <input type="checkbox">
-              <label>Advanced</label>
-            </li>
+          <fieldset>
+            <legend class="category-title">Skill Level</legend>
+            <ul>
+              <li class="category-option">
+                <input id="beginner" type="checkbox">
+                <label for="beginner">Beginner</label>
+              </li>
+              <li class="category-option">
+                <input id="intermediate" type="checkbox">
+                <label for="intermediate">Intermediate</label>
+              </li>
+              <li class="category-option">
+                <input id="advanced" type="checkbox">
+                <label for="advanced">Advanced</label>
+              </li>
           </ul>
+          </fieldset>
         </li>
         <li class="category">
-          <div class="category-title">Type</div>
-          <ul>
-            <li class="category-option">
-              <input type="checkbox">
-              <label>Bug</label>
-            </li>
-            <li class="category-option">
-              <input type="checkbox">
-              <label>Enhancement</label>
-            </li>
-          </ul>
+          <fieldset>
+            <legend class="category-title">Type</legend>
+            <ul>
+              <li class="category-option">
+                <input id="bug" type="checkbox">
+                <label for="bug">Bug</label>
+              </li>
+              <li class="category-option">
+                <input id="enhancement" type="checkbox">
+                <label for="enhancement">Enhancement</label>
+              </li>
+            </ul>
+          </fieldset>
         </li>
       </ul>
-    </fieldset>
   </form>
 </div>
 ```

components/inputs.md

@@ -10,6 +10,6 @@ ---
 <div class="banner">
-  <input placeholder="Search Thousands of Projects..." type="search">
+  <input placeholder="Search Thousands of Projects..." type="search" aria-label="search">
 </div>
 ```
-<input placeholder="Search Thousands of Projects..." type="search">
+<input placeholder="Search Thousands of Projects..." type="search" aria-label="search">
 ```
@@ -22,3 +22,3 @@
 <div class="banner">
-  <input placeholder="Search Thousands of Projects..." type="search">
+  <input placeholder="Search Thousands of Projects..." type="search" aria-label="search">
   <button class="go">Go</button>
@@ -28,3 +28,3 @@ </div>
 <div class="banner">
-  <input placeholder="Search Thousands of Projects..." type="search">
+  <input placeholder="Search Thousands of Projects..." type="search" aria-label="search">
   <button class="go">Go</button>
@@ -31,0 +31,0 @@ </div>

components/mobile_menu.md

@@ -34,3 +34,3 @@ ---
     <li class="search">
-      <input placeholder="Search Projects..." type="search">
+      <input placeholder="Search Projects..." type="search" aria-label="search">
       <button class="go">Go</button>
@@ -67,3 +67,3 @@ </li>
     <li class="search">
-      <input placeholder="Search Projects..." type="search">
+      <input placeholder="Search Projects..." type="search" aria-label="search">
       <button class="go">Go</button>
@@ -70,0 +70,0 @@ </li>

components/scroll_indicator.md

@@ -10,3 +10,3 @@ ---
 <div class="banner">
-  <a class="scroll-indicator">
+  <a class="scroll-indicator" aria-label="scroll down" href="#">
     <i class="icon icon-angle-down"></i>
@@ -18,3 +18,3 @@ </a>
 <div class="banner">
-  <a class="scroll-indicator">
+  <a class="scroll-indicator" aria-label="scroll down">
     <i class="icon icon-angle-down"></i>
@@ -21,0 +21,0 @@ </a>

components/sidebars.md

@@ -102,3 +102,3 @@ ---
       <a class="current">
-        <img src="/code-gov-style/assets/img/USAID.png">
+        <img src="/code-gov-style/assets/img/USAID.png" alt="USAID">
         <span>Agency for International Development</span>
@@ -109,3 +109,3 @@ </a>
       <a>
-        <img src="/code-gov-style/assets/img/CFPB.png">
+        <img src="/code-gov-style/assets/img/CFPB.png" alt="CFPB">
         <span>Consumer Financial Protection Bureau</span>
@@ -116,3 +116,3 @@ </a>
       <a>
-        <img src="/code-gov-style/assets/img/USDA.png">
+        <img src="/code-gov-style/assets/img/USDA.png" alt="USDA">
         <span>Department of Agriculture</span>
@@ -119,0 +119,0 @@ </a>

components/widths.md

@@ -30,3 +30,3 @@ ---
 [class*='width-'] {
-  background-color: green;
+  background-color: gray;
 }
@@ -33,0 +33,0 @@ </style>

package.json

 {
   "name": "@code.gov/code-gov-style",
-  "version": "1.14.1",
+  "version": "1.15.0-0",
   "description": "Style for code.gov including buttons, banners, and cards. Inspired by and somewhat based on USWDS.",
@@ -9,3 +9,4 @@ "main": "index.js",
     "serve-on-server": "sudo bundle exec jekyll serve --host=0.0.0.0 --port=80",
-    "test": "./node_modules/.bin/18f-stylelint-rules './_sass/*.scss'",
+    "lint": "stylelint ./_sass/*.scss",
+    "test-pa11y": "./node_modules/.bin/pa11y-ci --config .pa11yci",
     "update-all": "npm i && npm run update-font && npm run update-custom-elements && npm run update-polyfills && npm run update-code-gov-web-components && npm run update-assets",
@@ -43,10 +44,12 @@ "update-assets": "cp dist/js/* assets/js/. && cp node_modules/prismjs/prism.js assets/js/. && cp node_modules/prismjs/themes/prism.css assets/css/. && cp node_modules/@webcomponents/custom-elements/custom-elements.min.js.map assets/js/.",
   "devDependencies": {
-    "@18f/stylelint-rules": "^2.0.0",
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.0.0",
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.4",
     "@babel/plugin-transform-arrow-functions": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",
-    "glyphhanger": "^3.0.3"
+    "glyphhanger": "^3.0.3",
+    "pa11y-ci": "^2.1.1",
+    "stylelint": "^10.0.1",
+    "stylelint-config-standard": "^18.3.0"
   }
 }

README.md

@@ -36,2 +36,13 @@ # code-gov-style
 
+## Testing
+Our continuous integration pipeline runs linting and accessibility tests on every pull request. Be sure to test your code by running `npm lint` and `npm test-pa11y`.
+
+The accessibility testing configuration is located in the .pa11yci file. We follow the WCAG2AA standard. For more info on the rules being tested checkout the [pa11y wiki](https://github.com/pa11y/pa11y/wiki/HTML-CodeSniffer-Rules)
+
+## Deployment
+
+The https://gsa.github.io/code-gov-style/ site is built using GitHub pages from the `master` branch. Any merges to the `master` branch will update the site within a few minutes. 
+
+In order for any style guide changes to be reflected on the `code-gov-front-end`, they must be deplyed to [NPM](https://www.npmjs.com/package/@code.gov/code-gov-style) and the package version that `code-gov-front-end` uses needs to be incremented.
+
 ## Legal
@@ -38,0 +49,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of package files

127

increased by0.79%

Number of medium maintenance alerts

0

decreased by-100%

Number of lines in readme file

60

increased by22.45%

Number of medium supply chain risk alerts

10

decreased by-9.09%

Worsened metrics

Total package byte prevSize

1219096

decreased by-14.97%

Dev dependency count

9

increased by28.57%

Lines of code

3147

decreased by-0.41%

Number of low quality alerts

3

increased by50%

No dependency changes