@carbon/react 1.55.0-rc.0 → 1.55.0

package/es/components/ComposedModal/ComposedModal.d.ts

@@ -68,7 +68,7 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
      */
     selectorPrimaryFocus?: string;
     /** Specify the CSS selectors that match the floating menus. */
-    selectorsFloatingMenus?: Array<string | null | undefined>;
+    selectorsFloatingMenus?: string[];
     size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component

package/es/components/ComposedModal/ComposedModal.js

@@ -17,7 +17,7 @@ import mergeRefs from '../../tools/mergeRefs.js';
 import cx from 'classnames';
 import toggleClass from '../../tools/toggleClass.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
-import wrapFocus, { wrapFocusWithoutSentinels } from '../../internal/wrapFocus.js';
+import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -148,9 +148,9 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     onKeyDown?.(event);
   }
   function handleMousedown(evt) {
+    const target = evt.target;
     evt.stopPropagation();
-    const isInside = innerModal.current?.contains(evt.target);
-    if (!isInside && !preventCloseOnClickOutside) {
+    if (!preventCloseOnClickOutside && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
       closeModal(evt);
     }
   }
@@ -336,7 +336,7 @@ ComposedModal.propTypes = {
   /**
    * Specify the CSS selectors that match the floating menus
    */
-  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
+  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string.isRequired),
   /**
    * Specify the size variant.
    */

package/es/components/Modal/Modal.js

@@ -108,7 +108,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   function handleMousedown(evt) {
     const target = evt.target;
     evt.stopPropagation();
-    if (innerModal.current && !innerModal.current.contains(target) && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
+    if (!preventCloseOnClickOutside && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
       onRequestClose(evt);
     }
   }

package/es/components/Tabs/Tabs.js

@@ -199,7 +199,8 @@ function TabList(_ref2) {
     // TODO: V12 - Remove this class
     [`${prefix}--layout--size-lg`]: iconSize === 'lg',
     [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
-    [`${prefix}--tabs--full-width`]: distributeWidth
+    [`${prefix}--tabs--full-width`]: distributeWidth,
+    [`${prefix}--tabs--dismissable`]: dismissable
   }, customClassName);
 
   // Previous Button
@@ -541,6 +542,25 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
   const handleClose = evt => {
     evt.stopPropagation();
     onTabCloseRequest?.(index);
+
+    // set focus after removing tab
+    if (tabRef.current && tabRef.current.parentElement) {
+      // determine number of tabs, excluding disabled
+      const tabCount = Array.from(tabRef.current.parentElement.childNodes).filter(node => {
+        const element = node;
+        return element.classList.contains('cds--tabs__nav-link') && !element.classList.contains('cds--tabs__nav-item--disabled');
+      }).length;
+
+      // if not removing last tab focus on next tab
+      if (tabRef.current && index + 1 !== tabCount) {
+        tabRef.current.focus();
+      }
+      // if removing last tab focus on previous tab
+      else {
+        const prevTabIndex = (tabCount - 2) * 2;
+        tabRef.current.parentElement.childNodes[prevTabIndex]?.focus();
+      }
+    }
   };
   const handleKeyDown = event => {
     if (dismissable && match(event, Delete)) {
@@ -549,20 +569,31 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
     onKeyDown?.(event);
   };
   const DismissIcon = /*#__PURE__*/React__default.createElement("div", {
-    tabIndex: -1,
-    "aria-hidden": true,
-    className: cx(`${prefix}--tabs__nav-item--close-icon`, {
-      [`${prefix}--visually-hidden`]: !dismissable
+    className: cx({
+      [`${prefix}--tabs__nav-item--close`]: dismissable,
+      [`${prefix}--tabs__nav-item--close--hidden`]: !dismissable
+    })
+  }, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    tabIndex: selectedIndex === index && dismissable ? 0 : -1,
+    "aria-disabled": disabled,
+    "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
+    disabled: disabled,
+    className: cx({
+      [`${prefix}--tabs__nav-item--close-icon`]: dismissable,
+      [`${prefix}--visually-hidden`]: !dismissable,
+      [`${prefix}--tabs__nav-item--close-icon--selected`]: selectedIndex === index,
+      [`${prefix}--tabs__nav-item--close-icon--disabled`]: disabled
     }),
     onClick: handleClose,
-    title: "Close tab",
+    title: `Remove ${typeof children === 'string' ? children : ''} tab`,
     ref: dismissIconRef
   }, /*#__PURE__*/React__default.createElement(Close, {
-    "aria-hidden": dismissable ? 'false' : 'true',
-    "aria-label": "Press delete to close tab"
-  }));
+    "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
+    "aria-label": `Press delete to remove ${typeof children === 'string' ? children : ''} tab`
+  })));
   const hasIcon = Icon ?? dismissable;
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
     "aria-controls": panelId,
     "aria-disabled": disabled,
     "aria-selected": selectedIndex === index,
@@ -589,17 +620,17 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
     size: 16
   })), /*#__PURE__*/React__default.createElement(Text, {
     className: `${prefix}--tabs__nav-item-label`
-  }, children), /*#__PURE__*/React__default.createElement("div", {
+  }, children), !dismissable && Icon && /*#__PURE__*/React__default.createElement("div", {
     className: cx(`${prefix}--tabs__nav-item--icon`, {
       [`${prefix}--visually-hidden`]: !hasIcon
     })
-  }, DismissIcon, !dismissable && Icon && /*#__PURE__*/React__default.createElement(Icon, {
+  }, !dismissable && Icon && /*#__PURE__*/React__default.createElement(Icon, {
     size: 16
   }))), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React__default.createElement(Text, {
     as: "div",
     className: `${prefix}--tabs__nav-item-secondary-label`,
     title: secondaryLabel
-  }, secondaryLabel));
+  }, secondaryLabel)), DismissIcon);
 });
 Tab.propTypes = {
   /**

package/es/components/UIShell/HeaderMenu.d.ts

@@ -0,0 +1,219 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+/**
+ * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
+ * will be a `HeaderMenuItem`. It handles certain keyboard events to help
+ * with managing focus. It also passes along refs to each child so that it can
+ * help manage focus state of its children.
+ */
+interface HeaderMenuProps {
+    /**
+     * Required props for the accessibility label of the menu
+     */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /**
+     * Optionally provide a custom class to apply to the underlying `<li>` node
+     */
+    className?: string;
+    /**
+     * Provide a custom ref handler for the menu button
+     */
+    focusRef?: React.Ref<any>;
+    /**
+     * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+     */
+    isActive?: boolean;
+    /**
+     * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+     * @deprecated Please use `isActive` instead. This will be removed in the next major release.
+     */
+    isCurrentPage?: boolean;
+    /**
+     * Provide a label for the link text
+     */
+    menuLinkName: string;
+    /**
+     * Optionally provide an onBlur handler that is called when the underlying
+     * button fires it's onblur event
+     */
+    onBlur?: (event: React.FocusEvent<HTMLLIElement>) => void;
+    /**
+     * Optionally provide an onClick handler that is called when the underlying
+     * button fires it's onclick event
+     */
+    onClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+    /**
+     * Optionally provide an onKeyDown handler that is called when the underlying
+     * button fires it's onkeydown event
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLLIElement>) => void;
+    /**
+     * Optional component to render instead of string
+     */
+    renderMenuContent?: () => JSX.Element;
+    /**
+     * Optionally provide a tabIndex for the underlying menu button
+     */
+    tabIndex?: number;
+    /**
+     * The children should be a series of `HeaderMenuItem` components.
+     */
+    children?: React.ReactNode;
+}
+interface HeaderMenuState {
+    expanded: boolean;
+    selectedIndex: number | null;
+}
+declare class HeaderMenu extends React.Component<HeaderMenuProps, HeaderMenuState> {
+    static propTypes: {
+        /**
+         * Optionally provide a custom class to apply to the underlying `<li>` node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide a custom ref handler for the menu button
+         */
+        focusRef: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+         */
+        isActive: PropTypes.Requireable<boolean>;
+        /**
+         * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+         * @deprecated Please use `isActive` instead. This will be removed in the next major release.
+         */
+        isCurrentPage: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Provide a label for the link text
+         */
+        menuLinkName: PropTypes.Validator<string>;
+        /**
+         * Optionally provide an onBlur handler that is called when the underlying
+         * button fires it's onblur event
+         */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optionally provide an onClick handler that is called when the underlying
+         * button fires it's onclick event
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optionally provide an onKeyDown handler that is called when the underlying
+         * button fires it's onkeydown event
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optional component to render instead of string
+         */
+        renderMenuContent: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optionally provide a tabIndex for the underlying menu button
+         */
+        tabIndex: PropTypes.Requireable<number>;
+        0: string;
+        length: 1;
+        toString(): string;
+        toLocaleString(): string;
+        pop(): string | undefined;
+        push(...items: string[]): number;
+        concat(...items: ConcatArray<string>[]): string[];
+        concat(...items: (string | ConcatArray<string>)[]): string[];
+        join(separator?: string | undefined): string;
+        reverse(): string[];
+        shift(): string | undefined;
+        slice(start?: number | undefined, end?: number | undefined): string[];
+        sort(compareFn?: ((a: string, b: string) => number) | undefined): [key: string];
+        splice(start: number, deleteCount?: number | undefined): string[];
+        splice(start: number, deleteCount: number, ...items: string[]): string[];
+        unshift(...items: string[]): number;
+        indexOf(searchElement: string, fromIndex?: number | undefined): number;
+        lastIndexOf(searchElement: string, fromIndex?: number | undefined): number;
+        every<S extends string>(predicate: (value: string, index: number, array: string[]) => value is S, thisArg?: any): this is S[];
+        every(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): boolean;
+        some(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): boolean;
+        forEach(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void;
+        map<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any): U[];
+        filter<S_1 extends string>(predicate: (value: string, index: number, array: string[]) => value is S_1, thisArg?: any): S_1[];
+        filter(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): string[];
+        reduce(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
+        reduce(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
+        reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: string, currentIndex: number, array: string[]) => U_1, initialValue: U_1): U_1;
+        reduceRight(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
+        reduceRight(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
+        reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: string, currentIndex: number, array: string[]) => U_2, initialValue: U_2): U_2;
+        find<S_2 extends string>(predicate: (this: void, value: string, index: number, obj: string[]) => value is S_2, thisArg?: any): S_2 | undefined;
+        find(predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): string | undefined;
+        findIndex(predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): number;
+        fill(value: string, start?: number | undefined, end?: number | undefined): [key: string];
+        copyWithin(target: number, start: number, end?: number | undefined): [key: string];
+        entries(): IterableIterator<[number, string]>;
+        keys(): IterableIterator<number>;
+        values(): IterableIterator<string>;
+        includes(searchElement: string, fromIndex?: number | undefined): boolean;
+        flatMap<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];
+        flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
+        at(index: number): string | undefined;
+        [Symbol.iterator](): IterableIterator<string>;
+        [Symbol.unscopables](): {
+            copyWithin: boolean;
+            entries: boolean;
+            fill: boolean;
+            find: boolean;
+            findIndex: boolean;
+            keys: boolean;
+            values: boolean;
+        };
+    };
+    static contextType: React.Context<string>;
+    _subMenus: React.RefObject<HTMLUListElement>;
+    private items;
+    private menuButtonRef;
+    constructor(props: any);
+    /**
+     * Toggle the expanded state of the menu on click.
+     */
+    handleOnClick: (e: any) => void;
+    /**
+     * Keyboard event handler for the entire menu.
+     */
+    handleOnKeyDown: (event: any) => void;
+    /**
+     * Handle our blur event from our underlying menuitems. Will mostly be used
+     * for closing our menu in response to a user clicking off or tabbing out of
+     * the menu or menubar.
+     */
+    handleOnBlur: (event: any) => void;
+    /**
+     * ref handler for our menu button. If we are supplied a `focusRef` prop, we also
+     * forward along the node.
+     *
+     * This is useful when this component is a child in a
+     * menu or menubar as it will allow the parent to explicitly focus the menu
+     * button node when that child should receive focus.
+     */
+    handleMenuButtonRef: (node: any) => void;
+    /**
+     * Handles individual menuitem refs. We assign them to a class instance
+     * property so that we can properly manage focus of our children.
+     */
+    handleItemRef: (index: any) => (node: any) => void;
+    handleMenuClose: (event: any) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+    /**
+     * We capture the `ref` for each child inside of `this.items` to properly
+     * manage focus. In addition to this focus management, all items receive a
+     * `tabIndex: -1` so the user won't hit a large number of items in their tab
+     * sequence when they might not want to go through all the items.
+     */
+    _renderMenuItem: (item: React.ReactNode, index: number) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+}
+declare const HeaderMenuForwardRef: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+export { HeaderMenu };
+export default HeaderMenuForwardRef;

package/es/components/UIShell/HeaderMenu.js

@@ -23,10 +23,13 @@ import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
  * with managing focus. It also passes along refs to each child so that it can
  * help manage focus state of its children.
  */
+
 class HeaderMenu extends React__default.Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "_subMenus", /*#__PURE__*/React__default.createRef());
+    _defineProperty(this, "items", []);
+    _defineProperty(this, "menuButtonRef", null);
     /**
      * Toggle the expanded state of the menu on click.
      */
@@ -81,8 +84,12 @@ class HeaderMenu extends React__default.Component {
      * button node when that child should receive focus.
      */
     _defineProperty(this, "handleMenuButtonRef", node => {
-      if (this.props.focusRef) {
-        this.props.focusRef(node);
+      const {
+        focusRef
+      } = this.props;
+      // Check if focusRef is a function before calling it
+      if (typeof focusRef === 'function') {
+        focusRef(node);
       }
       this.menuButtonRef = node;
     });
@@ -104,7 +111,9 @@ class HeaderMenu extends React__default.Component {
         }));
 
         // Return focus to menu button when the user hits ESC.
-        this.menuButtonRef.focus();
+        if (this.menuButtonRef !== null) {
+          this.menuButtonRef.focus();
+        }
         return;
       }
     });
@@ -141,23 +150,25 @@ class HeaderMenu extends React__default.Component {
       children,
       renderMenuContent: MenuContent,
       menuLinkName,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       focusRef,
-      // eslint-disable-line no-unused-vars
       onBlur,
       onClick,
       onKeyDown,
       ...rest
     } = this.props;
-    const hasActiveDescendant = childrenArg => React__default.Children.toArray(childrenArg).some(child => child.props && (child.props.isActive || child.props.isCurrentPage || child.props.children instanceof Array && hasActiveDescendant(child.props.children)));
+    const hasActiveDescendant = childrenArg => React__default.Children.toArray(childrenArg).some(child => /*#__PURE__*/React__default.isValidElement(child) && (
+    // This is the type guard
+    child.props.isActive || child.props.isCurrentPage || Array.isArray(child.props.children) && hasActiveDescendant(child.props.children)));
     const accessibilityLabel = {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy
     };
     const itemClassName = cx({
       [`${prefix}--header__submenu`]: true,
-      [customClassName]: !!customClassName
+      [`${customClassName}`]: !!customClassName
     });
-    let isActivePage = isActive ? isActive : isCurrentPage;
+    const isActivePage = isActive ? isActive : isCurrentPage;
     const linkClassName = cx({
       [`${prefix}--header__menu-item`]: true,
       [`${prefix}--header__menu-title`]: true,
@@ -248,11 +259,12 @@ _defineProperty(HeaderMenu, "propTypes", {
 });
 _defineProperty(HeaderMenu, "contextType", PrefixContext);
 const HeaderMenuForwardRef = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default.createElement(HeaderMenu, _extends({}, props, {
+  return /*#__PURE__*/React__default.createElement(HeaderMenu, _extends({
+    menuLinkName: "link"
+  }, props, {
     focusRef: ref
   }));
 });
 HeaderMenuForwardRef.displayName = 'HeaderMenu';
-var HeaderMenuForwardRef$1 = HeaderMenuForwardRef;
 
-export { HeaderMenu, HeaderMenuForwardRef$1 as default };
+export { HeaderMenu, HeaderMenuForwardRef as default };

package/lib/components/ComposedModal/ComposedModal.d.ts

@@ -68,7 +68,7 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
      */
     selectorPrimaryFocus?: string;
     /** Specify the CSS selectors that match the floating menus. */
-    selectorsFloatingMenus?: Array<string | null | undefined>;
+    selectorsFloatingMenus?: string[];
     size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component

package/lib/components/ComposedModal/ComposedModal.js

@@ -159,9 +159,9 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     onKeyDown?.(event);
   }
   function handleMousedown(evt) {
+    const target = evt.target;
     evt.stopPropagation();
-    const isInside = innerModal.current?.contains(evt.target);
-    if (!isInside && !preventCloseOnClickOutside) {
+    if (!preventCloseOnClickOutside && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
       closeModal(evt);
     }
   }
@@ -347,7 +347,7 @@ ComposedModal.propTypes = {
   /**
    * Specify the CSS selectors that match the floating menus
    */
-  selectorsFloatingMenus: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+  selectorsFloatingMenus: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string.isRequired),
   /**
    * Specify the size variant.
    */

package/lib/components/Modal/Modal.js

@@ -119,7 +119,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   function handleMousedown(evt) {
     const target = evt.target;
     evt.stopPropagation();
-    if (innerModal.current && !innerModal.current.contains(target) && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
+    if (!preventCloseOnClickOutside && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
       onRequestClose(evt);
     }
   }

package/lib/components/Tabs/Tabs.js

@@ -210,7 +210,8 @@ function TabList(_ref2) {
     // TODO: V12 - Remove this class
     [`${prefix}--layout--size-lg`]: iconSize === 'lg',
     [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
-    [`${prefix}--tabs--full-width`]: distributeWidth
+    [`${prefix}--tabs--full-width`]: distributeWidth,
+    [`${prefix}--tabs--dismissable`]: dismissable
   }, customClassName);
 
   // Previous Button
@@ -552,6 +553,25 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref5, forwardRef) {
   const handleClose = evt => {
     evt.stopPropagation();
     onTabCloseRequest?.(index);
+
+    // set focus after removing tab
+    if (tabRef.current && tabRef.current.parentElement) {
+      // determine number of tabs, excluding disabled
+      const tabCount = Array.from(tabRef.current.parentElement.childNodes).filter(node => {
+        const element = node;
+        return element.classList.contains('cds--tabs__nav-link') && !element.classList.contains('cds--tabs__nav-item--disabled');
+      }).length;
+
+      // if not removing last tab focus on next tab
+      if (tabRef.current && index + 1 !== tabCount) {
+        tabRef.current.focus();
+      }
+      // if removing last tab focus on previous tab
+      else {
+        const prevTabIndex = (tabCount - 2) * 2;
+        tabRef.current.parentElement.childNodes[prevTabIndex]?.focus();
+      }
+    }
   };
   const handleKeyDown = event => {
     if (dismissable && match.match(event, keys.Delete)) {
@@ -560,20 +580,31 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref5, forwardRef) {
     onKeyDown?.(event);
   };
   const DismissIcon = /*#__PURE__*/React__default["default"].createElement("div", {
-    tabIndex: -1,
-    "aria-hidden": true,
-    className: cx__default["default"](`${prefix}--tabs__nav-item--close-icon`, {
-      [`${prefix}--visually-hidden`]: !dismissable
+    className: cx__default["default"]({
+      [`${prefix}--tabs__nav-item--close`]: dismissable,
+      [`${prefix}--tabs__nav-item--close--hidden`]: !dismissable
+    })
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    tabIndex: selectedIndex === index && dismissable ? 0 : -1,
+    "aria-disabled": disabled,
+    "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
+    disabled: disabled,
+    className: cx__default["default"]({
+      [`${prefix}--tabs__nav-item--close-icon`]: dismissable,
+      [`${prefix}--visually-hidden`]: !dismissable,
+      [`${prefix}--tabs__nav-item--close-icon--selected`]: selectedIndex === index,
+      [`${prefix}--tabs__nav-item--close-icon--disabled`]: disabled
     }),
     onClick: handleClose,
-    title: "Close tab",
+    title: `Remove ${typeof children === 'string' ? children : ''} tab`,
     ref: dismissIconRef
   }, /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
-    "aria-hidden": dismissable ? 'false' : 'true',
-    "aria-label": "Press delete to close tab"
-  }));
+    "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
+    "aria-label": `Press delete to remove ${typeof children === 'string' ? children : ''} tab`
+  })));
   const hasIcon = Icon ?? dismissable;
-  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-controls": panelId,
     "aria-disabled": disabled,
     "aria-selected": selectedIndex === index,
@@ -600,17 +631,17 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref5, forwardRef) {
     size: 16
   })), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     className: `${prefix}--tabs__nav-item-label`
-  }, children), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, children), !dismissable && Icon && /*#__PURE__*/React__default["default"].createElement("div", {
     className: cx__default["default"](`${prefix}--tabs__nav-item--icon`, {
       [`${prefix}--visually-hidden`]: !hasIcon
     })
-  }, DismissIcon, !dismissable && Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, !dismissable && Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     size: 16
   }))), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
     className: `${prefix}--tabs__nav-item-secondary-label`,
     title: secondaryLabel
-  }, secondaryLabel));
+  }, secondaryLabel)), DismissIcon);
 });
 Tab.propTypes = {
   /**