diff --git a/admin/app/components/solidus_admin/ui/button/component.rb b/admin/app/components/solidus_admin/ui/button/component.rb index cd65a767b8c..fee256d3809 100644 --- a/admin/app/components/solidus_admin/ui/button/component.rb +++ b/admin/app/components/solidus_admin/ui/button/component.rb @@ -23,6 +23,7 @@ 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 @@ -30,6 +31,7 @@ class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent 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 @@ -37,6 +39,7 @@ class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent 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 ], } diff --git a/admin/app/components/solidus_admin/ui/tab/component.rb b/admin/app/components/solidus_admin/ui/tab/component.rb index fb41743b42e..fbd13487b1e 100644 --- a/admin/app/components/solidus_admin/ui/tab/component.rb +++ b/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 diff --git a/admin/app/components/solidus_admin/ui/table/component.html.erb b/admin/app/components/solidus_admin/ui/table/component.html.erb index b7fb30da69e..06920d5ab21 100644 --- a/admin/app/components/solidus_admin/ui/table/component.html.erb +++ b/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" %>
-target="scopesToolbar"> - <%= render @tab_component.new(text: "All", active: true, scheme: :secondary, href: "") %> + <%= render @tab_component.new(text: "All", current: true, href: "") %>
<% if @batch_actions %> diff --git a/admin/config/solidus_admin/tailwind.config.js.erb b/admin/config/solidus_admin/tailwind.config.js.erb index ce4a73c110c..d0e76201d7d 100644 --- a/admin/config/solidus_admin/tailwind.config.js.erb +++ b/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], }, diff --git a/admin/spec/components/previews/solidus_admin/ui/tab/component_preview.rb b/admin/spec/components/previews/solidus_admin/ui/tab/component_preview.rb index 2107784dafa..37ceecc9cf8 100644 --- a/admin/spec/components/previews/solidus_admin/ui/tab/component_preview.rb +++ b/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 diff --git a/admin/spec/components/previews/solidus_admin/ui/tab/component_preview/overview.html.erb b/admin/spec/components/previews/solidus_admin/ui/tab/component_preview/overview.html.erb index 9f6f48be0d7..0f25d43d6a2 100644 --- a/admin/spec/components/previews/solidus_admin/ui/tab/component_preview/overview.html.erb +++ b/admin/spec/components/previews/solidus_admin/ui/tab/component_preview/overview.html.erb @@ -5,12 +5,12 @@ <%= size.to_s.humanize %> <% end %> - <% %i[default active disabled].each do |state| %> + <% %i[default current disabled].each do |state| %> <%= state.to_s.humanize %> <% current_component::SIZES.keys.each do |size| %> - <%= 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) %> <% end %>