CommandBar: Fix high contrast styling for disabled CommandBar (#14215)

* Add high contrast styling for command bar * Change files * update snapshots * update snapshots * Updating snapshots. * Change files * Fix styling for SplitButton HC mode * update snapshots * update snapshots * Change files * update snapshots * update snapshots * update hc styling for splitbutton and commandbar * update styling for splitbutton * add back styling for non hc splitbutton * update snapshots * revert ComponentExamples snapshots file * Fix primary button hc styling * update snapshots * update snapshots * update snapshots * update snapshots Co-authored-by: KHMakoto <[email protected]>
microsoft · Jul 31, 2020 · 4eef39d · 4eef39d
1 parent 8b560f1
commit 4eef39d
Show file tree

Hide file tree

Showing 163 changed files with 266 additions and 474 deletions.
diff --git a/change/@fluentui-react-next-2020-07-29-14-31-10-a11y-commandbar.json b/change/@fluentui-react-next-2020-07-29-14-31-10-a11y-commandbar.json
@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "update snapshots",
+  "packageName": "@fluentui/react-next",
+  "email": "[email protected]",
+  "dependentChangeType": "none",
+  "date": "2020-07-29T21:31:03.675Z"
+}
diff --git a/change/@fluentui-react-tabs-2020-07-29-14-31-10-a11y-commandbar.json b/change/@fluentui-react-tabs-2020-07-29-14-31-10-a11y-commandbar.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "update snapshots",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-07-29T21:31:10.798Z"
+}
diff --git a/change/@uifabric-experiments-2020-07-28-14-38-39-a11y-commandbar.json b/change/@uifabric-experiments-2020-07-28-14-38-39-a11y-commandbar.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Updating snapshots.",
+  "packageName": "@uifabric/experiments",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-07-28T21:38:39.339Z"
+}
diff --git a/change/office-ui-fabric-react-2020-07-27-10-48-53-a11y-commandbar.json b/change/office-ui-fabric-react-2020-07-27-10-48-53-a11y-commandbar.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Add high contrast styling for command bar",
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-07-27T17:48:52.910Z"
+}
diff --git a/packages/experiments/src/components/MicroFeedback/__snapshots__/MicroFeedback.test.tsx.snap b/packages/experiments/src/components/MicroFeedback/__snapshots__/MicroFeedback.test.tsx.snap
@@ -93,7 +93,6 @@ exports[`MicroFeedback renders correctly with inline prop set 1`] = `
               z-index: 1;
             }
             @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
               bottom: -2px;
               left: -2px;
               outline-color: ButtonText;
@@ -223,7 +222,6 @@ exports[`MicroFeedback renders correctly with inline prop set 1`] = `
               z-index: 1;
             }
             @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
               bottom: -2px;
               left: -2px;
               outline-color: ButtonText;
@@ -405,7 +403,6 @@ exports[`MicroFeedback renders correctly with no props 1`] = `
               z-index: 1;
             }
             @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
               bottom: -2px;
               left: -2px;
               outline-color: ButtonText;
@@ -535,7 +532,6 @@ exports[`MicroFeedback renders correctly with no props 1`] = `
               z-index: 1;
             }
             @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
               bottom: -2px;
               left: -2px;
               outline-color: ButtonText;

diff --git a/packages/experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -61,7 +61,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
             z-index: 1;
           }
           @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-            border: none;
             bottom: -2px;
             left: -2px;
             outline-color: ButtonText;
@@ -79,10 +78,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
           &:focus {
             outline: 0px;
           }
-          @media screen and (-ms-high-contrast: active){& {
-            border-color: grayText;
-            color: grayText;
-          }
       data-is-focusable={false}
       disabled={true}
       onClick={[Function]}
@@ -133,6 +128,9 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
                 margin-top: 0;
                 text-align: center;
               }
+              @media screen and (-ms-high-contrast: active){& {
+                color: GrayText;
+              }
           data-icon-name="Previous"
           role="presentation"
           style={
@@ -194,7 +192,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
             z-index: 1;
           }
           @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-            border: none;
             bottom: -2px;
             left: -2px;
             outline-color: ButtonText;
@@ -212,10 +209,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
           &:focus {
             outline: 0px;
           }
-          @media screen and (-ms-high-contrast: active){& {
-            border-color: grayText;
-            color: grayText;
-          }
       data-is-focusable={false}
       disabled={true}
       onClick={[Function]}
@@ -266,6 +259,9 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
                 margin-top: 0;
                 text-align: center;
               }
+              @media screen and (-ms-high-contrast: active){& {
+                color: GrayText;
+              }
           data-icon-name="CaretSolidLeft"
           role="presentation"
           style={
@@ -327,7 +323,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
             z-index: 1;
           }
           @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-            border: none;
             bottom: -2px;
             left: -2px;
             outline-color: ButtonText;
@@ -434,7 +429,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
             z-index: 1;
           }
           @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-            border: none;
             bottom: -2px;
             left: -2px;
             outline-color: ButtonText;
@@ -541,7 +535,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
             z-index: 1;
           }
           @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-            border: none;
             bottom: -2px;
             left: -2px;
             outline-color: ButtonText;
@@ -648,7 +641,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
             z-index: 1;
           }
           @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-            border: none;
             bottom: -2px;
             left: -2px;
             outline-color: ButtonText;
@@ -755,7 +747,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
             z-index: 1;
           }
           @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-            border: none;
             bottom: -2px;
             left: -2px;
             outline-color: ButtonText;
@@ -858,7 +849,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
             z-index: 1;
           }
           @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-            border: none;
             bottom: -2px;
             left: -2px;
             outline-color: ButtonText;
@@ -1000,7 +990,6 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
               z-index: 1;
             }
             @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
               bottom: -2px;
               left: -2px;
               outline-color: ButtonText;
@@ -1153,7 +1142,6 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
           z-index: 1;
         }
         @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-          border: none;
           bottom: -2px;
           left: -2px;
           outline-color: ButtonText;
@@ -1171,10 +1159,6 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
         &:focus {
           outline: 0px;
         }
-        @media screen and (-ms-high-contrast: active){& {
-          border-color: grayText;
-          color: grayText;
-        }
     data-is-focusable={false}
     disabled={true}
     onClick={[Function]}
@@ -1225,6 +1209,9 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
               margin-top: 0;
               text-align: center;
             }
+            @media screen and (-ms-high-contrast: active){& {
+              color: GrayText;
+            }
         data-icon-name="Previous"
         role="presentation"
         style={
@@ -1286,7 +1273,6 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
           z-index: 1;
         }
         @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-          border: none;
           bottom: -2px;
           left: -2px;
           outline-color: ButtonText;
@@ -1304,10 +1290,6 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
         &:focus {
           outline: 0px;
         }
-        @media screen and (-ms-high-contrast: active){& {
-          border-color: grayText;
-          color: grayText;
-        }
     data-is-focusable={false}
     disabled={true}
     onClick={[Function]}
@@ -1358,6 +1340,9 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
               margin-top: 0;
               text-align: center;
             }
+            @media screen and (-ms-high-contrast: active){& {
+              color: GrayText;
+            }
         data-icon-name="CaretSolidLeft"
         role="presentation"
         style={
@@ -1625,7 +1610,6 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
               z-index: 1;
             }
             @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
               bottom: -2px;
               left: -2px;
               outline-color: ButtonText;
@@ -1783,7 +1767,6 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
           z-index: 1;
         }
         @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-          border: none;
           bottom: -2px;
           left: -2px;
           outline-color: ButtonText;
@@ -1912,7 +1895,6 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
           z-index: 1;
         }
         @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-          border: none;
           bottom: -2px;
           left: -2px;
           outline-color: ButtonText;

diff --git a/...nents/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap b/...nents/SelectedItemsList/SelectedPeopleList/__snapshots__/SelectedPeopleList.test.tsx.snap
@@ -89,7 +89,6 @@ exports[`SelectedPeopleList renders personas that are passed in 1`] = `
               z-index: 1;
             }
             @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
               bottom: -2px;
               left: -2px;
               outline-color: ButtonText;
@@ -424,7 +423,6 @@ exports[`SelectedPeopleList renders personas that are passed in 1`] = `
               z-index: 1;
             }
             @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
               bottom: -2px;
               left: -2px;
               outline-color: ButtonText;
@@ -598,7 +596,6 @@ exports[`SelectedPeopleList renders personas that are passed in 1`] = `
               z-index: 1;
             }
             @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
               bottom: -2px;
               left: -2px;
               outline-color: ButtonText;
@@ -933,7 +930,6 @@ exports[`SelectedPeopleList renders personas that are passed in 1`] = `
               z-index: 1;
             }
             @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
               bottom: -2px;
               left: -2px;
               outline-color: ButtonText;
@@ -1114,7 +1110,6 @@ exports[`SelectedPeopleList renders personas that are passed in as default 1`] =
               z-index: 1;
             }
             @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
               bottom: -2px;
               left: -2px;
               outline-color: ButtonText;
@@ -1449,7 +1444,6 @@ exports[`SelectedPeopleList renders personas that are passed in as default 1`] =
               z-index: 1;
             }
             @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
               bottom: -2px;
               left: -2px;
               outline-color: ButtonText;
@@ -1623,7 +1617,6 @@ exports[`SelectedPeopleList renders personas that are passed in as default 1`] =
               z-index: 1;
             }
             @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
               bottom: -2px;
               left: -2px;
               outline-color: ButtonText;
@@ -1958,7 +1951,6 @@ exports[`SelectedPeopleList renders personas that are passed in as default 1`] =
               z-index: 1;
             }
             @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
               bottom: -2px;
               left: -2px;
               outline-color: ButtonText;

diff --git a/...ponents/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap b/...ponents/UnifiedPicker/UnifiedPeoplePicker/__snapshots__/UnifiedPeoplePicker.test.tsx.snap
@@ -260,7 +260,6 @@ exports[`UnifiedPeoplePicker renders correctly with selected and suggested items
                         z-index: 1;
                       }
                       @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-                        border: none;
                         bottom: -2px;
                         left: -2px;
                         outline-color: ButtonText;
@@ -690,7 +689,6 @@ exports[`UnifiedPeoplePicker renders correctly with selected and suggested items
                         z-index: 1;
                       }
                       @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-                        border: none;
                         bottom: -2px;
                         left: -2px;
                         outline-color: ButtonText;

diff --git a/...s/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/...s/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -123,7 +123,6 @@ exports[`Breadcrumb rendering renders  correctly with custom overflow icon 1`] =
                       z-index: 1;
                     }
                     @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-                      border: none;
                       bottom: -2px;
                       left: -2px;
                       outline-color: ButtonText;
@@ -1309,7 +1308,6 @@ exports[`Breadcrumb rendering renders correctly with maxDisplayedItems and overf
                       z-index: 1;
                     }
                     @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-                      border: none;
                       bottom: -2px;
                       left: -2px;
                       outline-color: ButtonText;
@@ -1543,7 +1541,6 @@ exports[`Breadcrumb rendering renders correctly with maxDisplayedItems and overf
                       z-index: 1;
                     }
                     @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-                      border: none;
                       bottom: -2px;
                       left: -2px;
                       outline-color: ButtonText;
@@ -1777,7 +1774,6 @@ exports[`Breadcrumb rendering renders correctly with overflow 1`] = `
                       z-index: 1;
                     }
                     @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-                      border: none;
                       bottom: -2px;
                       left: -2px;
                       outline-color: ButtonText;
@@ -2275,7 +2271,6 @@ exports[`Breadcrumb rendering renders correctly with overflow and overflowIndex
                       z-index: 1;
                     }
                     @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-                      border: none;
                       bottom: -2px;
                       left: -2px;
                       outline-color: ButtonText;