style improvements and fixes

assets/css/app.scss

@@ -15,3 +15,13 @@
 
 /* Navbar toggler icon override */
 @import "nav-burger";
+
+/* extra */
+.was-validated .no-valid-style .form-check-input:valid,
+.form-check-input.is-valid {
+  border-color: inherit !important;
+}
+.was-validated .no-valid-style .form-check-input:valid ~ .form-check-label,
+.no-valid-style .form-check-input.is-valid ~ .form-check-label {
+  color: inherit !important;
+}

lib/bones73k_web/controllers/user_auth.ex

@@ -1,7 +1,6 @@
 defmodule Bones73kWeb.UserAuth do
   import Plug.Conn
   import Phoenix.Controller
-  import Phoenix.HTML
 
   alias Bones73k.Accounts
   alias Bones73kWeb.Router.Helpers, as: Routes

lib/bones73k_web/live/property_live/index.html.leex

@@ -1,4 +1,4 @@
-<h1>Listing Properties</h1>
+<h2>Listing Properties</h2>
 
 <%= if @live_action in [:new, :edit] do %>
   <%= live_modal @socket, Bones73kWeb.PropertyLive.FormComponent,
@@ -10,12 +10,12 @@
     return_to: Routes.property_index_path(@socket, :index) %>
 <% end %>
 
-<table>
+<table class="table">
   <thead>
     <tr>
-      <th>Name</th>
+      <th scope="col">Name</th>
-      <th>Price</th>
+      <th scope="col">Price</th>
-      <th>Description</th>
+      <th scope="col">Description</th>
 
       <th></th>
     </tr>

lib/bones73k_web/live/user/registration.html.leex

@@ -1,10 +1,10 @@
 <div class="row justify-content-center">
   <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
 
-  <h3>
+  <h2>
     <%= icon_div @socket, "bi-person-plus", [class: "icon baseline"] %>
     Register
-  </h3>
+  </h2>
   <p class="lead">Registration gains additional features, like remembering your song request history.</p>
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, novalidate: true, id: "reg_form"], fn f -> %>

lib/bones73k_web/live/user/reset_password.html.leex

@@ -1,10 +1,10 @@
 <div class="row justify-content-center">
   <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
 
-  <h3>
+  <h2>
     <%= icon_div @socket, "bi-shield-lock", [class: "icon baseline"] %>
     Reset password
-  </h3>
+  </h2>
   <p class="lead">Hi <%= @user.email %> &mdash; What new word of passage will confirm you are who you say you are?</p>
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, novalidate: true, id: "pw_reset_form"], fn f -> %>

lib/bones73k_web/live/user/settings.html.leex

@@ -1,7 +1,7 @@
-<h3 class="mb-3">
+<h2 class="mb-3">
   <%= icon_div @socket, "bi-sliders", [class: "icon baseline"] %>
   User Settings
-</h3>
+</h2>
 
 <div class="row">
   <%= live_component @socket, Bones73kWeb.UserLive.Settings.Email, id: "email-#{@current_user.id}", current_user: @current_user %>

lib/bones73k_web/live/user/settings/email.html.leex

@@ -1,6 +1,6 @@
 <div id="<%= @id %>" class="col-sm-9 col-md-7 col-lg-5 col-xl-4  mt-1">
 
-  <h4>Change email</h4>
+  <h3>Change email</h3>
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, phx_target: @myself], fn f -> %>
 

lib/bones73k_web/live/user/settings/password.html.leex

@@ -1,6 +1,6 @@
 <div id="<%= @id %>" class="col-sm-9 col-md-7 col-lg-5 col-xl-4 mt-1">
 
-  <h4>Change password</h4>
+  <h3>Change password</h3>
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, phx_target: @myself], fn f -> %>
 

lib/bones73k_web/live/user_dashboard_live.ex

@@ -11,7 +11,7 @@ defmodule Bones73kWeb.UserDashboardLive do
   def render(assigns) do
     ~L"""
     <section class="phx-hero">
-      <h1>Welcome to the user dashboard!</h1>
+      <h2>Welcome to the user dashboard!</h2>
     </section>
     """
   end

lib/bones73k_web/templates/layout/_navbar.html.eex

@@ -1,10 +1,12 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
   <div class="container">
 
-    <%= link to: Routes.page_path(@conn, :index), class: "navbar-brand py-0 fs-4" do %>
+    <h1 class="fs-4 my-0 py-0 lh-base">
+    <%= link to: Routes.page_path(@conn, :index), class: "navbar-brand fs-4" do %>
       <%= icon_div @conn, "mdi-skull-crossbones", [class: "icon baseline fs-3"] %>
       <span class="fw-light">Bones73k</span>
     <% end %>
+    </h1>
 
     <button class="hamburger hamburger--squeeze collapsed navbar-toggler" id="navbarSupportedContentToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="hamburger-box d-flex">

lib/bones73k_web/templates/user_confirmation/new.html.eex

@@ -1,10 +1,10 @@
 <div class="row justify-content-center">
   <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
 
-  <h3>
+  <h2>
     <%= icon_div @conn, "bi-arrow-repeat", [class: "icon baseline"] %>
     Resend confirmation instructions
-  </h3>
+  </h2>
   <p class="lead">We'll send you another email with instructions to confirm your email address.</p>
 
   <%= form_for :user, Routes.user_confirmation_path(@conn, :create), [class: "needs-validation", novalidate: true], fn f -> %>

lib/bones73k_web/templates/user_reset_password/new.html.eex

@@ -1,10 +1,10 @@
 <div class="row justify-content-center">
   <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
 
-  <h3>
+  <h2>
     <%= icon_div @conn, "mdi-head-question-outline", [class: "icon baseline"] %>
     Forgot your password?
-  </h3>
+  </h2>
   <p class="lead">We'll send you an email with instructions to reset your password.</p>
 
   <%= form_for :user, Routes.user_reset_password_path(@conn, :create), [class: "needs-validation", novalidate: true], fn f -> %>

lib/bones73k_web/templates/user_session/new.html.eex

@@ -1,10 +1,10 @@
 <div class="row justify-content-center">
   <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
 
-  <h3>
+  <h2>
     <%= icon_div @conn, "bi-door-open", [class: "icon baseline"] %>
     Log in
-  </h3>
+  </h2>
   <p class="lead">Who goes there?</p>
 
   <%= form_for @conn, Routes.user_session_path(@conn, :create), [as: :user, class: "needs-validation", novalidate: true], fn f -> %>
@@ -41,7 +41,7 @@
       <span class="invalid-feedback">password is required</span>
     </div>
 
-    <div class="form-check mb-3">
+    <div class="form-check mb-3 no-valid-style">
       <%= checkbox f, :remember_me, class: "form-check-input" %>
       <%= label f, :remember_me, "Keep me logged in for 60 days", class: "form-check-label" %>
     </div>

lib/bones73k_web/views/icon_helpers.ex

@@ -13,6 +13,8 @@ defmodule Bones73kWeb.IconHelpers do
   end
 
   def icon_svg(conn, name, opts \\ []) do
+    opts = aria_hidden?(opts)
+
     content_tag(:svg, tag_opts(name, opts)) do
       tag(:use, "xlink:href": Routes.static_path(conn, "/images/icons.svg##{name}"))
     end
@@ -21,4 +23,13 @@ defmodule Bones73kWeb.IconHelpers do
   defp tag_opts(name, opts) do
     Keyword.update(opts, :class, name, fn c -> "#{c} #{name}" end)
   end
+
+  defp aria_hidden?(opts) do
+    case Keyword.get(opts, :aria_hidden) do
+      "false" -> Keyword.drop(opts, [:aria_hidden])
+      false -> Keyword.drop(opts, [:aria_hidden])
+      "true" -> opts
+      _ -> Keyword.put(opts, :aria_hidden, "true")
+    end
+  end
 end

test/bones73k_web/controllers/user_confirmation_controller_test.exs

@@ -13,7 +13,7 @@ defmodule Bones73kWeb.UserConfirmationControllerTest do
     test "renders the confirmation page", %{conn: conn} do
       conn = get(conn, Routes.user_confirmation_path(conn, :new))
       response = html_response(conn, 200)
-      assert response =~ "Resend confirmation instructions\n  </h3>"
+      assert response =~ "Resend confirmation instructions\n  </h2>"
     end
   end
 

test/bones73k_web/controllers/user_registration_controller_test.exs

@@ -7,7 +7,7 @@ defmodule Bones73kWeb.UserRegistrationControllerTest do
     test "renders registration page", %{conn: conn} do
       conn = get(conn, Routes.user_registration_path(conn, :new))
       response = html_response(conn, 200)
-      assert response =~ "Register\n  </h3>"
+      assert response =~ "Register\n  </h2>"
       assert response =~ "Log in\n</a>"
       assert response =~ "Register\n</a>"
     end

test/bones73k_web/controllers/user_reset_password_controller_test.exs

@@ -13,7 +13,7 @@ defmodule Bones73kWeb.UserResetPasswordControllerTest do
     test "renders the reset password page", %{conn: conn} do
       conn = get(conn, Routes.user_reset_password_path(conn, :new))
       response = html_response(conn, 200)
-      assert response =~ "Forgot your password?\n  </h3>"
+      assert response =~ "Forgot your password?\n  </h2>"
     end
 
     test "redirects if already logged in", %{conn: conn} do
@@ -61,7 +61,7 @@ defmodule Bones73kWeb.UserResetPasswordControllerTest do
     test "renders reset password with user_id in session", %{conn: conn, token: token, user: user} do
       conn = get(conn, Routes.user_reset_password_path(conn, :edit, token))
       assert get_session(conn, "user_id") == user.id
-      assert html_response(conn, 200) =~ "Reset password\n  </h3>"
+      assert html_response(conn, 200) =~ "Reset password\n  </h2>"
     end
 
     test "does not render reset password with invalid token", %{conn: conn} do

test/bones73k_web/controllers/user_session_controller_test.exs

@@ -11,7 +11,7 @@ defmodule Bones73kWeb.UserSessionControllerTest do
     test "renders log in page", %{conn: conn} do
       conn = get(conn, Routes.user_session_path(conn, :new))
       response = html_response(conn, 200)
-      assert response =~ "\n    Log in\n  </h3>"
+      assert response =~ "\n    Log in\n  </h2>"
       assert response =~ "Register\n</a>"
       assert response =~ "Log in\n</a>"
     end
@@ -61,7 +61,7 @@ defmodule Bones73kWeb.UserSessionControllerTest do
         })
 
       response = html_response(conn, 200)
-      assert response =~ "\n    Log in\n  </h3>"
+      assert response =~ "\n    Log in\n  </h2>"
       assert response =~ "Invalid email or password"
     end
   end
@@ -108,7 +108,7 @@ defmodule Bones73kWeb.UserSessionControllerTest do
         })
 
       response = html_response(conn, 200)
-      assert response =~ "\n    Log in\n  </h3>"
+      assert response =~ "\n    Log in\n  </h2>"
       assert response =~ "Invalid email or password"
     end
   end

test/bones73k_web/controllers/user_settings_controller_test.exs

@@ -10,7 +10,7 @@ defmodule Bones73kWeb.UserSettingsControllerTest do
     test "renders settings page", %{conn: conn} do
       conn = get(conn, Routes.user_settings_path(conn, :edit))
       response = html_response(conn, 200)
-      assert response =~ "User Settings\n</h3>"
+      assert response =~ "User Settings\n</h2>"
     end
 
     test "redirects if user is not logged in" do

test/bones73k_web/live/user/registration_test.exs

@@ -17,7 +17,7 @@ defmodule Bones73kWeb.UserLive.RegistrationTest do
     test "displays registration form", %{conn: conn} do
       {:ok, _view, html} = live_isolated(conn, Bones73kWeb.UserLive.Registration)
 
-      assert html =~ "Register\n  </h3>"
+      assert html =~ "Register\n  </h2>"
       assert html =~ "Email</label>"
     end
 
@@ -29,7 +29,7 @@ defmodule Bones73kWeb.UserLive.RegistrationTest do
         |> form("#reg_form", %{"user" => %{"email" => "abc", "password" => "abc"}})
         |> render_change()
 
-      assert html =~ "Register\n  </h3>"
+      assert html =~ "Register\n  </h2>"
       assert html =~ "must be a valid email address"
       assert html =~ "should be at least #{User.min_password()} character(s)"
       assert html =~ "type=\"submit\" disabled=\"disabled\""

test/bones73k_web/live/user/reset_password_test.exs

@@ -17,7 +17,7 @@ defmodule Bones73kWeb.UserLive.ResetPasswordTest do
   test "displays registration form", %{conn: conn, user: user} do
     {:ok, _view, html} = live_isolated(conn, Bones73kWeb.UserLive.ResetPassword)
 
-    assert html =~ "Reset password\n  </h3>"
+    assert html =~ "Reset password\n  </h2>"
     assert html =~ user.email
     assert html =~ "New password</label>"
   end
@@ -28,7 +28,7 @@ defmodule Bones73kWeb.UserLive.ResetPasswordTest do
     form_data = %{"user" => %{"password" => "abc", "password_confirmation" => "def"}}
     html = form(view, "#pw_reset_form", form_data) |> render_change()
 
-    assert html =~ "Reset password\n  </h3>"
+    assert html =~ "Reset password\n  </h2>"
     assert html =~ "should be at least #{User.min_password()} character(s)"
     assert html =~ "does not match password"
     assert html =~ "type=\"submit\" disabled=\"disabled\""