feat: adding tooltips and tests to visual-refresh-toolbar

pages/app-layout/utils/drawer-ids.ts

@@ -0,0 +1,13 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export const drawerIds = {
+  security: 'security',
+  proHelp: 'pro-help',
+  links: 'links',
+  test1: 'test-1',
+  test2: 'test-2',
+  test3: 'test-3',
+  test4: 'test-4',
+  test5: 'test-5',
+  test6: 'test-6',
+};

pages/app-layout/utils/drawers.tsx

@@ -4,6 +4,8 @@ import React from 'react';
 
 import { AppLayoutProps, Drawer, SpaceBetween } from '~components';
 
+import { drawerIds } from './drawer-ids';
+
 import styles from '../styles.scss';
 
 const getAriaLabels = (title: string, badge: boolean) => {
@@ -31,7 +33,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
   {
     ariaLabels: getAriaLabels('Security', false),
     content: <Security />,
-    id: 'security',
+    id: drawerIds.security,
     resizable: true,
     onResize: (event: any) => {
       // A drawer implementer may choose to listen to THEIR drawer's
@@ -48,7 +50,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     content: <Drawer header={<h2>Pro help</h2>}>Pro help.</Drawer>,
     badge: true,
     defaultSize: 600,
-    id: 'pro-help',
+    id: drawerIds.proHelp,
     trigger: {
       iconName: 'contact',
     },
@@ -58,7 +60,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     resizable: true,
     defaultSize: 500,
     content: <Drawer header={<h2>Links</h2>}>Links.</Drawer>,
-    id: 'links',
+    id: drawerIds.links,
     trigger: {
       iconName: 'share',
     },
@@ -67,7 +69,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     ariaLabels: getAriaLabels('Test 1', true),
     content: <Drawer header={<h2>Test 1</h2>}>Test 1.</Drawer>,
     badge: true,
-    id: 'test-1',
+    id: drawerIds.test1,
     trigger: {
       iconName: 'contact',
     },
@@ -77,7 +79,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     resizable: true,
     defaultSize: 500,
     content: <Drawer header={<h2>Test 2</h2>}>Test 2.</Drawer>,
-    id: 'test-2',
+    id: drawerIds.test2,
     trigger: {
       iconName: 'share',
     },
@@ -86,7 +88,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     ariaLabels: getAriaLabels('Test 3', true),
     content: <Drawer header={<h2>Test 3</h2>}>Test 3.</Drawer>,
     badge: true,
-    id: 'test-3',
+    id: drawerIds.test3,
     trigger: {
       iconName: 'contact',
     },
@@ -96,7 +98,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     resizable: true,
     defaultSize: 500,
     content: <Drawer header={<h2>Test 4</h2>}>Test 4.</Drawer>,
-    id: 'test-4',
+    id: drawerIds.test4,
     trigger: {
       iconName: 'edit',
     },
@@ -106,7 +108,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     resizable: true,
     defaultSize: 500,
     content: <Drawer header={<h2>Test 5</h2>}>Test 5.</Drawer>,
-    id: 'test-5',
+    id: drawerIds.test5,
     trigger: {
       iconName: 'add-plus',
     },
@@ -116,7 +118,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     resizable: true,
     defaultSize: 500,
     content: <Drawer header={<h2>Test 6</h2>}>Test 6.</Drawer>,
-    id: 'test-6',
+    id: drawerIds.test6,
     trigger: {
       iconName: 'call',
     },

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -729,7 +729,7 @@ Each Drawer is an item in the drawers wrapper with the following properties:
 - \`iconSvg\` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)
 
 #### DrawerAriaLabels
-- \`drawerName\` (string) - Label for the drawer itself.
+- \`drawerName\` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.
 - \`closeButton\` (string) - (Optional) Label for the close button.
 - \`triggerButton\` (string) - (Optional) Label for the trigger button.
 - \`resizeHandle\` (string) - (Optional) Label for the resize handle.

src/app-layout/__integ__/app-layout-focus-delegation.test.ts

@@ -52,7 +52,7 @@
         )
       );
 
       //TODO create separate split panel test for appLayoutWidget is true
       testIf(theme !== 'visual-refresh-toolbar')(
         'split panel focus moves to slider on open and open button on close',
         setupTest(
@@ -84,7 +84,7 @@
         )
       );
 
       //TODO create separate split panel test for 'visual-refresh-toolbar' theme
       testIf(theme !== 'visual-refresh-toolbar')(
         'navigation panel focus toggles between open and close buttons',
         setupTest(
@@ -105,7 +105,7 @@
         )
       );
 
       //todo create test specifically for mobile and visual-refresh-toolbar
       testIf(theme !== 'visual-refresh-toolbar')(
         'focuses tools panel closed button when it is opened using keyboard and caused split panel to change position',
         setupTest(
@@ -139,6 +139,8 @@
         setupTest(
           async page => {
             await page.click(wrapper.findSplitPanel().findOpenButton().toSelector());
+            await expect(page.isExisting(wrapper.findSplitPanel().toSelector())).resolves.toBeTruthy();
+            await page.keys('Escape'); //escape tooltip from still hovering over open trigger button
             await page.click(wrapper.findSplitPanel().findPreferencesButton().toSelector());
             await page.keys(['Tab', 'Left', 'Tab', 'Tab', 'Enter']);
             await expect(page.isFocused(wrapper.findSplitPanel().findPreferencesButton().toSelector())).resolves.toBe(
@@ -239,7 +241,7 @@
       );
 
       describe('drawer focus interaction with tools buttons', () => {
         //todo resolve focus issue returning to previously focued element on mobile for drawer open button
         testIf(theme !== 'visual-refresh-toolbar')(
           'moves focus to close button when panel is opened from button',
           setupTest(
@@ -311,7 +313,6 @@
               await page.click(wrapper.findContentRegion().findContainer().toSelector());
               await page.click(wrapper.findActiveDrawerCloseButton().toSelector());
               await expect(page.isFocused(infoLink)).resolves.toBe(false);
-
               await expect(page.isFocused(wrapper.findDrawerTriggerById('pro-help').toSelector())).resolves.toBe(true);
             },
             { pageName: 'with-drawers', theme, mobile }