fix(dialog): fix section region with header and footer

Remove tags roles to avoid confusion for the screen readers

Author: Arthur

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 -   `UserBlock`: fix fields wrapping in horizontal mode.
+-   `Dialog`: fixed dialog `section` layout to avoid the `role=dialog` overriding the section role and breaking the link with the `header` and `footer`.
 
 ### Added
 

packages/lumx-react/src/components/dialog/Dialog.tsx

@@ -214,18 +214,13 @@ export const Dialog = forwardRef<DialogProps, HTMLDivElement>((props, ref) => {
 
                   <HeadingLevelProvider level={2}>
                       <ThemeProvider value={undefined}>
-                          <section
-                              className={`${CLASSNAME}__container`}
-                              role="dialog"
-                              aria-modal="true"
-                              {...dialogProps}
-                          >
+                          <div className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
                               <ClickAwayProvider
                                   callback={!shouldPreventCloseOnClickAway && onClose}
                                   childrenRefs={clickAwayRefs}
                                   parentRef={rootRef}
                               >
-                                  <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
+                                  <section className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
                                       {(header || headerChildContent) && (
                                           <header
                                               {...headerChildProps}
@@ -278,9 +273,9 @@ export const Dialog = forwardRef<DialogProps, HTMLDivElement>((props, ref) => {
                                               <Progress variant={ProgressVariant.circular} />
                                           </div>
                                       )}
-                                  </div>
+                                  </section>
                               </ClickAwayProvider>
-                          </section>
+                          </div>
                       </ThemeProvider>
                   </HeadingLevelProvider>
               </div>,