From c5e82ace8b715520fde61afcc2f52b7b49541e49 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 15 Aug 2023 16:01:09 -0400 Subject: [PATCH 1/7] Fix bug with missing aria-labelledby --- app/components/primer/alpha/dialog.rb | 3 ++- test/components/primer/alpha/dialog_test.rb | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/components/primer/alpha/dialog.rb b/app/components/primer/alpha/dialog.rb index fefd62f419..7baf8b5fec 100644 --- a/app/components/primer/alpha/dialog.rb +++ b/app/components/primer/alpha/dialog.rb @@ -133,7 +133,8 @@ def initialize( @system_arguments, { aria: { disabled: true, - describedby: "#{@id}-title #{@id}-description" + labelledby: "#{@id}-title", + describedby: "#{@id}-description" } } ) diff --git a/test/components/primer/alpha/dialog_test.rb b/test/components/primer/alpha/dialog_test.rb index 578dd26876..e51e6bd0c3 100644 --- a/test/components/primer/alpha/dialog_test.rb +++ b/test/components/primer/alpha/dialog_test.rb @@ -63,7 +63,7 @@ def test_renders_title_and_subtitle_with_describedby component.with_body { "content" } end - assert_selector("modal-dialog[id='my-dialog'][aria-describedby='my-dialog-title my-dialog-description']") do + assert_selector("modal-dialog[id='my-dialog'][aria-labelledby='my-dialog-title'][aria-describedby='my-dialog-description']") do assert_selector("h1[id='my-dialog-title']", text: "Title") assert_selector("h2[id='my-dialog-description']", text: "Subtitle") end From 60ee23d2f06420c11e24e7ee0e42f615e3390cb7 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 15 Aug 2023 16:18:46 -0400 Subject: [PATCH 2/7] Add behavioral test --- test/system/alpha/dialog_test.rb | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 test/system/alpha/dialog_test.rb diff --git a/test/system/alpha/dialog_test.rb b/test/system/alpha/dialog_test.rb new file mode 100644 index 0000000000..29f1177b25 --- /dev/null +++ b/test/system/alpha/dialog_test.rb @@ -0,0 +1,24 @@ +# frozen_string_literal: true + +require "system/test_case" + +module Alpha + class IntegrationDialogTest < System::TestCase + def test_modal_has_accessible_name + visit_preview(:default) + + click_button("Show Dialog") + + assert_selector("modal-dialog[aria-labelledby]") + assert_equal(find("modal-dialog")["aria-labelledby"], find("h1")["id"]) + end + + def test_autofocuses_close_button + visit_preview(:default) + + click_button("Show Dialog") + + assert_selector("button[aria-label='Close'][autofocus]") + end + end +end From ec170fb7972ae69388617925f97669fe6fd1a576 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 15 Aug 2023 16:36:46 -0400 Subject: [PATCH 3/7] Update test --- test/system/alpha/dialog_test.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/system/alpha/dialog_test.rb b/test/system/alpha/dialog_test.rb index 29f1177b25..1eb4f02c4e 100644 --- a/test/system/alpha/dialog_test.rb +++ b/test/system/alpha/dialog_test.rb @@ -13,12 +13,12 @@ def test_modal_has_accessible_name assert_equal(find("modal-dialog")["aria-labelledby"], find("h1")["id"]) end - def test_autofocuses_close_button + def test_focuses_close_button visit_preview(:default) click_button("Show Dialog") - assert_selector("button[aria-label='Close'][autofocus]") + assert_equal page.evaluate_script("document.activeElement")['aria-label'], "Close" end end end From 867fe44c0249ca560a7ccee0d9c5e57caed94295 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 15 Aug 2023 16:51:52 -0400 Subject: [PATCH 4/7] Run rubocop --- test/system/alpha/dialog_test.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/system/alpha/dialog_test.rb b/test/system/alpha/dialog_test.rb index 1eb4f02c4e..7238074605 100644 --- a/test/system/alpha/dialog_test.rb +++ b/test/system/alpha/dialog_test.rb @@ -18,7 +18,7 @@ def test_focuses_close_button click_button("Show Dialog") - assert_equal page.evaluate_script("document.activeElement")['aria-label'], "Close" + assert_equal page.evaluate_script("document.activeElement")["aria-label"], "Close" end end end From 7ea3cebf791358851767fe60b049a1b739d7f836 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 15 Aug 2023 16:53:33 -0400 Subject: [PATCH 5/7] Create rich-donkeys-beam.md --- .changeset/rich-donkeys-beam.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rich-donkeys-beam.md diff --git a/.changeset/rich-donkeys-beam.md b/.changeset/rich-donkeys-beam.md new file mode 100644 index 0000000000..4e4775710c --- /dev/null +++ b/.changeset/rich-donkeys-beam.md @@ -0,0 +1,5 @@ +--- +"@primer/view-components": minor +--- + +Fix accessibility bug of missing accessible name on Dialog From 4a59f8dffe9e63acbc5bd9f489ac7f81baf2c468 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 15 Aug 2023 16:56:07 -0400 Subject: [PATCH 6/7] Update rich-donkeys-beam.md --- .changeset/rich-donkeys-beam.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/rich-donkeys-beam.md b/.changeset/rich-donkeys-beam.md index 4e4775710c..940ff15f50 100644 --- a/.changeset/rich-donkeys-beam.md +++ b/.changeset/rich-donkeys-beam.md @@ -2,4 +2,4 @@ "@primer/view-components": minor --- -Fix accessibility bug of missing accessible name on Dialog +Fix accessibility bug of missing accessible name on `Primer::Alpha::Dialog` From c2d1fc600e4692d41490759027e33d30a100c71f Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 15 Aug 2023 16:56:43 -0400 Subject: [PATCH 7/7] Update rich-donkeys-beam.md --- .changeset/rich-donkeys-beam.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.changeset/rich-donkeys-beam.md b/.changeset/rich-donkeys-beam.md index 940ff15f50..b0a259d26e 100644 --- a/.changeset/rich-donkeys-beam.md +++ b/.changeset/rich-donkeys-beam.md @@ -3,3 +3,5 @@ --- Fix accessibility bug of missing accessible name on `Primer::Alpha::Dialog` + +