From bd056bd7c64ad85574e10ccbcf3e7219e463ae6f Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Wed, 10 Apr 2024 08:36:02 +0200
Subject: [PATCH 1/2] feat(HeadlineEditor): Always show level select

But disable it if only one option is available. Gives the
author some visual feedback on the headline level.
---
 .../ingredients/_headline_editor.html.erb      | 18 ++++++++++--------
 .../ingredients/headline_editor_spec.rb        |  4 ++--
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/views/alchemy/ingredients/_headline_editor.html.erb b/app/views/alchemy/ingredients/_headline_editor.html.erb
index b13cec0900..4a69559f92 100644
--- a/app/views/alchemy/ingredients/_headline_editor.html.erb
+++ b/app/views/alchemy/ingredients/_headline_editor.html.erb
@@ -12,14 +12,16 @@
       <%= render "alchemy/ingredients/shared/anchor", ingredient_editor: headline_editor %>
     <% end %>
 
-    <% if has_level_select %>
-      <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) } %>
-      </div>
-    <% 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
+        } %>
+    </div>
 
     <% if has_size_select %>
       <div class="input-addon right">
diff --git a/spec/views/alchemy/ingredients/headline_editor_spec.rb b/spec/views/alchemy/ingredients/headline_editor_spec.rb
index 7cb3cdba19..18ba6bdad9 100644
--- a/spec/views/alchemy/ingredients/headline_editor_spec.rb
+++ b/spec/views/alchemy/ingredients/headline_editor_spec.rb
@@ -43,8 +43,8 @@
       {levels: [1]}
     end
 
-    it "does not render a level select" do
-      is_expected.to_not have_selector("select[name='element[ingredients_attributes][0][level]']")
+    it "renders a disabled level select" do
+      is_expected.to have_selector("select[disabled][name='element[ingredients_attributes][0][level]']")
     end
   end
 

From a6e667540a8315e03b9af92ea54dbf938d89b422 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Wed, 10 Apr 2024 08:42:12 +0200
Subject: [PATCH 2/2] fix(HeadlineEditor): Use Tooltip

Instead of title - that has lots of accessibility issues -
we use our established Shoelace Tooltip.
---
 .../ingredients/_headline_editor.html.erb     | 25 +++++++++++--------
 .../ingredients/headline_editor_spec.rb       |  8 ++++++
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/app/views/alchemy/ingredients/_headline_editor.html.erb b/app/views/alchemy/ingredients/_headline_editor.html.erb
index 4a69559f92..15b53627d8 100644
--- 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
index 18ba6bdad9..9cd071f5dc 100644
--- 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