Label BorderBox lists with their header (#2202)

primer · Aug 11, 2023 · d7da401 · d7da401
1 parent ba90a43
commit d7da401
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 2 deletions.
diff --git a/.changeset/lemon-bulldogs-accept.md b/.changeset/lemon-bulldogs-accept.md
@@ -0,0 +1,7 @@
+---
+'@primer/view-components': patch
+---
+
+Label BorderBox lists with their header
+
+<!-- Changed components: Primer::Beta::BorderBox -->
diff --git a/app/components/primer/beta/border_box.html.erb b/app/components/primer/beta/border_box.html.erb
@@ -2,11 +2,11 @@
   <%= header %>
   <%= body %>
   <% if rows.any? %>
-    <ul>
+    <%= render Primer::BaseComponent.new(**@list_arguments) do %>
       <% rows.each do |row| %>
         <%= row %>
       <% end %>
-    </ul>
+    <% end %>
   <% end %>
   <%= footer %>
 <% end %>
diff --git a/app/components/primer/beta/border_box.rb b/app/components/primer/beta/border_box.rb
@@ -82,11 +82,22 @@ def initialize(padding: DEFAULT_PADDING, **system_arguments)
         )
 
         @system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION }
+        @list_arguments = { tag: :ul }
       end
 
       def render?
         rows.any? || header.present? || body.present? || footer.present?
       end
+
+      private
+
+      def before_render
+        return unless header
+
+        @list_arguments[:aria] = {
+          labelledby: header.id
+        }
+      end
     end
   end
 end
diff --git a/app/components/primer/beta/border_box/header.rb b/app/components/primer/beta/border_box/header.rb
@@ -7,6 +7,8 @@ class BorderBox
       #
       # @accessibility When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
       class Header < Primer::Component
+        attr_reader :id
+
         status :beta
 
         TITLE_TAG_FALLBACK = :h2
@@ -29,11 +31,13 @@ class Header < Primer::Component
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         def initialize(**system_arguments)
           @system_arguments = system_arguments
+          @system_arguments[:id] ||= self.class.generate_id
           @system_arguments[:tag] = :div
           @system_arguments[:classes] = class_names(
             "Box-header",
             system_arguments[:classes]
           )
+          @id = @system_arguments[:id]
         end
       end
     end

diff --git a/test/components/beta/border_box_test.rb b/test/components/beta/border_box_test.rb
@@ -23,6 +23,16 @@ def test_renders_header
     assert_selector("div.Box-header", text: "Header")
   end
 
+  def test_labels_list_with_header
+    render_inline(Primer::Beta::BorderBox.new) do |component|
+      component.with_header { "Header" }
+      component.with_row { "Row" }
+    end
+
+    id = page.find_css(".Box-header").first[:id]
+    assert_selector "ul[aria-labelledby='#{id}']"
+  end
+
   def test_renders_body
     render_inline(Primer::Beta::BorderBox.new) do |component|
       component.with_body { "Body" }