fix: v8 Dropdown option focus should not be cut off in HCM (#26573)

microsoft · Feb 1, 2023 · 20a923c · 20a923c
1 parent 77ceacd
commit 20a923c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/change/@fluentui-react-94027d49-963c-4769-b134-8dc2632fe98c.json b/change/@fluentui-react-94027d49-963c-4769-b134-8dc2632fe98c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Dropdown option focus in high contrast mode should not be cut off by the popup",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/Dropdown/Dropdown.styles.ts b/packages/react/src/components/Dropdown/Dropdown.styles.ts
@@ -173,6 +173,9 @@ export const getStyles: IStyleFunction<IDropdownStyleProps, IDropdownStyles> = p
           top: 0,
           bottom: 0,
           right: 0,
+          [HighContrastSelector]: {
+            inset: '2px',
+          },
         },
         [HighContrastSelector]: {
           border: 'none',
@@ -382,8 +385,8 @@ export const getStyles: IStyleFunction<IDropdownStyleProps, IDropdownStyles> = p
     dropdownItemsWrapper: { selectors: { '&:focus': { outline: 0 } } },
     dropdownItems: [globalClassnames.dropdownItems, { display: 'block' }],
     dropdownItem: [...dropdownItemStyle, itemSelectors()],
-    dropdownItemSelected: dropdownItemSelected,
-    dropdownItemDisabled: dropdownItemDisabled,
+    dropdownItemSelected,
+    dropdownItemDisabled,
     dropdownItemSelectedAndDisabled: [dropdownItemSelected, dropdownItemDisabled, { backgroundColor: 'transparent' }],
     dropdownItemHidden: [...dropdownItemStyle, { display: 'none' }],
     dropdownDivider: [globalClassnames.dropdownDivider, { height: 1, backgroundColor: semanticColors.bodyDivider }],

diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -459,6 +459,9 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
                             right: 0px;
                             top: 0px;
                           }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            inset: 2px;
+                          }
                           @media screen and (-ms-high-contrast: active), screen and (forced-colors: active), screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
                             -ms-high-contrast-adjust: none;
                             forced-color-adjust: none;
@@ -702,6 +705,9 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
                           right: 0px;
                           top: 0px;
                         }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          inset: 2px;
+                        }
                         @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
                           border: none;
                         }
@@ -1608,6 +1614,7 @@ exports[`Dropdown single-select Renders correctly when open 1`] = `
                           }
                           @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
                             bottom: -2px;
+                            inset: 2px;
                             left: -2px;
                             outline-color: ButtonText;
                             right: -2px;
@@ -1774,6 +1781,7 @@ exports[`Dropdown single-select Renders correctly when open 1`] = `
                         }
                         @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
                           bottom: -2px;
+                          inset: 2px;
                           left: -2px;
                           outline-color: ButtonText;
                           right: -2px;