update examples

Author: ecraig12345

packages/react-examples/src/react/FocusTrapZone/e2e/FocusTrapZone.FocusStack.stories.tsx

@@ -6,14 +6,15 @@ 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: {
       display: 'inline-block',
       marginLeft: 10,
     },
   },
+  '*:focus': { outline: '2px dashed red' },
 });
 
 /**

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 */

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' },
 });
 
 /**

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>

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' },
 });
 
 /**

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' },
 });
 
 /**

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' },
 });
 
 /**

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');