From c4dbf718534e7e78c344cc0eb306fa77abd1ad96 Mon Sep 17 00:00:00 2001
From: Felix Weber <felix.weber@iconstorm.de>
Date: Fri, 20 Jan 2023 14:24:09 +0100
Subject: [PATCH 1/3] fix: ts, a11y, story

---
 .../src/components/segment/segment.tsx        |   2 +-
 .../segmented-button/segmented-button.tsx     |   2 +-
 .../SegmentedButton.stories.mdx               | 132 ++++++++----------
 3 files changed, 62 insertions(+), 74 deletions(-)

diff --git a/packages/components/src/components/segment/segment.tsx b/packages/components/src/components/segment/segment.tsx
index f5d4c8ed70..3488e3e0b1 100644
--- a/packages/components/src/components/segment/segment.tsx
+++ b/packages/components/src/components/segment/segment.tsx
@@ -197,7 +197,7 @@ export class Segment {
                 <scale-icon-action-success
                   size={this.size === 'small' ? 14 : 16}
                   class="scale-icon-action-success"
-                  accessibility-title="success"
+                  aria-hidden="true"
                   selected
                 />
               </div>
diff --git a/packages/components/src/components/segmented-button/segmented-button.tsx b/packages/components/src/components/segmented-button/segmented-button.tsx
index 14b0f652aa..55949e25f5 100644
--- a/packages/components/src/components/segmented-button/segmented-button.tsx
+++ b/packages/components/src/components/segmented-button/segmented-button.tsx
@@ -167,7 +167,7 @@ export class SegmentedButton {
       return -1;
     } else {
       const allSegments = this.getAllSegments();
-      const selectedIndex = allSegments.findIndex((el) => el.selected === true);
+      const selectedIndex = allSegments.findIndex((el: HTMLScaleSegmentElement) => el.selected === true);
       return selectedIndex;
     }
   }
diff --git a/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx b/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx
index 7cceb47ea8..d8b3ea414b 100644
--- a/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx
+++ b/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx
@@ -203,10 +203,10 @@ export const InvalidTemplate = (args, { argTypes }) => ({
 </Canvas>
 
 ```html
-<scale-segmented-button multi-select disabled>
-  <scale-segment>Apple</scale-segment>
-  <scale-segment>One+</scale-segment>
-  <scale-segment selected>Samsung</scale-segment>
+<scale-segmented-button multi-select>
+  <scale-segment selected>Apple</scale-segment>
+  <scale-segment selected>One+</scale-segment>
+  <scale-segment>Samsung</scale-segment>
   <scale-segment>Huawei</scale-segment>
 </scale-segmented-button>
 ```
@@ -257,26 +257,22 @@ export const InvalidTemplate = (args, { argTypes }) => ({
 
 ```html
 <scale-segmented-button>
-  <scale-segment selected
-    ><scale-icon-weather-cloudy
-      slot="segment-icon"
-    ></scale-icon-weather-cloudy
-  ></scale-segment>
-  <scale-segmented-button
-    ><scale-icon-weather-rain
-      slot="segment-icon"
-    ></scale-icon-weather-rain
-  ></scale-segment>
-  <scale-segmented-button
-    ><scale-icon-weather-sunny
-      slot="segment-icon"
-    ></scale-icon-weather-sunny
-  ></scale-segment>
-  <scale-segmented-button
-    ><scale-icon-weahter-heavy-snow
-      slot="segment-icon"
-    ></scale-icon-weahter-heavy-snow
-  ></scale-segment>
+  <scale-segment selected>
+    <scale-icon-weather-cloudy slot="segment-icon">
+    </scale-icon-weather-cloudy>
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-weather-rain slot="segment-icon">
+    </scale-icon-weather-rain>
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-weather-sunny slot="segment-icon">
+    </scale-icon-weather-sunny>
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-weahter-heavy-snow slot="segment-icon">
+    </scale-icon-weahter-heavy-snow>
+  </scale-segment>
 </scale-segmented-button>
 ```
 
@@ -290,30 +286,26 @@ export const InvalidTemplate = (args, { argTypes }) => ({
 
 ```html
 <scale-segmented-button>
-  <scale-segmented-button
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >Apple</scale-segmented-button
-  >
-  <scale-segmented-button
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >One+</scale-segmented-button
-  >
-  <scale-segment selected
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >Samsung</scale-segmented-button
-  >
-  <scale-segment selected
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >Huawei</scale-segmented-button
-  >
+  <scale-segment selected>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    Apple
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    One+
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    Samsung
+    </scale-segment>
+  <scale-segment>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    Huawei
+    </scale-segment>
 </scale-segmented-button>
 ```
 
@@ -332,29 +324,25 @@ export const InvalidTemplate = (args, { argTypes }) => ({
 
 ```html
 <scale-segmented-button invalid>
-  <scale-segmented-button
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >Apple</scale-segmented-button
-  >
-  <scale-segmented-button
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >One+</scale-segmented-button
-  >
-  <scale-segmented-button
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >Samsung</scale-segmented-button
-  >
-  <scale-segmented-button
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >Huawei</scale-segmented-button
-  >
+  <scale-segment>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    Apple
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    One+
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    Samsung
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    Huawei
+  </scale-segment>
 </scale-segmented-button>
 ```

From ef6aa1e5ef887b8f242b140d9c03721110afc47a Mon Sep 17 00:00:00 2001
From: Felix Weber <felix.weber@iconstorm.de>
Date: Fri, 20 Jan 2023 14:40:56 +0100
Subject: [PATCH 2/3] style: format

---
 .../src/components/segmented-button/segmented-button.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/segmented-button/segmented-button.tsx b/packages/components/src/components/segmented-button/segmented-button.tsx
index 55949e25f5..771b4428a7 100644
--- a/packages/components/src/components/segmented-button/segmented-button.tsx
+++ b/packages/components/src/components/segmented-button/segmented-button.tsx
@@ -167,7 +167,9 @@ export class SegmentedButton {
       return -1;
     } else {
       const allSegments = this.getAllSegments();
-      const selectedIndex = allSegments.findIndex((el: HTMLScaleSegmentElement) => el.selected === true);
+      const selectedIndex = allSegments.findIndex(
+        (el: HTMLScaleSegmentElement) => el.selected === true
+      );
       return selectedIndex;
     }
   }

From eeabb8f77100b32a46a019aea712ff19b40b7110 Mon Sep 17 00:00:00 2001
From: Felix Weber <felix.weber@iconstorm.de>
Date: Fri, 20 Jan 2023 14:54:19 +0100
Subject: [PATCH 3/3] test: update snapshot

---
 .../src/components/segment/__snapshots__/segment.spec.ts.snap   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/segment/__snapshots__/segment.spec.ts.snap b/packages/components/src/components/segment/__snapshots__/segment.spec.ts.snap
index 8dcb2cda92..5fbf4a3cae 100644
--- a/packages/components/src/components/segment/__snapshots__/segment.spec.ts.snap
+++ b/packages/components/src/components/segment/__snapshots__/segment.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`Segment should match standard snapshot 1`] = `
     <button aria-description="deselected" class="segment segment--small" id="segment-0" part="segment small" type="button">
       <div class="segment--mask">
         <div class="success-icon-container">
-          <scale-icon-action-success accessibility-title="success" class="scale-icon-action-success" selected="" size="14"></scale-icon-action-success>
+          <scale-icon-action-success aria-hidden="true" class="scale-icon-action-success" selected="" size="14"></scale-icon-action-success>
         </div>
         <div class="icon-container">
           <slot name="segment-icon"></slot>