♿ Improve acessibility

app/components/item_details/thumbnails_section_component.html.erb

@@ -3,11 +3,11 @@
     <div class="splide__track">
       <ul class="splide__list">
         <li class="splide__slide">
-          <%= image_tag item.banner_url, class: "w-full aspect-video", width: 720, height: 480 %>
+          <%= image_tag item.banner_url, class: "w-full aspect-video", width: 720, height: 480, alt: "Banner" %>
         </li>
-        <% item.screenshot_urls.each do |image_url| %>
+        <% item.screenshot_urls.each_with_index do |image_url, index| %>
           <li class="splide__slide">
-            <%= image_tag image_url, class: "w-full aspect-video", width: 720, height: 480 %>
+            <%= image_tag image_url, class: "w-full aspect-video", width: 720, height: 480, alt: "Screenshot #{index}" %>
           </li>
         <% end %>
       </ul>
@@ -18,11 +18,11 @@
     <div class="splide__track">
       <ul class="splide__list">
         <li class="splide__slide">
-          <%= image_tag item.small_banner_url, width: 480, height: 320 %>
+          <%= image_tag item.small_banner_url, width: 480, height: 320, alt: "Banner thumbnail" %>
         </li>
-        <% item.screenshot_urls.each do |image_url| %>
+        <% item.screenshot_urls.each_with_index do |image_url, index| %>
           <li class="splide__slide">
-            <%= image_tag image_url, width: 480, height: 320 %>
+            <%= image_tag image_url, width: 480, height: 320, alt: "Thumbnail #{index}" %>
           </li>
         <% end %>
       </ul>

app/components/layout/sidebar_component.html.erb

@@ -1,59 +1,63 @@
 <label for="app-drawer" class="drawer-overlay"></label>
 
-<ul class="menu overflow-y-auto w-72 bg-base-200 border-r border-gray-700">
-  <%= link_to root_path, class: "w-full flex justify-center my-8" do %>
-    <%= image_tag "nindika-dark.svg", class: "w-3/5" %>
-  <% end %>
+<div class="overflow-y-auto w-72 bg-base-200 border-r border-gray-700">
+  <div>
+    <%= link_to root_path, class: "w-full flex justify-center p-0 my-8" do %>
+      <%= image_tag "nindika-dark.svg", class: "w-3/5", alt: "nindika logo" %>
+    <% end %>
+  </div>
 
   <div class="p-4">
     <%= form_with(scope: :q, url: all_games_path, method: :get) do |form| %>
       <div class="form-control w-full">
         <div class="input-group">
           <%= form.text_field :title,
             value: params.dig(:q, :title),
-            placeholder: "Xenoblade",
+            placeholder: "Bayonetta",
             class: "input input-bordered w-full"
           %>
 
-          <%= form.button class: "btn btn-square" do %>
+          <%= form.button class: "btn btn-square", "aria-label" => t(".search") do %>
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>
           <% end %>
         </div>
       </div>
     <% end %>
   </div>
 
-  <%= menu_item url: root_path do %>
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> </svg>
-    <%= t(".home") %>
-  <% end %>
-
-  <li class="font-semibold text-sm text-gray-400">
-    <span><%= t(".games") %></span>
-  </li>
-
-  <%= menu_item url: on_sale_games_path do %>
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" /> </svg>
-    <%= t(".on_sale") %>
-  <% end %>
-
-  <%= menu_item url: new_releases_path do %>
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" /> </svg>
-    <%= t(".new_releases") %>
-  <% end %>
-
-  <%= menu_item url: pre_orders_path do %>
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-current" viewBox="0 0 24 24"> <path fill="none" d="M0 0h24v24H0z" /><path d="M6.5 2h11a1 1 0 0 1 .8.4L21 6v15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6l2.7-3.6a1 1 0 0 1 .8-.4zM19 8H5v12h14V8zm-.5-2L17 4H7L5.5 6h13zM9 10v2a3 3 0 0 0 6 0v-2h2v2a5 5 0 0 1-10 0v-2h2z" /></svg>
-    <%= t(".pre_orders") %>
-  <% end %>
-
-  <%= menu_item url: upcoming_games_path do %>
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg>
-    <%= t(".upcoming") %>
-  <% end %>
-
-  <%= menu_item url: all_games_path do %>
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /> </svg>
-    <%= t(".all_games") %>
-  <% end %>
-</ul>
+  <ul class="menu">
+    <%= menu_item url: root_path do %>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> </svg>
+      <%= t(".home") %>
+    <% end %>
+
+    <li class="font-semibold text-sm text-gray-400">
+      <span><%= t(".games") %></span>
+    </li>
+
+    <%= menu_item url: on_sale_games_path do %>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" /> </svg>
+      <%= t(".on_sale") %>
+    <% end %>
+
+    <%= menu_item url: new_releases_path do %>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" /> </svg>
+      <%= t(".new_releases") %>
+    <% end %>
+
+    <%= menu_item url: pre_orders_path do %>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-current" viewBox="0 0 24 24"> <path fill="none" d="M0 0h24v24H0z" /><path d="M6.5 2h11a1 1 0 0 1 .8.4L21 6v15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6l2.7-3.6a1 1 0 0 1 .8-.4zM19 8H5v12h14V8zm-.5-2L17 4H7L5.5 6h13zM9 10v2a3 3 0 0 0 6 0v-2h2v2a5 5 0 0 1-10 0v-2h2z" /></svg>
+      <%= t(".pre_orders") %>
+    <% end %>
+
+    <%= menu_item url: upcoming_games_path do %>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg>
+      <%= t(".upcoming") %>
+    <% end %>
+
+    <%= menu_item url: all_games_path do %>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /> </svg>
+      <%= t(".all_games") %>
+    <% end %>
+  </ul>
+</div>

app/components/wishlist_items/button_component.rb

@@ -29,13 +29,18 @@ def turbo_frame_id
     end
 
     def button
-      button_to wishlist_item_path(item_id), method: request_method, class: button_classes, params: form_params do
+      button_to wishlist_item_path(item_id), {
+        method: request_method,
+        class: button_classes,
+        params: form_params,
+        "aria-label" => aria_label
+      } do
         button_content
       end
     end
 
     def not_signed_in_button
-      link_to new_user_session_path, class: button_classes do
+      link_to new_user_session_path, class: button_classes, "aria-label" => aria_label do
         button_content
       end
     end
@@ -66,6 +71,10 @@ def block_button_content
       tag.span(button_text) + unchecked_bookmark_icon
     end
 
+    def aria_label
+      wishlisted ? t(".remove_from_wishlist") : t(".add_to_wishlist")
+    end
+
     def unchecked_bookmark_icon
       bookmark_icon(classes: "fill-transparent stroke-current")
     end

app/views/layouts/application.html.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="<%= I18n.locale %>">
   <head>
     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
     <meta content="width=device-width,initial-scale=1.0" name="viewport">

config/locales/pt-BR/components/layout.yml

@@ -1,6 +1,8 @@
 pt-BR:
   layout:
     sidebar_component:
+      search: Pesquisar
+
       home: Início
 
       games: Jogos

config/locales/pt-BR/components/wishlist_items.yml

@@ -3,3 +3,5 @@ pt-BR:
     button_component:
       add: Adicionar
       remove: Remover
+      add_to_wishlist: Adicionar à lista de desejos
+      remove_from_wishlist: Remover da lista de desejos