feat(SelectDialog): add headerTextLevel prop (#7595)

Closes #7593
Related to: #7568

Author: Lukas742

packages/main/src/components/SelectDialog/SelectDialog.cy.tsx

@@ -27,13 +27,20 @@ describe('SelectDialog', () => {
     );
     cy.findByText('Select Dialog')
       .should('have.css', 'grid-column-start', 'titleStart')
-      .should('have.css', 'grid-column-end', 'titleCenter');
+      .and('have.css', 'grid-column-end', 'titleCenter')
+      .and('have.attr', 'level', 'H1');
     cy.mount(
       <SelectDialog headerText="Select Dialog" headerTextAlignCenter open>
         {listItems}
       </SelectDialog>,
     );
-    cy.findByText('Select Dialog').should('have.css', 'grid-area', 'titleCenter');
+    cy.findByText('Select Dialog').should('have.css', 'grid-area', 'titleCenter').and('have.attr', 'level', 'H1');
+    cy.mount(
+      <SelectDialog headerText="Select Dialog" open headerTextLevel={'H2'}>
+        {listItems}
+      </SelectDialog>,
+    );
+    cy.findByText('Select Dialog').should('have.attr', 'level', 'H2');
   });
 
   it('selection', () => {

packages/main/src/components/SelectDialog/index.tsx

@@ -65,6 +65,14 @@ export interface SelectDialogPropTypes
    * Specifies the `headerText` alignment.
    */
   headerTextAlignCenter?: boolean;
+  /**
+   * Defines the aria-level of the `headerText`.
+   * Available options are: `"H1"` to `"H6"`.
+   * This property does not influence the style of the `headerText`.
+   *
+   * @default "H1"
+   */
+  headerTextLevel?: TitleLevel | keyof typeof TitleLevel;
   /**
    * Overwrites the default text for the confirmation button.
    */
@@ -150,6 +158,7 @@ const SelectDialog = forwardRef<DialogDomRef, SelectDialogPropTypes>((props, ref
     growing,
     headerText,
     headerTextAlignCenter,
+    headerTextLevel = TitleLevel.H1,
     listProps = {},
     selectionMode = ListSelectionMode.Single,
     numberOfSelectedItems,
@@ -309,7 +318,7 @@ const SelectDialog = forwardRef<DialogDomRef, SelectDialogPropTypes>((props, ref
         )}
         <Title
           className={clsx(classNames.title, headerTextAlignCenter && classNames.titleCenterAlign)}
-          level={TitleLevel.H1}
+          level={headerTextLevel}
         >
           {headerText}
         </Title>