docs(a11y): fix pa11y errors + workflows

ffoodd · ffoodd · commit 8145088d6816 · 2020-11-12T15:37:29.000+01:00
diff --git a/.github/workflows/browserstack.yml b/.github/workflows/browserstack.yml
@@ -5,11 +5,13 @@ on:
       - 'js/**'
     branches:
       - v5-dev
+      - "!dependabot/**"
   pull_request:
     paths:
       - 'js/**'
     branches:
       - v5-dev
+      - "!dependabot/**"
 env:
   CI: true
   NODE: 14.x
diff --git a/.github/workflows/bundlewatch.yml b/.github/workflows/bundlewatch.yml
@@ -3,9 +3,11 @@ on:
   push:
     branches:
       - v5-dev
+      - "!dependabot/**"
   pull_request:
     branches:
       - v5-dev
+      - "!dependabot/**"
 env:
   CI: true
   NODE: 14.x
diff --git a/.github/workflows/css.yml b/.github/workflows/css.yml
@@ -3,9 +3,11 @@ on:
   push:
     branches:
       - v5-dev
+      - "!dependabot/**"
   pull_request:
     branches:
       - v5-dev
+      - "!dependabot/**"
 env:
   CI: true
   NODE: 14.x
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -7,13 +7,15 @@ on:
       - 'site/**'
     branches:
       - v5-dev
+      - "!dependabot/**"
   pull_request:
     paths:
       - 'js/**'
       - 'scss/**'
       - 'site/**'
     branches:
       - v5-dev
+      - "!dependabot/**"
 env:
   CI: true
   NODE: 14.x
diff --git a/.github/workflows/js.yml b/.github/workflows/js.yml
@@ -5,11 +5,13 @@ on:
       - 'js/**'
     branches:
       - v5-dev
+      - "!dependabot/**"
   pull_request:
     paths:
       - 'js/**'
     branches:
       - v5-dev
+      - "!dependabot/**"
 env:
   CI: true
 
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -3,9 +3,11 @@ on:
   push:
     branches:
       - v5-dev
+      - "!dependabot/**"
   pull_request:
     branches:
       - v5-dev
+      - "!dependabot/**"
 env:
   CI: true
   NODE: 14.x
diff --git a/.github/workflows/node-sass.yml b/.github/workflows/node-sass.yml
@@ -6,12 +6,13 @@ on:
       - 'scss/**'
     branches:
       - v5-dev
+      - "!dependabot/**"
   pull_request:
     paths:
       - 'scss/**'
     branches:
       - v5-dev
-
+      - "!dependabot/**"
 env:
   CI: true
   NODE: 14.x
diff --git a/.github/workflows/notify.yml b/.github/workflows/notify.yml
@@ -3,6 +3,7 @@ on:
   release:
     types:
       - published
+
 jobs:
   build:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/optimize.yml b/.github/workflows/optimize.yml
@@ -5,6 +5,7 @@ on:
       - '**.jpg'
       - '**.png'
       - '**.webp'
+
 jobs:
   build:
     name: calibreapp/image-actions
diff --git a/.github/workflows/pa11y.yml b/.github/workflows/pa11y.yml
@@ -7,13 +7,15 @@ on:
       - 'site/**'
     branches:
       - v5-dev
+      - "!dependabot/**"
   pull_request:
     paths:
       - 'js/**'
       - 'scss/**'
       - 'site/**'
     branches:
       - v5-dev
+      - "!dependabot/**"
 env:
   CI: true
   NODE: 14.x
diff --git a/.github/workflows/percy.yml b/.github/workflows/percy.yml
@@ -7,13 +7,15 @@ on:
       - 'site/content/docs/**/guidelines'
     branches:
       - v5-dev
+      - "!dependabot/**"
   pull_request:
     paths:
       - 'js/**'
       - 'scss/**'
       - 'site/content/docs/**/guidelines'
     branches:
       - v5-dev
+      - "!dependabot/**"
 env:
   CI: true
   NODE: 14.x
diff --git a/build/.pa11yci.json b/build/.pa11yci.json
@@ -7,7 +7,7 @@
     "runners": [
       "axe"
     ],
-    "hideElements": ".bd-search, .active, [aria-current], [disabled], .modal, #TableOfContents, .bd-example nav, .text-primary, .chroma, .accordion > .card > .card-header .btn:not(.collapsed), [id*='tarteaucitron']",
+    "hideElements": ".bd-search, .active, [aria-current], [disabled], [readonly], .modal, #TableOfContents, .bd-example nav, .text-primary, .navbar-light .navbar-brand, .chroma, .accordion-button:not(.collapsed), [id*='tarteaucitron']",
     "ignore": [
       "heading-order"
     ]
diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md
@@ -122,7 +122,7 @@ Alternatively, you can also add additional controls and components to toasts.
 Building on the above example, you can create different toast color schemes with our [color utilities]({{< docsref "/utilities/colors" >}}). Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.text-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
 
 {{< example class="bg-light" >}}
-<div class="toast d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="toast d-flex align-items-center text-white border-0" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-body">
     Hello, world! This is a toast message.
   </div>
diff --git a/site/content/docs/5.0/content/tables.md b/site/content/docs/5.0/content/tables.md
@@ -447,7 +447,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
 Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
 
 {{< example >}}
-  <div class="table-responsive">
+  <div class="table-responsive" tabindex="0">
     <table class="table">
       <thead>
         <tr>
diff --git a/site/content/docs/5.0/examples/grid/grid.css b/site/content/docs/5.0/examples/grid/grid.css
@@ -1,14 +1,14 @@
 .themed-grid-col {
   padding-top: .75rem;
   padding-bottom: .75rem;
-  background-color: rgba(86, 61, 124, .15);
-  outline: 1px solid rgba(86, 61, 124, .2); /* Boosted mod */
+  background-color: #eee; /* Boosted mod */
+  outline: 1px solid #ddd; /* Boosted mod */
 }
 
 .themed-container {
   padding-top: .75rem; /* Boosted mod */
   padding-bottom: .75rem; /* Boosted mod */
   margin-bottom: 1.5rem;
-  background-color: rgba(0, 123, 255, .15);
-  outline: 1px solid rgba(0, 123, 255, .2); /* Boosted mod */
+  background-color: #b5e8f7;
+  outline: 1px solid #4bb4e6; /* Boosted mod */
 }
diff --git a/site/content/docs/5.0/examples/masonry/index.html b/site/content/docs/5.0/examples/masonry/index.html
@@ -13,7 +13,7 @@ <h1>Bootstrap and Masonry</h1>
 
   <p>Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like so:</p>
 
-  <pre><code>
+  <pre tabindex="0"><code>
 &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js&quot; integrity=&quot;sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D&quot; crossorigin=&quot;anonymous&quot; async&gt;&lt;/script&gt;
   </code></pre>
 
@@ -54,12 +54,12 @@ <h5 class="card-title">Card title</h5>
       </div>
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
-      <div class="card bg-primary text-white text-center p-3">
+      <div class="card bg-dark border-secondary text-center p-3">
         <figure class="mb-0">
           <blockquote class="blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
           </blockquote>
-          <figcaption class="blockquote-footer mb-0 text-white">
+          <figcaption class="blockquote-footer mb-0 bg-dark">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </figcaption>
         </figure>
diff --git a/site/content/docs/5.0/examples/navbars/index.html b/site/content/docs/5.0/examples/navbars/index.html
@@ -336,7 +336,7 @@
   </nav>
 
   <div class="container">
-    <nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Eleventh navbar example">
+    <nav class="navbar navbar-expand-lg navbar-light rounded" aria-label="Eleventh navbar example">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">Navbar</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
@@ -370,7 +370,7 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Twelfth navbar example">
+    <nav class="navbar navbar-expand-lg navbar-light rounded" aria-label="Twelfth navbar example">
       <div class="container-fluid">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
@@ -401,7 +401,7 @@
     </nav>
 
     <div>
-      <div class="bg-light p-5 rounded">
+      <div class="p-5 rounded">
         <div class="col-sm-8 mx-auto">
           <h1>Navbar examples</h1>
           <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
diff --git a/site/content/docs/5.0/examples/product/index.html b/site/content/docs/5.0/examples/product/index.html
@@ -56,7 +56,7 @@ <h2 class="display-5">Another headline</h2>
       </div>
       <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
-    <div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
+    <div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
       <div class="my-3 py-3">
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
diff --git a/site/content/docs/5.0/utilities/overflow.md b/site/content/docs/5.0/utilities/overflow.md
@@ -8,16 +8,16 @@ group: utilities
 Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
 
 <div class="bd-example d-md-flex">
-  <div class="overflow-auto p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
+  <div class="overflow-auto p-3 mb-3 mb-md-0 mr-md-3 border" style="max-width: 260px; max-height: 100px;" tabindex="0">
     This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
   </div>
-  <div class="overflow-hidden p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
+  <div class="overflow-hidden p-3 mb-3 mb-md-0 mr-md-3 border" style="max-width: 260px; max-height: 100px;">
     This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
   </div>
-  <div class="overflow-visible p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
+  <div class="overflow-visible p-3 mb-3 mb-md-0 mr-md-3 border" style="max-width: 260px; max-height: 100px;">
     This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions.
   </div>
-  <div class="overflow-scroll p-3 bg-light" style="max-width: 260px; max-height: 100px;">
+  <div class="overflow-scroll p-3 border" style="max-width: 260px; max-height: 100px;" tabindex="0">
     This is an example of using <code>.overflow-scroll</code> on an element with set width and height dimensions.
   </div>
 </div>
