fix(TagPicker): focus outline for TagItem remove button now meets req…

…uired contrast ratio (#24126) * fix: focus border now meets minimum contrast ratio * chore: update snapshots * Change File * nit: update change file * Update Change File
microsoft · Jul 29, 2022 · 50b0852 · 50b0852
1 parent 51b7a53
commit 50b0852
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/change/@fluentui-react-f9e1d4e1-504b-47d8-8442-4f425d4f2ae7.json b/change/@fluentui-react-f9e1d4e1-504b-47d8-8442-4f425d4f2ae7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(TagPicker): focus outline for TagItem remove button now meets required contrast ratio.",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/pickers/TagPicker/TagItem.styles.ts b/packages/react/src/components/pickers/TagPicker/TagItem.styles.ts
@@ -93,6 +93,7 @@ export function getStyles(props: ITagItemStyleProps): ITagItemStyles {
     ],
     close: [
       classNames.close,
+      getFocusStyle(theme, { borderColor: 'transparent', inset: 1, outlineColor: palette.white }),
       {
         color: palette.neutralSecondary,
         width: 30,

diff --git a/packages/react/src/components/pickers/TagPicker/__snapshots__/TagItem.test.tsx.snap b/packages/react/src/components/pickers/TagPicker/__snapshots__/TagItem.test.tsx.snap
@@ -118,7 +118,7 @@ exports[`TagItem accepts title override 1`] = `
           bottom: 2px;
           content: "";
           left: 2px;
-          outline: 1px solid #605e5c;
+          outline: 1px solid #ffffff;
           position: absolute;
           right: 2px;
           top: 2px;
@@ -367,7 +367,7 @@ exports[`TagItem defaults title to item name for non string children 1`] = `
           bottom: 2px;
           content: "";
           left: 2px;
-          outline: 1px solid #605e5c;
+          outline: 1px solid #ffffff;
           position: absolute;
           right: 2px;
           top: 2px;
@@ -592,7 +592,7 @@ exports[`TagItem renders correctly 1`] = `
           bottom: 2px;
           content: "";
           left: 2px;
-          outline: 1px solid #605e5c;
+          outline: 1px solid #ffffff;
           position: absolute;
           right: 2px;
           top: 2px;

diff --git a/packages/react/src/components/pickers/TagPicker/__snapshots__/TagPicker.test.tsx.snap b/packages/react/src/components/pickers/TagPicker/__snapshots__/TagPicker.test.tsx.snap
@@ -195,7 +195,7 @@ exports[`TagPicker renders correctly 1`] = `
                   bottom: 2px;
                   content: "";
                   left: 2px;
-                  outline: 1px solid #605e5c;
+                  outline: 1px solid #ffffff;
                   position: absolute;
                   right: 2px;
                   top: 2px;
@@ -588,7 +588,7 @@ exports[`TagPicker renders picker with selected item correctly 1`] = `
                   bottom: 2px;
                   content: "";
                   left: 2px;
-                  outline: 1px solid #605e5c;
+                  outline: 1px solid #ffffff;
                   position: absolute;
                   right: 2px;
                   top: 2px;