Added tab focus mode to the Breadcrumb

[ValentinaKozlova]

After discussion with the design team and Sarah we have to change focus behavior.

Previous Behavior

• default mode was arrow
• no tab navigation

New Behavior

• tab navigation became the default one
• added cypress tests

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 1acc2cdf9ab63707eb26d656fca5161680df42c5}

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 1acc2cdf9ab63707eb26d656fca5161680df42c5 (build)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2153f9d:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[Hotell]

cypress is not properly setup

the fix should be running yarn nx workspace-generators migrate-converged-pkg --name @fluentui/react-breadcrumb, but it contains bug which wont update your project thus you need to do it manually:

1. create tsconfig.cy.json in your project root

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false,
    "types": ["node", "cypress", "cypress-storybook/cypress", "cypress-real-events"],
    "lib": ["ES2019", "dom"]
  },
  "include": ["**/*.cy.ts", "**/*.cy.tsx"]
}

2. update tsconfig.json.lib:

 "exclude": [
    "./src/testing/**",
    "**/*.spec.ts",
    "**/*.spec.tsx",
    "**/*.test.ts",
    "**/*.test.tsx",
    "**/*.stories.ts",
    "**/*.stories.tsx",
+    "**/*.cy.ts",
+    "**/*.cy.tsx"
  ],

2. update tsconfig.lib:

"references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    },
    {
      "path": "./.storybook/tsconfig.json"
    },
+    {
+      "path": "./tsconfig.cy.json"
+    }
  ]

[ValentinaKozlova]

cypress is not properly setup

the fix should be running yarn nx workspace-generators migrate-converged-pkg --name @fluentui/react-breadcrumb, but it contains bug which wont update your project thus you need to do it manually:

1. create tsconfig.cy.json in your project root

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false,
    "types": ["node", "cypress", "cypress-storybook/cypress", "cypress-real-events"],
    "lib": ["ES2019", "dom"]
  },
  "include": ["**/*.cy.ts", "**/*.cy.tsx"]
}

2. update tsconfig.json.lib:

 "exclude": [
    "./src/testing/**",
    "**/*.spec.ts",
    "**/*.spec.tsx",
    "**/*.test.ts",
    "**/*.test.tsx",
    "**/*.stories.ts",
    "**/*.stories.tsx",
+    "**/*.cy.ts",
+    "**/*.cy.tsx"
  ],

2. update tsconfig.lib:

"references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    },
    {
      "path": "./.storybook/tsconfig.json"
    },
+    {
+      "path": "./tsconfig.cy.json"
+    }
  ]

Thank you! :)