docs(cheatsheet): fix some Pa11y errors

Orange-OpenSource · Dec 10, 2020 · a1a5d0e · a1a5d0e
1 parent affe8b5
commit a1a5d0e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html
@@ -19,7 +19,7 @@ <h1 class="navbar-brand">
 </header>
 <aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2">
   <h2 class="h6 pt-4 pb-3 mb-4 border-bottom border-light border-1">على هذه الصفحة</h2>
-  <nav class="small" id="toc">
+  <nav class="small" id="toc" aria-label="جدول المحتويات">
     <ul class="list-unstyled">
       <li class="my-2">
         <button class="btn w-100 collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">محتويات</button>
@@ -68,7 +68,7 @@ <h2 class="h6 pt-4 pb-3 mb-4 border-bottom border-light border-1">على هذه
     </ul>
   </nav>
 </aside>
-<div class="bd-cheatsheet container-fluid bg-white">
+<main class="bd-cheatsheet container-fluid bg-white">
   <section id="content">
     <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">محتويات</h2>
 
@@ -1081,7 +1081,7 @@ <h3>التنقل</h3>
 
       <div>
         {{< example show_markup="false" >}}
-        <nav class="nav">
+        <nav class="nav" aria-label="أول مثال على التنقل">
           <a class="nav-link active" aria-current="page" href="#">نشيط</a>
           <a class="nav-link" href="#">حلقة الوصل</a>
           <a class="nav-link" href="#">حلقة الوصل</a>
@@ -1090,7 +1090,7 @@ <h3>التنقل</h3>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
-        <nav>
+        <nav aria-label="مثال التنقل الثاني">
           <div class="nav nav-tabs" id="nav-tab" role="tablist">
             <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">الصفحة الرئيسية</a>
             <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">الملف الشخصي</a>
@@ -1136,7 +1136,7 @@ <h3>شريط التنقل</h3>
 
       <div>
         {{< example show_markup="false" >}}
-        <nav class="navbar navbar-expand-lg navbar-light">
+        <nav class="navbar navbar-expand-lg navbar-light" aria-label="أول مثال على نافبار">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
               <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" class="d-inline-block align-top" alt="Boosted" loading="lazy">
@@ -1175,7 +1175,7 @@ <h3>شريط التنقل</h3>
           </div>
         </nav>
 
-        <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-5">
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-5" aria-label="مثال نافبار الثاني">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
               <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" class="d-inline-block align-top" alt="Boosted" loading="lazy">
@@ -1318,7 +1318,7 @@ <h3>مخطوطة</h3>
 
       <div>
         <div class="bd-example">
-          <nav id="navbar-example2" class="navbar navbar-dark bg-dark px-3">
+          <nav id="navbar-example2" class="navbar navbar-dark bg-dark px-3" aria-label="مثال على شريط التنقل Scrollspy">
             <a class="navbar-brand" href="#">شريط التنقل</a>
             <ul class="nav nav-pills">
               <li class="nav-item">
@@ -1338,7 +1338,7 @@ <h3>مخطوطة</h3>
               </li>
             </ul>
           </nav>
-          <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example">
+          <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
             <h4 id="fat">@fat</h4>
             <p>إنطلاق العالمي ما هذه, لم فسقط عُقر الهادي جُل. بعد ٣٠ شرسة النزاع اليميني. عن بحث اتّجة الصينية, مع وأزيز الفرنسية مدن, عدد مرجع العالمية لبلجيكا، أن. طوكيو أعلنت حيث بل. الأخذ واندونيسيا، إذ ذلك, به، قد معاملة وقوعها،. ولم التي إبّان بالفشل ٣٠, جنوب مشاركة حيث أم.</p>
             <h4 id="mdo">@mdo</h4>
@@ -1410,7 +1410,7 @@ <h3>تلميحات الأدوات</h3>
       </div>
     </article>
   </section>
-</div>
+</main>
 
 <div class="modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog">

diff --git a/site/content/docs/5.0/examples/cheatsheet/index.html b/site/content/docs/5.0/examples/cheatsheet/index.html
@@ -18,7 +18,7 @@ <h1 class="navbar-brand">
 </header>
 <aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2">
   <h2 class="h6 pt-4 pb-3 mb-4 border-bottom border-light border-1">On this page</h2>
-  <nav class="small" id="toc">
+  <nav class="small" id="toc" aria-label="Table of contents">
     <ul class="list-unstyled">
       <li class="my-2">
         <button class="btn w-100 collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button>
@@ -67,7 +67,7 @@ <h2 class="h6 pt-4 pb-3 mb-4 border-bottom border-light border-1">On this page</
     </ul>
   </nav>
 </aside>
-<div class="bd-cheatsheet container-fluid bg-white">
+<main class="bd-cheatsheet container-fluid bg-white">
   <section id="content">
     <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents</h2>
 
@@ -1080,7 +1080,7 @@ <h3>Navs</h3>
 
       <div>
         {{< example show_markup="false" >}}
-        <nav class="nav">
+        <nav class="nav" aria-label="First navigation example">
           <a class="nav-link active" aria-current="page" href="#">Active</a>
           <a class="nav-link" href="#">Link</a>
           <a class="nav-link" href="#">Link</a>
@@ -1089,7 +1089,7 @@ <h3>Navs</h3>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
-        <nav>
+        <nav aria-label="Second navigation example">
           <div class="nav nav-tabs" id="nav-tab" role="tablist">
             <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
             <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
@@ -1135,7 +1135,7 @@ <h3>Navbar</h3>
 
       <div>
         {{< example show_markup="false" >}}
-        <nav class="navbar navbar-expand-lg navbar-light">
+        <nav class="navbar navbar-expand-lg navbar-light" aria-label="First navbar example">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
               <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" class="d-inline-block align-top" alt="Boosted" loading="lazy">
@@ -1174,7 +1174,7 @@ <h3>Navbar</h3>
           </div>
         </nav>
 
-        <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-5">
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-5" aria-label="Second navbar example">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
               <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" class="d-inline-block align-top" alt="Boosted" loading="lazy">
@@ -1317,7 +1317,7 @@ <h3>Scrollspy</h3>
 
       <div>
         <div class="bd-example">
-          <nav id="navbar-example2" class="navbar navbar-dark bg-dark px-3">
+          <nav id="navbar-example2" class="navbar navbar-dark bg-dark px-3" aria-label="Scrollspy navbar example">
             <a class="navbar-brand" href="#">Navbar</a>
             <ul class="nav nav-pills">
               <li class="nav-item">
@@ -1337,7 +1337,7 @@ <h3>Scrollspy</h3>
               </li>
             </ul>
           </nav>
-          <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example">
+          <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
             <h4 id="fat">@fat</h4>
             <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
             <h4 id="mdo">@mdo</h4>
@@ -1410,7 +1410,7 @@ <h3>Tooltips</h3>
       </div>
     </article>
   </section>
-</div>
+</main>
 
 <div class="modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog">

diff --git a/site/content/docs/5.0/examples/checkout-rtl/index.html b/site/content/docs/5.0/examples/checkout-rtl/index.html
@@ -13,7 +13,7 @@
   <main>
     <div class="py-5 text-center">
       <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" alt="" width="50" height="50">
-      <h2>نموذج الخروج</h2>
+      <h1>نموذج الخروج</h1>
       <p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p>
     </div>
 
@@ -60,7 +60,8 @@ <h6 class="my-0">رمز ترويجي</h6>
 
         <form class="card p-2">
           <div class="input-group">
-            <input type="text" class="form-control" placeholder="رمز ترويجي">
+            <label for="promo-code" class="sr-only">رمز ترويجي</label>
+            <input type="text" class="form-control" id="promo-code" placeholder="رمز ترويجي">
             <button type="submit" class="btn btn-secondary">افتدى</button>
           </div>
         </form>