[Admin] Use aria-disabled for setting anchor buttons as disabled

admin/app/components/solidus_admin/ui/button/component.rb

@@ -23,20 +23,23 @@ class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent
       active:text-white active:bg-gray-800
       focus:text-white focus:bg-gray-700
       disabled:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed
+      aria-disabled:text-gray-400 aria-disabled:bg-gray-100 aria-disabled:cursor-not-allowed
     ],
     secondary: %w[
       text-gray-700 bg-white border border-1 border-gray-200
       hover:bg-gray-50
       active:bg-gray-100
       focus:bg-gray-50
       disabled:text-gray-300 disabled:bg-white border-gray-200 disabled:cursor-not-allowed
+      aria-disabled:text-gray-300 aria-disabled:bg-white border-gray-200 aria-disabled:cursor-not-allowed
     ],
     ghost: %w[
       text-gray-700 bg-transparent
       hover:bg-gray-50
       active:bg-gray-100
       focus:bg-gray-50 focus:ring-gray-300 focus:ring-2
       disabled:text-gray-300 disabled:bg-transparent border-gray-300 disabled:cursor-not-allowed
+      aria-disabled:text-gray-300 aria-disabled:bg-transparent border-gray-300 aria-disabled:cursor-not-allowed
     ],
   }
 

admin/app/components/solidus_admin/ui/tab/component.rb

@@ -7,24 +7,14 @@ class SolidusAdmin::UI::Tab::Component < SolidusAdmin::BaseComponent
     l: %w[h-12 px-4 body-text-bold],
   }
 
-  TAG_NAMES = {
-    a: :a,
-    button: :button,
-  }
-
-  def initialize(text:, size: :m, tag: :a, disabled: false, active: false, **attributes)
-    @tag = tag
+  def initialize(text:, size: :m, current: false, disabled: false, **attributes)
     @text = text
     @size = size
-    @active = active
-    @disabled = disabled
     @attributes = attributes
-  end
 
-  def call
-    class_name = [
-      @attributes.delete(:class),
-      SIZES.fetch(@size.to_sym),
+    @attributes[:'aria-current'] = current
+    @attributes[:'aria-disabled'] = disabled
+    @attributes[:class] = [
       %w[
         rounded justify-start items-center inline-flex py-1.5 cursor-pointer
         bg-transparent text-gray-500
@@ -33,21 +23,20 @@ def call
         focus:bg-gray-25 focus:text-gray-700
 
         active:bg-gray-50 active:text-black
-        data-[ui-active]:bg-gray-50 data-[ui-active]:text-black
+        aria-current:bg-gray-50 aria-current:text-black
 
         disabled:bg-gray-100 disabled:text-gray-400
-        data-[ui-disabled]:bg-gray-100 data-[ui-disabled]:text-gray-400
-      ]
+        aria-disabled:bg-gray-100 aria-disabled:text-gray-400
+      ],
+      SIZES.fetch(@size.to_sym),
+      @attributes.delete(:class),
     ].join(" ")
+  end
 
-    @attributes["data-ui-active"] = true if @active
-    @attributes["data-ui-disabled"] = true if @disabled
-    @attributes[:disabled] = true if @disabled && @tag == :button
-
+  def call
     content_tag(
-      TAG_NAMES.fetch(@tag.to_sym),
+      :a,
       @text,
-      class: class_name,
       **@attributes
     )
   end

admin/app/components/solidus_admin/ui/table/component.html.erb

@@ -11,7 +11,7 @@
   <% toolbar_classes = "h-14 p-2 bg-white border-b border-gray-100 justify-start items-center gap-2 visible:flex hidden:hidden" %>
 
   <div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="scopesToolbar">
-    <%= render @tab_component.new(text: "All", active: true, scheme: :secondary, href: "") %>
+    <%= render @tab_component.new(text: "All", current: true, href: "") %>
   </div>
 
   <% if @batch_actions %>

admin/config/solidus_admin/tailwind.config.js.erb

@@ -7,6 +7,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      aria: {
+        'current': 'current="true"',
+      },
       fontFamily: {
         sans: ['Inter var', ...defaultTheme.fontFamily.sans],
       },

admin/spec/components/previews/solidus_admin/ui/tab/component_preview.rb

@@ -11,9 +11,9 @@ def overview(text: "text")
 
   # @param text text
   # @param size select { choices: [s, m, l] }
-  # @param active toggle
+  # @param current toggle
   # @param disabled toggle
-  def playground(text: "Tab", size: :m, active: false, disabled: false)
-    render current_component.new(text: text, size: size, active: active, disabled: disabled)
+  def playground(text: "Tab", size: :m, current: false, disabled: false)
+    render current_component.new(text: text, size: size, current: current, disabled: disabled)
   end
 end

admin/spec/components/previews/solidus_admin/ui/tab/component_preview/overview.html.erb

@@ -5,12 +5,12 @@
       <td class="px-3 py-1 text-gray-500 text-center text-[16px]"><%= size.to_s.humanize %></td>
     <% end %>
   </tr>
-  <% %i[default active disabled].each do |state| %>
+  <% %i[default current disabled].each do |state| %>
     <tr>
       <td class="font-bold px-3 py-1"><%= state.to_s.humanize %></td>
       <% current_component::SIZES.keys.each do |size| %>
         <td class="px-3 py-1 text-center">
-          <%= render current_component.new(size: size, text: text, disabled: state == :disabled, active: state == :active) %>
+          <%= render current_component.new(size: size, text: text, disabled: state == :disabled, current: state == :current) %>
         </td>
       <% end %>
     </tr>