fix(HeadlineEditor): Use Tooltip

Instead of title - that has lots of accessibility issues - we use our established Shoelace Tooltip.
AlchemyCMS · Apr 10, 2024 · a6e6675 · a6e6675
1 parent bd056bd
commit a6e6675
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/app/views/alchemy/ingredients/_headline_editor.html.erb b/app/views/alchemy/ingredients/_headline_editor.html.erb
@@ -13,21 +13,24 @@
     <% end %>
 
     <div class="input-addon right<%= " second" if has_size_select %>">
-      <%= f.select :level,
-        options_for_select(headline_editor.level_options, headline_editor.level),
-        {},
-        {
-          class: "custom-select",
-          title: f.object.class.human_attribute_name(:level),
-          disabled: !has_level_select
-        } %>
+      <sl-tooltip content="<%= f.object.class.human_attribute_name(:level) %>">
+        <%= f.select :level,
+          options_for_select(headline_editor.level_options, headline_editor.level),
+          {},
+          {
+            class: "custom-select",
+            disabled: !has_level_select
+          } %>
+      </sl-tooltip>
     </div>
 
     <% if has_size_select %>
       <div class="input-addon right">
-        <%= f.select :size, options_for_select(headline_editor.size_options, headline_editor.size),
-          {},
-          { class: "custom-select", title: f.object.class.human_attribute_name(:size) } %>
+        <sl-tooltip content="<%= f.object.class.human_attribute_name(:size) %>">
+          <%= f.select :size, options_for_select(headline_editor.size_options, headline_editor.size),
+            {},
+            { class: "custom-select" } %>
+        </sl-tooltip>
       </div>
     <% end %>
   <% end %>

diff --git a/spec/views/alchemy/ingredients/headline_editor_spec.rb b/spec/views/alchemy/ingredients/headline_editor_spec.rb
@@ -38,6 +38,10 @@
     is_expected.to have_selector("select[name='element[ingredients_attributes][0][level]']")
   end
 
+  it "renders a tooltip" do
+    is_expected.to have_selector("sl-tooltip[content='Level']")
+  end
+
   context "when only one level is given" do
     let(:settings) do
       {levels: [1]}
@@ -60,6 +64,10 @@
     it "renders a size select" do
       is_expected.to have_selector("select[name='element[ingredients_attributes][0][size]']")
     end
+
+    it "renders a tooltip" do
+      is_expected.to have_selector("sl-tooltip[content='Size']")
+    end
   end
 
   context "with settings anchor set to true" do