@primer/components 0.0.0-20211011154552 → 0.0.0-20211011162723

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/components
 
-## 0.0.0-20211011154552
+## 0.0.0-20211011162723
 
 ### Minor Changes
 
@@ -10,7 +10,7 @@
 
 ### Patch Changes
 
-- [#1599](https://github.com/primer/react/pull/1599) [`86e7cc84`](https://github.com/primer/react/commit/86e7cc843842e9c0374be6b566a552247826742c) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Better labels and description for accessible ActionList.Item
+- [#1603](https://github.com/primer/react/pull/1603) [`f96d2abf`](https://github.com/primer/react/commit/f96d2abf45701466054f8f8306b1285bc39c2a0f) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Improve keyboard accessibility with focus styles cross browser
 
 * [#1583](https://github.com/primer/react/pull/1583) [`24b1ebbc`](https://github.com/primer/react/commit/24b1ebbc21ca2eaa92bd6b5b8c15ab0e7577f5a0) Thanks [@pksjce](https://github.com/pksjce)! - Add a utility to provide useIsoMorphicEffect function and use that instead of useLayoutEffect everywhere
 

package/lib/ActionList2/Item.js

@@ -82,9 +82,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
   onSelect = () => null,
   sx: sxProp = {},
   id,
-  _PrivateItemWrapper = ({
-    children
-  }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children),
+  _PrivateItemWrapper,
   ...props
 }, forwardedRef) => {
   const {
@@ -102,9 +100,9 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
     paddingY: '6px',
     // custom value off the scale
     lineHeight: TEXT_ROW_HEIGHT,
-    marginX: listVariant === 'inset' ? 2 : 0,
     minHeight: 5,
-    borderRadius: 2,
+    marginX: listVariant === 'inset' ? 2 : 0,
+    borderRadius: listVariant === 'inset' ? 2 : 0,
     transition: 'background 33.333ms linear',
     color: getVariantStyles(variant, disabled).color,
     textDecoration: 'none',
@@ -117,11 +115,17 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
         backgroundColor: `actionListItem.${variant}.hoverBg`,
         color: getVariantStyles(variant, disabled).hoverColor
       },
-      ':focus:not([aria-disabled])': {
+      ':focus:not([data-focus-visible-added])': {
         backgroundColor: `actionListItem.${variant}.selectedBg`,
         color: getVariantStyles(variant, disabled).hoverColor,
         outline: 'none'
       },
+      '&[data-focus-visible-added]': {
+        // we don't use :focus-visible because not all browsers (safari) have it yet
+        outline: 'none',
+        border: `2 solid`,
+        boxShadow: `0 0 0 2px ${theme === null || theme === void 0 ? void 0 : theme.colors.accent.emphasis}`
+      },
       ':active:not([aria-disabled])': {
         backgroundColor: `actionListItem.${variant}.activeBg`,
         color: getVariantStyles(variant, disabled).hoverColor
@@ -143,7 +147,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
       borderColor: 'var(--divider-color, transparent)'
     },
     // show between 2 items
-    ':not(:first-of-type):not([aria-selected=true])': {
+    ':not(:first-of-type)': {
       '--divider-color': theme === null || theme === void 0 ? void 0 : theme.colors.actionListItem.inlineDivider
     },
     // hide divider after dividers & group header, with higher importance!
@@ -151,14 +155,10 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
       '--divider-color': 'transparent !important'
     },
     // hide border on current and previous item
-    '&:hover:not([aria-disabled]), &:focus:not([aria-disabled])': {
-      '--divider-color': 'transparent'
-    },
-    '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &': {
+    '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
       '--divider-color': 'transparent'
     },
-    // hide border around selected item
-    '&[aria-selected=true] + &': {
+    '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
       '--divider-color': 'transparent'
     }
   };
@@ -166,12 +166,21 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
   const clickHandler = _react.default.useCallback(event => {
     if (disabled) return;
     if (!event.defaultPrevented) onSelect(event);
+  }, [onSelect, disabled]);
+
+  const keyPressHandler = _react.default.useCallback(event => {
+    if (disabled) return;
+
+    if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
+      onSelect(event);
+    }
   }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
 
 
   const labelId = (0, _ssr.useSSRSafeId)(id);
   const inlineDescriptionId = (0, _ssr.useSSRSafeId)(id && `${id}--inline-description`);
   const blockDescriptionId = (0, _ssr.useSSRSafeId)(id && `${id}--block-description`);
+  const ItemWrapper = _PrivateItemWrapper || _react.default.Fragment;
   return /*#__PURE__*/_react.default.createElement(Slots, {
     context: {
       variant,
@@ -183,12 +192,13 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
     ref: forwardedRef,
     sx: (0, _sx.merge)(styles, sxProp),
     onClick: clickHandler,
+    onKeyPress: keyPressHandler,
     "aria-selected": selected,
     "aria-disabled": disabled ? true : undefined,
-    tabIndex: disabled ? undefined : -1,
-    "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
-    "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
-  }, props), /*#__PURE__*/_react.default.createElement(_PrivateItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
+    tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
+    "aria-labelledby": labelId,
+    "aria-describedby": [slots.InlineDescription && inlineDescriptionId, slots.BlockDescription && blockDescriptionId].filter(Boolean).join(' ')
+  }, props), /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
     selected: selected,
     disabled: disabled
   }), slots.LeadingVisual, /*#__PURE__*/_react.default.createElement(_Box.default, {

package/lib-esm/ActionList2/Item.js

@@ -54,9 +54,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
   onSelect = () => null,
   sx: sxProp = {},
   id,
-  _PrivateItemWrapper = ({
-    children
-  }) => /*#__PURE__*/React.createElement(React.Fragment, null, children),
+  _PrivateItemWrapper,
   ...props
 }, forwardedRef) => {
   const {
@@ -73,9 +71,9 @@ export const Item = /*#__PURE__*/React.forwardRef(({
     paddingY: '6px',
     // custom value off the scale
     lineHeight: TEXT_ROW_HEIGHT,
-    marginX: listVariant === 'inset' ? 2 : 0,
     minHeight: 5,
-    borderRadius: 2,
+    marginX: listVariant === 'inset' ? 2 : 0,
+    borderRadius: listVariant === 'inset' ? 2 : 0,
     transition: 'background 33.333ms linear',
     color: getVariantStyles(variant, disabled).color,
     textDecoration: 'none',
@@ -88,11 +86,17 @@ export const Item = /*#__PURE__*/React.forwardRef(({
         backgroundColor: `actionListItem.${variant}.hoverBg`,
         color: getVariantStyles(variant, disabled).hoverColor
       },
-      ':focus:not([aria-disabled])': {
+      ':focus:not([data-focus-visible-added])': {
         backgroundColor: `actionListItem.${variant}.selectedBg`,
         color: getVariantStyles(variant, disabled).hoverColor,
         outline: 'none'
       },
+      '&[data-focus-visible-added]': {
+        // we don't use :focus-visible because not all browsers (safari) have it yet
+        outline: 'none',
+        border: `2 solid`,
+        boxShadow: `0 0 0 2px ${theme === null || theme === void 0 ? void 0 : theme.colors.accent.emphasis}`
+      },
       ':active:not([aria-disabled])': {
         backgroundColor: `actionListItem.${variant}.activeBg`,
         color: getVariantStyles(variant, disabled).hoverColor
@@ -114,7 +118,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
       borderColor: 'var(--divider-color, transparent)'
     },
     // show between 2 items
-    ':not(:first-of-type):not([aria-selected=true])': {
+    ':not(:first-of-type)': {
       '--divider-color': theme === null || theme === void 0 ? void 0 : theme.colors.actionListItem.inlineDivider
     },
     // hide divider after dividers & group header, with higher importance!
@@ -122,25 +126,29 @@ export const Item = /*#__PURE__*/React.forwardRef(({
       '--divider-color': 'transparent !important'
     },
     // hide border on current and previous item
-    '&:hover:not([aria-disabled]), &:focus:not([aria-disabled])': {
-      '--divider-color': 'transparent'
-    },
-    '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &': {
+    '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
       '--divider-color': 'transparent'
     },
-    // hide border around selected item
-    '&[aria-selected=true] + &': {
+    '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
       '--divider-color': 'transparent'
     }
   };
   const clickHandler = React.useCallback(event => {
     if (disabled) return;
     if (!event.defaultPrevented) onSelect(event);
+  }, [onSelect, disabled]);
+  const keyPressHandler = React.useCallback(event => {
+    if (disabled) return;
+
+    if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
+      onSelect(event);
+    }
   }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
 
   const labelId = useSSRSafeId(id);
   const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`);
   const blockDescriptionId = useSSRSafeId(id && `${id}--block-description`);
+  const ItemWrapper = _PrivateItemWrapper || React.Fragment;
   return /*#__PURE__*/React.createElement(Slots, {
     context: {
       variant,
@@ -152,12 +160,13 @@ export const Item = /*#__PURE__*/React.forwardRef(({
     ref: forwardedRef,
     sx: merge(styles, sxProp),
     onClick: clickHandler,
+    onKeyPress: keyPressHandler,
     "aria-selected": selected,
     "aria-disabled": disabled ? true : undefined,
-    tabIndex: disabled ? undefined : -1,
-    "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
-    "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
-  }, props), /*#__PURE__*/React.createElement(_PrivateItemWrapper, null, /*#__PURE__*/React.createElement(Selection, {
+    tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
+    "aria-labelledby": labelId,
+    "aria-describedby": [slots.InlineDescription && inlineDescriptionId, slots.BlockDescription && blockDescriptionId].filter(Boolean).join(' ')
+  }, props), /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(Selection, {
     selected: selected,
     disabled: disabled
   }), slots.LeadingVisual, /*#__PURE__*/React.createElement(Box, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-20211011154552",
+  "version": "0.0.0-20211011162723",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",