fix(styles): dialog design and a11y updates [ci visual]

InnaAtanasova · InnaAtanasova · commit 1510bf16565a · 2025-04-24T13:30:02.000-04:00
diff --git a/packages/styles/src/_dialog-placeholders.scss b/packages/styles/src/_dialog-placeholders.scss
@@ -30,7 +30,7 @@ $fd-dialog-loader-margin-y: 1.5rem;
     width: 100%;
     height: 100%;
     background-color: var(--sapBlockLayer_Background);
-    opacity: var(--fdDialog_Background_Opacity);
+    opacity: var(--sapBlockLayer_Opacity);
   }
 }
 
diff --git a/packages/styles/src/dialog.scss b/packages/styles/src/dialog.scss
@@ -151,6 +151,7 @@ $menu: #{$fd-namespace}-menu;
     cursor: se-resize;
     line-height: 1rem;
     position: absolute;
+    z-index: 2;
 
     @include fd-rtl() {
       cursor: sw-resize;
diff --git a/packages/styles/src/theming/sap_fiori_3.scss b/packages/styles/src/theming/sap_fiori_3.scss
@@ -139,9 +139,6 @@
   /* Badge */
   --fdBadge_Border_Color: transparent;
 
-  /** Dialog */
-  --fdDialog_Background_Opacity: 0.6;
-
   /* Message Strip */
   --fdMessageStrip_Border_Width: 0.0625rem;
   --fdMessageStrip_Border_Radius: var(--sapElement_BorderCornerRadius);
diff --git a/packages/styles/src/theming/sap_fiori_3_dark.scss b/packages/styles/src/theming/sap_fiori_3_dark.scss
@@ -148,9 +148,6 @@
   /* Badge */
   --fdBadge_Border_Color: transparent;
 
-  /** Dialog */
-  --fdDialog_Background_Opacity: 0.6;
-
   /* Message Strip */
   --fdMessageStrip_Border_Width: 0.0625rem;
   --fdMessageStrip_Border_Radius: var(--sapElement_BorderCornerRadius);
diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss
@@ -151,9 +151,6 @@
   /* Badge */
   --fdBadge_Border_Color: var(--sapGroup_ContentBorderColor);
 
-  /** Dialog */
-  --fdDialog_Background_Opacity: 0.8;
-
   /* Message Strip */
   --fdMessageStrip_Border_Width: 0.125rem;
   --fdMessageStrip_Border_Radius: var(--sapElement_BorderCornerRadius);
diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss
@@ -147,9 +147,6 @@
   /* Badge */
   --fdBadge_Border_Color: var(--sapGroup_ContentBorderColor);
 
-  /** Dialog */
-  --fdDialog_Background_Opacity: 0.8;
-
   /* Message Strip */
   --fdMessageStrip_Border_Width: 0.125rem;
   --fdMessageStrip_Border_Radius: var(--sapElement_BorderCornerRadius);
diff --git a/packages/styles/src/theming/sap_fiori_3_light_dark.scss b/packages/styles/src/theming/sap_fiori_3_light_dark.scss
@@ -146,9 +146,6 @@
   /* Badge */
   --fdBadge_Border_Color: transparent;
 
-  /** Dialog */
-  --fdDialog_Background_Opacity: 0.6;
-
   /* Message Strip */
   --fdMessageStrip_Border_Width: 0.0625rem;
   --fdMessageStrip_Border_Radius: var(--sapElement_BorderCornerRadius);
diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss
@@ -146,9 +146,6 @@
   /* Badge */
   --fdBadge_Border_Color: transparent;
 
-  /** Dialog */
-  --fdDialog_Background_Opacity: 0.6;
-
   /* Message Strip */
   --fdMessageStrip_Border_Width: 0.0625rem;
   --fdMessageStrip_Border_Radius: var(--sapPopover_BorderCornerRadius);
diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss
@@ -159,9 +159,6 @@
   /* Badge */
   --fdBadge_Border_Color: var(--sapGroup_ContentBorderColor);
 
-  /** Dialog */
-  --fdDialog_Background_Opacity: 0.6;
-
   /* Message Strip */
   --fdMessageStrip_Border_Width: 0.0625rem;
   --fdMessageStrip_Border_Radius: var(--sapPopover_BorderCornerRadius);
diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss
@@ -147,10 +147,6 @@
   /* Badge */
   --fdBadge_Border_Color: var(--sapGroup_ContentBorderColor);
 
-  /** Dialog */
-  --fdDialog_Background_Opacity: 0.6;
-  --fdDialog_Content_Border_Radius: var(--sapPopover_BorderCornerRadius);
-
   /* Message Strip */
   --fdMessageStrip_Border_Width: 0.125rem;
   --fdMessageStrip_Border_Radius: var(--sapPopover_BorderCornerRadius);
diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss
@@ -148,9 +148,6 @@
   /* Badge */
   --fdBadge_Border_Color: var(--sapGroup_ContentBorderColor);
 
-  /** Dialog */
-  --fdDialog_Background_Opacity: 0.6;
-
   /* Message Strip */
   --fdMessageStrip_Border_Width: 0.125rem;
   --fdMessageStrip_Border_Radius: var(--sapPopover_BorderCornerRadius);
diff --git a/packages/styles/stories/Components/dialog/default-dialog.example.html b/packages/styles/stories/Components/dialog/default-dialog.example.html
@@ -1,6 +1,11 @@
 
-<section class="fd-dialog-docs-static fd-dialog fd-dialog--active">
-    <div class="fd-dialog__content fd-dialog__content--s" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1">
+<div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
+    <div 
+        class="fd-dialog__content fd-dialog__content--s" 
+        role="dialog" 
+        aria-modal="true" 
+        aria-labelledby="dialog-title-1"
+        aria-describedby="dialog-description-1">
         <span class="fd-dialog__resize-handle"></span>
         <header class="fd-dialog__header fd-bar">
             <div class="fd-bar__left">
@@ -11,16 +16,18 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-1">
                 </div>
             </div>
         </header>
-        <div class="fd-dialog__body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...
+        <section class="fd-dialog__body">
+            <span id="dialog-description-1">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...
+            </span>
             <div class="fd-dialog__loader">
                 <div class="fd-busy-indicator fd-busy-indicator--m" aria-hidden="false" aria-label="Loading">
                     <div class="fd-busy-indicator__circle"></div>
                     <div class="fd-busy-indicator__circle"></div>
                     <div class="fd-busy-indicator__circle"></div>
                 </div><br /><br />
             </div>
-        </div>
+        </section>
         <footer class="fd-dialog__footer fd-bar fd-bar--footer">
             <div class="fd-bar__right">
                 <div class="fd-bar__element">
@@ -36,4 +43,4 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-1">
             </div>
         </footer>
     </div>
-</section>
+</div>
diff --git a/packages/styles/stories/Components/dialog/device-specifications.example.html b/packages/styles/stories/Components/dialog/device-specifications.example.html
@@ -3,12 +3,19 @@ <h3>Tablet without mouse attached</h3>
 <div>Full Screen Button: visible (<code>sap-icon--full-screen</code>)</div>
 <div>Resize Handle: not visible</div>
 <br>
-<section class="fd-dialog-docs-static fd-dialog fd-dialog--active">
-    <div class="fd-dialog__content fd-dialog__content--s" role="dialog" aria-modal="true" aria-labelledby="dialog-title-6">
+<div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
+    <div 
+        class="fd-dialog__content fd-dialog__content--s" 
+        role="dialog" 
+        aria-modal="true" 
+        aria-labelledby="dialog-title-12"
+        aria-describedby="dialog-description-12"
+    >
+        
         <header class="fd-dialog__header fd-bar fd-bar--header">
             <div class="fd-bar__left">
                 <div class="fd-bar__element">
-                    <h2 class="fd-title fd-title--h5" id="dialog-title-6">
+                    <h2 class="fd-title fd-title--h5" id="dialog-title-12">
                         Lorem ipsum
                     </h2>
                 </div>
@@ -21,9 +28,11 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-6">
                 </div>
             </div>
         </header>
-        <div class="fd-dialog__body">
+
+        <section class="fd-dialog__body" id="dialog-description-12">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-        </div>
+        </section>
+
         <footer class="fd-dialog__footer fd-bar fd-bar--footer">
             <div class="fd-bar__right">
                 <div class="fd-bar__element">
@@ -35,7 +44,7 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-6">
             </div>
         </footer>
     </div>
-</section>  
+</div>  
 
 <br><br>
 <h3>Tablet with mouse attached</h3>
diff --git a/packages/styles/stories/Components/dialog/draggable.example.html b/packages/styles/stories/Components/dialog/draggable.example.html
@@ -1,6 +1,12 @@
 
-<section class="fd-dialog-docs-static fd-dialog fd-dialog--active">
-    <div class="fd-dialog__content fd-dialog__content--draggable-grab fd-dialog__content--s" role="dialog" aria-modal="true" aria-labelledby="dialog-title-7">
+<div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
+    <div 
+        class="fd-dialog__content fd-dialog__content--draggable-grab fd-dialog__content--s" 
+        role="dialog" 
+        aria-modal="true" 
+        aria-labelledby="dialog-title-7"
+        aria-describedby="dialog-description-7"
+    >
         <header class="fd-dialog__header fd-bar fd-bar--header">
             <div class="fd-bar__left">
                 <div class="fd-bar__element">
@@ -10,9 +16,11 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-7">
                 </div>
             </div>
         </header>
-        <div class="fd-dialog__body">
+
+        <section class="fd-dialog__body" id="dialog-description-7">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-        </div>
+        </section>
+        
         <footer class="fd-dialog__footer fd-bar fd-bar--footer">
             <div class="fd-bar__right">
                 <div class="fd-bar__element">
@@ -24,4 +32,4 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-7">
             </div>
         </footer>
     </div>
-</section>
+</div>
diff --git a/packages/styles/stories/Components/dialog/horizontal-form-in-dialog.example.html b/packages/styles/stories/Components/dialog/horizontal-form-in-dialog.example.html
@@ -1,6 +1,12 @@
 
-<section class="fd-dialog-docs-static fd-dialog fd-dialog--active">
-    <div class="fd-dialog__content fd-dialog__content--s" role="dialog" aria-modal="true" aria-labelledby="dialog-title-2">
+<div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
+    <div 
+        class="fd-dialog__content fd-dialog__content--s" 
+        role="dialog" 
+        aria-modal="true" 
+        aria-labelledby="dialog-title-2"
+    >
+        
         <header class="fd-dialog__header fd-bar fd-bar--header">
             <div class="fd-bar__left">
             <div class="fd-bar__element">
@@ -10,7 +16,8 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-22">
             </div>
             </div>
         </header>
-        <div class="fd-dialog__body">
+        
+        <section class="fd-dialog__body">
             <div class="fd-container fd-form-layout-grid-container fd-form-group">
                 <div class="fd-row fd-form-item">
                     <div class="fd-col fd-col-md--2 fd-col-lg--4">
@@ -81,7 +88,8 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-22">
                     </div>
                 </div>
             </div>
-        </div>
+        </section>
+        
         <footer class="fd-dialog__footer fd-bar fd-bar--footer">
             <div class="fd-bar__right">
                 <div class="fd-bar__element">
@@ -93,4 +101,4 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-22">
             </div>
         </footer>
     </div>
-</section>
+</div>
diff --git a/packages/styles/stories/Components/dialog/loading.example.html b/packages/styles/stories/Components/dialog/loading.example.html
@@ -1,6 +1,13 @@
 
-<section class="fd-dialog-docs-static fd-dialog fd-dialog--active" id="loading-dialog-example">
-    <div class="fd-dialog__content fd-dialog__content--s" role="dialog" aria-modal="true" aria-labelledby="dialog-title-9">
+<div class="fd-dialog-docs-static fd-dialog fd-dialog--active" id="loading-dialog-example">
+    <div 
+        class="fd-dialog__content fd-dialog__content--s" 
+        role="dialog" 
+        aria-modal="true" 
+        aria-labelledby="dialog-title-9"
+        aria-describedby="dialog-description-9"
+    >
+        
         <header class="fd-dialog__header fd-bar fd-bar--header">
             <div class="fd-bar__left">
                 <div class="fd-bar__element">
@@ -10,14 +17,16 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-9">
                 </div>
             </div>
         </header>
-        <div class="fd-dialog__body">
+
+        <section class="fd-dialog__body" id="dialog-description-8">
             <strong>Status:</strong> Connecting 127.0.0.1
             <div class="fd-dialog__loader fd-busy-indicator--l" aria-hidden="false" aria-label="Loading">
                 <div class="fd-busy-indicator--circle-0"></div>
                 <div class="fd-busy-indicator--circle-1"></div>
                 <div class="fd-busy-indicator--circle-2"></div>
             </div>
-        </div>
+        </section>
+
         <footer class="fd-dialog__footer fd-bar fd-bar--footer">
             <div class="fd-bar__right">
                 <div class="fd-bar__element">
@@ -26,4 +35,4 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-9">
             </div>
         </footer>
     </div>
-</section>
+</div>
diff --git a/packages/styles/stories/Components/dialog/resizable.example.html b/packages/styles/stories/Components/dialog/resizable.example.html
@@ -1,7 +1,14 @@
 
-<section class="fd-dialog-docs-static fd-dialog fd-dialog--active">
-    <div class="fd-dialog__content fd-dialog__content--s" role="dialog" aria-modal="true" aria-labelledby="dialog-title-6">
-        <span class="fd-dialog__resize-handle"></span>
+<div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
+    <div 
+        class="fd-dialog__content fd-dialog__content--s" 
+        role="dialog" 
+        aria-modal="true" 
+        aria-labelledby="dialog-title-6"
+        aria-describedby="dialog-description-6"
+    >
+        <span class="fd-dialog__resize-handle" role="presentation" aria-hidden="true"></span>
+        
         <header class="fd-dialog__header fd-bar fd-bar--header">
             <div class="fd-bar__left">
                 <div class="fd-bar__element">
@@ -11,9 +18,11 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-6">
                 </div>
             </div>
         </header>
-        <div class="fd-dialog__body">
+        
+        <section class="fd-dialog__body" id="dialog-description-6">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-        </div>
+        </section>
+        
         <footer class="fd-dialog__footer fd-bar fd-bar--footer">
             <div class="fd-bar__right">
                 <div class="fd-bar__element">
@@ -25,4 +34,4 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-6">
             </div>
         </footer>
     </div>
-</section>
+</div>
diff --git a/packages/styles/stories/Components/dialog/selectable.example.html b/packages/styles/stories/Components/dialog/selectable.example.html
diff --git a/packages/styles/stories/Components/dialog/sizes.example.html b/packages/styles/stories/Components/dialog/sizes.example.html
diff --git a/packages/styles/stories/Components/dialog/vertical-form-in-dialog.example.html b/packages/styles/stories/Components/dialog/vertical-form-in-dialog.example.html
diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ $fd-dialog-loader-margin-y: 1.5rem;`
`30`	`30`	`width: 100%;`
`31`	`31`	`height: 100%;`
`32`	`32`	`background-color: var(--sapBlockLayer_Background);`
`33`		`- opacity: var(--fdDialog_Background_Opacity);`
	`33`	`+ opacity: var(--sapBlockLayer_Opacity);`
`34`	`34`	`}`
`35`	`35`	`}`
`36`	`36`