fix: convert markdown dos and don's into ul with aria-label

docs/components/3d/overview.mdx

@@ -28,6 +28,16 @@ import 'echarts-gl';
 
 ## Dos and Don’ts
 
-- Do use with data that's best seen and interpreted in multiple dimensions
-- Don’t use 3D charts for simple data that can be effectively represented with 2D charts
-- Don’t overuse 3D charts as they can make the data harder to interpret
+<div class="dos-and-donts">
+  <div class="dos">
+    <ul aria-label="Recommended practices">
+      <li>Do use with data that's best seen and interpreted in multiple dimensions</li>
+    </ul>
+  </div>
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don’t use 3D charts for simple data that can be effectively represented with 2D charts</li>
+      <li>Don’t overuse 3D charts as they can make the data harder to interpret</li>
+    </ul>
+  </div>
+</div>

docs/components/application-header/guide.md

@@ -126,9 +126,19 @@ At breakpoint "sm" the layout changes in the following way:
 
 ## Dos and Don’ts
 
-- Do align other slot usages for Siemens applications with our team to keep a consistent look and feel
-- Do use the avatar dropdown for actions related to the current logged in user
-- Do test layout behavior at all breakpoints to ensure content remains accessible
-- Don’t overload the slots with too many elements to avoid losing clarity and hierarchy
-- Don’t use the avatar if your application does not support user profiles
-- Don’t rely on automatic overflow handling for complex layouts, instead reduce complexity
+<div class="dos-and-donts">
+  <div class="dos">
+    <ul aria-label="Recommended practices">
+      <li>Do align other slot usages for Siemens applications with our team to keep a consistent look and feel</li>
+      <li>Do use the avatar dropdown for actions related to the current logged in user</li>
+      <li>Do test layout behavior at all breakpoints to ensure content remains accessible</li>
+    </ul>
+  </div>
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don’t overload the slots with too many elements to avoid losing clarity and hierarchy</li>
+      <li>Don’t use the avatar if your application does not support user profiles</li>
+      <li>Don’t rely on automatic overflow handling for complex layouts, instead reduce complexity</li>
+    </ul>
+  </div>
+</div>

docs/components/application-menu/guide.md

@@ -44,8 +44,18 @@ The navigation menu is an essential part of your application. It offers a way to
 The application menu has two states: collapsed and expanded. The appearance of the states varies between screen sizes.
 ## Dos and Don’ts
 
-- Do use icons in second-level navigation items when it helps users to better understand and recognize them
-- Do use a custom tooltip text if the label is so long that it gets truncated or needs additional context
-- Don’t mix menu items with and without icons within a second-level navigation category
-- Don’t place non-navigational items in the navigation section
-- Don’t place navigation items in the bottom section as items in the bottom section must not navigate away from the current context
+<div class="dos-and-donts">
+  <div class="dos">
+    <ul aria-label="Recommended practices">
+      <li>Do use icons in second-level navigation items when it helps users to better understand and recognize them</li>
+      <li>Do use a custom tooltip text if the label is so long that it gets truncated or needs additional context</li>
+    </ul>
+  </div>
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don’t mix menu items with and without icons within a second-level navigation category</li>
+      <li>Don’t place non-navigational items in the navigation section</li>
+      <li>Don’t place navigation items in the bottom section as items in the bottom section must not navigate away from the current context</li>
+    </ul>
+  </div>
+</div>

docs/components/avatar/guide.md

@@ -24,4 +24,10 @@ The avatar is a display-only component with no further interactions. Images prov
 
 ![Avatar dos and don‘ts](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=975-13&mode=design&t=SxUA6AcHswBAiIzi-4)
 
-- Don’t use more than 2 characters when using the "Initials" option
+<div class="dos-and-donts">
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don't use more than 2 characters when using the "Initials" option</li>
+    </ul>
+  </div>
+</div>

docs/components/bar-chart/overview.mdx

@@ -24,10 +24,20 @@ Stacked bar charts are typically used to visualize the relationship between the
 
 ## Dos and Don’ts
 
-- Do start the Y-axis at zero and label axes clearly
-- Do use short and clear category names
-- Do include context and additional information when necessary
-- Do arrange categories and bars in a logical order
-- Don’t use too many bars in one chart
-- Don’t overcrowd charts with colors and categories, especially the stacked variant
-- Don’t use stacked bars if the total value is not important
+<div class="dos-and-donts">
+  <div class="dos">
+    <ul aria-label="Recommended practices">
+      <li>Do start the Y-axis at zero and label axes clearly</li>
+      <li>Do use short and clear category names</li>
+      <li>Do include context and additional information when necessary</li>
+      <li>Do arrange categories and bars in a logical order</li>
+    </ul>
+  </div>
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don’t use too many bars in one chart</li>
+      <li>Don’t overcrowd charts with colors and categories, especially the stacked variant</li>
+      <li>Don’t use stacked bars if the total value is not important</li>
+    </ul>
+  </div>
+</div>

docs/components/blind/guide.md

@@ -49,11 +49,21 @@ For all blind variants, a default, hover, active and focused state is available.
 
 ## Dos and Don’ts
 
-- Do stay within the recommended number of blinds - between 3 and 7
-- Don’t use multi-line text in the header. The header section has a fixed height for single-line text entries
-- Don’t change the position of the chevron icon and the blind's label in the header
-- Don’t use a blind if there is only a single category to be displayed
-- Don’t use blinds to display hierarchically structured files or objects - rather use a tree for such cases
+<div class="dos-and-donts">
+  <div class="dos">
+    <ul aria-label="Recommended practices">
+      <li>Do stay within the recommended number of blinds - between 3 and 7</li>
+    </ul>
+  </div>
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don’t use multi-line text in the header. The header section has a fixed height for single-line text entries</li>
+      <li>Don’t change the position of the chevron icon and the blind's label in the header</li>
+      <li>Don’t use a blind if there is only a single category to be displayed</li>
+      <li>Don’t use blinds to display hierarchically structured files or objects - rather use a tree for such cases</li>
+    </ul>
+  </div>
+</div>
 
 ## Related
 

docs/components/breadcrumb/guide.md

@@ -40,10 +40,20 @@ Interactive items can take one of four states: Default, hover, active and focuse
 
 ## Dos and Don’ts
 
-- Do label each item, i.e. use more than icons
-- Do use single-line text entries as breadcrumb items have a fixed height
-- Don’t use breadcrumbs to display a multistep process (use the [workflow](../workflow) control instead)
-- Don’t show multiple breadcrumbs on one screen, e.g. in a content area and in a drawer
+<div class="dos-and-donts">
+  <div class="dos">
+    <ul aria-label="Recommended practices">
+      <li>Do label each item, i.e. use more than icons</li>
+      <li>Do use single-line text entries as breadcrumb items have a fixed height</li>
+    </ul>
+  </div>
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don’t use breadcrumbs to display a multistep process (use the [workflow](../workflow) control instead)</li>
+      <li>Don’t show multiple breadcrumbs on one screen, e.g. in a content area and in a drawer</li>
+    </ul>
+  </div>
+</div>
 
 ## Related
 

docs/components/button/guide.md

@@ -49,12 +49,22 @@ Buttons have six states: Default, hover, active, disabled, loading and focused.
 
 ## Dos and Don’ts
 
-- Do use short button labels to allow users to quickly scan, understand and remember them (see our [writing style guide](../../guidelines/language/dialogs-and-buttons.md))
-- Do use ellipsis (…) to indicate that an action requires further input or choice from the user, e.g. "Save as…" which opens a list of file types to choose from
-- Do use the primary variant for buttons to indicate one primary action in a visual unit, all other secondary actions should use the secondary variant
-- Don’t place icons both left and right of the label on the same button
-- Don’t use the danger button excessively or repetitively in lists or tables
-- Don’t rely on standard buttons when many actions are necessary (use [dropdown buttons](../dropdown-button/index.mdx) or [split buttons](../split-button/index.mdx) instead, or move some functionality to a [pane](../panes/index.mdx) or a [dialog](../modal/index.mdx))
+<div class="dos-and-donts">
+  <div class="dos">
+    <ul aria-label="Recommended practices">
+      <li>Do use short button labels to allow users to quickly scan, understand and remember them (see our [writing style guide](../../guidelines/language/dialogs-and-buttons.md))</li>
+      <li>Do use ellipsis (…) to indicate that an action requires further input or choice from the user, e.g. "Save as…" which opens a list of file types to choose from</li>
+      <li>Do use the primary variant for buttons to indicate one primary action in a visual unit, all other secondary actions should use the secondary variant</li>
+    </ul>
+  </div>
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don’t place icons both left and right of the label on the same button</li>
+      <li>Don’t use the danger button excessively or repetitively in lists or tables</li>
+      <li>Don’t rely on standard buttons when many actions are necessary (use [dropdown buttons](../dropdown-button/index.mdx) or [split buttons](../split-button/index.mdx) instead, or move some functionality to a [pane](../panes/index.mdx) or a [dialog](../modal/index.mdx))</li>
+    </ul>
+  </div>
+</div>
 
 ## Related
 

docs/components/card-list/guide.md

@@ -43,9 +43,19 @@ The scroll card list style displays the content items from left to right next to
 
 ## Dos and Don’ts
 
-- Do keep cards and items within card lists the same size
-- Don’t place different types of components within card lists
-- Don’t nest card lists within each other
+<div class="dos-and-donts">
+  <div class="dos">
+    <ul aria-label="Recommended practices">
+      <li>Do keep cards and items within card lists the same size</li>
+    </ul>
+  </div>
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don’t place different types of components within card lists</li>
+      <li>Don’t nest card lists within each other</li>
+    </ul>
+  </div>
+</div>
 
 ## Related
 

docs/components/card/guide.md

@@ -83,10 +83,20 @@ Cards have four states: Default, hover, active and focused.
 
 ## Dos and Don’ts
 
-- Do group cards in [card lists](../card-list) or [grids](../grid)
-- Do keep multiple cards equal in size
-- Don’t nest cards inside each other
-- Don’t use cards to collect user input
+<div class="dos-and-donts">
+  <div class="dos">
+    <ul aria-label="Recommended practices">
+      <li>Do group cards in [card lists](../card-list) or [grids](../grid)</li>
+      <li>Do keep multiple cards equal in size</li>
+    </ul>
+  </div>
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don’t nest cards inside each other</li>
+      <li>Don’t use cards to collect user input</li>
+    </ul>
+  </div>
+</div>
 
 ## Related
 

docs/components/category-filter/guide.md

@@ -45,14 +45,24 @@ Category filter has six states: Default, hover, active, disabled, read-only and
 
 ## Dos and Don’ts
 
-- Do use if you have a large amount of content or products organized into different categories
-- Do use when catering to a diverse user base with different interests or needs
-- Do use if your content or products are organized into distinct categories or topics
-- Do use to make it easier for users to refine their search queries and receive more targeted results
-- Don’t use if your content is minimal or not organized into distinct categories
-- Don’t use if it’s not the primary method of navigation
-- Don’t use if it slows down the user experience
-- Don’t use if your users are not familiar with the category names
+<div class="dos-and-donts">
+  <div class="dos">
+    <ul aria-label="Recommended practices">
+      <li>Do use if you have a large amount of content or products organized into different categories</li>
+      <li>Do use when catering to a diverse user base with different interests or needs</li>
+      <li>Do use if your content or products are organized into distinct categories or topics</li>
+      <li>Do use to make it easier for users to refine their search queries and receive more targeted results</li>
+    </ul>
+  </div>
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don’t use if your content is minimal or not organized into distinct categories</li>
+      <li>Don’t use if it’s not the primary method of navigation</li>
+      <li>Don’t use if it slows down the user experience</li>
+      <li>Don’t use if your users are not familiar with the category names</li>
+    </ul>
+  </div>
+</div>
 
 ## Related
 

docs/components/checkbox/guide.md

@@ -36,9 +36,19 @@ Checkboxes are commonly used when there are multiple options that can be selecte
 
 ## Dos and Don’ts
 
-- Do use checkboxes when you have multiple options that can be selected
-- Do group related checkboxes together to indicate their relationship
-- Do use checkboxes in forms to allow users to select multiple options
-- Don’t use a checkbox for binary choices (yes/no, true/false) - use a toggle switch instead
-- Don’t use checkboxes for mutually exclusive options - use [radio buttons](../radio) instead
-- Don’t use checkboxes for actions that have immediate consequences - use [buttons](../button) or links instead
+<div class="dos-and-donts">
+  <div class="dos">
+    <ul aria-label="Recommended practices">
+      <li>Do use checkboxes when you have multiple options that can be selected</li>
+      <li>Do group related checkboxes together to indicate their relationship</li>
+      <li>Do use checkboxes in forms to allow users to select multiple options</li>
+    </ul>
+  </div>
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don’t use a checkbox for binary choices (yes/no, true/false) - use a toggle switch instead</li>
+      <li>Don’t use checkboxes for mutually exclusive options - use [radio buttons](../radio) instead</li>
+      <li>Don’t use checkboxes for actions that have immediate consequences - use [buttons](../button) or links instead</li>
+    </ul>
+  </div>
+</div>

docs/components/chip/guide.md

@@ -52,12 +52,22 @@ Chips take a default, hover, focused or active state with a varying background c
 
 ## Dos and Don’ts
 
-- Do use chips to tag and categorize so users can easily organize and filter content
-- Do ensure proper color contrast between chip background and text/icon with the custom variant to support readability
-- Do consider chip spacing for easy tapping or selecting with mobiles and desktops
-- Don’t overuse chips as this leads to cluttered and overwhelming interfaces
-- Don’t use different styles for chips with the same or similar use
-- Don’t use chips without any interaction (we recommend pills instead)
+<div class="dos-and-donts">
+  <div class="dos">
+    <ul aria-label="Recommended practices">
+      <li>Do use chips to tag and categorize so users can easily organize and filter content</li>
+      <li>Do ensure proper color contrast between chip background and text/icon with the custom variant to support readability</li>
+      <li>Do consider chip spacing for easy tapping or selecting with mobiles and desktops</li>
+    </ul>
+  </div>
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don’t overuse chips as this leads to cluttered and overwhelming interfaces</li>
+      <li>Don’t use different styles for chips with the same or similar use</li>
+      <li>Don’t use chips without any interaction (we recommend pills instead)</li>
+    </ul>
+  </div>
+</div>
 
 ## Related
 

docs/components/content-header/guide.md

@@ -42,10 +42,20 @@ Our content header variants makes it easier to achieve a well-balanced visual hi
 
 ## Dos and Don’ts
 
-- Do use to provide quick access to common tasks for the whole content area
-- Do place only items in the header slot that don’t take up too much space, such as a status or a counter
-- Don’t use a secondary content header as a page title
-- Don’t use more than one primary headline in one page
+<div class="dos-and-donts">
+  <div class="dos">
+    <ul aria-label="Recommended practices">
+      <li>Do use to provide quick access to common tasks for the whole content area</li>
+      <li>Do place only items in the header slot that don’t take up too much space, such as a status or a counter</li>
+    </ul>
+  </div>
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don’t use a secondary content header as a page title</li>
+      <li>Don’t use more than one primary headline in one page</li>
+    </ul>
+  </div>
+</div>
 
 ## Related
 

docs/components/custom-field/guide.md

@@ -34,11 +34,21 @@ The states depend on the component that you use in the custom field. The custom
 
 ## Dos and Don’ts
 
-- Do use the custom field when your desired solution is not covered by the already existing form field components
-- Do use the custom field in combination with the form component to create complex forms
-- Don’t use the custom field for simple form fields, use the form field component instead
-- Don’t use the custom field without a form component, it is a wrapper component that is meant to be used in combination with the form component
-- Don’t use helper and feedback texts for single fields within a custom field, use the helper and feedback text of the whole custom field instead
+<div class="dos-and-donts">
+  <div class="dos">
+    <ul aria-label="Recommended practices">
+      <li>Do use the custom field when your desired solution is not covered by the already existing form field components</li>
+      <li>Do use the custom field in combination with the form component to create complex forms</li>
+    </ul>
+  </div>
+  <div class="donts">
+    <ul aria-label="Practices to avoid">
+      <li>Don’t use the custom field for simple form fields, use the form field component instead</li>
+      <li>Don’t use the custom field without a form component, it is a wrapper component that is meant to be used in combination with the form component</li>
+      <li>Don’t use helper and feedback texts for single fields within a custom field, use the helper and feedback text of the whole custom field instead</li>
+    </ul>
+  </div>
+</div>
 
 ## Related