Date: Tue, 5 Sep 2023 17:18:45 +0200
Subject: [PATCH 2/6] fix: set aria-current to false when changed (#2015)
* fix: set aria-current to false when changed
* fix: add bold style to button
---
.../telekom/telekom-nav-item/readme.md | 14 +++++++-------
.../telekom-nav-item/telekom-nav-item.css | 2 +-
.../telekom-nav-item/telekom-nav-item.tsx | 18 ++++++++++++------
3 files changed, 20 insertions(+), 14 deletions(-)
diff --git a/packages/components/src/components/telekom/telekom-nav-item/readme.md b/packages/components/src/components/telekom/telekom-nav-item/readme.md
index ad62ad7940..b988756be2 100644
--- a/packages/components/src/components/telekom/telekom-nav-item/readme.md
+++ b/packages/components/src/components/telekom/telekom-nav-item/readme.md
@@ -7,13 +7,13 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| --------------- | ----------------- | ----------- | --------- | ----------- |
-| `active` | `active` | | `boolean` | `false` |
-| `hideOnDesktop` | `hide-on-desktop` | | `boolean` | `false` |
-| `hideOnMobile` | `hide-on-mobile` | | `boolean` | `false` |
-| `role` | `role` | | `string` | `'none'` |
-| `variant` | `variant` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| --------------- | ----------------- | ----------- | ----------------------------------------------------------------------------------- | ------------ |
+| `active` | `active` | | `boolean` | `false` |
+| `hideOnDesktop` | `hide-on-desktop` | | `boolean` | `false` |
+| `hideOnMobile` | `hide-on-mobile` | | `boolean` | `false` |
+| `role` | `role` | | `string` | `'none'` |
+| `variant` | `variant` | | `"functions" \| "lang-switcher" \| "main-nav" \| "meta-nav" \| "meta-nav-external"` | `'main-nav'` |
## Dependencies
diff --git a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
index cc8b6a86ec..8afb1cfc6b 100644
--- a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
+++ b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
@@ -326,7 +326,7 @@
.scale-telekom-nav-list[variant='lang-switcher']
> .scale-telekom-nav-item
- > a:where([aria-current='true']) {
+ > :where(a, button):where([aria-current='true']) {
font-weight: var(--telekom-typography-font-weight-extra-bold);
}
diff --git a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.tsx b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.tsx
index 88d08cb169..004410b0b9 100644
--- a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.tsx
+++ b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.tsx
@@ -37,7 +37,12 @@ export class TelekomNavItem {
@Element() hostElement: HTMLStencilElement;
@Prop({ reflect: true }) active?: boolean = false;
- @Prop({ reflect: true }) variant?: string;
+ @Prop({ reflect: true }) variant?:
+ | 'meta-nav-external'
+ | 'meta-nav'
+ | 'lang-switcher'
+ | 'main-nav'
+ | 'functions' = 'main-nav';
@Prop({ reflect: true }) role: string | null = 'none';
@Prop({ reflect: true }) hideOnMobile?: boolean = false;
@Prop({ reflect: true }) hideOnDesktop?: boolean = false;
@@ -48,11 +53,12 @@ export class TelekomNavItem {
if (this.linkElement == null) {
return;
}
- if (this.variant === 'lang-switcher' && this.active) {
- toggleAriaCurrent(this.linkElement, newValue, 'true');
- }
- if (this.variant === 'main-nav' && this.active) {
- toggleAriaCurrent(this.linkElement, newValue, 'true');
+ if (this.variant === 'lang-switcher' || this.variant === 'main-nav') {
+ toggleAriaCurrent(
+ this.linkElement,
+ newValue,
+ this.active ? 'true' : 'false'
+ );
}
}
From 3de029b92458e135b9eafa3a7ed7015503fe41a7 Mon Sep 17 00:00:00 2001
From: felix-ico <97440128+felix-ico@users.noreply.github.com>
Date: Tue, 5 Sep 2023 17:19:19 +0200
Subject: [PATCH 3/6] fix: ignore blur when inside a tab panel (#2111)
* fix: ignore blur when inside a tab panel
* fix: handle deeply nested dropdown-select
---
.../src/components/dropdown-select/dropdown-select.tsx | 3 +++
1 file changed, 3 insertions(+)
diff --git a/packages/components/src/components/dropdown-select/dropdown-select.tsx b/packages/components/src/components/dropdown-select/dropdown-select.tsx
index c412c85358..b47960a288 100644
--- a/packages/components/src/components/dropdown-select/dropdown-select.tsx
+++ b/packages/components/src/components/dropdown-select/dropdown-select.tsx
@@ -233,6 +233,9 @@ export class DropdownSelect {
}
connectedCallback() {
+ if (this.hostElement.closest('scale-tab-panel')) {
+ this.ignoreBlur = true;
+ }
statusNote({ source: this.hostElement, tag: 'beta' });
this.currentIndex =
readOptions(this.hostElement).findIndex(
From fa502cfcc17fca54d87899901629c4eb29920493 Mon Sep 17 00:00:00 2001
From: felix-ico <97440128+felix-ico@users.noreply.github.com>
Date: Wed, 6 Sep 2023 10:15:19 +0200
Subject: [PATCH 4/6] fix: set aria-label on nested button instead of
scale-button (#2115)
---
.../src/components/data-grid/cell-handlers/html-cell.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx
index ca79ada96b..00a2acd381 100644
--- a/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx
+++ b/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx
@@ -27,7 +27,7 @@ export const HTMLCell: Cell = {
variant="secondary"
size="small"
icon-only
- aria-label={`Activate to ${
+ inner-aria-label={`Activate to ${
content.isExpanded ? 'collapse' : 'expand'
} content`}
onClick={() => {
From 374709357745cfa7d1618e445a0b175581ff3ddd Mon Sep 17 00:00:00 2001
From: felix-ico <97440128+felix-ico@users.noreply.github.com>
Date: Wed, 6 Sep 2023 10:45:06 +0200
Subject: [PATCH 5/6] fix: tk-network (#2117)
* fix: do not show placeholder if readonly
* fix: chrome background color on dark mode autocomplete
* fix: switch hcm
* fix: readonly hcm border
---
.../components/src/components/switch/switch.css | 9 +++++++++
.../src/components/text-field/text-field.css | 14 ++++++++++++++
.../src/components/text-field/text-field.tsx | 4 +++-
3 files changed, 26 insertions(+), 1 deletion(-)
diff --git a/packages/components/src/components/switch/switch.css b/packages/components/src/components/switch/switch.css
index cf95c1cb91..98b59981b5 100644
--- a/packages/components/src/components/switch/switch.css
+++ b/packages/components/src/components/switch/switch.css
@@ -301,3 +301,12 @@ scale-switch scale-icon-action-success {
[data-platform='android'] .switch--disabled .switch__thumb {
color: var(--telekom-color-ui-strong);
}
+
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+ .switch__toggle {
+ border: 1px solid;
+ }
+ scale-icon-action-checkmark {
+ visibility: hidden !important;
+ }
+}
diff --git a/packages/components/src/components/text-field/text-field.css b/packages/components/src/components/text-field/text-field.css
index ca92dc0461..ae9facd6bd 100644
--- a/packages/components/src/components/text-field/text-field.css
+++ b/packages/components/src/components/text-field/text-field.css
@@ -297,3 +297,17 @@ input[type='month']::-webkit-calendar-picker-indicator {
position: absolute;
right: 12px;
}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+ color-scheme: dark;
+}
+
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+ .text-field--readonly input,
+ .text-field--readonly .text-field__control {
+ border: 1px solid;
+ }
+}
diff --git a/packages/components/src/components/text-field/text-field.tsx b/packages/components/src/components/text-field/text-field.tsx
index f9e0bb4ac0..9be520528d 100644
--- a/packages/components/src/components/text-field/text-field.tsx
+++ b/packages/components/src/components/text-field/text-field.tsx
@@ -269,7 +269,9 @@ export class TextField {
onFocus={this.handleFocus}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
- {...(!!this.placeholder ? { placeholder: this.placeholder } : {})}
+ {...(!!this.placeholder && !this.readonly
+ ? { placeholder: this.placeholder }
+ : {})}
disabled={this.disabled}
readonly={this.readonly}
autocomplete={this.inputAutocomplete}
From 2ada623157dd5accccf381bbe7f8bc5e82d0a703 Mon Sep 17 00:00:00 2001
From: felixw
Date: Wed, 6 Sep 2023 16:56:16 +0200
Subject: [PATCH 6/6] chore(release): publish
---
CHANGELOG.md | 15 +++++++++++++++
lerna.json | 2 +-
packages/components-angular/CHANGELOG.md | 8 ++++++++
packages/components-angular/package.json | 2 +-
packages/components-react/CHANGELOG.md | 8 ++++++++
packages/components-react/package.json | 2 +-
packages/components-vue/CHANGELOG.md | 8 ++++++++
packages/components-vue/package.json | 2 +-
packages/components/CHANGELOG.md | 15 +++++++++++++++
packages/components/package.json | 4 ++--
packages/design-tokens/CHANGELOG.md | 8 ++++++++
packages/design-tokens/package.json | 2 +-
packages/storybook-vue/CHANGELOG.md | 8 ++++++++
packages/storybook-vue/package.json | 6 +++---
packages/visual-tests/CHANGELOG.md | 8 ++++++++
packages/visual-tests/package.json | 2 +-
16 files changed, 89 insertions(+), 11 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2af92c8551..750abf0887 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,21 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [3.0.0-beta.139](https://github.com/telekom/scale/compare/v3.0.0-beta.138...v3.0.0-beta.139) (2023-09-06)
+
+
+### Bug Fixes
+
+* ignore blur when inside a tab panel ([#2111](https://github.com/telekom/scale/issues/2111)) ([3de029b](https://github.com/telekom/scale/commit/3de029b92458e135b9eafa3a7ed7015503fe41a7))
+* set aria live on body part ([#2116](https://github.com/telekom/scale/issues/2116)) ([4c00769](https://github.com/telekom/scale/commit/4c00769ba49448a1ac2b8d8cb0d5874585b9ad24))
+* set aria-current to false when changed ([#2015](https://github.com/telekom/scale/issues/2015)) ([51c9019](https://github.com/telekom/scale/commit/51c9019b2a5bd0dfd96905ee804a1af321547dac))
+* set aria-label on nested button instead of scale-button ([#2115](https://github.com/telekom/scale/issues/2115)) ([fa502cf](https://github.com/telekom/scale/commit/fa502cfcc17fca54d87899901629c4eb29920493))
+* tk-network ([#2117](https://github.com/telekom/scale/issues/2117)) ([3747093](https://github.com/telekom/scale/commit/374709357745cfa7d1618e445a0b175581ff3ddd))
+
+
+
+
+
# [3.0.0-beta.138](https://github.com/telekom/scale/compare/v3.0.0-beta.137...v3.0.0-beta.138) (2023-08-29)
diff --git a/lerna.json b/lerna.json
index 06ac9c3a05..d95fe69b6d 100644
--- a/lerna.json
+++ b/lerna.json
@@ -7,7 +7,7 @@
"--pure-lockfile"
],
"useWorkspaces": true,
- "version": "3.0.0-beta.138",
+ "version": "3.0.0-beta.139",
"command": {
"version": {
"allowBranch": "main"
diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
index b9a319ef3f..d34da70496 100644
--- a/packages/components-angular/CHANGELOG.md
+++ b/packages/components-angular/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [3.0.0-beta.139](https://github.com/telekom/scale/compare/v3.0.0-beta.138...v3.0.0-beta.139) (2023-09-06)
+
+**Note:** Version bump only for package @telekom/scale-components-angular
+
+
+
+
+
# [3.0.0-beta.138](https://github.com/telekom/scale/compare/v3.0.0-beta.137...v3.0.0-beta.138) (2023-08-29)
**Note:** Version bump only for package @telekom/scale-components-angular
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index fe8cbb59ee..e39fccecce 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@telekom/scale-components-angular",
- "version": "3.0.0-beta.138",
+ "version": "3.0.0-beta.139",
"description": "Angular specific wrapper for @telekom/scale-components",
"license": "MPL-2.0",
"homepage": "https://github.com/telekom/scale",
diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md
index 231a33ea8a..6260d805ba 100644
--- a/packages/components-react/CHANGELOG.md
+++ b/packages/components-react/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [3.0.0-beta.139](https://github.com/telekom/scale/compare/v3.0.0-beta.138...v3.0.0-beta.139) (2023-09-06)
+
+**Note:** Version bump only for package @telekom/scale-components-react
+
+
+
+
+
# [3.0.0-beta.138](https://github.com/telekom/scale/compare/v3.0.0-beta.137...v3.0.0-beta.138) (2023-08-29)
**Note:** Version bump only for package @telekom/scale-components-react
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 44f097d138..8f3ae586b9 100755
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,7 +1,7 @@
{
"name": "@telekom/scale-components-react",
"sideEffects": false,
- "version": "3.0.0-beta.138",
+ "version": "3.0.0-beta.139",
"description": "React proxy for @telekom/scale-components",
"license": "MPL-2.0",
"homepage": "https://github.com/telekom/scale",
diff --git a/packages/components-vue/CHANGELOG.md b/packages/components-vue/CHANGELOG.md
index e181b070c9..03d1cfe2b0 100644
--- a/packages/components-vue/CHANGELOG.md
+++ b/packages/components-vue/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [3.0.0-beta.139](https://github.com/telekom/scale/compare/v3.0.0-beta.138...v3.0.0-beta.139) (2023-09-06)
+
+**Note:** Version bump only for package @telekom/scale-components-vue
+
+
+
+
+
# [3.0.0-beta.138](https://github.com/telekom/scale/compare/v3.0.0-beta.137...v3.0.0-beta.138) (2023-08-29)
**Note:** Version bump only for package @telekom/scale-components-vue
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
index bb334f9fda..0dd9a5e5d8 100644
--- a/packages/components-vue/package.json
+++ b/packages/components-vue/package.json
@@ -1,7 +1,7 @@
{
"name": "@telekom/scale-components-vue",
"sideEffects": false,
- "version": "3.0.0-beta.138",
+ "version": "3.0.0-beta.139",
"description": "Vue specific wrapper for @telekom/scale-components",
"license": "MPL-2.0",
"homepage": "https://github.com/telekom/scale",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index cbbdb975cd..57b65930cf 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -3,6 +3,21 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [3.0.0-beta.139](https://github.com/telekom/scale/compare/v3.0.0-beta.138...v3.0.0-beta.139) (2023-09-06)
+
+
+### Bug Fixes
+
+* ignore blur when inside a tab panel ([#2111](https://github.com/telekom/scale/issues/2111)) ([3de029b](https://github.com/telekom/scale/commit/3de029b92458e135b9eafa3a7ed7015503fe41a7))
+* set aria live on body part ([#2116](https://github.com/telekom/scale/issues/2116)) ([4c00769](https://github.com/telekom/scale/commit/4c00769ba49448a1ac2b8d8cb0d5874585b9ad24))
+* set aria-current to false when changed ([#2015](https://github.com/telekom/scale/issues/2015)) ([51c9019](https://github.com/telekom/scale/commit/51c9019b2a5bd0dfd96905ee804a1af321547dac))
+* set aria-label on nested button instead of scale-button ([#2115](https://github.com/telekom/scale/issues/2115)) ([fa502cf](https://github.com/telekom/scale/commit/fa502cfcc17fca54d87899901629c4eb29920493))
+* tk-network ([#2117](https://github.com/telekom/scale/issues/2117)) ([3747093](https://github.com/telekom/scale/commit/374709357745cfa7d1618e445a0b175581ff3ddd))
+
+
+
+
+
# [3.0.0-beta.138](https://github.com/telekom/scale/compare/v3.0.0-beta.137...v3.0.0-beta.138) (2023-08-29)
diff --git a/packages/components/package.json b/packages/components/package.json
index 74c903cde6..3a57be2ae6 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
{
"name": "@telekom/scale-components",
- "version": "3.0.0-beta.138",
+ "version": "3.0.0-beta.139",
"description": "Scale is the digital design system for Telekom products and experiences.",
"homepage": "https://github.com/telekom/scale",
"repository": {
@@ -72,7 +72,7 @@
"@floating-ui/dom": "^0.5.4",
"@stencil/core": "^2.17.0",
"@telekom/design-tokens": "1.0.0-beta.8",
- "@telekom/scale-design-tokens": "^3.0.0-beta.138",
+ "@telekom/scale-design-tokens": "^3.0.0-beta.139",
"classnames": "^2.2.6",
"stencil-inline-svg": "^1.0.1"
}
diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md
index 2bff641302..91b374930c 100644
--- a/packages/design-tokens/CHANGELOG.md
+++ b/packages/design-tokens/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [3.0.0-beta.139](https://github.com/telekom/scale/compare/v3.0.0-beta.138...v3.0.0-beta.139) (2023-09-06)
+
+**Note:** Version bump only for package @telekom/scale-design-tokens
+
+
+
+
+
# [3.0.0-beta.138](https://github.com/telekom/scale/compare/v3.0.0-beta.137...v3.0.0-beta.138) (2023-08-29)
**Note:** Version bump only for package @telekom/scale-design-tokens
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
index a1d06faf65..f02e33b3bc 100644
--- a/packages/design-tokens/package.json
+++ b/packages/design-tokens/package.json
@@ -1,6 +1,6 @@
{
"name": "@telekom/scale-design-tokens",
- "version": "3.0.0-beta.138",
+ "version": "3.0.0-beta.139",
"type": "module",
"description": "Design Tokens for the Scale Design System",
"homepage": "https://github.com/telekom/scale",
diff --git a/packages/storybook-vue/CHANGELOG.md b/packages/storybook-vue/CHANGELOG.md
index b64e0e2bf8..92d0fe7ab1 100644
--- a/packages/storybook-vue/CHANGELOG.md
+++ b/packages/storybook-vue/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [3.0.0-beta.139](https://github.com/telekom/scale/compare/v3.0.0-beta.138...v3.0.0-beta.139) (2023-09-06)
+
+**Note:** Version bump only for package @telekom/scale-storybook-vue
+
+
+
+
+
# [3.0.0-beta.138](https://github.com/telekom/scale/compare/v3.0.0-beta.137...v3.0.0-beta.138) (2023-08-29)
**Note:** Version bump only for package @telekom/scale-storybook-vue
diff --git a/packages/storybook-vue/package.json b/packages/storybook-vue/package.json
index 707c0e40bc..2aedf51bf6 100644
--- a/packages/storybook-vue/package.json
+++ b/packages/storybook-vue/package.json
@@ -2,7 +2,7 @@
"homepage": "https://telekom.github.io/scale",
"name": "@telekom/scale-storybook-vue",
"private": true,
- "version": "3.0.0-beta.138",
+ "version": "3.0.0-beta.139",
"main": "index.js",
"license": "MPL-2.0",
"devDependencies": {
@@ -32,8 +32,8 @@
"dependencies": {
"@storybook/addon-viewport": "^6.4.22",
"@telekom/design-tokens": "^1.0.0-beta.2",
- "@telekom/scale-components": "^3.0.0-beta.138",
- "@telekom/scale-components-vue": "^3.0.0-beta.138"
+ "@telekom/scale-components": "^3.0.0-beta.139",
+ "@telekom/scale-components-vue": "^3.0.0-beta.139"
},
"scripts": {
"prestart": "rm -rf node_modules/.cache/ && yes | cp -a ../components/dist/scale-components/fonts/* public/fonts/ && yes | cp -a ../components/dist/scale-components/scale-components.css public/",
diff --git a/packages/visual-tests/CHANGELOG.md b/packages/visual-tests/CHANGELOG.md
index 7f548e2401..a136f4fbd1 100644
--- a/packages/visual-tests/CHANGELOG.md
+++ b/packages/visual-tests/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [3.0.0-beta.139](https://github.com/telekom/scale/compare/v3.0.0-beta.138...v3.0.0-beta.139) (2023-09-06)
+
+**Note:** Version bump only for package @telekom/scale-visual-tests
+
+
+
+
+
# [3.0.0-beta.138](https://github.com/telekom/scale/compare/v3.0.0-beta.137...v3.0.0-beta.138) (2023-08-29)
**Note:** Version bump only for package @telekom/scale-visual-tests
diff --git a/packages/visual-tests/package.json b/packages/visual-tests/package.json
index f5f4b8801b..4442dd89f9 100644
--- a/packages/visual-tests/package.json
+++ b/packages/visual-tests/package.json
@@ -1,7 +1,7 @@
{
"name": "@telekom/scale-visual-tests",
"private": true,
- "version": "3.0.0-beta.138",
+ "version": "3.0.0-beta.139",
"main": "index.js",
"license": "MPL-2.0",
"scripts": {