From b73329d7f18410d4d61c2c601db1ae2ebc20ea61 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Wed, 15 Jan 2025 20:50:49 +0000 Subject: [PATCH 1/5] Fix aria-hidden bug Apply flex so nested span is centered Temp --- app/components/primer/beta/button.html.erb | 2 +- app/components/primer/beta/button.rb | 2 +- test/playwright/beta/button.test.ts | 10 ++++++++++ 3 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 test/playwright/beta/button.test.ts diff --git a/app/components/primer/beta/button.html.erb b/app/components/primer/beta/button.html.erb index dd9b989bf0..b624fb202f 100644 --- a/app/components/primer/beta/button.html.erb +++ b/app/components/primer/beta/button.html.erb @@ -9,8 +9,8 @@ <% if trailing_visual %> <% if @trailing_visual_counter %> + (<%= trailing_visual %>) - <%= trailing_visual %> <% else %> <%= trailing_visual %> <% end %> diff --git a/app/components/primer/beta/button.rb b/app/components/primer/beta/button.rb index 7a362aa4fd..3d1604428c 100644 --- a/app/components/primer/beta/button.rb +++ b/app/components/primer/beta/button.rb @@ -70,7 +70,7 @@ class Button < Primer::Component label: Primer::Beta::Label, counter: lambda { |**system_arguments| @trailing_visual_counter = true - Primer::Beta::Counter.new("aria-hidden": true, **system_arguments) + Primer::Beta::Counter.new(**system_arguments) } } diff --git a/test/playwright/beta/button.test.ts b/test/playwright/beta/button.test.ts new file mode 100644 index 0000000000..5fefb944d9 --- /dev/null +++ b/test/playwright/beta/button.test.ts @@ -0,0 +1,10 @@ +import {test, expect} from '@playwright/test' + +test.describe('Button', () => { + test('With trailing counter', async ({page}) => { + await page.goto(`/rails/view_components/beta/button/trailing_counter`) + const component = await page.locator('#component-preview') + + expect(component.getByRole('button', {name: 'Star (15)'})) + }) +}) From 5f8c56db5eb0798c58471597c9cc68422eee9d85 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Thu, 16 Jan 2025 17:40:23 +0000 Subject: [PATCH 2/5] Remove button test --- test/playwright/beta/button.test.ts | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 test/playwright/beta/button.test.ts diff --git a/test/playwright/beta/button.test.ts b/test/playwright/beta/button.test.ts deleted file mode 100644 index 5fefb944d9..0000000000 --- a/test/playwright/beta/button.test.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {test, expect} from '@playwright/test' - -test.describe('Button', () => { - test('With trailing counter', async ({page}) => { - await page.goto(`/rails/view_components/beta/button/trailing_counter`) - const component = await page.locator('#component-preview') - - expect(component.getByRole('button', {name: 'Star (15)'})) - }) -}) From 654b1ae9143af346c889dd596fcc9469fdbb5448 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Fri, 17 Jan 2025 10:14:19 -0500 Subject: [PATCH 3/5] Create poor-parrots-fold.md --- .changeset/poor-parrots-fold.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/poor-parrots-fold.md diff --git a/.changeset/poor-parrots-fold.md b/.changeset/poor-parrots-fold.md new file mode 100644 index 0000000000..3c1af37288 --- /dev/null +++ b/.changeset/poor-parrots-fold.md @@ -0,0 +1,5 @@ +--- +"@fake-scope/fake-pkg": patch +--- + +Ensure counter content is exposed to screen reader users From 49caf4b10a2dc549b0debb4810972fae7ccd2d2c Mon Sep 17 00:00:00 2001 From: khiga8 <16447748+khiga8@users.noreply.github.com> Date: Fri, 17 Jan 2025 15:25:39 +0000 Subject: [PATCH 4/5] Generating component snapshots --- .../beta/button/invisible_all_visuals/aria-snapshot.yml | 6 +++--- .../primer/beta/button/trailing_counter/aria-snapshot.yml | 2 +- .../primer/beta/button/trailing_visual/aria-snapshot.yml | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/invisible_all_visuals/aria-snapshot.yml b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/invisible_all_visuals/aria-snapshot.yml index edc1f1bdf7..be1acce2fc 100644 --- a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/invisible_all_visuals/aria-snapshot.yml +++ b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/invisible_all_visuals/aria-snapshot.yml @@ -1,7 +1,7 @@ - button "Button" - button "Button" - button "Button" -- button "Button ( )": Button () -- button "Button ( )": Button () -- button "Button ( )": Button () +- button "Button ( 15 )" +- button "Button ( 15 )" +- button "Button ( 15 )" - button "Button with tooltip" \ No newline at end of file diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/trailing_counter/aria-snapshot.yml b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/trailing_counter/aria-snapshot.yml index a72b261892..2b68da1513 100644 --- a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/trailing_counter/aria-snapshot.yml +++ b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/trailing_counter/aria-snapshot.yml @@ -1 +1 @@ -- button "Star ( )": Star () \ No newline at end of file +- button "Star ( 15 )" \ No newline at end of file diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/trailing_visual/aria-snapshot.yml b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/trailing_visual/aria-snapshot.yml index 48573079e4..753afe81cb 100644 --- a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/trailing_visual/aria-snapshot.yml +++ b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/trailing_visual/aria-snapshot.yml @@ -1 +1 @@ -- button "Comment ( )": Comment () \ No newline at end of file +- button "Comment ( 15 )" \ No newline at end of file From f5b028347dedefc9d44af64d287d1c6b104601ef Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Sun, 19 Jan 2025 12:01:25 -0500 Subject: [PATCH 5/5] Update poor-parrots-fold.md --- .changeset/poor-parrots-fold.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/poor-parrots-fold.md b/.changeset/poor-parrots-fold.md index 3c1af37288..780e8b4e94 100644 --- a/.changeset/poor-parrots-fold.md +++ b/.changeset/poor-parrots-fold.md @@ -1,5 +1,5 @@ --- -"@fake-scope/fake-pkg": patch +'@primer/view-components': patch --- Ensure counter content is exposed to screen reader users