update

docs/content/components/content/section-message/section-message.mdx

@@ -10,6 +10,10 @@ There are currently four different variants of the `<SectionMessage>` component
 
 ## Anatomy
 
+The section message is build within a container which includes an icon (only in b2b theme) to support the message and a title. The actual content of section messages is located under the title.
+
+Optionally, you can add a button to close the message.
+
 <Image
   src="/sectionmessage/sectionmessage-anatomy.jpg"
   alt="Anatomy of a SectionMessage"
@@ -26,15 +30,35 @@ There are currently four different variants of the `<SectionMessage>` component
 
 ## Usage
 
-Section messages should be used when you need to display important feedback related to a specific section of the page. Unlike modals, section messages stay on the page without interrupting the user's workflow.
+Section messages are ideal for displaying important feedback related to a specific section of the page. Unlike modal dialogs, which interrupt the user's workflow, section messages remain visible without blocking interaction with other parts of the interface.
+
+<Do>
+  <Do.Description>
+    <ul>
+      <li>
+        The section message title should make the topic or purpose of the
+        message clear.
+      </li>
+      <li>
+        The content provides a brief description of the event that has occurred
+        on the page
+      </li>
+    </ul>
+  </Do.Description>
+</Do>
 
-### Info Section Message
+### Position
 
-This is the default info `<SectionMessage>`. The color is in a blue tone and contains the [`<Info>`](/foundations/icons/#info) icon.
+They should be positioned close to the relevant content, typically directly above, to ensure users can easily identify the relationship between the message and the affected area.
 
-<ComponentDemo file="./section-message-info.demo.tsx" />
+<Image
+  width="900"
+  height="500"
+  src="/dosAndDonts_message_position.png"
+  alt="Do and donts clarity"
+/>
 
-### Warning Section Message
+### Dismissable message
 
 Here you can see the warning `<SectionMessage>`. The color is in a yellow tone and contains the[`<Notification>`](/foundations/icons/#info) icon.
 
@@ -46,6 +70,8 @@ The error `<SectionMessage>` is colored in a red tone and contains the [`<Exclam
 
 ## Props
 
+<StorybookHintMessage component={title} />
+
 ### SectionMessage
 
 <PropsTable component={title} />

packages/components/src/SectionMessage/SectionMessage.tsx

@@ -70,6 +70,9 @@ export interface SectionMessageProps {
    * The children of the component.
    */
   children?: ReactNode;
+  /**
+   * Adds a close button, makes the section message dismissable.
+   */
   closeButton?: boolean;
 }
 
@@ -114,10 +117,11 @@ export const SectionMessage = ({
         </div>
         {closeButton && (
           <button
+            aria-label="close"
             className="h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0 [grid-area:close]"
             onClick={handleClose}
           >
-            <svg viewBox="0 0 20 20" fill="currentColor">
+            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
               <path
                 fillRule="evenodd"
                 clipRule="evenodd"