Update test to handle focus

Author: Mitch-At-Work

packages/react-components/token-analyzer-preview/library/src/__tests__/analyzer.test.ts

@@ -45,6 +45,16 @@ describe('Token Analyzer', () => {
       }),
     );
 
+    // Verify focus function styles
+    expect(styles.useStyles.focusIndicator.tokens).toEqual([]);
+    const focusStyle = styles.useStyles.focusIndicator.nested?.[':focus'];
+    console.log('styles.useStyles.focusIndicator.nested:', JSON.stringify(styles.useStyles.focusIndicator, null, 2));
+    expect(focusStyle?.tokens[0]).toEqual({
+      path: [],
+      property: 'textDecorationColor',
+      token: 'tokens.colorStrokeFocus2',
+    });
+
     // Verify metadata for conditional styles
     expect(metadata.styleConditions['styles.large']).toEqual({
       conditions: ["size === 'large'"],

packages/react-components/token-analyzer-preview/library/src/__tests__/sample-styles.ts

@@ -1,8 +1,12 @@
 export const sampleStyles = `
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 
 const useStyles = makeStyles({
+  focusIndicator: createCustomFocusIndicatorStyle({
+    textDecorationColor: tokens.colorStrokeFocus2,
+  }),
   root: {
     color: tokens.colorNeutralForeground1,
     backgroundColor: tokens.colorNeutralBackground1,
@@ -25,6 +29,7 @@ export const Component = () => {
 
   state.root.className = mergeClasses(
     styles.root,
+    styles.focusIndicator,
     size === 'large' && styles.large,
     disabled && styles.disabled
   );