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>