From 7932f554e43af16c7dfc39b863bb2663e12e1646 Mon Sep 17 00:00:00 2001
From: Nickii Miaro <miaronkirote@gmail.com>
Date: Thu, 13 Jun 2024 18:53:20 +0300
Subject: [PATCH] fix(a11y): correctly narrate tab status in storybook editor
 (#3220)

* fix stackblitz selected bug

* apply review suggestions
---
 .storybook/addons/codeEditorAddon/editor.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/.storybook/addons/codeEditorAddon/editor.js b/.storybook/addons/codeEditorAddon/editor.js
index 1b0ca2ec91..d5bf0725c7 100644
--- a/.storybook/addons/codeEditorAddon/editor.js
+++ b/.storybook/addons/codeEditorAddon/editor.js
@@ -205,6 +205,11 @@ export class EditorElement extends LitElement {
     }
   }
 
+  generateStackblitzProject = () => {
+    this.currentType = 'stackblitz';
+    generateProject(this.title, this.files);
+  };
+
   tabKeyDown = e => {
     const tabs = this.renderRoot.querySelectorAll('.tab');
     // Move right
@@ -251,10 +256,12 @@ export class EditorElement extends LitElement {
           )}
 
           <button
-            @click="${_ => generateProject(this.title, this.files)}"
+            @click="${this.generateStackblitzProject}"
+            tabindex="${this.currentType === 'stackblitz' ? 0 : -1}"
             id="project"
             role="tab"
             class="tab tab-right"
+            aria-selected="${this.currentType === 'stackblitz'}"
             title="Edit in StackBlitz"
           >
             <svg viewBox="0 0 14 14" width="14px" height="14px" class="css-149xqrd"><path d="M2 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7.5a.5.5 0 0 0-1 0V12H2V2h4.5a.5.5 0 0 0 0-1H2Z"></path><path d="M7.35 7.36 12 2.7v1.8a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 1 0 0 1h1.8L6.64 6.64a.5.5 0 1 0 .7.7Z"></path></svg>