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") %>
|