Better accessibility

breizhcamp · Jul 10, 2024 · c2a1bfb · c2a1bfb
1 parent 8005e23
commit c2a1bfb
Show file tree

Hide file tree

Showing 23 changed files with 344 additions and 229 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Breizhcamp - Orga</title>
+    <title>Organisation - Breizhcamp</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/App.vue b/src/App.vue
@@ -4,57 +4,77 @@
       <div class="position-sticky">
         <div class="mx-1 mt-4">
           <div class="sidebar-header text-white">
-            <h5 class="brand">
-              <Logo width="30" height="30"/>
-              <span :class="expanded ? 'text' : 'no-text'">
+            <div class="brand">
+              <Logo width="30" height="30" aria-hidden="true"/>
+              <h1 :class="expanded ? 'text fs-5' : 'no-text'">
                 Organisation
-              </span>
-            </h5>
+              </h1>
+            </div>
           </div>
 
           <ul class="nav flex-column">
-            <li class="nav-item">
-              <a 
-                class="nav-link btn btn-dark rounded-pill" 
-                v-on:click="expanded = !expanded" 
+            <li class="nav-item mb-3">
+              <button 
+                class="nav-link btn btn-dark rounded-pill expand" 
+                @click="expanded = !expanded" 
                 :class="expanded ? '' : 'protruding'" 
-                aria-label="Plier/déplier la barre de navigation"
+                :aria-label="expanded ? 'Collapse the navbar' : 'Expand the navbar'"
               >
                 <component 
                   :is="expanded ? 'BiArrowLeft' : 'BiArrowRight'" 
                   class="nav-icon" 
+                  aria-hidden="true" 
                 />
                 <span :class="expanded ? 'text' : 'no-text'">Collapse</span>
-              </a>
+              </button>
             </li>
-            <hr class="small-hr"/>
             <li class="nav-item">
-              <router-link to="/registered" class="nav-link">
-                <BiPersonDown class="nav-icon" :class="expanded ? '' : 'big'" />
+              <router-link
+                to="/registered" 
+                class="nav-link"
+                aria-label="Go to registered"
+              >
+                <BiPersonDown class="nav-icon" aria-hidden="true"/>
                 <span :class="expanded ? 'text' : 'no-text'">Registered</span>
               </router-link>
             </li>
             <li class="nav-item">
-              <router-link to="/participants" class="nav-link">
-                <BiPersonCheck class="nav-icon" :class="expanded ? '' : 'big'" />
+              <router-link
+                to="/participants"
+                class="nav-link"
+                aria-label="Go to participants"
+              >
+                <BiPersonCheck class="nav-icon" aria-hidden="true"/>
                 <span :class="expanded ? 'text' : 'no-text'">Participants</span>
               </router-link>
             </li>
             <li class="nav-item">
-              <router-link to="/attendees" class="nav-link">
-                <BiChatLeftText class="nav-icon" :class="expanded ? '' : 'big'" />
+              <router-link 
+                to="/attendees" 
+                class="nav-link" 
+                aria-label="Go to attendees"
+              >
+                <BiChatLeftText class="nav-icon" aria-hidden="true"/>
                 <span :class="expanded ? 'text' : 'no-text'">Attendees</span>
               </router-link>
             </li>
             <li class="nav-item">
-              <router-link to="/sessions" class="nav-link">
-                <BiCalendarWeek class="nav-icon" :class="expanded ? '' : 'big'" />
+              <router-link 
+                to="/sessions" 
+                class="nav-link" 
+                aria-label="Go to sessions"
+              >
+                <BiCalendarWeek class="nav-icon" aria-hidden="true"/>
                 <span :class="expanded ? 'text' : 'no-text'">Sessions</span>
               </router-link>
             </li>
             <li class="nav-item">
-              <router-link to="/events" class="nav-link">
-                <BiGear class="nav-icon" />
+              <router-link 
+                to="/events" 
+                class="nav-link"
+                aria-label="Go to events"
+              >
+                <BiGear class="nav-icon" aria-hidden="true"/>
                 <span :class="expanded ? 'text' : 'no-text'">Events</span>
               </router-link>
             </li>
@@ -133,15 +153,13 @@ export default defineComponent({
   z-index: 600;
   width: auto;
   display: block;
-  transition: all 0.3s;
 }
 
 .brand {
   display: inline-flex;
   align-items: center;
   width: max-content;
   margin-left: 5px;
-  transition: all 0.3s;
 }
 
 .wrapper {
@@ -172,7 +190,17 @@ export default defineComponent({
   display: inline-flex;
   align-items: center;
   color: #fff;
-  transition: all 0.3s;
+}
+
+.nav-link:focus-visible {
+  all: unset;
+  width: max-content;
+  padding: 15px;
+  font-size: 1.1em;
+  display: inline-flex;
+  align-items: center;
+  color: #fff;
+  border: 4px dashed orangered;
 }
 
 .nav-link:hover {
@@ -198,30 +226,35 @@ export default defineComponent({
 }
 
 .text {
-  margin-left: 5px;
+  margin-left: 10px;
   transition: all 0.3s;
 }
 
-.small-hr {
-  margin: 0.5rem 0;
-}
-
-.protruding {
+.protruding,
+.protruding:focus {
   transform: translateX(80%);
   padding: 5px;
 }
 
-.protruding:hover {
+.protruding:hover,
+.protruding:focus-visible {
   transform: translateX(100%);
+  padding: 5px;
+}
+
+.protruding:focus-visible {
+  border: 3px dashed orangered;
+  box-shadow: none;
+  background-color: var(--bs-btn-bg);
 }
 
 .btn-dark {
   padding-top: 5px;
   padding-bottom: 5px;
-}
+} 
 
-.btn-dark:hover {
-  --bs-btn-hover-bg: var(--bs-btn-bg);
-  --bs-btn-hover-border-color: var(--bs-btn-border-color);
+.nav-link.expand {
+  padding-top: 5px;
+  padding-bottom: 5px;
 }
 </style>
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -10,4 +10,13 @@
   aspect-ratio: 1; 
   height: 2rem; 
   border-radius: 50%;
-}
+}
+
+a:focus-visible,
+button:focus-visible {
+  outline: none !important;
+  outline-offset: 0 !important;
+  border: unset !important;
+  box-shadow: none !important;
+  border: 3px dashed orangered !important;
+}
diff --git a/src/components/EventCard.vue b/src/components/EventCard.vue
@@ -1,21 +1,22 @@
 <template>
   <div class="card">
-    <h5 class="card-header px-2 d-flex align-items-center">
-      <a v-if="event.website" class="flex-grow-1 nav-link" :href="event.website.toString()">
-        {{ event.name }}
-      </a>
-      <div v-else class="flex-grow-1 nav-link">
-        {{ event.name }}
-      </div>
-      <div class="float-end fs-6 d-flex align-items-center">
-        Year: {{ event.year }} 
+    <div class="card-header px-3 d-flex align-items-center">
+      <h4 class="flex-grow-1 m-0">
+        <a v-if="event.website" class="nav-link" :href="event.website.toString()">
+          {{ event.name }}
+        </a>
+        <span v-else class="nav-link">
+          {{ event.name }}
+        </span>
+      </h4>
+      <div class="float-end d-flex align-items-center">
         <button 
           v-if="editRights"
           type="button" 
           class="btn mx-1 btn-sm btn-warning opacity-75 flex-shrink-1 float-end d-flex align-items-center" 
           @click="eventModal = true"
         >
-          <BiPencilSquare class="me-1" />
+          <BiPencilSquare class="me-1" aria-hidden="true"/>
           Edit
         </button>
         <button 
@@ -24,10 +25,10 @@
           class="btn btn-sm btn-danger d-flex align-items-center" 
           @click="deleteEvent()"
         >
-          <BiTrash class="me-1"/>Delete
+          <BiTrash class="me-1" aria-hidden="true"/>Delete
         </button>
       </div>
-    </h5>
+    </div>
     <div class="card-body row row-cols-2">
       <div class="col">
         <div class="d-flex align-items-center justify-content-between mb-1"> 
@@ -209,10 +210,7 @@
       <li class="list-group-item" v-for="team in teams" :key="team.id">
         <EventTeamListItem :team="team" :event-id="Number(event.id)" :editable="editRights"/>
       </li>
-      <li class="list-group-item">
-        <label for="team-dropdown" class="form-label text-muted" v-if="availableTeams.filter(t => !teams.map(t => t.id).includes(t.id)).length == 0">
-          <i>This button is disabled, as all teams are already part of this event</i>
-        </label>
+      <li v-if="availableTeams.length !== teams.length" class="list-group-item">
         <div class="dropdown" id="team-dropdown">
           <button 
             type="button" 

diff --git a/src/components/EventHallListItem.vue b/src/components/EventHallListItem.vue
@@ -8,17 +8,18 @@
   <button 
     v-if="editable"
     type="button" 
-    class="btn btn-sm btn-warning opacity-75 d-flex align-items-center me-1"
+    class="btn btn-sm btn-warning d-flex align-items-center me-1"
     @click="editModal = true"
   >
-    <BiPencilSquare class="me-1"/> Edit
+    <BiPencilSquare class="me-1" aria-hidden="true"/> Edit
   </button>
   <button 
+    v-if="editable"
     type="button"   
-    class="btn btn-sm btn-danger opacity-75 d-flex align-items-center"
+    class="btn btn-sm btn-danger d-flex align-items-center"
     @click="deleteModal = true"
   >
-    <BiTrash class="me-1"/> Delete
+    <BiTrash class="me-1" aria-hidden="true"/> Delete
   </button>
 
   <ModalForm v-if="editable" v-model:open="editModal" :title="'Edit hall ' + hall.name" @save="submit()">

diff --git a/src/components/EventMemberListItem.vue b/src/components/EventMemberListItem.vue
@@ -8,26 +8,26 @@
     <div class="d-flex flex-row-reverse flex-wrap align-items-center flex-shrink-1">
       <button 
         type="button"
-        class="btn btn-sm btn-info opacity-75 d-flex align-items-center m-1"
+        class="btn btn-sm btn-info d-flex align-items-center m-1"
         @click="contactsModal = true"
       >
-        <BiPersonLinesFill class="me-1"/> Contacts
+        <BiPersonLinesFill aria-hidden="true" class="me-1"/> Contacts
       </button>
       <button 
         v-if="editable"
         type="button" 
-        class="btn btn-sm btn-warning opacity-75 d-flex align-items-center m-1"
+        class="btn btn-sm btn-warning d-flex align-items-center m-1"
         @click="openEditModal()"
       >
-        <BiPencilSquare class="me-1"/> Edit
+        <BiPencilSquare aria-hidden="true" class="me-1"/> Edit
       </button>
       <button 
         v-if="editable"
         type="button"   
-        class="btn btn-sm btn-danger opacity-75 d-flex align-items-center m-1"
+        class="btn btn-sm btn-danger d-flex align-items-center m-1"
         @click="deleteModal = true"
       >
-        <BiTrash class="me-1"/> Delete
+        <BiTrash aria-hidden="true" class="me-1"/> Delete
       </button>
     </div>
   </div>
@@ -36,7 +36,7 @@
       <div v-for="team in teams" :key="team.id" class="col-auto btn-group">
         <div class="btn btn-sm btn-primary disabled">{{ team.name }}&nbsp;</div>
         <button type="button" v-if="editable" class="btn btn-sm btn-danger d-flex align-items-center" @click="removeTeam(team.id)" title="Remove team">
-          <BiXLg />
+          <BiXLg aria-hidden="true"/>
         </button>
       </div>
       <div
@@ -128,6 +128,7 @@
         >
           <img
             :src="memberValues.profilePictureLink"
+            alt="Profile picture"
             class="member-profile"
             style="object-fit: cover; z-index: 1;"
           >
@@ -138,7 +139,7 @@
             d-flex align-items-center justify-content-center" 
             style="font-size: 0px; padding: 1%; aspect-ratio: 1; top: 0%;"
           >
-            <BiTrash aria-hidden viewBox="0 0 16 16" height="8" width="8"/>
+            <BiTrash aria-hidden="true" viewBox="0 0 16 16" height="8" width="8"/>
           </button>
           <button 
             type="button" 
@@ -147,15 +148,16 @@
             d-flex align-items-center justify-content-center" 
             style="font-size: 0px; padding: 1%; aspect-ratio: 1; top: 35%"
           >
-            <BiUpload aria-hidden viewBox="0 0 16 16" height="8" width="8"/>
+            <BiUpload aria-hidden="true" viewBox="0 0 16 16" height="8" width="8"/>
           </button>
         </div>
         <button
           v-else
           class="member-profile form-picture d-inline-flex fs-6 
           align-items-center justify-content-center btn btn-sm btn-light"
+          title="Upload profile picture"
         >
-          <BiUpload />
+          <BiUpload aria-hidden="true" />
         </button>
       </div>
       <div class="col-10">
@@ -246,8 +248,8 @@
                   @click="displayedContactId = contact.id"
                 >
                   <BiEye aria-hidden="true"/>
-              </button>
-            </div>
+                </button>
+              </div>
             </td>
             <td class="p-1" style="text-align: center;">
               <BiLock class="m-auto" aria-label="Private"/>
@@ -284,7 +286,7 @@
                   v-model="contactFormValues.public"
                 >
                 <label class="form-check-label ms-1" for="public">Public</label>
-          </div>
+              </div>
             </td>
             <td class="p-1 d-flex justify-content-center">
               <button type="button" class="btn btn-success">Add</button>

diff --git a/src/components/ProfilePicture.vue b/src/components/ProfilePicture.vue
@@ -4,11 +4,13 @@
     :src="src"
     class="member-profile"
     style="object-fit: cover;"
+    :alt="name + '\'s profile picture'"
   >
   <div
     v-else
     class="member-profile d-inline-flex fs-6"
     :style="nameToStyle(name)"
+    aria-hidden="true"
   >
     <b class="m-auto">{{ name[0] }}</b>
   </div>