feat(theming)!: remove focusVisibleRef prop and polyfill scoping element (#1771)

Author: jzempel

docs/migration.md

@@ -137,6 +137,14 @@ consider additional positioning prop support on a case-by-case basis.
 
 - `DrawerModal`: renamed to `Drawer`
 - `TooltipModal`: removed `popperModifiers` prop (see [note](#breaking-changes))
+- Removed internal `useFocusVisible` hook for both `Modal` and `Drawer`. For
+  non-Garden modal content that still depends on the polyfill for focus styling,
+  either:
+  1. Use updated `:focus-visible` styling provided by the `focusStyles` and
+     `getFocusBoxShadow` theming utilities, or
+  1. Use
+     [@zendeskgarden/container-focusvisible](https://www.npmjs.com/package/@zendeskgarden/container-focusvisible)
+     to restore the polyfill
 - Removed `GARDEN_PLACEMENT` type export. Use `ITooltipModalProps['placement']` instead.
 - Subcomponent exports for `Modal` have been deprecated and will be removed in a future major version.
   Update to subcomponent properties (e.g., `Modal.Body`).
@@ -182,6 +190,9 @@ consider additional positioning prop support on a case-by-case basis.
   scheme to custom components that are not part of the Garden framework. It is
   recommended to utilize this stopgap measure until such components can be updated
   to leverage the full capabilities of v9 `getColor`.
+- The `focusVisibleRef` prop (and the resulting scoping `<div>`) has been
+  removed from `<ThemeProvider>`. Current browser support obviates the need for a
+  `:focus-visible` polyfill.
 - Utility function `getColor` has been refactored with a signature that supports
   v9 light/dark modes. Replace usage with `getColorV8` until custom components can
   be upgraded to utilize the new `getColor` function.

package-lock.json

@@ -5,14 +5,14 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useState, FocusEvent, forwardRef, HTMLAttributes, useMemo } from 'react';
+import React, { useState, forwardRef, HTMLAttributes, useMemo } from 'react';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 import ChevronDown from '@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg';
 import { useAccordionContext, useSectionContext, HeaderContext } from '../../../utils';
-import { StyledHeader, StyledRotateIcon, COMPONENT_ID as buttonGardenId } from '../../../styled';
+import { StyledHeader, StyledRotateIcon } from '../../../styled';
 
 const HeaderComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {
-  const { onClick, onFocus, onBlur, onMouseOver, onMouseOut, role, children, ...other } = props;
+  const { onClick, onMouseOver, onMouseOut, role, children, ...other } = props;
   const {
     level: ariaLevel,
     isCompact,
@@ -22,7 +22,6 @@ const HeaderComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement
     expandedSections
   } = useAccordionContext();
   const sectionValue = useSectionContext();
-  const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const isExpanded = expandedSections.includes(sectionValue);
   /**
@@ -39,18 +38,6 @@ const HeaderComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement
     type: 'button',
     value: sectionValue
   });
-  const onHeaderFocus = (e: FocusEvent) => {
-    e.persist();
-
-    setTimeout(() => {
-      const isAccordionButton = e.target.getAttribute('data-garden-id') === buttonGardenId;
-      const isFocusVisible = e.target.getAttribute('data-garden-focus-visible');
-
-      if (isAccordionButton && isFocusVisible) {
-        setIsFocused(true);
-      }
-    }, 0);
-  };
 
   const value = useMemo(
     () => ({
@@ -65,14 +52,11 @@ const HeaderComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement
       <StyledHeader
         isCollapsible={isCollapsible}
         isExpanded={isExpanded}
-        isFocused={isFocused}
         {...(getHeaderProps({
           ref,
           'aria-level': ariaLevel,
           role: role === undefined || role === null ? role : 'heading',
           onClick: composeEventHandlers(onClick, onTriggerClick),
-          onFocus: composeEventHandlers(onFocus, onHeaderFocus),
-          onBlur: composeEventHandlers(onBlur, () => setIsFocused(false)),
           onMouseOver: composeEventHandlers(onMouseOver, () => setIsHovered(true)),
           onMouseOut: composeEventHandlers(onMouseOut, () => setIsHovered(false)),
           ...other

packages/accordions/src/elements/accordion/components/Header.tsx

@@ -7,11 +7,11 @@
 
 import styled from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME, focusStyles } from '@zendeskgarden/react-theming';
+import { StyledButton } from './StyledButton';
 
 const COMPONENT_ID = 'accordions.header';
 
 interface IStyledHeader {
-  isFocused?: boolean;
   isExpanded?: boolean;
   isCollapsible?: boolean;
 }
@@ -33,8 +33,7 @@ export const StyledHeader = styled.div.attrs<IStyledHeader>({
     focusStyles({
       theme: props.theme,
       inset: true,
-      condition: props.isFocused,
-      selector: '&:focus-within'
+      selector: `&:has(${StyledButton}:focus-visible)`
     })}
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};

packages/accordions/src/styled/accordion/StyledHeader.spec.tsx

@@ -185,8 +185,7 @@ const colorStyles = (props: IButtonProps & ThemeProps<DefaultTheme>) => {
 
       /* prettier-ignore */
       &:hover ${StyledIcon},
-      &:focus-visible ${StyledIcon},
-      &[data-garden-focus-visible] ${StyledIcon} {
+      &:focus-visible ${StyledIcon} {
         color: ${props.isNeutral && getColorV8('neutralHue', shade + 100, props.theme)};
       }
 

packages/accordions/src/styled/accordion/StyledHeader.ts

@@ -94,7 +94,6 @@ export const SheetStory: Story<IArgs> = ({
 }) => (
   <>
     <ThemeProvider
-      focusVisibleRef={null}
       theme={
         ((parentTheme: DefaultTheme) => ({
           ...parentTheme,

packages/buttons/src/styled/StyledButton.ts

@@ -55,8 +55,7 @@ export const StyledHeaderItem = styled(StyledBaseHeaderItem as 'button').attrs({
       inset: props.maxY
     })}
 
-  &:focus-visible:active,
-  &[data-garden-focus-visible]:active {
+  &:focus-visible:active {
     box-shadow: none;
   }