Implement a11y improvements (elastic#152126)

Fixes: elastic#143878 This PR updates the guided onboarding panel to utilise a custom flyout created based on the [example accessible custom flyout](https://eui.elastic.co/pr_6247/#/utilities/portal#a-custom-flyout)
kqualters-elastic · Mar 8, 2023 · b686e0f · b686e0f
1 parent ab7c879
commit b686e0f
Show file tree

Hide file tree

Showing 7 changed files with 717 additions and 344 deletions.
diff --git a/src/plugins/guided_onboarding/public/components/guide_panel.styles.ts b/src/plugins/guided_onboarding/public/components/guide_panel.styles.ts
@@ -6,8 +6,15 @@
  * Side Public License, v 1.
  */
 
-import { EuiThemeComputed } from '@elastic/eui';
+import {
+  euiCanAnimate,
+  euiFlyoutSlideInRight,
+  euiYScrollWithShadows,
+  logicalCSS,
+  logicalCSSWithFallback,
+} from '@elastic/eui';
 import { css } from '@emotion/react';
+import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
 import panelBgTop from '../../assets/panel_bg_top.svg';
 import panelBgTopDark from '../../assets/panel_bg_top_dark.svg';
 import panelBgBottom from '../../assets/panel_bg_bottom.svg';
@@ -21,54 +28,98 @@ import panelBgBottomDark from '../../assets/panel_bg_bottom_dark.svg';
  * See https://github.com/elastic/eui/issues/6241 for more details
  */
 export const getGuidePanelStyles = ({
-  euiTheme,
+  euiThemeContext,
   isDarkTheme,
 }: {
-  euiTheme: EuiThemeComputed;
+  euiThemeContext: UseEuiTheme;
   isDarkTheme: boolean;
-}) => ({
-  setupButton: css`
-    margin-right: ${euiTheme.size.m};
-  `,
-  wellDoneAnimatedPrompt: css`
-    text-align: left;
-  `,
-  flyoutOverrides: {
-    flyoutHeader: css`
-      background: url(${isDarkTheme ? panelBgTopDark : panelBgTop}) top right no-repeat;
-    `,
-    flyoutContainer: css`
-      top: 55px !important;
-      // Unsetting bottom and height default values to create auto height
-      bottom: unset !important;
+}) => {
+  const euiTheme = euiThemeContext.euiTheme;
+  const flyoutContainerBase = css`
+    position: fixed;
+    height: 100%;
+    max-height: 76vh;
+    max-inline-size: 480px;
+    max-block-size: auto;
+    inset-inline-end: 0;
+    inset-block-start: ${euiTheme.size.xxxl};
+    ${euiCanAnimate} {
+      animation: ${euiFlyoutSlideInRight} ${euiTheme.animation.normal}
+        ${euiTheme.animation.resistance};
+    }
+    @media (min-width: ${euiTheme.breakpoint.m}px) {
       right: calc(${euiTheme.size.s} + 128px); // Accounting for margin on button
-      border-radius: 6px;
-      animation: euiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1);
-      box-shadow: none;
-      max-height: 76vh;
-      @media (max-width: ${euiTheme.breakpoint.s}px) {
-        right: 25px !important;
-      }
-    `,
-    flyoutBody: css`
-      overflow: auto;
-      .euiFlyoutBody__overflowContent {
-        width: 480px;
-        padding-top: 10px;
-        @media (max-width: ${euiTheme.breakpoint.s}px) {
-          width: 100%;
-        }
-      }
-    `,
-    flyoutFooter: css`
-      border-radius: 0 0 6px 6px;
-      background: url(${isDarkTheme ? panelBgBottomDark : panelBgBottom}) 0 7px no-repeat;
-      padding: 24px 30px;
-      height: 125px;
+    })
+  `;
+
+  return {
+    setupButton: css`
+      margin-right: ${euiTheme.size.m};
     `,
-    flyoutFooterLink: css`
-      color: ${euiTheme.colors.darkShade};
-      font-weight: 400;
+    wellDoneAnimatedPrompt: css`
+      text-align: left;
     `,
-  },
-});
+    flyoutOverrides: {
+      flyoutContainer: css`
+        ${flyoutContainerBase};
+        background: ${euiTheme.colors.emptyShade} url(${isDarkTheme ? panelBgTopDark : panelBgTop})
+          top right no-repeat;
+        padding: 0;
+      `,
+      flyoutContainerError: css`
+        ${flyoutContainerBase};
+        padding: 24px;
+      `,
+      flyoutHeader: css`
+        flex-grow: 0;
+        padding: 16px 16px 0;
+      `,
+      flyoutHeaderError: css`
+        flex-grow: 0;
+        padding: 8px 0 0;
+      `,
+      flyoutContentWrapper: css`
+        display: flex;
+        block-size: 100%;
+        justify-content: space-between;
+        flex-direction: column;
+      `,
+      flyoutCloseButtonIcon: css`
+        position: absolute;
+        inset-block-start: ${euiTheme.size.base};
+        inset-inline-end: ${euiTheme.size.base};
+      `,
+      flyoutBodyWrapper: css`
+        ${logicalCSS('height', '100%')}
+        ${logicalCSSWithFallback('overflow-y', 'hidden')}
+      flex-grow: 1;
+      `,
+      flyoutBody: css`
+        ${euiYScrollWithShadows(euiThemeContext, {
+          side: 'end',
+        })}
+        padding: 16px 10px 0 16px;
+      `,
+      flyoutBodyError: css`
+        height: 600px;
+      `,
+      flyoutStepsWrapper: css`
+        > li {
+          list-style-type: none;
+        }
+        margin-inline-start: 0 !important;
+      `,
+      flyoutFooter: css`
+        border-radius: 0 0 6px 6px;
+        background: url(${isDarkTheme ? panelBgBottomDark : panelBgBottom}) 0 36px no-repeat;
+        padding: 24px 30px;
+        height: 125px;
+        flex-grow: 0;
+      `,
+      flyoutFooterLink: css`
+        color: ${euiTheme.colors.darkShade};
+        font-weight: 400;
+      `,
+    },
+  };
+};