diff --git a/app/components/admin/site_customization/images/index_component.html.erb b/app/components/admin/site_customization/images/index_component.html.erb index 3ff4a6eae..9b9c21dd0 100644 --- a/app/components/admin/site_customization/images/index_component.html.erb +++ b/app/components/admin/site_customization/images/index_component.html.erb @@ -12,7 +12,7 @@ <% images.each do |image| %> - <%= image.name %> (<%= image.required_width %>x<%= image.required_height %>) + <%= image_description(image) %> <%= render Admin::SiteCustomization::Images::TableActionsComponent.new(image) %> diff --git a/app/components/admin/site_customization/images/index_component.rb b/app/components/admin/site_customization/images/index_component.rb index 14648cc9b..affb8f7f9 100644 --- a/app/components/admin/site_customization/images/index_component.rb +++ b/app/components/admin/site_customization/images/index_component.rb @@ -11,4 +11,15 @@ class Admin::SiteCustomization::Images::IndexComponent < ApplicationComponent def title t("admin.site_customization.images.index.title") end + + def image_description(image) + safe_join([ + tag.strong(image.name), + tag.span(image_hint(image), id: dom_id(image, :hint)) + ], " ") + end + + def image_hint(image) + "(#{image.required_width}x#{image.required_height})" + end end diff --git a/app/components/admin/site_customization/images/table_actions_component.html.erb b/app/components/admin/site_customization/images/table_actions_component.html.erb index a24680d57..bcc963292 100644 --- a/app/components/admin/site_customization/images/table_actions_component.html.erb +++ b/app/components/admin/site_customization/images/table_actions_component.html.erb @@ -2,7 +2,10 @@ <%= form_for([:admin, image], html: { id: "edit_#{dom_id(image)}" }) do |f| %>
<%= image_tag image.image if image.persisted_attachment? %> - <%= f.file_field :image, label: false, "aria-label": image.name %> + <%= f.file_field :image, + label: false, + "aria-label": image.name, + "aria-describedby": dom_id(image, :hint) %>
<%= f.submit(t("admin.site_customization.images.index.update"), class: "button hollow") %>