fix: datagrid row size accessibility v1

packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -5,45 +5,69 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import * as React from 'react';
+import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Settings16 } from '@carbon/icons-react';
 import { Button } from 'carbon-components-react';
 import cx from 'classnames';
 import RowSizeRadioGroup from './RowSizeRadioGroup';
 import { pkg } from '../../../../../settings';
 
-const blockClass = `${pkg.prefix}--datagrid`;
+const blockClass = `${pkg.prefix}--datagrid__row-size`;
 
 const RowSizeDropdown = ({ legendText = 'Row height', ...props }) => {
-  const buttonRef = React.useRef({});
+  const buttonRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onCloseHandler = () => {
+    setIsOpen(false);
+  };
+
+  const onBlurHandler = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      onCloseHandler();
+    }
+  };
+
+  const onClickHandler = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onKeyHandler = (e) => {
+    if (e.key === 'Escape') {
+      onCloseHandler();
+    }
+  };
 
-  const [isOpen, setIsOpen] = React.useState(false);
   return (
-    <>
+    <div
+      tabIndex={-1}
+      className={blockClass}
+      role="presentation"
+      onBlur={onBlurHandler}
+      onKeyDown={onKeyHandler}
+    >
       <Button
+        tabIndex={0}
         hasIconOnly
         ref={buttonRef}
         kind="ghost"
         tooltipPosition="bottom"
         renderIcon={Settings16}
-        onClick={() => setIsOpen((prevOpen) => !prevOpen)}
         iconDescription={legendText}
-        className={cx(`${blockClass}__row-size-button`, {
-          [`${blockClass}__row-size-button--open`]: isOpen,
+        className={cx(`${blockClass}-button`, {
+          [`${blockClass}-button--open`]: isOpen,
         })}
+        onClick={onClickHandler}
       />
       {isOpen && (
         <RowSizeRadioGroup
           {...props}
           legendText={legendText}
           buttonRef={buttonRef}
-          hideRadioGroup={() => {
-            setIsOpen(false);
-          }}
         />
       )}
-    </>
+    </div>
   );
 };
 

packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -8,9 +8,8 @@
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 
-import React, { useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { rem } from '@carbon/layout';
 import { RadioButtonGroup, RadioButton } from 'carbon-components-react';
 import isArray from 'lodash/isArray';
 import { pkg } from '../../../../../settings';
@@ -21,9 +20,7 @@ const RowSizeRadioGroup = ({
   rowSizes,
   selectedOption,
   datagridName,
-  buttonRef,
   onChange,
-  hideRadioGroup,
   legendText,
   rowSizeLabels = {
     xl: 'Extra large',
@@ -33,27 +30,8 @@ const RowSizeRadioGroup = ({
     xs: 'Extra small',
   },
 }) => {
-  const { top, right } = getDropdownPosition(buttonRef.current);
-
-  useEffect(() => {
-    window.addEventListener('click', hideRadioGroup);
-    return () => {
-      window.removeEventListener('click', hideRadioGroup);
-    };
-  }, [hideRadioGroup]);
-
   return (
-    <div
-      className={`${blockClass}__row-size-dropdown`}
-      style={{
-        top: rem(top),
-        right: rem(right),
-      }}
-      role="presentation"
-      onClick={(e) => {
-        e.stopPropagation();
-      }}
-    >
+    <div className={`${blockClass}__row-size-dropdown`} role="presentation">
       <RadioButtonGroup
         legendText={legendText}
         name="row-height-group"
@@ -97,20 +75,6 @@ const getBackwardCompatibleRowSize = (rowSize) => {
   return rowSizeMap[rowSize] || rowSize;
 };
 
-const getDropdownPosition = (buttonEle) => {
-  const parent = buttonEle.parentElement;
-  if (parent instanceof HTMLElement) {
-    const top = buttonEle.offsetTop + buttonEle.offsetHeight;
-    const right =
-      parent.offsetWidth - (buttonEle.offsetLeft + buttonEle.offsetWidth);
-    return {
-      top,
-      right,
-    };
-  }
-  return { top: 0, right: 0 };
-};
-
 RowSizeRadioGroup.defaultProps = {
   rowSizes: [
     {
@@ -135,7 +99,6 @@ RowSizeRadioGroup.defaultProps = {
 RowSizeRadioGroup.propTypes = {
   buttonRef: PropTypes.any.isRequired,
   datagridName: PropTypes.string,
-  hideRadioGroup: PropTypes.func.isRequired,
   legendText: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   rowSizeLabels: PropTypes.object,

packages/ibm-products/src/components/Datagrid/styles/addons/_RowSizeDropdown.scss

@@ -8,11 +8,16 @@
 
 @import '../variables';
 
+.#{$block-class}__row-size {
+  position: relative;
+}
+
 .#{$block-class}__row-size-dropdown {
   position: absolute;
+  right: 0;
+  width: 10rem;
   padding: $spacing-05;
   background-color: $ui-background;
-
   box-shadow: 1px 4px 8px -3px $overlay-01, -1px 6px 8px -5px $overlay-01;
 }