Merge branch 'main' into fix-keyboard-form-submission

adobe · Dec 23, 2021 · b99f1f3 · b99f1f3
2 parents be3d7ce + 8e44d5a
commit b99f1f3
Show file tree

Hide file tree

Showing 21 changed files with 261 additions and 19 deletions.
diff --git a/packages/@adobe/spectrum-css-temp/components/accordion/skin.css b/packages/@adobe/spectrum-css-temp/components/accordion/skin.css
@@ -62,3 +62,10 @@ governing permissions and limitations under the License.
     }
   }
 }
+@media (forced-colors: active) {
+  .spectrum-Accordion-itemHeader {
+    &:focus-ring {
+      outline: 3px solid CanvasText;
+    }
+  }
+}
diff --git a/packages/@adobe/spectrum-css-temp/components/avatar/skin.css b/packages/@adobe/spectrum-css-temp/components/avatar/skin.css
@@ -19,3 +19,11 @@ governing permissions and limitations under the License.
     opacity: var(--spectrum-avatar-small-opacity-disabled);
   }
 }
+@media (forced-colors: active) {
+  .spectrum-Avatar {
+    &.is-disabled {
+      opacity: 1;
+      border: 2px solid GrayText;
+    }
+  }
+}
diff --git a/packages/@adobe/spectrum-css-temp/components/barloader/skin.css b/packages/@adobe/spectrum-css-temp/components/barloader/skin.css
@@ -61,3 +61,11 @@ governing permissions and limitations under the License.
 .spectrum-BarLoader-percentage {
   color: var(--spectrum-fieldlabel-text-color);
 }
+@media (forced-colors: active) {
+  .spectrum-BarLoader-track {
+    forced-color-adjust: none;
+    --spectrum-barloader-large-track-fill-color: ButtonText;
+    --spectrum-barloader-large-track-color: ButtonFace;
+    border: 1px solid ButtonText;
+  }
+}
diff --git a/packages/@adobe/spectrum-css-temp/components/breadcrumb/skin.css b/packages/@adobe/spectrum-css-temp/components/breadcrumb/skin.css
@@ -72,3 +72,37 @@ governing permissions and limitations under the License.
     }
   }
 }
+@media (forced-colors: active) {
+  .spectrum-Breadcrumbs-item {
+    --spectrum-breadcrumb-item-border-color-drop: LinkText;
+    --spectrum-breadcrumb-item-border-color-key-focus: CanvasText;
+    --spectrum-breadcrumb-item-text-color-drop: LinkText;
+    --spectrum-breadcrumb-text-color: LinkText;
+    --spectrum-breadcrumb-text-color-down: CanvasText;
+    --spectrum-breadcrumb-text-color-hover: LinkText;
+    --spectrum-breadcrumb-text-color-key-focus: LinkText;
+    --spectrum-breadcrumb-ui-icon-color: CanvasText;
+    --spectrum-label-text-color-disabled: GrayText;
+    /* Override the selected to be the Standard Text color */
+    &.is-selected,
+    &:last-of-type {
+      color: var(--spectrum-breadcrumb-text-color-down);
+      .spectrum-Breadcrumbs-itemLink {
+        &:hover {
+          color: var(--spectrum-breadcrumb-text-color-down);
+        }
+      }
+    }
+    /* Make links stay link color when clicked and disabled links remain disabled color */
+    .spectrum-Breadcrumbs-itemLink {
+      &:active {
+        color: var(--spectrum-breadcrumb-text-color);
+      }
+      &.is-disabled {
+        &:active {
+          color: var(--spectrum-label-text-color-disabled);
+        }
+      }
+    }
+  }
+}
diff --git a/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css b/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css
@@ -35,3 +35,9 @@ governing permissions and limitations under the License.
     border-color: var(--spectrum-loader-circle-medium-over-background-track-fill-color);
   }
 }
+
+@media (forced-colors: active) {
+  .spectrum-CircleLoader-fill {
+    --spectrum-loader-circle-medium-track-fill-color: Highlight;
+  }
+}
diff --git a/packages/@adobe/spectrum-css-temp/components/dialog/skin.css b/packages/@adobe/spectrum-css-temp/components/dialog/skin.css
@@ -36,3 +36,8 @@ governing permissions and limitations under the License.
     color: var(--spectrum-dialog-warning-icon-color);
   }
 }
+@media (forced-colors: active) {
+  .spectrum-Dialog {
+    border: 1px solid transparent;
+  }
+}
diff --git a/packages/@adobe/spectrum-css-temp/components/sidenav/skin.css b/packages/@adobe/spectrum-css-temp/components/sidenav/skin.css
@@ -62,3 +62,23 @@ governing permissions and limitations under the License.
 .spectrum-SideNav-heading {
   color: var(--spectrum-sidenav-header-text-color);
 }
+
+@media (forced-colors: active) {
+  .spectrum-SideNav-item {
+    forced-color-adjust: none;
+    --spectrum-sidenav-item-text-color-selected: HighlightText;
+    --spectrum-sidenav-item-background-color-selected: Highlight;
+    --spectrum-sidenav-item-background-color-down: Highlight;
+    --spectrum-sidenav-item-background-color-disabled: ButtonFace;
+    --spectrum-sidenav-item-text-color-disabled: GrayText;
+    --spectrum-sidenav-item-background-color: ButtonFace;
+    --spectrum-sidenav-item-text-color: ButtonText;
+    --spectrum-sidenav-item-background-color-hover: ButtonFace;
+    --spectrum-sidenav-item-text-color-hover: ButtonText;
+    --spectrum-sidenav-item-background-color-down: ButtonFace;
+    --spectrum-sidenav-item-background-color-key-focus: ButtonFace;
+    --spectrum-sidenav-item-text-color-key-focus: ButtonText;
+    --spectrum-sidenav-item-border-color-key-focus: ButtonText;
+    --spectrum-sidenav-header-text-color: ButtonText;
+  }
+}
diff --git a/packages/@adobe/spectrum-css-temp/components/statuslight/skin.css b/packages/@adobe/spectrum-css-temp/components/statuslight/skin.css
@@ -79,3 +79,14 @@ governing permissions and limitations under the License.
 .spectrum-StatusLight--purple::before {
   background-color: var(--spectrum-statuslight-dot-color-label-purple);
 }
+
+@media (forced-colors: active) {
+  .spectrum-StatusLight {
+    forced-color-adjust: none;
+    --spectrum-statuslight-text-color-disabled: GrayText;
+    --spectrum-statuslight-dot-color-disabled: GrayText;
+    &:before { 
+      border: 1px solid ButtonText;
+    }
+  }
+}
diff --git a/packages/@adobe/spectrum-css-temp/components/tabs/skin.css b/packages/@adobe/spectrum-css-temp/components/tabs/skin.css
@@ -105,3 +105,52 @@ governing permissions and limitations under the License.
     border-color: var(--spectrum-tabs-focus-ring-color);
   }
 }
+
+@media (forced-colors: active) {
+  .spectrum-Tabs {
+    forced-color-adjust: none;
+    --spectrum-tabs-focus-ring-color: ButtonText;
+    --spectrum-tabs-icon-color: ButtonText;
+    --spectrum-tabs-icon-color-disabled: GrayText;
+    --spectrum-tabs-icon-color-hover: ButtonText;
+    --spectrum-tabs-icon-color-key-focus: ButtonText;
+    --spectrum-tabs-icon-color-selected: HighlightText;
+    --spectrum-tabs-quiet-rule-color: transparent;
+    --spectrum-tabs-quiet-selection-indicator-color: transparent;
+    --spectrum-tabs-quiet-vertical-rule-color: transparent;
+    --spectrum-tabs-rule-color: transparent;
+    --spectrum-tabs-selection-indicator-color: transparent;
+    --spectrum-tabs-text-color: ButtonText;
+    --spectrum-tabs-text-color-disabled: GrayText;
+    --spectrum-tabs-text-color-hover: ButtonText;
+    --spectrum-tabs-text-color-key-focus: ButtonText;
+    --spectrum-tabs-text-color-selected: HighlightText;
+    --spectrum-tabs-vertical-rule-color: transparent;
+    .spectrum-Tabs-item {
+      &:before {
+        background-color: ButtonFace;
+      }
+      .spectrum-Icon {
+        z-index: 1;
+        position: relative;
+      }
+      .spectrum-Tabs-itemLabel {
+        position: relative;
+        z-index: 1;
+      }
+    }
+    .is-selected {
+      color: HighlightText;
+      .spectrum-Icon {
+        fill: HighlightText;
+      }
+      &:before {
+        background-color: Highlight;
+        color: HighlightText;
+      }
+      .spectrum-Tabs-itemLabel {
+        color: HighlightText;
+      }
+    }
+  }
+}
diff --git a/packages/@adobe/spectrum-css-temp/components/tags/skin.css b/packages/@adobe/spectrum-css-temp/components/tags/skin.css
@@ -155,3 +155,50 @@ governing permissions and limitations under the License.
     }
   }
 }
+
+@media (forced-colors: active) {
+  .spectrum-Tags-item {
+    forced-color-adjust: none;
+    --spectrum-tag-background-color: ButtonFace;
+    --spectrum-tag-background-color-disabled: ButtonFace;
+    --spectrum-tag-background-color-hover: ButtonFace;
+    --spectrum-tag-background-color-key-focus: ButtonFace;
+    --spectrum-tag-background-color-selected: Highlight;
+    --spectrum-tag-background-color-selected-hover: Highlight;
+    --spectrum-tag-border-color: ButtonText;
+    --spectrum-tag-border-color-disabled: GrayText;
+    --spectrum-tag-border-color-error: ButtonText;
+    --spectrum-tag-border-color-error-hover: ButtonText;
+    --spectrum-tag-border-color-error-selected: HighlightText;
+    --spectrum-tag-border-color-hover: Highlight;
+    --spectrum-tag-border-color-key-focus: Highlight;
+    --spectrum-tag-border-color-selected: HighlightText;
+    --spectrum-tag-border-color-selected-key-focus: ButtonText;
+    --spectrum-tag-icon-color-error: ButtonText;
+    --spectrum-tag-icon-color-error-hover: ButtonText;
+    --spectrum-tag-removable-border-color-error-down: Highlight;
+    --spectrum-tag-removable-border-color-error-hover: Highlight;
+    --spectrum-tag-removable-border-color-key-focus: Highlight;
+    --spectrum-tag-removable-button-background-color-hover: ButtonFace;
+    --spectrum-tag-removable-button-background-color-key-focus: ButtonFace;
+    --spectrum-tag-removable-button-background-color-selected-hover: Highlight;
+    --spectrum-tag-removable-button-icon-color-hover: Highlight;  
+    --spectrum-tag-removable-button-icon-color-key-focus: Highlight;
+    --spectrum-tag-removable-button-icon-color-selected: HighlightText;
+    --spectrum-tag-removable-button-icon-color-selected-hover: HighlightText;
+    --spectrum-tag-removable-text-color-down: ButtonText;
+    --spectrum-tag-removable-text-color-error-down: Highlight;
+    --spectrum-tag-removable-text-color-error-key-focus: Highlight;
+    --spectrum-tag-removable-text-color-hover: ButtonText;
+    --spectrum-tag-removable-text-color-key-focus: ButtonText;
+    --spectrum-tag-removable-text-color-selected: HighlightText;
+    --spectrum-tag-removable-text-color-selected-key-focus: HighlightText;
+    --spectrum-tag-text-color: ButtonText;
+    --spectrum-tag-text-color-disabled: GrayText;
+    --spectrum-tag-text-color-error-selected: HighlightText;
+    --spectrum-tag-text-color-hover: ButtonText;
+    --spectrum-tag-text-color-key-focus: ButtonText;
+    --spectrum-tag-text-color-selected: HighlightText;
+    --spectrum-tag-text-color-selected-key-focus: HighlightText;
+  }
+}
diff --git a/packages/@adobe/spectrum-css-temp/components/toast/skin.css b/packages/@adobe/spectrum-css-temp/components/toast/skin.css
@@ -72,3 +72,9 @@ governing permissions and limitations under the License.
     }
   }
 }
+
+@media (forced-colors: active) {
+  .spectrum-Toast {
+    border: 1px solid transparent;
+  }
+}
diff --git a/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css b/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css
@@ -46,3 +46,16 @@ governing permissions and limitations under the License.
     border-top-color: var(--spectrum-tooltip-positive-background-color);
   }
 }
+
+@media (forced-colors: active) {
+  .spectrum-Tooltip {
+    border: 1px solid transparent;
+  }
+  .spectrum-Tooltip-tip {
+    forced-color-adjust: none;
+    --spectrum-tooltip-background-color: CanvasText;
+    --spectrum-tooltip-negative-background-color: Highlight;
+    --spectrum-tooltip-info-background-color: Highlight;
+    --spectrum-tooltip-positive-background-color: Highlight;
+  }
+}
diff --git a/packages/@react-aria/button/src/useButton.ts b/packages/@react-aria/button/src/useButton.ts
@@ -54,6 +54,8 @@ export function useButton(props: AriaButtonProps<ElementType>, ref: RefObject<an
     onPressChange,
     // @ts-ignore - undocumented
     preventFocusOnPress,
+    // @ts-ignore - undocumented
+    allowFocusWhenDisabled,
     // @ts-ignore
     onClick: deprecatedOnClick,
     href,
@@ -91,6 +93,9 @@ export function useButton(props: AriaButtonProps<ElementType>, ref: RefObject<an
   });
 
   let {focusableProps} = useFocusable(props, ref);
+  if (allowFocusWhenDisabled) {
+    focusableProps.tabIndex = isDisabled ? -1 : focusableProps.tabIndex;
+  }
   let buttonProps = mergeProps(focusableProps, pressProps, filterDOMProps(props, {labelable: true}));
 
   return {

diff --git a/packages/@react-aria/interactions/docs/interactions.mdx b/packages/@react-aria/interactions/docs/interactions.mdx
@@ -111,7 +111,7 @@ mouse input, touchscreens, and also hybrid devices.
 
 * Chrome 80+ on macOS and Windows
 * Firefox 76+ on macOS and Windows
-* Safari 12+ on macOS
-* Edge 44+ on Windows
-* Safari 12+ on iOS and iPadOS
+* Safari 13+ on macOS
+* Edge 80+ on Windows
+* Safari 13+ on iOS and iPadOS
 * Chrome 80+ on Android
diff --git a/packages/@react-aria/numberfield/src/useNumberField.ts b/packages/@react-aria/numberfield/src/useNumberField.ts
@@ -260,6 +260,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     'aria-controls': inputId,
     excludeFromTabOrder: true,
     preventFocusOnPress: true,
+    allowFocusWhenDisabled: true,
     isDisabled: !state.canIncrement,
     onPressStart: onButtonPressStart
   });
@@ -271,6 +272,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     'aria-controls': inputId,
     excludeFromTabOrder: true,
     preventFocusOnPress: true,
+    allowFocusWhenDisabled: true,
     isDisabled: !state.canDecrement,
     onPressStart: onButtonPressStart
   });

diff --git a/packages/@react-aria/spinbutton/src/useSpinButton.ts b/packages/@react-aria/spinbutton/src/useSpinButton.ts
@@ -167,6 +167,10 @@ export function useSpinButton(
     [onDecrement, minValue, value]
   );
 
+  let cancelContextMenu = (e) => {
+    e.preventDefault();
+  };
+
   return {
     spinButtonProps: {
       role: 'spinbutton',
@@ -182,14 +186,26 @@ export function useSpinButton(
       onBlur
     },
     incrementButtonProps: {
-      onPressStart: () => onIncrementPressStart(400),
-      onPressEnd: clearAsync,
+      onPressStart: () => {
+        onIncrementPressStart(400);
+        window.addEventListener('contextmenu', cancelContextMenu);
+      },
+      onPressEnd: () => {
+        clearAsync();
+        window.removeEventListener('contextmenu', cancelContextMenu);
+      },
       onFocus,
       onBlur
     },
     decrementButtonProps: {
-      onPressStart: () => onDecrementPressStart(400),
-      onPressEnd: clearAsync,
+      onPressStart: () => {
+        onDecrementPressStart(400);
+        window.addEventListener('contextmenu', cancelContextMenu);
+      },
+      onPressEnd: () => {
+        clearAsync();
+        window.removeEventListener('contextmenu', cancelContextMenu);
+      },
       onFocus,
       onBlur
     }

diff --git a/packages/@react-aria/utils/docs/mergeProps.mdx b/packages/@react-aria/utils/docs/mergeProps.mdx
@@ -73,5 +73,5 @@ let merged = {
     a.onKeyDown(e);
     b.onKeyDown(e);
   }
-}
+};
 ```
diff --git a/packages/@react-spectrum/actionbar/src/actionbar.css b/packages/@react-spectrum/actionbar/src/actionbar.css
@@ -81,3 +81,11 @@
     min-width: 0;
   }
 }
+@media (forced-colors: active) {
+  .react-spectrum-ActionBar {
+    &.react-spectrum-ActionBar--emphasized .react-spectrum-ActionBar-bar {
+
+      border: 1px solid transparent;
+    }
+  }
+}