From f2968b9af1b700c4cb59addcc0791a69e1ab6f8d Mon Sep 17 00:00:00 2001
From: Muhammad Bashir <bashirkarimi5@gmail.com>
Date: Mon, 9 Sep 2024 07:47:44 +0200
Subject: [PATCH] fix: stop separation of heading and sub heading by screen
 reader (#3491)

Co-authored-by: karimim <muhammad.karimi@post.ch>
---
 .changeset/clean-icons-complain.md                          | 6 ++++++
 .../src/stories/components/heading/heading.stories.ts       | 3 +--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/clean-icons-complain.md

diff --git a/.changeset/clean-icons-complain.md b/.changeset/clean-icons-complain.md
new file mode 100644
index 0000000000..8d54e4d6e5
--- /dev/null
+++ b/.changeset/clean-icons-complain.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Improved accessibility of headings with subheadings by removing the <br> element and added the utility class d-block. Consult https://design-system.post.ch/?path=/docs/7ecd87f1-de96-4e39-a057-ba1798eb6959--docs for updated markup.
diff --git a/packages/documentation/src/stories/components/heading/heading.stories.ts b/packages/documentation/src/stories/components/heading/heading.stories.ts
index a81568333e..1b992dad5d 100644
--- a/packages/documentation/src/stories/components/heading/heading.stories.ts
+++ b/packages/documentation/src/stories/components/heading/heading.stories.ts
@@ -89,8 +89,7 @@ export const Default: Story = {
     const tagName = unsafeStatic(args.level);
     const content = args.showSubtitle
       ? html`
-          <span>${args.title}</span>
-          <br />
+          <span class="d-block">${args.title}</span>
           <span class="fw-light">${args.subtitle}</span>
         `
       : args.title;