[15 minute fix] Fix accessibility concerns in settings UI (#13813)

* Fix accessibility concerns in settings UI

* Update nav aria-labels

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Add hidden labels for color selectors

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

app/views/layouts/_footer.html.erb

@@ -1,6 +1,6 @@
 <footer class="crayons-footer print-hidden">
   <div id="footer-container" class="crayons-layout crayons-layout--limited-m crayons-footer__container">
-    <nav class="m:-mt-4">
+    <nav class="m:-mt-4" aria-label="Site information">
       <a href="/" class="crayons-link inline-block p-2">Home</a>
       <% NavigationLink.ordered.each do |link| %>
         <% if !link.display_only_when_signed_in? || (link.display_only_when_signed_in? && user_signed_in?) %>

app/views/shared/_logo_design.html.erb

@@ -7,7 +7,10 @@
       <p class="crayons-field__description">Used for backgrounds, borders etc.</p>
       <div class="flex items-center">
         <%= f.text_field :bg_color_hex, placeholder: "#000000", class: "crayons-textfield mr-2", id: "bg-color-textfield" %>
-        <input id="bg-color-colorfield" type="color" class="crayons-color-selector">
+        <label class="hidden" for="bg-color-colorfield">
+          Brand color 1 color select
+        </label>
+        <input id="bg-color-colorfield" type="color" class="crayons-color-selector" aria-label="Brand color 1 color selector">
       </div>
     </div>
 
@@ -16,8 +19,11 @@
       <%= f.label :text_color_hex, "Brand color 2", class: "crayons-field__label" %>
       <p class="crayons-field__description">Used for texts (usually put on <em>Brand color 1</em>).</p>
       <div class="flex items-center">
-          <%= f.text_field :text_color_hex, placeholder: "#ffffff", class: "crayons-textfield mr-2", id: "text-color-textfield" %>
-          <input id="text-color-colorfield" type="color" class="crayons-color-selector">
+        <%= f.text_field :text_color_hex, placeholder: "#ffffff", class: "crayons-textfield mr-2", id: "text-color-textfield" %>
+        <label class="hidden" for="text-color-colorfield">
+          Brand color 2 color select
+        </label>
+        <input id="text-color-colorfield" type="color" class="crayons-color-selector" aria-label="Brand color 2 color selector">
       </div>
     </div>
   </div>

app/views/users/_account.html.erb

@@ -20,7 +20,7 @@
           <%= api_secret.text_field(:description, placeholder: "My Project Name", required: true, class: "crayons-textfield") %>
         </div>
       <% end %>
-      <button class="crayons-btn crayon-btn--secondary" id="new__api__secret__btn" type="submit">Generate API Key</button>
+      <button class="crayons-btn crayon-btn--secondary" type="submit">Generate API Key</button>
     <% end %>
   </div>
 

app/views/users/_account_set_password.html.erb

@@ -12,16 +12,16 @@
     <%= form_with(url: user_update_password_path, data: { testid: "update-password-form" }) do |f| %>
       <div class="crayons-field mb-4">
         <%= f.label :current_password, class: "crayons-field__label" %>
-        <%= f.password_field :current_password, class: "crayons-textfield", autocomplete: "off" %>
+        <%= f.password_field :current_password, class: "crayons-textfield", autocomplete: "off", required: true %>
       </div>
       <div class="crayons-field mb-4">
         <%= f.label :password, class: "crayons-field__label" %>
-        <%= f.password_field :password, class: "crayons-textfield", autocomplete: "off" %>
+        <%= f.password_field :password, class: "crayons-textfield", autocomplete: "off", required: true %>
       </div>
       <div class="crayons-field mb-4">
         <%= f.label :password_confirmation, "Confirm new password", class: "crayons-field__label" %>
-        <%= f.password_field :password_confirmation, autocomplete: "off", class: "crayons-textfield" %>
+        <%= f.password_field :password_confirmation, autocomplete: "off", class: "crayons-textfield", required: true %>
       </div>
-      <button class="crayons-btn crayon-btn--secondary" id="new__api__secret__btn" type="submit">Set New Password</button>
+      <button class="crayons-btn crayon-btn--secondary" type="submit">Set New Password</button>
    <% end %>
 </div>

app/views/users/_extensions.html.erb

@@ -20,6 +20,7 @@
       <%= f.text_area :inbox_guidelines, maxlength: 200, class: "crayons-textfield", rows: 3, placeholder: "Please allow a few days for a response." %>
     </div>
 
+    <%= f.hidden_field :tab, value: @tab, id: nil %>
     <button type="submit" class="crayons-btn w-max">
       Save Connect Settings
     </button>
@@ -36,7 +37,6 @@
     </h2>
     <p class="color-base-70">
       Receive micropayments for time spent reading your posts directy. <a href="https://dev.to/hacksultan/web-monetization-like-i-m-5-1418">Learn more</a>
-      </p>
     </p>
   </header>
   <%= form_for(@user, html: { id: nil, class: "grid gap-4" }) do |f| %>
@@ -45,7 +45,7 @@
       <%= f.text_field :payment_pointer, class: "crayons-textfield", placeholder: "$pay.somethinglikethis.co/value" %>
     </div>
     <%= f.hidden_field :tab, value: @tab, id: nil %>
-    <div><button type="submit" class="crayons-btn">Save Web Monetization Settings</button></div>
+    <button type="submit" class="crayons-btn w-max">Save Web Monetization Settings</button>
   <% end %>
 </div>
 

app/views/users/_org_admin.html.erb

@@ -45,7 +45,7 @@
   </div>
 
   <header>
-    <h3 class="mb-2">Grow the team</h3>
+    <h2 class="mb-2">Grow the team</h2>
     <p>Invite teammates by sending them the secret and the following instructions:</p>
   </header>
 
@@ -174,7 +174,7 @@
       <p class="crayons-field__description">Limit of 640 characters</p>
     </div>
     <header>
-      <h3 class="mb-2">Call-to-action box</h3>
+      <h2 class="mb-2">Call-to-action box</h2>
       <p>Customizable text that appears to the right of every post for your organization.</p>
     </header>
     <div class="crayons-field">
@@ -192,7 +192,7 @@
       <%= f.text_field :cta_button_url, maxlength: 150, placeholder: "https://example.com", class: "crayons-textfield" %>
     </div>
 
-    <div><button class="crayons-btn" type="submit">Save</button></div>
+    <button class="crayons-btn w-max" type="submit">Save</button>
   <% end %>
 </div>
 
@@ -203,7 +203,7 @@
   <div class="crayons-field">
     <div class="grid gap-2">
       <header>
-        <h3>Delete Organization</h3>
+        <h2>Delete Organization</h2>
       </header>
       <p>
         You can delete your organization if you:

app/views/users/_org_member.html.erb

@@ -1,5 +1,5 @@
 <div>
-  <h3><%= @organization.name %></h3>
+  <h2><%= @organization.name %></h2>
   <div class="grid gap-2">
     <% @organization.users.each do |user| %>
       <div class="crayons-card crayons-card--secondary p-4">
@@ -8,7 +8,7 @@
     <% end %>
   </div>
 </div>
-<h3>Danger zone</h3>
+<h2>Danger zone</h2>
 <%= form_tag users_leave_org_path(@organization), onsubmit: "return confirm('Are you sure you want to leave this organization?');" do %>
   <div class="field">
     <%= submit_tag "Leave Organization", class: "danger-button" %>

app/views/users/_org_non_member.html.erb

@@ -1,7 +1,7 @@
 <%= javascript_packs_with_chunks_tag "colorPreview", "validateFileInputs", defer: true %>
 
 <div class="crayons-card crayons-card--content-rows">
-  <h3>Join An Organization</h3>
+  <h2>Join An Organization</h2>
   <%= form_tag "/users/join_org" do %>
     <div class="crayons-field mb-6">
       <%= label_tag :org_secret, "Secret code", class: "crayons-field__label" %>
@@ -17,7 +17,7 @@
 
 <div class="crayons-card crayons-card--content-rows">
   <header>
-    <h3 class="mb-2">Create An Organization</h3>
+    <h2 class="mb-2">Create An Organization</h2>
     <p>Starred fields are required</p>
   </header>
 
@@ -66,6 +66,6 @@
       <p class="crayons-field__description">You must have your organization's permission to submit this form. Dishonesty may result in a permanent suspension.</p>
     </div>
 
-    <div><button class="crayons-btn" type="submit">Create Organization</button></div>
+    <button class="crayons-btn w-max" type="submit">Create Organization</button>
   <% end %>
 </div>

app/views/users/_publishing_from_rss.html.erb

@@ -50,9 +50,8 @@
                   class: "crayons-field__label" %>
     </div>
 
-    <%= f.hidden_field :tab, value: @tab %>
+    <%= f.hidden_field :tab, value: @tab, id: nil %>
     <% button_text = @user.feed_url.present? ? "Save Feed Settings" : "Submit Feed Settings" %>
-    <div><button class="crayons-btn" type="submit"><%= button_text %></button></div>
+    <button class="crayons-btn w-max" type="submit"><%= button_text %></button>
   <% end %>
-
 </div>

app/views/users/edit.html.erb

@@ -43,7 +43,7 @@
 
   <div class="crayons-layout crayons-layout--2-cols crayons-layout--limited-l pt-0">
     <div class="crayons-layout__left-sidebar">
-      <nav class="hidden m:block">
+      <nav class="hidden m:block" aria-label="Settings">
         <% Constants::Settings::TAB_LIST.each do |possible_tab| %>
           <a class="crayons-link crayons-link--block <% if @tab == possible_tab.downcase.tr(' ', '-') %>crayons-link--current<% end %>" href="/settings/<%= possible_tab.downcase.tr(" ", "-") %>">
             <%= inline_svg_tag("twemoji/#{possible_tab.downcase.tr(' ', '-')}", aria: true, class: "crayons-icon crayons-icon--default", title: possible_tab) %>