set aria-label and aria-expanded correctly by default

primer · Jan 27, 2025 · b368ffc · b368ffc
1 parent 3c61e11
commit b368ffc
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/app/components/primer/beta/details.rb b/app/components/primer/beta/details.rb
@@ -14,19 +14,38 @@ class Details < Primer::Component
         :default => "details-overlay",
         :dark => "details-overlay details-overlay-dark"
       }.freeze
+      ARIA_LABEL_OPEN_DEFAULT = "Collapse"
+      ARIA_LABEL_CLOSED_DEFAULT = "Expand"
 
       attr_reader :disabled
       alias disabled? disabled
 
+      # @param button [Boolean] Whether or not to render the summary element as a button.
+      # @param aria_label_open [String] Defaults to "Collapse". Value to announce when details element is open.
+      # @param aria_label_closed [String] Defaults to "Expand". Value to announce when details element is closed.
       renders_one :summary, lambda { |button: true, **system_arguments|
         system_arguments[:tag] = :summary
         system_arguments[:role] = "button"
 
+        aria_label_closed = system_arguments[:aria_label_closed] || ARIA_LABEL_CLOSED_DEFAULT
+        aria_label_open = system_arguments[:aria_label_open] || ARIA_LABEL_OPEN_DEFAULT
+
         system_arguments[:data] = merge_data(
           system_arguments, {
             data: {
               target: "detailsToggle.summaryElement",
               action: "click:detailsToggle#toggle",
+              aria_label_closed: aria_label_closed,
+              aria_label_open: aria_label_open,
+            }
+          }
+        )
+
+        system_arguments[:aria] = merge_aria(
+          system_arguments, {
+            aria: {
+              label: aria_label_open,
+              expanded: true,
             }
           }
         )

diff --git a/app/components/primer/beta/details_toggle_element.ts b/app/components/primer/beta/details_toggle_element.ts
@@ -3,7 +3,7 @@ import {controller, target} from '@github/catalyst'
 /**
  * A companion Catalyst element for the Details view component. This element
  * ensures the <details> and <summary> elements markup is properly accessible by
- * updating the aria-label and aria-expanded attributes.
+ * updating the aria-label and aria-expanded attributes on click.
  *
  * aria-label values default to "Expand" and "Collapse". To override those
  * values, use the `data-aria-label-open` and `data-aria-label-closed`

diff --git a/test/components/beta/details_test.rb b/test/components/beta/details_test.rb
@@ -95,7 +95,7 @@ def test_falls_back_to_default_body_tag_when_invalid_body_tag_is_passed
     refute_selector("img", text: "Body", visible: false)
   end
 
-  def test_passes_props_to_button
+  def test_passes_props_to_summary_button
     render_inline(Primer::Beta::Details.new) do |component|
       component.with_summary(size: :small, scheme: :primary) do
         "Summary"
@@ -108,6 +108,22 @@ def test_passes_props_to_button
     assert_selector("summary.btn.btn-sm.btn-primary")
   end
 
+  def test_accepts_custom_values_for_summary_aria_label
+    render_inline(Primer::Beta::Details.new) do |component|
+      component.with_summary(aria_label_closed: "Open me", aria_label_open: "Close me") do
+        "Summary"
+      end
+      component.with_body do
+        "Body"
+      end
+    end
+
+    assert_selector("summary")
+    assert_selector("summary[aria-label='Close me']")
+    assert_selector("summary[data-aria-label-open='Close me']")
+    assert_selector("summary[data-aria-label-closed='Open me']")
+  end
+
   def test_prevents_rendering_without_slots
     render_inline(Primer::Beta::Details.new)
 
@@ -155,7 +171,11 @@ def test_renders_details_catalyst_element_and_data_attributes
 
     assert_selector("details-toggle")
     assert_selector("details[data-target='detailsToggle.detailsElement']")
-    assert_selector("summary[data-target='detailsToggle.summaryElement']")
+    assert_selector("summary[aria-label='Collapse']")
+    assert_selector("summary[aria-expanded=true]")
     assert_selector("summary[data-action='click:detailsToggle#toggle']")
+    assert_selector("summary[data-target='detailsToggle.summaryElement']")
+    assert_selector("summary[data-aria-label-closed='Expand']")
+    assert_selector("summary[data-aria-label-open='Collapse']")
   end
 end