Merge pull request #290 from NarendraKoya999/ARIA-Attributes

fix: Added ARIA Attributes to Form Sections and Social Icons
Astrodevil · Nov 22, 2023 · 31139ec · 31139ec
2 parents c75f6ae + 1e9b56e
commit 31139ec
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/src/components/contactform.astro b/src/components/contactform.astro
@@ -9,7 +9,8 @@ import Button from "./ui/button.astro";
   method="POST"
   id="form"
   class="needs-validation"
-  novalidate>
+  novalidate role="form"
+  aria-labelledby="form-label">
   <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
   <!-- Create your free access key from https://web3forms.com/ -->
   <input type="checkbox" class="hidden" style="display:none" name="botcheck" />
@@ -20,8 +21,10 @@ import Button from "./ui/button.astro";
       required
       class="w-full px-4 py-3 border-2 placeholder:text-gray-800 rounded-md outline-none focus:ring-4 border-gray-300 focus:border-gray-600 ring-gray-100"
       name="name"
+      aria-required="true"
+      aria-invalid="false"
     />
-    <div class="empty-feedback invalid-feedback text-red-400 text-sm mt-1">
+    <div class="empty-feedback invalid-feedback text-red-400 text-sm mt-1" role="alert">
       Please provide your full name.
     </div>
   </div>
@@ -33,11 +36,13 @@ import Button from "./ui/button.astro";
       name="email"
       required
       class="w-full px-4 py-3 border-2 placeholder:text-gray-800 rounded-md outline-none focus:ring-4 border-gray-300 focus:border-gray-600 ring-gray-100"
+      aria-required="true"
+      aria-invalid="false"
     />
-    <div class="empty-feedback text-red-400 text-sm mt-1">
+    <div class="empty-feedback text-red-400 text-sm mt-1" role="alert">
       Please provide your email address.
     </div>
-    <div class="invalid-feedback text-red-400 text-sm mt-1">
+    <div class="invalid-feedback text-red-400 text-sm mt-1" role="alert">
       Please provide a valid email address.
     </div>
   </div>
@@ -47,13 +52,15 @@ import Button from "./ui/button.astro";
       required
       placeholder="Your Message"
       class="w-full px-4 py-3 border-2 placeholder:text-gray-800 rounded-md outline-none h-36 focus:ring-4 border-gray-300 focus:border-gray-600 ring-gray-100"
+      aria-required="true"
+      aria-invalid="false"
     ></textarea>
-    <div class="empty-feedback invalid-feedback text-red-400 text-sm mt-1">
+    <div class="empty-feedback invalid-feedback text-red-400 text-sm mt-1" role="alert">
       Please enter your message.
     </div>
   </div>
   <Button type="submit" size="lg" block>Send Message</Button>
-  <div id="result" class="mt-3 text-center"></div>
+  <div id="result" class="mt-3 text-center" role="status"></div>
 </form>
 
 <style>

diff --git a/src/components/footer.astro b/src/components/footer.astro
@@ -1,9 +1,18 @@
 <script src="https://kit.fontawesome.com/c27622f79f.js" crossorigin="anonymous"></script>
 <footer class="my-20">
    <div class = ' flex gap-8 md:gap-10 items-center justify-center mb-10 flex-wrap'>
-    <a target="_blank" href="https://twitter.com/astrodevil_" role="button"><i class="fa-brands fa-twitter fa-xl" style="color: #3e99d1; "></i></a>
-    <a target="_blank" href="https://www.instagram.com/codes.astro/" role="button"><i class="fa-brands fa-instagram fa-xl" style="color: #ff2407e5;"></i></a>
-    <a target="_blank" href="https://github.com/ZeroOctave/resource-gallery" role="button"><i class="fa-brands fa-github fa-xl" style="color: #000000;"></i></a>
+    <a target="_blank" href="https://twitter.com/astrodevil_" 
+      aria-label="Visit us on Twitter" title="Twitter(External Link)" 
+      rel="noopener noreferrer" 
+      role="button"><i class="fa-brands fa-twitter fa-xl" style="color: #3e99d1; "></i></a>
+    <a target="_blank" href="https://www.instagram.com/codes.astro/"
+      aria-label="Visit us on Instagram" title="Instagram(External Link)"
+      rel="noopener noreferrer"
+      role="button"><i class="fa-brands fa-instagram fa-xl" style="color: #ff2407e5;"></i></a>
+    <a target="_blank" href="https://github.com/ZeroOctave/resource-gallery" 
+      aria-label="Visit us on GitHub" title="GitHub(External Link)"
+      rel="noopener noreferrer"
+      role="button"><i class="fa-brands fa-github fa-xl" style="color: #000000;"></i></a>
   </a>
 
    </div>