improve accessibility even more

lib/memex_web/components/contexts_table_component.ex

@@ -40,7 +40,7 @@ defmodule MemexWeb.Components.ContextsTableComponent do
       if actions == [] or current_user |> is_nil() do
         []
       else
-        [%{label: nil, key: :actions, sortable: false}]
+        [%{label: gettext("actions"), key: :actions, sortable: false}]
       end
 
     columns = [

lib/memex_web/components/core_components/modal.html.heex

@@ -6,6 +6,7 @@
     p-8 flex flex-col justify-center items-center cursor-auto"
   style="background-color: rgba(0,0,0,0.4);"
   phx-remove={hide_modal()}
+  aria-label={gettext("close modal")}
 >
   <span class="hidden"></span>
 </.link>
@@ -30,6 +31,7 @@
         text-gray-500 hover:text-gray-800
         transition-all duration-500 ease-in-out"
       phx-remove={hide_modal()}
+      aria-label={gettext("close modal")}
     >
       <i class="fa-fw fa-lg fas fa-times"></i>
     </.link>

lib/memex_web/components/core_components/topbar.html.heex

@@ -72,6 +72,7 @@
             href={Routes.user_session_path(Endpoint, :delete)}
             method="delete"
             data-confirm={dgettext("prompts", "are you sure you want to log out?")}
+            aria-label={gettext("log out")}
           >
             <i class="fas fa-sign-out-alt"></i>
           </.link>
@@ -85,6 +86,7 @@
           <.link
             navigate={Routes.live_dashboard_path(Endpoint, :home)}
             class="text-primary-400 hover:underline"
+            aria-label={gettext("live dashboard")}
           >
             <i class="fas fa-gauge"></i>
           </.link>

lib/memex_web/components/notes_table_component.ex

@@ -40,7 +40,7 @@ defmodule MemexWeb.Components.NotesTableComponent do
       if actions == [] or current_user |> is_nil() do
         []
       else
-        [%{label: nil, key: :actions, sortable: false}]
+        [%{label: gettext("actions"), key: :actions, sortable: false}]
       end
 
     columns = [

lib/memex_web/components/pipelines_table_component.ex

@@ -40,7 +40,7 @@ defmodule MemexWeb.Components.PipelinesTableComponent do
       if actions == [] or current_user |> is_nil() do
         []
       else
-        [%{label: nil, key: :actions, sortable: false}]
+        [%{label: gettext("actions"), key: :actions, sortable: false}]
       end
 
     columns = [

lib/memex_web/live/context_live/form_component.html.heex

@@ -11,7 +11,8 @@
   >
     <%= text_input(f, :slug,
       class: "input input-primary",
-      placeholder: gettext("slug")
+      placeholder: gettext("slug"),
+      aria_label: gettext("slug")
     ) %>
     <%= error_tag(f, :slug) %>
 
@@ -20,21 +21,24 @@
       class: "input input-primary h-64 min-h-64",
       phx_hook: "MaintainAttrs",
       phx_update: "ignore",
-      placeholder: gettext("use [[note-slug]] to link to a note")
+      placeholder: gettext("use [[note-slug]] to link to a note"),
+      aria_label: gettext("use [[note-slug]] to link to a note")
     ) %>
     <%= error_tag(f, :content) %>
 
     <%= text_input(f, :tags_string,
       id: "tags-input",
       class: "input input-primary",
-      placeholder: gettext("tag1,tag2")
+      placeholder: gettext("tag1,tag2"),
+      aria_label: gettext("tag1,tag2")
     ) %>
     <%= error_tag(f, :tags_string) %>
 
     <div class="flex justify-center items-stretch space-x-4">
       <%= select(f, :visibility, Ecto.Enum.values(Memex.Contexts.Context, :visibility),
         class: "grow input input-primary",
-        prompt: gettext("select privacy")
+        prompt: gettext("select privacy"),
+        aria_label: gettext("select privacy")
       ) %>
 
       <%= submit(dgettext("actions", "save"),

lib/memex_web/live/context_live/index.html.heex

@@ -14,6 +14,7 @@
     <%= text_input(f, :search_term,
       class: "input input-primary",
       value: @search,
+      role: "search",
       phx_debounce: 300,
       placeholder: gettext("search")
     ) %>

lib/memex_web/live/note_live/form_component.html.heex

@@ -11,7 +11,8 @@
   >
     <%= text_input(f, :slug,
       class: "input input-primary",
-      placeholder: gettext("slug")
+      placeholder: gettext("slug"),
+      aria_label: gettext("slug")
     ) %>
     <%= error_tag(f, :slug) %>
 
@@ -20,21 +21,24 @@
       class: "input input-primary h-64 min-h-64",
       phx_hook: "MaintainAttrs",
       phx_update: "ignore",
-      placeholder: gettext("content")
+      placeholder: gettext("content"),
+      aria_label: gettext("content")
     ) %>
     <%= error_tag(f, :content) %>
 
     <%= text_input(f, :tags_string,
       id: "tags-input",
       class: "input input-primary",
-      placeholder: gettext("tag1,tag2")
+      placeholder: gettext("tag1,tag2"),
+      aria_label: gettext("tag1,tag2")
     ) %>
     <%= error_tag(f, :tags_string) %>
 
     <div class="flex justify-center items-stretch space-x-4">
       <%= select(f, :visibility, Ecto.Enum.values(Memex.Notes.Note, :visibility),
         class: "grow input input-primary",
-        prompt: gettext("select privacy")
+        prompt: gettext("select privacy"),
+        aria_label: gettext("select privacy")
       ) %>
 
       <%= submit(dgettext("actions", "save"),

lib/memex_web/live/note_live/index.html.heex

@@ -14,6 +14,7 @@
     <%= text_input(f, :search_term,
       class: "input input-primary",
       value: @search,
+      role: "search",
       phx_debounce: 300,
       placeholder: gettext("search")
     ) %>

lib/memex_web/live/pipeline_live/form_component.html.heex

@@ -11,7 +11,8 @@
   >
     <%= text_input(f, :slug,
       class: "input input-primary",
-      placeholder: gettext("slug")
+      placeholder: gettext("slug"),
+      aria_label: gettext("slug")
     ) %>
     <%= error_tag(f, :slug) %>
 
@@ -20,21 +21,24 @@
       class: "input input-primary h-64 min-h-64",
       phx_hook: "MaintainAttrs",
       phx_update: "ignore",
-      placeholder: gettext("description")
+      placeholder: gettext("description"),
+      aria_label: gettext("description")
     ) %>
     <%= error_tag(f, :description) %>
 
     <%= text_input(f, :tags_string,
       id: "tags-input",
       class: "input input-primary",
-      placeholder: gettext("tag1,tag2")
+      placeholder: gettext("tag1,tag2"),
+      aria_label: gettext("tag1,tag2")
     ) %>
     <%= error_tag(f, :tags_string) %>
 
     <div class="flex justify-center items-stretch space-x-4">
       <%= select(f, :visibility, Ecto.Enum.values(Memex.Pipelines.Pipeline, :visibility),
         class: "grow input input-primary",
-        prompt: gettext("select privacy")
+        prompt: gettext("select privacy"),
+        aria_label: gettext("select privacy")
       ) %>
 
       <%= submit(dgettext("actions", "save"),

lib/memex_web/live/pipeline_live/index.html.heex

@@ -14,6 +14,7 @@
     <%= text_input(f, :search_term,
       class: "input input-primary",
       value: @search,
+      role: "search",
       phx_debounce: 300,
       placeholder: gettext("search")
     ) %>

lib/memex_web/live/step_live/form_component.html.heex

@@ -11,7 +11,8 @@
   >
     <%= text_input(f, :title,
       class: "input input-primary",
-      placeholder: gettext("title")
+      placeholder: gettext("title"),
+      aria_label: gettext("title")
     ) %>
     <%= error_tag(f, :title) %>
 
@@ -20,7 +21,8 @@
       class: "input input-primary h-64 min-h-64",
       phx_hook: "MaintainAttrs",
       phx_update: "ignore",
-      placeholder: gettext("use [[context-slug]] to link to a context")
+      placeholder: gettext("use [[context-slug]] to link to a context"),
+      aria_label: gettext("use [[context-slug]] to link to a context")
     ) %>
     <%= error_tag(f, :content) %>
 

lib/memex_web/templates/user_settings/edit.html.heex

@@ -107,9 +107,9 @@
     action={Routes.user_settings_path(@conn, :update)}
     class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
   >
-    <h3 class="title text-primary-400 text-lg text-center col-span-3">
-      <%= dgettext("actions", "change language") %>
-    </h3>
+    <%= label(f, :locale, dgettext("actions", "change language"),
+      class: "title text-primary-400 text-lg text-center col-span-3"
+    ) %>
 
     <div
       :if={@locale_changeset.action && not @locale_changeset.valid?()}