From ef03530913d6ee6d51cb49e764b33cf24f18b5b6 Mon Sep 17 00:00:00 2001
From: Elizabeth Craig <elcraig@microsoft.com>
Date: Thu, 24 Feb 2022 14:55:13 -0800
Subject: [PATCH] update examples

---
 .../FocusTrapZone/e2e/FocusTrapZone.FocusStack.stories.tsx    | 3 ++-
 .../e2e/FocusTrapZone.ImperativeFocus.stories.tsx             | 1 +
 .../e2e/FocusTrapZone.NoTabbableItems.stories.tsx             | 1 +
 .../FocusTrapZone/e2e/FocusTrapZone.PropValues.stories.tsx    | 2 +-
 .../e2e/FocusTrapZone.TabWrappingButtonFocusZone.stories.tsx  | 1 +
 .../e2e/FocusTrapZone.TabWrappingFocusZoneBumpers.stories.tsx | 1 +
 .../e2e/FocusTrapZone.TabWrappingMultiFocusZone.stories.tsx   | 1 +
 .../src/react/FocusTrapZone/e2e/FocusTrapZone.e2e.ts          | 4 ++--
 8 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.FocusStack.stories.tsx b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.FocusStack.stories.tsx
index d53bc440e49bbf..1bd032b8a81718 100644
--- a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.FocusStack.stories.tsx
+++ b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.FocusStack.stories.tsx
@@ -6,7 +6,7 @@ import { useGlobal } from './shared';
 const rootClass = mergeStyles({
   '> div': {
     // target all child FTZ roots
-    border: '2px dashed red',
+    border: '2px dashed blue',
     padding: 10,
     margin: 10,
     button: {
@@ -14,6 +14,7 @@ const rootClass = mergeStyles({
       marginLeft: 10,
     },
   },
+  '*:focus': { outline: '2px dashed red' },
 });
 
 /**
diff --git a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.ImperativeFocus.stories.tsx b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.ImperativeFocus.stories.tsx
index 4ece96177c7b0a..ff6049a9bc7fcf 100644
--- a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.ImperativeFocus.stories.tsx
+++ b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.ImperativeFocus.stories.tsx
@@ -8,6 +8,7 @@ const rootClass = mergeStyles({
     width: 60,
     display: 'block',
   },
+  '*:focus': { outline: '2px dashed red' },
 });
 
 /** Imperatively focusing the FTZ */
diff --git a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.NoTabbableItems.stories.tsx b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.NoTabbableItems.stories.tsx
index 57eafff4e2035c..91f064d1cf2af6 100644
--- a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.NoTabbableItems.stories.tsx
+++ b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.NoTabbableItems.stories.tsx
@@ -4,6 +4,7 @@ import { useProps } from './shared';
 
 const rootClass = mergeStyles({
   button: { height: 30, width: 60 },
+  '*:focus': { outline: '2px dashed red' },
 });
 
 /**
diff --git a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.PropValues.stories.tsx b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.PropValues.stories.tsx
index c05d415458ba8c..ad034c2b0debe7 100644
--- a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.PropValues.stories.tsx
+++ b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.PropValues.stories.tsx
@@ -16,7 +16,7 @@ export const PropValues = () => {
     // don't render until props have been set
     props && (
       <div className={rootClass} onClick={ev => setButtonClicked((ev.target as HTMLButtonElement).textContent || '')}>
-        <div id="buttonClicked">{buttonClicked}</div>
+        <div id="buttonClicked">clicked {buttonClicked}</div>
         <button>before</button>
         <FocusTrapZone {...props}>
           <button>first</button>
diff --git a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.TabWrappingButtonFocusZone.stories.tsx b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.TabWrappingButtonFocusZone.stories.tsx
index 289d1ef676261e..c4f3cce70b7561 100644
--- a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.TabWrappingButtonFocusZone.stories.tsx
+++ b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.TabWrappingButtonFocusZone.stories.tsx
@@ -3,6 +3,7 @@ import { FocusZone, FocusTrapZone, FocusZoneDirection, mergeStyles } from '@flue
 
 const rootClass = mergeStyles({
   button: { height: 30, width: 60 },
+  '*:focus': { outline: '2px dashed red' },
 });
 
 /**
diff --git a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.TabWrappingFocusZoneBumpers.stories.tsx b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.TabWrappingFocusZoneBumpers.stories.tsx
index 1000c4e33c0112..773814bb2e234d 100644
--- a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.TabWrappingFocusZoneBumpers.stories.tsx
+++ b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.TabWrappingFocusZoneBumpers.stories.tsx
@@ -3,6 +3,7 @@ import { FocusZone, FocusTrapZone, FocusZoneDirection, mergeStyles } from '@flue
 
 const rootClass = mergeStyles({
   button: { width: 60, height: 30 },
+  '*:focus': { outline: '2px dashed red' },
 });
 
 /**
diff --git a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.TabWrappingMultiFocusZone.stories.tsx b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.TabWrappingMultiFocusZone.stories.tsx
index b05150c6701262..dc03a3e13ff233 100644
--- a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.TabWrappingMultiFocusZone.stories.tsx
+++ b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.TabWrappingMultiFocusZone.stories.tsx
@@ -3,6 +3,7 @@ import { FocusZone, FocusTrapZone, FocusZoneDirection, mergeStyles } from '@flue
 
 const rootClass = mergeStyles({
   button: { height: 30, width: 60 },
+  '*:focus': { outline: '2px dashed red' },
 });
 
 /**
diff --git a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.e2e.ts b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.e2e.ts
index 64f6705d143252..1800bbc8a5f851 100644
--- a/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.e2e.ts
+++ b/packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.e2e.ts
@@ -64,7 +64,7 @@ describe('FocusTrapZone', () => {
       // it focuses first button inside FTZ instead
       cy.focused().should('have.text', 'first');
       // and the click isn't respected
-      cy.get('#buttonClicked').should('have.text', '');
+      cy.get('#buttonClicked').should('have.text', 'clicked ');
     });
 
     it('Restores focus to FTZ when programmatically focusing outside FTZ', () => {
@@ -85,7 +85,7 @@ describe('FocusTrapZone', () => {
 
       // click the button and verify it worked (the story updates the text when a button is clicked)
       cy.contains('before').realClick();
-      cy.get('#buttonClicked').should('have.text', 'before');
+      cy.get('#buttonClicked').should('have.text', 'clicked before');
 
       // but focus is kept within the FTZ
       cy.focused().should('have.text', 'first');