[Alpha][SelectPanel] Add aria-labelledby on the dialog in the SelectP…

…anel (#2994)
primer · Aug 6, 2024 · 3bf8fd4 · 3bf8fd4
1 parent 332601e
commit 3bf8fd4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/.changeset/tasty-icons-knock.md b/.changeset/tasty-icons-knock.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Add aria-labelledby on the SelectPanel dialog
diff --git a/app/components/primer/alpha/select_panel.rb b/app/components/primer/alpha/select_panel.rb
@@ -401,6 +401,7 @@ def initialize(
 
         @dialog = Primer::BaseComponent.new(
           id: "#{@panel_id}-dialog",
+          "aria-labelledby": "#{@panel_id}-dialog-title",
           tag: :dialog,
           data: { target: "select-panel.dialog" },
           classes: class_names(

diff --git a/test/components/alpha/select_panel_test.rb b/test/components/alpha/select_panel_test.rb
@@ -87,6 +87,14 @@ def test_list_role
         assert_selector "select-panel action-list ul[id='#{panel_id}-list'][role=listbox]"
       end
 
+      def test_aria_labelledby_dialog
+        render_preview(:default)
+
+        dialog_labelledby_id = page.find_css("dialog").first.attributes["aria-labelledby"].value
+        header_id = page.find_css("select-panel h1").first.attributes["id"].value
+        assert_equal dialog_labelledby_id, header_id
+      end
+
       def test_renders_close_button
         render_preview(:default)