diff --git a/.changeset/tasty-icons-knock.md b/.changeset/tasty-icons-knock.md new file mode 100644 index 0000000000..3a4f7304e4 --- /dev/null +++ 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 index a125c983e5..6dcca1826a 100644 --- 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 index a1ba3837c2..71270a3327 100644 --- 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)