diff --git a/assets/css/app.scss b/assets/css/app.scss index aff89d6..2ae020b 100644 --- a/assets/css/app.scss +++ b/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; +} diff --git a/lib/bones73k_web/controllers/user_auth.ex b/lib/bones73k_web/controllers/user_auth.ex index 30fbd50..4b9d3a4 100644 --- a/lib/bones73k_web/controllers/user_auth.ex +++ b/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 diff --git a/lib/bones73k_web/live/property_live/index.html.leex b/lib/bones73k_web/live/property_live/index.html.leex index 7089e67..c0d32d7 100644 --- a/lib/bones73k_web/live/property_live/index.html.leex +++ b/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>Price</th> - <th>Description</th> + <th scope="col">Name</th> + <th scope="col">Price</th> + <th scope="col">Description</th> <th></th> </tr> diff --git a/lib/bones73k_web/live/user/registration.html.leex b/lib/bones73k_web/live/user/registration.html.leex index a03ccbd..9ccd608 100644 --- a/lib/bones73k_web/live/user/registration.html.leex +++ b/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 -> %> diff --git a/lib/bones73k_web/live/user/reset_password.html.leex b/lib/bones73k_web/live/user/reset_password.html.leex index ad0bc23..843a290 100644 --- a/lib/bones73k_web/live/user/reset_password.html.leex +++ b/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 %> — 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 -> %> diff --git a/lib/bones73k_web/live/user/settings.html.leex b/lib/bones73k_web/live/user/settings.html.leex index 994b1fc..31b344d 100644 --- a/lib/bones73k_web/live/user/settings.html.leex +++ b/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 %> diff --git a/lib/bones73k_web/live/user/settings/email.html.leex b/lib/bones73k_web/live/user/settings/email.html.leex index b589b26..ee5a505 100644 --- a/lib/bones73k_web/live/user/settings/email.html.leex +++ b/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 -> %> diff --git a/lib/bones73k_web/live/user/settings/password.html.leex b/lib/bones73k_web/live/user/settings/password.html.leex index 9d84ad4..736b261 100644 --- a/lib/bones73k_web/live/user/settings/password.html.leex +++ b/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 -> %> diff --git a/lib/bones73k_web/live/user_dashboard_live.ex b/lib/bones73k_web/live/user_dashboard_live.ex index a6def82..4b79a71 100644 --- a/lib/bones73k_web/live/user_dashboard_live.ex +++ b/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 diff --git a/lib/bones73k_web/templates/layout/_navbar.html.eex b/lib/bones73k_web/templates/layout/_navbar.html.eex index c3852ca..7fb7276 100644 --- a/lib/bones73k_web/templates/layout/_navbar.html.eex +++ b/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"> diff --git a/lib/bones73k_web/templates/user_confirmation/new.html.eex b/lib/bones73k_web/templates/user_confirmation/new.html.eex index 1d6e724..d2356fa 100644 --- a/lib/bones73k_web/templates/user_confirmation/new.html.eex +++ b/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 -> %> diff --git a/lib/bones73k_web/templates/user_reset_password/new.html.eex b/lib/bones73k_web/templates/user_reset_password/new.html.eex index 891b97a..0566160 100644 --- a/lib/bones73k_web/templates/user_reset_password/new.html.eex +++ b/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 -> %> diff --git a/lib/bones73k_web/templates/user_session/new.html.eex b/lib/bones73k_web/templates/user_session/new.html.eex index f251bf3..c5762ce 100644 --- a/lib/bones73k_web/templates/user_session/new.html.eex +++ b/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> diff --git a/lib/bones73k_web/views/icon_helpers.ex b/lib/bones73k_web/views/icon_helpers.ex index 7a18631..e86389d 100644 --- a/lib/bones73k_web/views/icon_helpers.ex +++ b/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 diff --git a/test/bones73k_web/controllers/user_confirmation_controller_test.exs b/test/bones73k_web/controllers/user_confirmation_controller_test.exs index 1681306..ec8812f 100644 --- a/test/bones73k_web/controllers/user_confirmation_controller_test.exs +++ b/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 diff --git a/test/bones73k_web/controllers/user_registration_controller_test.exs b/test/bones73k_web/controllers/user_registration_controller_test.exs index 5466e1d..9d05391 100644 --- a/test/bones73k_web/controllers/user_registration_controller_test.exs +++ b/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 diff --git a/test/bones73k_web/controllers/user_reset_password_controller_test.exs b/test/bones73k_web/controllers/user_reset_password_controller_test.exs index 6e173ae..c09eb1c 100644 --- a/test/bones73k_web/controllers/user_reset_password_controller_test.exs +++ b/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 diff --git a/test/bones73k_web/controllers/user_session_controller_test.exs b/test/bones73k_web/controllers/user_session_controller_test.exs index 464b6ee..763cd6b 100644 --- a/test/bones73k_web/controllers/user_session_controller_test.exs +++ b/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 diff --git a/test/bones73k_web/controllers/user_settings_controller_test.exs b/test/bones73k_web/controllers/user_settings_controller_test.exs index dde5fb6..55815e6 100644 --- a/test/bones73k_web/controllers/user_settings_controller_test.exs +++ b/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 diff --git a/test/bones73k_web/live/user/registration_test.exs b/test/bones73k_web/live/user/registration_test.exs index 76b72a2..88b747c 100644 --- a/test/bones73k_web/live/user/registration_test.exs +++ b/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\"" diff --git a/test/bones73k_web/live/user/reset_password_test.exs b/test/bones73k_web/live/user/reset_password_test.exs index 3526766..c6d9be5 100644 --- a/test/bones73k_web/live/user/reset_password_test.exs +++ b/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\""