@zohodesk/dot 1.9.9 → 1.9.10

package/README.md

@@ -2,6 +2,15 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.9.10
+
+- **ActionButton**
+  - Accessibility improvements:
+    - Removed hardcoded `tabIndex='0'` from the content box and arrow button elements.
+    - Arrow button now exposes `aria-expanded` and `aria-controls` attributes for screen reader support.
+    - Popup is assigned a unique `htmlId` (via `getUniqueId`) linked to `aria-controls` on the arrow button.
+    - Added `a11yAttributes` prop.
+
 # 1.9.9
 
 - PX to variable conversion was not applied due to the CBT migration. The issue has now been fixed. 

package/es/ActionButton/ActionButton.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
@@ -7,13 +9,16 @@ import Button from '@zohodesk/components/es/Button/Button';
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
 import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import style from "./ActionButton.module.css";
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export class ActionButton extends React.Component {
   constructor(props) {
     super(props);
+    this.getElementId = getUniqueId(this);
     this.handleTogglePopup = this.handleTogglePopup.bind(this);
     this.handlePopupOpen = this.handlePopupOpen.bind(this);
+    this.popupId = this.getElementId();
   }
 
   handlePopupOpen(e) {
@@ -64,8 +69,12 @@ export class ActionButton extends React.Component {
       isAbsolutePositioningNeeded,
       isRestrictScroll,
       positionsOffset,
-      targetOffset
+      targetOffset,
+      a11yAttributes
     } = this.props;
+    const {
+      splitButton: a11yAttributes_splitButton
+    } = a11yAttributes;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       isCover: false,
@@ -92,8 +101,7 @@ export class ActionButton extends React.Component {
       dataId: dataId,
       className: `${btnStyle.buttonReset} ${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} ${innerClassName} `,
       "data-title": dataTitle,
-      tagName: "button",
-      tabIndex: "0"
+      tagName: "button"
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Box, {
@@ -113,16 +121,17 @@ export class ActionButton extends React.Component {
     }, text) : null)), subText ? /*#__PURE__*/React.createElement(Box, {
       "data-title": removeChildrenTooltip ? null : subText,
       className: style.subTxt
-    }, subText) : null)), children ? /*#__PURE__*/React.createElement(Box, {
+    }, subText) : null)), children ? /*#__PURE__*/React.createElement(Box, _extends({}, a11yAttributes_splitButton, {
       onClick: onClick && !onHover ? this.handleTogglePopup : this.handlePopupOpen,
       onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
       onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
       className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
       dataId: `${dataId}_arrowButton`,
-      tabIndex: "0",
       tagName: "button",
-      dataSelectorId: `${dataSelectorId}_arrowButton`
-    }, /*#__PURE__*/React.createElement(Container, {
+      dataSelectorId: `${dataSelectorId}_arrowButton`,
+      "aria-expanded": isPopupOpen,
+      "aria-controls": this.popupId
+    }), /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down",
@@ -146,7 +155,8 @@ export class ActionButton extends React.Component {
       isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
       isRestrictScroll: isRestrictScroll,
       positionsOffset: positionsOffset,
-      targetOffset: targetOffset
+      targetOffset: targetOffset,
+      htmlId: this.popupId
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,