From fbe8bd622fd4f207d19508b8424bf9f9e555d651 Mon Sep 17 00:00:00 2001 From: Nattaya Buck <166115007+bucknatt@users.noreply.github.com> Date: Thu, 11 Sep 2025 15:11:39 +0200 Subject: [PATCH 1/6] chore(docs): added `

`-tag around dialog content in Default Template in stories on docs --- .../src/components/post-accordion-item/readme.md | 10 +++++----- .../src/stories/components/dialog/dialog.stories.ts | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/src/components/post-accordion-item/readme.md b/packages/components/src/components/post-accordion-item/readme.md index 2c56aa31cb..7a3d664976 100644 --- a/packages/components/src/components/post-accordion-item/readme.md +++ b/packages/components/src/components/post-accordion-item/readme.md @@ -34,11 +34,11 @@ Type: `Promise` ## Slots -| Slot | Description | -| ----------- | ------------------------------------------------------------------- | -| `"default"` | Slot for placing content within the accordion item's body. | -| `"header"` | Slot for placing custom content within the accordion item's header. | -| `"logo"` | Slot for placing a logo before the header. | +| Slot | Description | +| ----------- | --------------------------------------------------------------------------- | +| `"default"` | Slot for placing content within the accordion item's body. | +| `"header"` | Slot for placing custom content within the accordion item's header. | +| `"logo"` | Slot for placing a logo in the accordion item’s header, before the content. | ## Shadow Parts diff --git a/packages/documentation/src/stories/components/dialog/dialog.stories.ts b/packages/documentation/src/stories/components/dialog/dialog.stories.ts index e162545ef7..f30eaabcdc 100644 --- a/packages/documentation/src/stories/components/dialog/dialog.stories.ts +++ b/packages/documentation/src/stories/components/dialog/dialog.stories.ts @@ -148,7 +148,7 @@ const Template = {

${postDialogIcon}

${args.title}

-
${args.content}
+

${args.content}

${getControls()}
${postDialogCloseButton}
From 006654fcbcf4db8f7e8ae4429cc8c50ae2fa624e Mon Sep 17 00:00:00 2001 From: Nattaya Buck <166115007+bucknatt@users.noreply.github.com> Date: Thu, 11 Sep 2025 15:46:16 +0200 Subject: [PATCH 2/6] fix(docs): added changeset --- .changeset/four-monkeys-buy.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/four-monkeys-buy.md diff --git a/.changeset/four-monkeys-buy.md b/.changeset/four-monkeys-buy.md new file mode 100644 index 0000000000..904db38063 --- /dev/null +++ b/.changeset/four-monkeys-buy.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': patch +--- + +Added `

`-tag around dialog content in stories, required for accessibility. From bc66bca08e86822a3adca8984023cae5985b9478 Mon Sep 17 00:00:00 2001 From: Nattaya Buck <166115007+bucknatt@users.noreply.github.com> Date: Fri, 12 Sep 2025 07:42:08 +0200 Subject: [PATCH 3/6] fix(tests): wait in popopover test for container to be not.be.visible --- packages/components/cypress/e2e/popovercontainer.cy.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/cypress/e2e/popovercontainer.cy.ts b/packages/components/cypress/e2e/popovercontainer.cy.ts index e0cd9f65fb..d1b52a95d2 100644 --- a/packages/components/cypress/e2e/popovercontainer.cy.ts +++ b/packages/components/cypress/e2e/popovercontainer.cy.ts @@ -36,6 +36,7 @@ describe('popovercontainer', { baseUrl: null, includeShadowDom: true }, () => { cy.get('@container').should('be.visible'); cy.get(selector).should('exist'); await container.hide(); + cy.wait(1000); cy.get('@container').should('not.be.visible'); cy.get(selector).should('not.exist'); await container.toggle(trigger); From c9584ed1ab521ce39e07f156abef3d6670147adf Mon Sep 17 00:00:00 2001 From: Nattaya Buck <166115007+bucknatt@users.noreply.github.com> Date: Thu, 18 Sep 2025 13:20:55 +0200 Subject: [PATCH 4/6] chore(styles): updated button intendiation to be seperated on two lines with `flexdirection: column` on dialog styles --- packages/styles/src/components/dialog.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/components/dialog.scss b/packages/styles/src/components/dialog.scss index 650bcef14e..f9c77ceb2f 100644 --- a/packages/styles/src/components/dialog.scss +++ b/packages/styles/src/components/dialog.scss @@ -129,7 +129,7 @@ dialog > .dialog-grid { padding-block: tokens.get('utility-gap-16'); display: flex; flex-wrap: wrap; - flex-direction: row-reverse; + flex-direction: column; gap: tokens.get('utility-gap-16'); background-color: inherit; From 287f769d86540f4e80118b0343dc3b4f4d10868a Mon Sep 17 00:00:00 2001 From: Nattaya Buck <166115007+bucknatt@users.noreply.github.com> Date: Thu, 18 Sep 2025 16:08:57 +0200 Subject: [PATCH 5/6] chore(styles): reverted changes to flex-direction --- packages/styles/src/components/dialog.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/components/dialog.scss b/packages/styles/src/components/dialog.scss index 92fdba75f2..c4f4152af1 100644 --- a/packages/styles/src/components/dialog.scss +++ b/packages/styles/src/components/dialog.scss @@ -162,7 +162,7 @@ dialog > .dialog-grid { padding-top: tokens.get('utility-gap-16'); display: flex; flex-wrap: wrap; - flex-direction: column; + flex-direction: row-reverse; gap: tokens.get('utility-gap-16'); background-color: inherit; From f59d637fc4a32833b6260778ce04350cb75640c1 Mon Sep 17 00:00:00 2001 From: Nattaya Buck <166115007+bucknatt@users.noreply.github.com> Date: Thu, 25 Sep 2025 15:43:27 +0200 Subject: [PATCH 6/6] fix(docs): reverted changes in cypress e2e, updated changeset --- .changeset/four-monkeys-buy.md | 2 +- packages/components/cypress/e2e/popovercontainer.cy.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/.changeset/four-monkeys-buy.md b/.changeset/four-monkeys-buy.md index 904db38063..a9f64e0751 100644 --- a/.changeset/four-monkeys-buy.md +++ b/.changeset/four-monkeys-buy.md @@ -2,4 +2,4 @@ '@swisspost/design-system-documentation': patch --- -Added `

`-tag around dialog content in stories, required for accessibility. +Improved `dialog` component accessibility by adding proper paragraph markup around text content. diff --git a/packages/components/cypress/e2e/popovercontainer.cy.ts b/packages/components/cypress/e2e/popovercontainer.cy.ts index d1b52a95d2..e0cd9f65fb 100644 --- a/packages/components/cypress/e2e/popovercontainer.cy.ts +++ b/packages/components/cypress/e2e/popovercontainer.cy.ts @@ -36,7 +36,6 @@ describe('popovercontainer', { baseUrl: null, includeShadowDom: true }, () => { cy.get('@container').should('be.visible'); cy.get(selector).should('exist'); await container.hide(); - cy.wait(1000); cy.get('@container').should('not.be.visible'); cy.get(selector).should('not.exist'); await container.toggle(trigger);