From 74a99a268765d9eb33f51b5a58adcf3890e9285c Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 28 Apr 2025 16:06:23 -0400 Subject: [PATCH 1/3] fix(snippets-btn): Minor styling/a11y fixes --- plugins/official/stack-snippets/src/snippet-view.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/plugins/official/stack-snippets/src/snippet-view.ts b/plugins/official/stack-snippets/src/snippet-view.ts index 319f1174..dc98fae9 100644 --- a/plugins/official/stack-snippets/src/snippet-view.ts +++ b/plugins/official/stack-snippets/src/snippet-view.ts @@ -42,9 +42,8 @@ export class StackSnippetView implements NodeView { if (opts && opts.renderer) { const runCodeButton = document.createElement("button"); runCodeButton.type = "button"; - runCodeButton.className = "s-btn s-btn__filled"; - runCodeButton.title = "Run code snippet"; - runCodeButton.setAttribute("aria-label", "Run code snippet"); + runCodeButton.className = + "s-btn s-btn__filled d-inline-flex ai-center g2"; // create the svg svg-icon-bg element const runIcon = document.createElement("span"); runIcon.className = "svg-icon-bg iconPlay"; From d5b818ee450f5e3060c8fea7ce2dc6dfcba858ac Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 28 Apr 2025 16:10:37 -0400 Subject: [PATCH 2/3] Add changeset --- .changeset/short-windows-tan.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/short-windows-tan.md diff --git a/.changeset/short-windows-tan.md b/.changeset/short-windows-tan.md new file mode 100644 index 00000000..8f4683e9 --- /dev/null +++ b/.changeset/short-windows-tan.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks-editor": patch +--- + +Minor a11y and layout fixes for "Run code snippets" button From 648600871bf555c7e5761e882741b805f0a8aaf1 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 28 Apr 2025 16:19:22 -0400 Subject: [PATCH 3/3] update tests --- plugins/official/stack-snippets/test/render.test.ts | 7 +------ plugins/official/stack-snippets/test/snippet-view.test.ts | 5 +---- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/plugins/official/stack-snippets/test/render.test.ts b/plugins/official/stack-snippets/test/render.test.ts index b5148ecd..cba8b3e0 100644 --- a/plugins/official/stack-snippets/test/render.test.ts +++ b/plugins/official/stack-snippets/test/render.test.ts @@ -29,12 +29,7 @@ describe("stack snippets", () => { const shouldHaveRunCodeButton = (rendered: Element) => { const runCode = rendered.querySelectorAll("div.snippet-ctas > button"); expect(runCode).toHaveLength(1); - expect(runCode[0].attributes.getNamedItem("title").value).toBe( - "Run code snippet" - ); - expect(runCode[0].attributes.getNamedItem("aria-label").value).toBe( - "Run code snippet" - ); + expect(runCode[0].textContent).toBe("Run code snippet"); }; const shouldHaveLanguageBlocks = (rendered: Element, langs: string[]) => { diff --git a/plugins/official/stack-snippets/test/snippet-view.test.ts b/plugins/official/stack-snippets/test/snippet-view.test.ts index a2928e45..08d74193 100644 --- a/plugins/official/stack-snippets/test/snippet-view.test.ts +++ b/plugins/official/stack-snippets/test/snippet-view.test.ts @@ -65,10 +65,7 @@ describe("StackSnippetView", () => { ); expect(runCodeButton).toHaveLength(1); - expect(runCodeButton[0].getAttribute("aria-label")).toBe( - "Run code snippet" - ); - expect(runCodeButton[0].getAttribute("title")).toBe("Run code snippet"); + expect(runCodeButton[0].textContent).toBe("Run code snippet"); }); it("should not render run code button if no renderer provided", () => {