From d3c88083df623d234f6f5518a43690858f1573ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?= <12294151+imagoiq@users.noreply.github.com> Date: Tue, 9 Apr 2024 11:30:31 +0200 Subject: [PATCH 1/4] fix(styles): Alert actions button color contrast was not met with success background color (#2845) ### What From design files, text color of alert actions should be white on dark background (currently, it's 80% white as it's based on the `--post-black-80` variable, but inverted). To define another color, I needed to add the alert classes and selector (for the web component) into the dark-backgrounds variables. The notification name list was moved to color file to avoid recursion issue (perhaps we could put it somewhere else). I'll check with design what to do with hover style. --- .changeset/strange-poems-occur.md | 5 +++ packages/components/cypress/e2e/alert.cy.ts | 8 +---- packages/styles/src/placeholders/_button.scss | 2 ++ packages/styles/src/placeholders/_close.scss | 4 +++ packages/styles/src/variables/_color.scss | 31 +++++++++++++++++-- .../variables/components/_notification.scss | 1 + 6 files changed, 42 insertions(+), 9 deletions(-) create mode 100644 .changeset/strange-poems-occur.md diff --git a/.changeset/strange-poems-occur.md b/.changeset/strange-poems-occur.md new file mode 100644 index 0000000000..6e8aa009c5 --- /dev/null +++ b/.changeset/strange-poems-occur.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Fixed color contrast of alert component on success background color. diff --git a/packages/components/cypress/e2e/alert.cy.ts b/packages/components/cypress/e2e/alert.cy.ts index 55f9f5a571..6a13348db8 100644 --- a/packages/components/cypress/e2e/alert.cy.ts +++ b/packages/components/cypress/e2e/alert.cy.ts @@ -34,12 +34,6 @@ describe('alert', () => { describe('Accessibility', () => { it('Has no detectable a11y violations on load for all variants', () => { cy.getSnapshots('post-alert'); - cy.checkA11y('#root-inner', { - rules: { - 'color-contrast': { - enabled: false, - }, - }, - }); + cy.checkA11y('#root-inner'); }); }); diff --git a/packages/styles/src/placeholders/_button.scss b/packages/styles/src/placeholders/_button.scss index 1b3a93c77a..850b63d5e6 100644 --- a/packages/styles/src/placeholders/_button.scss +++ b/packages/styles/src/placeholders/_button.scss @@ -30,6 +30,8 @@ // Invert icon on dark backgrounds @include color-mx.on-dark-background() { + color: var(--post-contrast-color); + .pi { filter: invert(1); } diff --git a/packages/styles/src/placeholders/_close.scss b/packages/styles/src/placeholders/_close.scss index 6af35e8631..19dfbc6c4f 100644 --- a/packages/styles/src/placeholders/_close.scss +++ b/packages/styles/src/placeholders/_close.scss @@ -24,6 +24,10 @@ width: close.$close-size; } + @include color-mx.on-dark-background() { + color: var(--post-contrast-color); + } + @include utilities-mx.not-disabled-focus-hover() { color: close.$close-hover-color; } diff --git a/packages/styles/src/variables/_color.scss b/packages/styles/src/variables/_color.scss index 18d5a926e8..56ee1197e6 100644 --- a/packages/styles/src/variables/_color.scss +++ b/packages/styles/src/variables/_color.scss @@ -162,6 +162,23 @@ $background-colors: map.merge( ) ); +$notification-colors: () !default; +$notification-colors: list.join( + $notification-colors, + ( + // When changed, check $notification-variants as well in packages/styles/src/variables/components/_notification.scss + 'primary' $gray-80, + 'success' $success, + 'danger' $error, + 'warning' $warning, + 'info' $info, + 'gray' $gray, + // deprecated + 'notification' $gray-80, + 'error' $error + ) +); + // Merge with the other color maps $background-colors: map.merge($background-colors, $signal-colors); $background-colors: map.merge($background-colors, $signal-background-colors); @@ -169,8 +186,18 @@ $background-colors: map.merge($background-colors, $accent-colors); // Compile a list of dark backgrounds, used in the :is selector mixin at mixins/color $dark-backgrounds: () !default; -@each $colorname, $color in $background-colors { +@each $color-name, $color in $background-colors { + @if (contrast-fn.light-or-dark($color) == 'dark') { + $dark-backgrounds: list.append($dark-backgrounds, '.bg-#{$color-name}', $separator: comma); + } +} +@each $color-name, $color in $notification-colors { @if (contrast-fn.light-or-dark($color) == 'dark') { - $dark-backgrounds: list.append($dark-backgrounds, '.bg-#{$colorname}', $separator: comma); + $dark-backgrounds: list.append($dark-backgrounds, '.alert-#{$color-name}', $separator: comma); + $dark-backgrounds: list.append( + $dark-backgrounds, + 'post-alert[type=#{$color-name}]', + $separator: comma + ); } } diff --git a/packages/styles/src/variables/components/_notification.scss b/packages/styles/src/variables/components/_notification.scss index 342d1a68c7..4267163599 100644 --- a/packages/styles/src/variables/components/_notification.scss +++ b/packages/styles/src/variables/components/_notification.scss @@ -73,6 +73,7 @@ $notification-variants: () !default; $notification-variants: list.join( $notification-variants, ( + // When changed, check $notification-variants as well in packages/styles/src/variables/_color.scss 'primary' color.$primary 3134, 'success' color.$success 2105, 'warning' color.$warning 2104, From 93d080e9c36b4c1bf4e69f6523869286ac6607f8 Mon Sep 17 00:00:00 2001 From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com> Date: Tue, 9 Apr 2024 11:59:35 +0200 Subject: [PATCH 2/4] feat(documentation): add Swiss postal law citation to accessibility docs (#2763) Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> --- .../accessibility/accessibility.docs.mdx | 29 +++++++------------ 1 file changed, 10 insertions(+), 19 deletions(-) diff --git a/packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx b/packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx index 402596005d..fc4977d709 100644 --- a/packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx +++ b/packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx @@ -8,25 +8,16 @@ import liveRegionBadAngularSample from './liveregion-bad-angular.sample.html?raw # Accessibility -
- TODO: write accessibility page -
- -## Forms - -### Grouping - -TODO: write accessibility guide about grouping form elements -https://www.accessibility-developer-guide.com/examples/forms/grouping-with-fieldset-legend/ - -### Labels - -TODO: write accessibility guide about form labels (visible and invisible), aria-label, ... - -### Disabled state - -TODO: write accessibility guide about disabled states on input, textarea, select, select-options, -... +
+
+

Die Postdienste müssen so angeboten werden, dass Menschen mit Behinderungen +sie in qualitativer, quantitativer und wirtschaftlicher Hinsicht unter vergleichbaren +Bedingungen wie Menschen ohne Behinderungen beanspruchen können.

+
+
+ §14.7 Swiss postal law +
+
## Live region From 3629cf9ecaaa8fc84602a71f2b7d34f31cefbe2a Mon Sep 17 00:00:00 2001 From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com> Date: Tue, 9 Apr 2024 12:18:25 +0200 Subject: [PATCH 3/4] feat(documentation): accessibility docs disabled state (#2812) --- .../accessibility/accessibility.docs.mdx | 91 +++++- .../accessibility/accessibility.stories.ts | 287 ++++++++++++++++++ 2 files changed, 377 insertions(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx b/packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx index fc4977d709..60a12bf03b 100644 --- a/packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx +++ b/packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx @@ -1,4 +1,4 @@ -import { Meta, Source } from '@storybook/blocks'; +import { Meta, Source, Canvas } from '@storybook/blocks'; import * as AccessibilityStories from './accessibility.stories'; import liveRegionAtomicSample from './liveregion-atomic.sample.html?raw'; import liveRegionGoodAngularSample from './liveregion-good-angular.sample.html?raw'; @@ -19,6 +19,95 @@ Bedingungen wie Menschen ohne Behinderungen beanspruchen können.

+## Forms + +### Disabled state + +Disabled states of input fields or buttons pose many accessibility issues. + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Common use cases and how to handle them.
Disabled button on forms with required fields
+
    +
    ❌
  • Forms with required fields tend to have the send button disabled until all required fields are correctly filled. The issue here is that with long forms or on small devices it's sometimes hard to spot the one field that was missed.
    • +
+ + 		+
    +
    ✔️
  • Let the user make mistakes and help them to correct them. Mark the required fields with error messages, scroll to the first invalid field and help the user fill the form correctly.
    • +
+ +
Disabled button on form submit
+
    +
    ❌
  • The user submits a form. While the client waits for the server response and to prevent double submission, the submit button gets disabled. The reason why this button gets disabled might not be obvious.
    • +
+ 		+
    +
    ✔️
  • Provide a loading indicator or display a message that shows current progress when uploading large files. Disable duplicate form submissions internally. Inform users that the form was already submitted if they continue to click submit and offer a remedy if the request timed out or an error occurred on the server (reload the page, retry form submission, ...).
    • +
+
Disabled select options
+
    +
    ❌
  • Some options in a radio button group or select field are disabled because they are not available at this time or with the current configuration. This can be confusing because it's often unclear why these options are not available or how to enable them.
    • +
+ 		+
    +
    ✔️
    +
  • + There are multiple possible solutions, depending on the situation: +
      +
    • Don't display options that cannot be selected and reduce clutter in your UI.
      • +
    • If you need to inform the user that there are potentially more possible options, show instructions on how to enable these options.
      • +
    • Display read-only data as text and not in disabled form fields.
      • +
    +
    • +
+
+
+ +### Form bad example + + + +### Form good example + + + ## Live region A live region allows you to notify the user about a dynamic change without requiring the page to reload e.g. alert, loading status, chat logs, update of a product cart, feeds, etc. diff --git a/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts b/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts index db48e56637..9904048ec6 100644 --- a/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts +++ b/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts @@ -1,5 +1,6 @@ import { StoryObj } from '@storybook/web-components'; import { MetaExtended } from '../../../../types'; +import { html } from 'lit'; const meta: MetaExtended = { id: '46da78e8-e83b-4ca1-aaf6-bbc662efef14', @@ -14,3 +15,289 @@ export default meta; type Story = StoryObj; export const Default: Story = {}; + +export const FormGoodExample: Story = { + render: () => html` +
+
+
+ + +
Please enter your firstname.
+
+
+ + +
Please enter your lastname.
+
+
+
+
+ + +
Please enter your phone number.
+
+
+ + +
Please enter a valid email address.
+
+
+
+
+ + +
+
+ + +
Please enter your city.
+
+
+
+
+ + +
Please enter your country.
+
+
+ + +
Please enter your zip code.
+
+
+
+
+ + +
Please answer this question.
+
+
+ + +
+
+
+
+ + +
+
+ + +
Please answer this question.
+
+
+
+
+
+ + +
You must agree to the terms and conditions.
+
+
+
+
+ +
+
+ + `, +}; + +export const FormBadExample: Story = { + render: () => html`
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+
+ + +
+
+
+
+ +
+
+ `, +}; From 92028003c7e7db4012a36ac128b4b38e1b1fa3d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 9 Apr 2024 15:36:57 +0200 Subject: [PATCH 4/4] feat(documentation): update migration guide (v6-to-v7) with breaking changes in styles and component packages (#2880) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .changeset/shiny-zoos-accept.md | 2 +- .../migrationv4-5-manual-list.component.ts | 104 ++++++------ .../migrationv5-6.component.ts | 6 +- .../migrationv6-7.component.ts | 159 ++++++++++++++---- 4 files changed, 184 insertions(+), 87 deletions(-) diff --git a/.changeset/shiny-zoos-accept.md b/.changeset/shiny-zoos-accept.md index 5450c5d474..9b1386ed89 100644 --- a/.changeset/shiny-zoos-accept.md +++ b/.changeset/shiny-zoos-accept.md @@ -6,7 +6,7 @@ --- - Removed variables `$success-green`, `$error-red`, `$warning-orange`, `$success-text`, `$error-text`, `$danger` as well as the Sass map `$contextual-colors`. - Instead use the variables `$success`, `$error`, `$warning`, `$error` and the Sass map `$signal-colors`. + Instead use the variables `$success`, `$error`, `$warning` and the Sass map `$signal-colors`. - Updated the Sass map `$signal-colors` keys and added a new Sass map `$signal-background-colors`. - Updated the Sass map `$background-colors` and all the dependant packages accordingly. diff --git a/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5-manual-list.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5-manual-list.component.ts index 710f84afd0..4f27864616 100644 --- a/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5-manual-list.component.ts +++ b/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5-manual-list.component.ts @@ -129,7 +129,7 @@ export class MigrationV45ManualListComponent extends LitElement { />