Add a hint to the site customization image fields

This way people using screen readers will hear the required dimensions
of the images while filling in the form.

app/components/admin/site_customization/images/index_component.html.erb

@@ -12,7 +12,7 @@
     <% images.each do |image| %>
       <tr id="image_<%= image.name %>">
         <td>
-          <strong><%= image.name %></strong> (<%= image.required_width %>x<%= image.required_height %>)
+          <%= image_description(image) %>
         </td>
         <td>
           <%= render Admin::SiteCustomization::Images::TableActionsComponent.new(image) %>

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

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| %>
     <div>
       <%= 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) %>
     </div>
 
     <%= f.submit(t("admin.site_customization.images.index.update"), class: "button hollow") %>