Make examples more accessible

Author: anasbouzid

docs/source/docs/examples/alerts.blade.md

@@ -22,19 +22,19 @@ title: "Alerts"
 ### Traditional
 
 @component('_partials.code-sample', ['lang' => 'html'])
-<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative">
+<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative" role="alert">
   <strong class="font-bold">Holy smokes!</strong>
   <span class="block sm:inline">Something seriously bad happened.</span>
   <span class="absolute pin-t pin-b pin-r px-4 py-3">
-    <svg class="h-6 w-6 text-red" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
+    <svg class="h-6 w-6 text-red" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
   </span>
 </div>
 @endcomponent
 
 ### Left Accent Border
 
 @component('_partials.code-sample', ['lang' => 'html'])
-<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
+<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4" role="alert">
   <p class="font-bold">Be Warned</p>
   <p>Something not ideal might be happening.</p>
 </div>
@@ -43,7 +43,7 @@ title: "Alerts"
 ### Titled
 
 @component('_partials.code-sample', ['lang' => 'html'])
-<div>
+<div role="alert">
   <div class="bg-red text-white font-bold rounded rounded-t px-4 py-2">
     Danger
   </div>
@@ -56,7 +56,7 @@ title: "Alerts"
 ### Solid
 
 @component('_partials.code-sample', ['lang' => 'html'])
-<div class="flex items-center bg-blue text-white text-sm font-bold px-4 py-3">
+<div class="flex items-center bg-blue text-white text-sm font-bold px-4 py-3" role="alert">
   <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
   <p>
     Something happened that you should know about.
@@ -67,7 +67,7 @@ title: "Alerts"
 ### Top Accent Border
 
 @component('_partials.code-sample', ['lang' => 'html'])
-<div class="bg-teal-lightest border-t-4 border-teal rounded rounded-b text-teal-darkest px-4 py-3 shadow-md">
+<div class="bg-teal-lightest border-t-4 border-teal rounded rounded-b text-teal-darkest px-4 py-3 shadow-md" role="alert">
   <div class="flex">
     <svg class="h-6 w-6 text-teal mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
     <div>
@@ -81,7 +81,7 @@ title: "Alerts"
 ### Banner
 
 @component('_partials.code-sample', ['lang' => 'html'])
-<div class="bg-blue-lightest border-t border-b border-blue text-blue-dark px-4 py-3">
+<div class="bg-blue-lightest border-t border-b border-blue text-blue-dark px-4 py-3" role="alert">
   <p class="font-bold">Informational message</p>
   <p class="text-sm">Some additional text to explain said message.</p>
 </div>

docs/source/docs/examples/cards.blade.md

@@ -23,7 +23,7 @@ title: "Cards"
 
 @component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
 <div class="max-w-sm rounded overflow-hidden shadow-lg">
-    <img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg">
+    <img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg" alt="Sunset in the mountains">
     <div class="px-6 py-4">
         <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
         <p class="text-grey-darker text-base">
@@ -43,7 +43,7 @@ title: "Cards"
 @component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
 <div class="max-w-md flex">
     <div class="rounded rounded-l w-128 text-center overflow-hidden">
-        <img class="block h-64" src="{{ $page->baseUrl }}/img/card-left.jpg">
+        <img class="block h-64" src="{{ $page->baseUrl }}/img/card-left.jpg" alt="Woman holding a mug">
     </div>
     <div class="border-t border-r border-b border-grey-light rounded rounded-r p-4 flex flex-col justify-between">
         <div>
@@ -55,7 +55,7 @@ title: "Cards"
             <p class="text-grey-darker text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
         </div>
         <div class="flex items-center">
-            <img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg">
+            <img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="Avatar of Jonathan Reinink">
             <div class="text-sm">
                 <p class="text-black leading-none">Jonathan Reinink</p>
                 <p class="text-grey-dark">Aug 18</p>

docs/source/docs/examples/forms.blade.md

@@ -132,11 +132,11 @@ title: "Forms"
             <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-city" type="text" placeholder="Albuquerque">
         </div>
         <div class="md:w-1/2 px-3">
-            <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-select">
+            <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
                 State
             </label>
             <div class="relative">
-                <select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded">
+                <select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded" id="grid-state">
                     <option>New Mexico</option>
                     <option>Missouri</option>
                     <option>Texas</option>
@@ -162,7 +162,7 @@ title: "Forms"
 @component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
 <form class="w-full max-w-sm">
     <div class="flex items-center border-b border-b-2 border-teal py-2">
-        <input class="appearance-none bg-transparent border-none w-full text-grey-darker mr-3 py-1 px-2" id="underline-full-name" type="text" placeholder="Jane Doe">
+        <input class="appearance-none bg-transparent border-none w-full text-grey-darker mr-3 py-1 px-2" type="text" placeholder="Jane Doe" aria-label="Full name">
         <button class="flex-no-shrink bg-teal hover:bg-teal-dark border-teal hover:border-teal-dark text-sm border-4 text-white py-1 px-2 rounded" type="button">
             Sign Up
         </button>

docs/source/docs/examples/navigation.blade.md

@@ -48,7 +48,7 @@ title: "Navigation"
     </div>
     <div class="block lg:hidden">
         <button class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white">
-            <svg class="h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+            <svg class="h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
         </button>
     </div>
     <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">