ui/ux improvements

templates/internal/before-signing-the-lease.php

@@ -107,12 +107,12 @@ $firstTimeRentIssues = [
             ?>
 
               <li class="accordion issues-columns">
-                <div class="flex px-2 rounded-md justify-between">
-                  <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                    <p><?php echo $issue['issue'] ?></p>
+                <div class="relative flex px-2 rounded-md justify-between">
+                  <div class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+                    <p class="pr-4"><?php echo $issue['issue'] ?></p>
                   </div>
 
-                  <button class="accordion-toggle">
+                  <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                     <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                     <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                   </button>
@@ -120,7 +120,7 @@ $firstTimeRentIssues = [
                 </div>
                 <div class="accordion-content space-y-4">
 
-                  <!-- Issue Content  -->
+                  <!-- Leasing Issue   -->
                   <div>
                     <ul class="<?php
                                 if (count($issue['content']) > 1) {

templates/internal/budgeting-your-money.php

@@ -36,13 +36,13 @@
       <!-- Links -->
       <div class="accordion bg-cadet-500 my-2">
 
-        <div class="flex px-2 rounded-md justify-between">
+        <div class="relative flex px-2 rounded-md justify-between">
 
           <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
             <p class="font-bold">Quick Links</p>
           </div>
 
-          <button class="accordion-toggle">
+          <button class="accordion-toggle absolute inset-0 flex w-full h-full">
             <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
             <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
           </button>
@@ -78,13 +78,13 @@
       <!-- Links -->
       <div class="accordion bg-cadet-500 my-2">
 
-        <div class="flex px-2 rounded-md justify-between">
+        <div class="relative flex px-2 rounded-md justify-between">
 
           <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
             <p class="font-bold">Quick Links</p>
           </div>
 
-          <button class="accordion-toggle">
+          <button class="accordion-toggle absolute inset-0 flex w-full h-full">
             <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
             <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
           </button>

templates/internal/education-level-differences.php

@@ -137,13 +137,13 @@ $educationLevelDifferences = [
 
             <li class="accordion differences-columns">
 
-              <div class="flex px-2 rounded-md justify-between">
+              <div class="relative flex px-2 rounded-md justify-between">
 
-                <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                  <p><?php echo $difference['title'] ?></p>
+                <div class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+                  <p class="pr-4"><?php echo $difference['title'] ?></p>
                 </div>
 
-                <button class="accordion-toggle">
+                <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                   <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                   <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                 </button>

templates/internal/gender-identity-and-sexual-orientation.php

@@ -91,12 +91,12 @@ $genderIdentities = [
               ?>
 
                 <li class="accordion terms-columns">
-                  <div class="flex px-2 rounded-md justify-between">
+                  <div class="relative flex px-2 rounded-md justify-between">
                     <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                      <p class="font-bold"><?php echo $term['title'] ?></p>
+                      <p class="font-bold pr-4"><?php echo $term['title'] ?></p>
                     </div>
 
-                    <button class="accordion-toggle">
+                    <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                       <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                       <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                     </button>
@@ -155,12 +155,12 @@ $genderIdentities = [
               ?>
 
                 <li class="accordion identity-columns">
-                  <div class="flex px-2 rounded-md justify-between">
+                  <div class="relative flex px-2 rounded-md justify-between">
                     <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                      <p class="font-bold"><?php echo $identity['title'] ?></p>
+                      <p class="font-bold pr-4"><?php echo $identity['title'] ?></p>
                     </div>
 
-                    <button class="accordion-toggle">
+                    <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                       <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                       <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                     </button>
@@ -168,7 +168,7 @@ $genderIdentities = [
                   </div>
                   <div class="accordion-content space-y-4">
 
-                    <!-- Identity Content  -->
+                    <!-- Gender Identity Info  -->
                     <div>
                       <ul class="<?php
                                   if (count($identity['content']) > 1) {

templates/internal/grants-bursaries-and-loans.php

@@ -60,12 +60,12 @@ $studentFinancialTerms = [
               ?>
 
                 <li class="accordion terms-columns">
-                  <div class="flex px-2 rounded-md justify-between">
+                  <div class="relative flex px-2 rounded-md justify-between">
                     <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                      <p><?php echo $term['title'] ?></p>
+                      <p class="pr-4"><?php echo $term['title'] ?></p>
                     </div>
 
-                    <button class="accordion-toggle">
+                    <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                       <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                       <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                     </button>
@@ -73,7 +73,7 @@ $studentFinancialTerms = [
                   </div>
                   <div class="accordion-content space-y-4">
 
-                    <!-- Term Content  -->
+                    <!-- Grants and Bursaries Terms  -->
                     <div>
                       <ul class="<?php
                                   if (count($term['content']) > 1) {

templates/internal/living-in-balance.php

@@ -97,12 +97,12 @@ $statesOfWellness = [
               ?>
 
                 <li class="accordion bg-<?= $state['color']['bg'] ?> text-<?= $state['color']['text'] ?>">
-                  <div class="flex px-2 rounded-md justify-between">
+                  <div class="relative flex px-2 rounded-md justify-between">
                     <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                       <p><?php echo $state['title'] ?></p>
                     </div>
 
-                    <button class="accordion-toggle">
+                    <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                       <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                       <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                     </button>
@@ -110,7 +110,7 @@ $statesOfWellness = [
                   </div>
                   <div class="accordion-content space-y-4">
 
-                    <!-- State Content  -->
+                    <!-- States Of Balance Information  -->
                     <div>
                       <ul class="px-4 <?php
                                       if (count($state['content']) > 1) {

templates/internal/managing-stress.php

@@ -35,12 +35,12 @@
       <a class="font-medium underline" href="https://www.stressstrategies.ca/">(www.stressstrategies.ca/)</a>
       <!-- Links -->
       <div class="accordion bg-red-500 text-white my-2">
-        <div class="flex px-2 rounded-md justify-between">
+        <div class="relative flex px-2 rounded-md justify-between">
           <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
             <p class="font-bold">Quick Links</p>
           </div>
 
-          <button class="accordion-toggle">
+          <button class="accordion-toggle absolute inset-0 flex w-full h-full">
             <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
             <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
           </button>

templates/internal/nan-tribal-councils.php

@@ -195,10 +195,10 @@ $tribalCouncils = [
         <!-- Contact Information -->
         <?php if ($tribalCouncil['contact']) : ?>
           <div class="accordion bg-red-500 text-white my-2">
-            <div class="flex px-2 rounded-md justify-between">
+            <div class="relative flex px-2 rounded-md justify-between">
               <p class="gap-x-3 rounded-md p-2 text-sm leading-6 flex items-center align-middle font-bold">Contact Information</p>
 
-              <button class="accordion-toggle">
+              <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                 <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                 <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
               </button>
@@ -232,10 +232,10 @@ $tribalCouncils = [
 
         <!-- Tribal Councils -->
         <div class="accordion bg-green-900 text-white my-2">
-          <div class="flex px-2 rounded-md justify-between">
+          <div class="relative flex px-2 rounded-md justify-between">
             <p class="gap-x-3 rounded-md p-2 text-sm leading-6 flex items-center align-middle font-bold">Tribal Councils</p>
 
-            <button class="accordion-toggle">
+            <button class="accordion-toggle absolute inset-0 flex w-full h-full">
               <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
               <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
             </button>

templates/internal/off-campus-housing.php

@@ -108,12 +108,12 @@ $rentProsCons = [
 
                 <!-- Pros Loop -->
                 <li class="accordion comparisons-columns">
-                  <div class="flex px-2 rounded-md justify-between">
+                  <div class="relative flex px-2 rounded-md justify-between">
                     <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                       <p>Pros</p>
                     </div>
 
-                    <button class="accordion-toggle">
+                    <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                       <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                       <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                     </button>
@@ -136,12 +136,12 @@ $rentProsCons = [
 
                 <!-- Cons Loop -->
                 <li class="accordion comparisons-columns">
-                  <div class="flex px-2 rounded-md justify-between">
+                  <div class="relative flex px-2 rounded-md justify-between">
                     <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                       <p>Cons</p>
                     </div>
 
-                    <button class="accordion-toggle">
+                    <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                       <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                       <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                     </button>

templates/internal/online-learning-and-remote-work.php

@@ -160,12 +160,12 @@ $onlineLearningTips = [
             ?>
 
               <li class="accordion tips-columns">
-                <div class="flex px-2 rounded-md justify-between">
+                <div class="relative flex px-2 rounded-md justify-between">
                   <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                     <p><?php echo $tip['title'] ?></p>
                   </div>
 
-                  <button class="accordion-toggle">
+                  <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                     <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                     <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                   </button>

templates/internal/ontario-native-education-counseling-associations.php

@@ -67,12 +67,12 @@ $onecaLinks = [
               ?>
 
                 <li class="accordion oneca-links-columns">
-                  <div class="flex px-2 rounded-md justify-between">
+                  <div class="relative flex px-2 rounded-md justify-between">
                     <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                      <p><?php echo $onecaLink['title'] ?></p>
+                      <p class="pr-4"><?php echo $onecaLink['title'] ?></p>
                     </div>
 
-                    <button class="accordion-toggle">
+                    <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                       <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                       <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                     </button>
@@ -80,7 +80,7 @@ $onecaLinks = [
                   </div>
                   <div class="accordion-content space-y-4">
 
-                    <!-- OnecaLink Content  -->
+                    <!-- OnecaLink  -->
                     <div>
                       <ul class="<?php
                                   if (count($onecaLink['content']) > 1) {

templates/internal/safety.php

@@ -62,12 +62,12 @@ $safetyPrecaution = [
             ?>
 
               <li class="accordion precautions-columns">
-                <div class="flex px-2 rounded-md justify-between">
+                <div class="relative flex px-2 rounded-md justify-between">
                   <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                     <p><?php echo $precaution['title'] ?></p>
                   </div>
 
-                  <button class="accordion-toggle">
+                  <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                     <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                     <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                   </button>
@@ -75,7 +75,7 @@ $safetyPrecaution = [
                 </div>
                 <div class="accordion-content space-y-4">
 
-                  <!-- Precaution Content  -->
+                  <!-- Precaution  -->
                   <div>
                     <ul class="<?php
                                 if (count($precaution['content']) > 1) {

templates/internal/strategies-for-success.php

@@ -164,12 +164,12 @@ $strategiesForSuccess = [
             ?>
 
               <li class="accordion differences-columns">
-                <div class="flex px-2 rounded-md justify-between">
+                <div class="relative flex px-2 rounded-md justify-between">
                   <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                    <p><?php echo $strategy['title'] ?></p>
+                    <p class="pr-4"><?php echo $strategy['title'] ?></p>
                   </div>
 
-                  <button class="accordion-toggle">
+                  <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                     <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                     <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                   </button>

templates/partials/navigation.php

@@ -20,7 +20,7 @@
 
      <!-- Header Buttons -->
      <div class="text-white">
-       <button id="toggle-nav" class="toggle-menu"> <i></i> <i></i><i></i> </button>
+       <button aria-label="Mobile Menu" id="toggle-nav" class="toggle-menu"> <i></i> <i></i><i></i> </button>
      </div>
 
    </header>
@@ -78,7 +78,7 @@
                </a>
 
                <?php if ($page['subpages']) { ?>
-                 <button class="accordion-toggle">
+                 <button aria-label="Dropdown Toggle" class="accordion-toggle">
                    <i class="fas fa-chevron-down items-center ml-auto rounded-md bg-gray-900 px-2.5 py-2 text-white ring-1 ring-inset ring-gray-700" aria-hidden="true"></i>
                    <i class="fas fa-times items-center ml-auto rounded-md bg-gray-900 px-3 py-2 text-white ring-1 ring-inset ring-gray-700" aria-hidden="true"></i>
                  </button>
@@ -119,19 +119,19 @@
 
  </section>
 
- <!-- Splash Screen Content-->
+ <!-- Splash Screen-->
  <section id="splash-screen" class="hidden absolute w-full bottom-0  h-screen items-center justify-center">
 
    <div class="space-y-8 px-4 text-white flex flex-col h-screen justify-center items-center">
      <img class="w-56" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/logo-white.png" alt="Splash Logo">
      <h1 class="uppercase text-center font-bold text-xl">A student handbook for post secondary transitions</h1>
-     <button id="app-enter" class="bg-blue-800 shadow-sm shadow-gray-50 px-12 py-4 rounded-md"><i class="bi bi-box-arrow-in-right pr-4"></i>Enter</button>
+     <button aria-label="Enter Site" id="app-enter" class="bg-blue-800 shadow-sm shadow-gray-50 px-12 py-4 rounded-md"><i class="bi bi-box-arrow-in-right pr-4"></i>Enter</button>
    </div>
 
  </section>
 
- <!-- Back Button -->
- <button id="back-button" class="flex items-center justify-center cursor fixed bottom-24 right-4 z-50">
+ <!-- Back Button  -->
+ <button aria-label="Back Button" id="back-button" class="flex items-center justify-center cursor fixed bottom-24 right-4 z-50">
    <div class="bg-white rounded-full p-1"><i class="relative -top-0.5 bi bi-arrow-left-circle-fill text-blue-500 hover:text-blue-900 opacity-70 hover:opacity-100 text-4xl"></i></div>
    <div class="hidden bg-white rounded-full p-1"><i class="relative -top-0.5 bi bi-arrow-right-circle-fill text-blue-500 hover:text-blue-900 opacity-70 hover:opacity-100 text-4xl"></i></div>
  </button>

templates/partials/quick_links.php

@@ -7,7 +7,7 @@ $parentPage = $pageForSlug->post_parent;
 
 
 if ($parentPage === 0) {
-$subpages = getSubpagesForSlug($pages, $current_slug);
+  $subpages = getSubpagesForSlug($pages, $current_slug);
 } else $subpages = getSubpagesForSlug($pages, $pages[$parentPage]['page']->post_name);