fix(snippets-btn): Minor styling/a11y fixes

.changeset/short-windows-tan.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks-editor": patch
+---
+
+Minor a11y and layout fixes for "Run code snippets" button

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";

plugins/official/stack-snippets/test/render.test.ts

@@ -29,12 +29,7 @@
     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[]) => {
@@ -50,7 +45,7 @@
         expect(codeBlocks).toHaveLength(langs.length);
     };
 
     it.each(validSnippetRenderCases)(
         "should render snippets",
         (markdown: string, langs: string[]) => {
             const richEditorView = richView(markdown, {
@@ -65,7 +60,7 @@
         }
     );
 
     it.each(validSnippetRenderCases)(
         "should render without button if no render supplied",
         (markdown: string, langs: string[]) => {
             const richEditorView = richView(markdown);

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", () => {