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/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx b/packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx index 402596005d..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'; @@ -8,25 +8,105 @@ import liveRegionBadAngularSample from './liveregion-bad-angular.sample.html?raw # Accessibility -
- TODO: write accessibility page -
+
+
+

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 +
+
## Forms -### Grouping +### Disabled state -TODO: write accessibility guide about grouping form elements -https://www.accessibility-developer-guide.com/examples/forms/grouping-with-fieldset-legend/ +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.
      • +
    +
    • +
+
+
-### Labels +### Form bad example -TODO: write accessibility guide about form labels (visible and invisible), aria-label, ... + -### Disabled state +### Form good example -TODO: write accessibility guide about disabled states on input, textarea, select, select-options, -... + ## Live region 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`
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+
+ + +
+
+
+
+ +
+
+ `, +}; diff --git a/packages/documentation/src/stories/getting-started/migration-guide/migrationv6-7.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/migrationv6-7.component.ts index bd0e9fdb86..040ac1899c 100644 --- a/packages/documentation/src/stories/getting-started/migration-guide/migrationv6-7.component.ts +++ b/packages/documentation/src/stories/getting-started/migration-guide/migrationv6-7.component.ts @@ -116,8 +116,8 @@ export class MigrationV67Component extends LitElement {