Try to add code-sniffer to pa11y-ci

Orange-OpenSource · Dec 16, 2022 · 812153e · 812153e
1 parent c661309
commit 812153e
Show file tree

Hide file tree

Showing 12 changed files with 144 additions and 147 deletions.
diff --git a/build/.pa11yci.json b/build/.pa11yci.json
@@ -1,5 +1,5 @@
 {
-  "standard": "WCAG2AA",
+  "standard": "WCAG2AAA",
   "level": "error",
   "defaults": {
     "chromeLaunchConfig": {
@@ -12,10 +12,11 @@
       ["pa11y-ci-reporter-html", {"destination": ".pa11y", "includeZeroIssues": true}]
     ],
     "runners": [
-      "axe"
+      "axe",
+      "htmlcs"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, #text-decoration + p + div a.text-decoration-none, .accordion-collapse, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar",
+    "hideElements": ".d-none, iframe, .accordion-sm .accordion-button, .accordion-collapse, .text-primary, a.active, a.disabled, .page-item.disabled, :disabled + label, .is-disabled, #text-decoration + p + div a.text-decoration-none, .bg-light code, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar",
     "ignore": [
       "color-contrast"
     ]

diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js
@@ -22,8 +22,8 @@
   const btnHtml = [
     '<div class="bd-code-snippet">',
     '   <div class="bd-clipboard">',
-    '      <button type="button" class="btn-clipboard">',
-    '        <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
+    '      <button type="button" class="btn-clipboard" title="Copied to clipboard">',
+    '        <svg class="bi" aria-hidden="true" focusable="false"><use xlink:href="#clipboard"/></svg>',
     '      </button>',
     '   </div>',
     '</div>'

diff --git a/site/content/docs/5.2/components/navbar.md b/site/content/docs/5.2/components/navbar.md
@@ -127,7 +127,7 @@ The `.navbar-brand` can be used to contain most elements, but an anchor works be
 
 ### Nav
 
-Navbar navigation links build on our `.nav` options with their own modifier class and require the use of [toggler classes](#toggler) for proper responsive styling. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.
+Navbar navigation links build on our `.nav` options with their own modifier class and require the use of toggler classes for proper responsive styling. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.
 
 Add the `.active` class on `.nav-link` to indicate the current page.
 
@@ -271,6 +271,7 @@ Input groups work, too. If your navbar is an entire form, or mostly a form, you
       <span class="input-group-text" id="basic-addon1">@</span>
       <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
     </div>
+    <button class="btn btn-primary btn-inverse" type="submit">Search</button>
   </form>
 </nav>
 {{< /example >}}
@@ -279,10 +280,10 @@ Various buttons are supported as part of these navbar forms, too. This is also a
 
 {{< example >}}
 <nav class="navbar navbar-dark bg-dark">
-  <form class="container-fluid justify-content-start align-items-center">
+  <div class="container-fluid justify-content-start align-items-center">
     <button class="btn btn-primary btn-inverse me-2" type="button">Main button</button>
     <button class="btn btn-sm btn-primary btn-inverse" type="button">Smaller button</button>
-  </form>
+  </div>
 </nav>
 {{< /example >}}
 

diff --git a/site/content/docs/5.2/components/offcanvas.md b/site/content/docs/5.2/components/offcanvas.md
@@ -13,7 +13,7 @@ toc: true
 Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
 
 - Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins.
-- Similarly, some [source Sass](#sass) variables for offcanvas's styles and dimensions are inherited from the modal's variables.
+- Similarly, some [source Sass](#sass-variables) variables for offcanvas's styles and dimensions are inherited from the modal's variables.
 - When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.
 - Similar to modals, only one offcanvas can be shown at a time.
 

diff --git a/site/content/docs/5.2/components/orange-navbar.md b/site/content/docs/5.2/components/orange-navbar.md
@@ -221,7 +221,7 @@ Even though you should use the Master or Small logo, you can still replace it by
 {{< callout warning >}}
 You should consider having a **responsive SVG logo**. In order to do so, you may set up a responsive rendering into your SVG, [as we do with the Master logo]({{< docsref "/about/brand#orange-logo" >}}).
 
-If you do not intend to use your own SVG, you should explore the DOM solution and therefore do as if you had a [title on one or two lines]({{< ref "#global-header-with-title" >}}).
+If you do not intend to use your own SVG, you should explore the DOM solution and therefore do as if you had a [title on one or two lines]({{< ref "#with-title" >}}).
 {{< /callout >}}
 
 <div class="bd-example p-0">

diff --git a/site/content/docs/5.2/components/toasts.md b/site/content/docs/5.2/components/toasts.md
@@ -200,23 +200,21 @@ Building on the above example, you can create different toast color schemes with
 Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
 
 {{< example stackblitz_add_js="true" >}}
-<form>
-  <div class="mb-3">
-    <label for="selectToastPlacement">Toast placement</label>
-    <select class="form-select mt-2" id="selectToastPlacement">
-      <option value="" selected>Select a position...</option>
-      <option value="top-0 start-0">Top left</option>
-      <option value="top-0 start-50 translate-middle-x">Top center</option>
-      <option value="top-0 end-0">Top right</option>
-      <option value="top-50 start-0 translate-middle-y">Middle left</option>
-      <option value="top-50 start-50 translate-middle">Middle center</option>
-      <option value="top-50 end-0 translate-middle-y">Middle right</option>
-      <option value="bottom-0 start-0">Bottom left</option>
-      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
-      <option value="bottom-0 end-0">Bottom right</option>
-    </select>
-  </div>
-</form>
+<div class="mb-3">
+  <label for="selectToastPlacement">Toast placement</label>
+  <select class="form-select mt-2" id="selectToastPlacement">
+    <option value="" selected>Select a position...</option>
+    <option value="top-0 start-0">Top left</option>
+    <option value="top-0 start-50 translate-middle-x">Top center</option>
+    <option value="top-0 end-0">Top right</option>
+    <option value="top-50 start-0 translate-middle-y">Middle left</option>
+    <option value="top-50 start-50 translate-middle">Middle center</option>
+    <option value="top-50 end-0 translate-middle-y">Middle right</option>
+    <option value="bottom-0 start-0">Bottom left</option>
+    <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
+    <option value="bottom-0 end-0">Bottom right</option>
+  </select>
+</div>
 <div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
   <div class="toast-container p-3" id="toastPlacement">
     <div class="toast">

diff --git a/site/content/docs/5.2/examples/cards-rtl/index.html b/site/content/docs/5.2/examples/cards-rtl/index.html
@@ -72,15 +72,15 @@ <h3 class="card-title">عنوان</h3>
             <p class="card-text fw-bold mb-4">شرح</p>
             <ul class="nav flex-row gap-3">
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="مفضل">
+                <a href="#" aria-label="مفضل">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#heart"/>
                   </svg>
                 </a>
               </li>
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="يشارك">
+                <a href="#" aria-label="يشارك">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#share"/>
                   </svg>
                 </a>
@@ -155,15 +155,15 @@ <h3 class="card-title">عنوان</h3>
             <p class="card-text fw-bold mb-4">شرح</p>
             <ul class="nav flex-row gap-3">
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="مفضل">
+                <a href="#" aria-label="مفضل">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#heart"/>
                   </svg>
                 </a>
               </li>
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="يشارك">
+                <a href="#" aria-label="يشارك">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#share"/>
                   </svg>
                 </a>
@@ -238,15 +238,15 @@ <h3 class="card-title">عنوان</h3>
             <p class="card-text fw-bold mb-4">شرح</p>
             <ul class="nav flex-row gap-3">
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="مفضل">
+                <a href="#" aria-label="مفضل">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#heart"/>
                   </svg>
                 </a>
               </li>
               <li>
-                <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="يشارك">
+                <a href="#" aria-label="يشارك">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                     <use xlink:href="#share"/>
                   </svg>
                 </a>
@@ -323,15 +323,15 @@ <h3 class="card-title">عنوان</h3>
               <p class="card-text fw-bold mb-4">شرح</p>
               <ul class="nav flex-row gap-3">
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="مفضل">
+                  <a href="#" aria-label="مفضل">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#heart"/>
                     </svg>
                   </a>
                 </li>
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="يشارك">
+                  <a href="#" aria-label="يشارك">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#share"/>
                     </svg>
                   </a>
@@ -359,7 +359,7 @@ <h2>بطاقات موضحة باللون الأسود</h2>
       </div>
       <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">عنوان</h3>
@@ -368,7 +368,7 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title mb-3">عنوان</h3>
@@ -378,7 +378,7 @@ <h3 class="card-title mb-3">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">عنوان</h3>
@@ -388,7 +388,7 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">عنوان</h3>
@@ -399,22 +399,22 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">عنوان</h3>
               <p class="card-text fw-bold mb-4">شرح</p>
               <ul class="nav flex-row gap-3">
                 <li>
-                  <a href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="مفضل">
+                  <a href="#" aria-label="مفضل">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#heart"/>
                     </svg>
                   </a>
                 </li>
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="يشارك">
+                  <a href="#" aria-label="يشارك">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#share"/>
                     </svg>
                   </a>
@@ -425,7 +425,7 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-dark">
+          <div class="card border-dark bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark">
               <h3 class="card-title">عنوان</h3>
@@ -442,7 +442,7 @@ <h2>بطاقات على الأسود</h2>
       </div>
       <div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 g-3 py-1">
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">عنوان</h3>
@@ -451,7 +451,7 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title mb-3">عنوان</h3>
@@ -461,7 +461,7 @@ <h3 class="card-title mb-3">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">عنوان</h3>
@@ -471,7 +471,7 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">عنوان</h3>
@@ -482,22 +482,22 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">عنوان</h3>
               <p class="card-text fw-bold mb-4">شرح</p>
               <ul class="nav flex-row gap-3">
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="مفضل">
+                  <a href="#" aria-label="مفضل">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#heart"/>
                     </svg>
                   </a>
                 </li>
                 <li>
-                  <a href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" aria-label="يشارك">
+                  <a href="#" aria-label="يشارك">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" aria-hidden="true" focusable="false">
                       <use xlink:href="#share"/>
                     </svg>
                   </a>
@@ -508,7 +508,7 @@ <h3 class="card-title">عنوان</h3>
         </div>
 
         <div class="col">
-          <div class="card border-0">
+          <div class="card border-0 bg-dark">
             {{< placeholder width="100%" height="162" class="card-img-top" text="تعليق على الصورة" >}}
             <div class="card-body bg-dark px-0">
               <h3 class="card-title">عنوان</h3>