@carbon-labs/react-animated-header 0.22.0 → 0.24.0

package/es/__stories__/data/index.d.ts

@@ -10,6 +10,7 @@ export const headerTiles: ({
         href: string;
         title: string;
         mainIcon: import("@carbon/react/icons").CarbonIconType;
+        ariaLabel: string;
         subtitle?: undefined;
     } | {
         id: string;
@@ -17,6 +18,7 @@ export const headerTiles: ({
         title: string;
         subtitle: string;
         mainIcon: import("@carbon/react/icons").CarbonIconType;
+        ariaLabel: string;
     })[];
 } | {
     id: number;
@@ -27,6 +29,7 @@ export const headerTiles: ({
         title: string;
         subtitle: string;
         mainIcon: import("@carbon/react/icons").CarbonIconType;
+        ariaLabel: string;
         secondaryIcon?: undefined;
     } | {
         id: string;
@@ -34,6 +37,7 @@ export const headerTiles: ({
         title: string;
         mainIcon: import("@carbon/react/icons").CarbonIconType;
         secondaryIcon: import("@carbon/react/icons").CarbonIconType;
+        ariaLabel: string;
         subtitle?: undefined;
     })[];
 } | {
@@ -46,6 +50,7 @@ export const headerTiles: ({
         subtitle: string;
         mainIcon: import("@carbon/react/icons").CarbonIconType;
         isLoading: boolean;
+        ariaLabel: string;
         isDisabled?: undefined;
         secondaryIcon?: undefined;
     } | {
@@ -53,6 +58,7 @@ export const headerTiles: ({
         title: string;
         subtitle: string;
         mainIcon: import("@carbon/react/icons").CarbonIconType;
+        ariaLabel: string;
         href?: undefined;
         isLoading?: undefined;
         isDisabled?: undefined;
@@ -64,6 +70,7 @@ export const headerTiles: ({
         subtitle: string;
         mainIcon: import("@carbon/react/icons").CarbonIconType;
         isDisabled: boolean;
+        ariaLabel: string;
         isLoading?: undefined;
         secondaryIcon?: undefined;
     } | {
@@ -72,6 +79,7 @@ export const headerTiles: ({
         title: string;
         mainIcon: import("@carbon/react/icons").CarbonIconType;
         secondaryIcon: import("@carbon/react/icons").CarbonIconType;
+        ariaLabel: string;
         subtitle?: undefined;
         isLoading?: undefined;
         isDisabled?: undefined;
@@ -82,6 +90,7 @@ export const headerTiles: ({
     tiles: {
         id: string;
         customContent: import("react/jsx-runtime").JSX.Element;
+        ariaLabel: string;
     }[];
 })[];
 export namespace tasksControllerConfigButton {
@@ -108,6 +117,7 @@ export namespace tasksControllerConfigDropdown {
                 href: string;
                 title: string;
                 mainIcon: import("@carbon/react/icons").CarbonIconType;
+                ariaLabel: string;
                 subtitle?: undefined;
             } | {
                 id: string;
@@ -115,6 +125,7 @@ export namespace tasksControllerConfigDropdown {
                 title: string;
                 subtitle: string;
                 mainIcon: import("@carbon/react/icons").CarbonIconType;
+                ariaLabel: string;
             })[];
         } | {
             id: number;
@@ -125,6 +136,7 @@ export namespace tasksControllerConfigDropdown {
                 title: string;
                 subtitle: string;
                 mainIcon: import("@carbon/react/icons").CarbonIconType;
+                ariaLabel: string;
                 secondaryIcon?: undefined;
             } | {
                 id: string;
@@ -132,6 +144,7 @@ export namespace tasksControllerConfigDropdown {
                 title: string;
                 mainIcon: import("@carbon/react/icons").CarbonIconType;
                 secondaryIcon: import("@carbon/react/icons").CarbonIconType;
+                ariaLabel: string;
                 subtitle?: undefined;
             })[];
         } | {
@@ -144,6 +157,7 @@ export namespace tasksControllerConfigDropdown {
                 subtitle: string;
                 mainIcon: import("@carbon/react/icons").CarbonIconType;
                 isLoading: boolean;
+                ariaLabel: string;
                 isDisabled?: undefined;
                 secondaryIcon?: undefined;
             } | {
@@ -151,6 +165,7 @@ export namespace tasksControllerConfigDropdown {
                 title: string;
                 subtitle: string;
                 mainIcon: import("@carbon/react/icons").CarbonIconType;
+                ariaLabel: string;
                 href?: undefined;
                 isLoading?: undefined;
                 isDisabled?: undefined;
@@ -162,6 +177,7 @@ export namespace tasksControllerConfigDropdown {
                 subtitle: string;
                 mainIcon: import("@carbon/react/icons").CarbonIconType;
                 isDisabled: boolean;
+                ariaLabel: string;
                 isLoading?: undefined;
                 secondaryIcon?: undefined;
             } | {
@@ -170,6 +186,7 @@ export namespace tasksControllerConfigDropdown {
                 title: string;
                 mainIcon: import("@carbon/react/icons").CarbonIconType;
                 secondaryIcon: import("@carbon/react/icons").CarbonIconType;
+                ariaLabel: string;
                 subtitle?: undefined;
                 isLoading?: undefined;
                 isDisabled?: undefined;
@@ -180,9 +197,11 @@ export namespace tasksControllerConfigDropdown {
             tiles: {
                 id: string;
                 customContent: import("react/jsx-runtime").JSX.Element;
+                ariaLabel: string;
             }[];
         };
         export function setSelectedTileGroup(): void;
+        export let ariaLabel: string;
     }
 }
 export namespace tasksControllerConfigLoading {
@@ -198,6 +217,8 @@ export namespace workspaceSelectorConfig {
         export { label_1 as label };
         export function renderSelectedItem(item: any): string;
     }
+    let ariaLabel_1: string;
+    export { ariaLabel_1 as ariaLabel };
 }
 export namespace workspaceSelectorConfigLoading {
     export { workspaceData as allWorkspaces };

package/es/components/AnimatedHeader/AnimatedHeader.d.ts

@@ -2,6 +2,13 @@ import React, { ElementType, ReactNode } from 'react';
 import { TasksControllerProps } from '../TasksController/TasksController';
 import { WorkspaceSelectorProps } from '../WorkspaceSelector/WorkspaceSelector';
 /** Animated Header */
+export interface AriaLabels {
+    welcome?: string;
+    description?: string;
+    collapseButton?: string;
+    expandButton?: string;
+    tilesContainer?: string;
+}
 export interface Tile {
     href?: string | null;
     id: string;
@@ -13,6 +20,7 @@ export interface Tile {
     isLoading?: boolean;
     isDisabled?: boolean;
     onClick?: () => void;
+    ariaLabel?: string;
 }
 export interface TileGroup {
     id: number;
@@ -21,6 +29,7 @@ export interface TileGroup {
 }
 export type AnimatedHeaderProps = {
     allTileGroups?: TileGroup[];
+    ariaLabels?: AriaLabels;
     selectedTileGroup?: TileGroup;
     setSelectedTileGroup: (e: any) => void;
     description?: string;

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -7,7 +7,7 @@
 
 import PropTypes from 'prop-types';
 import React, { useRef, useState, useEffect } from 'react';
-import { Grid, Column, Tooltip, Button } from '@carbon/react';
+import { Grid, Column, Button } from '@carbon/react';
 import { ChevronUp, ChevronDown } from '@carbon/icons-react';
 import lottie from '../../_virtual/lottie.js';
 import { usePrefix } from '../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
@@ -15,11 +15,13 @@ import '@carbon/react/icons';
 import { BaseTile } from '../Tiles/BaseTile/BaseTile.js';
 import TasksController from '../TasksController/TasksController.js';
 import WorkspaceSelector from '../WorkspaceSelector/WorkspaceSelector.js';
+import HeaderTitle from '../HeaderTitle/HeaderTitle.js';
 
 /** Animated Header */
 
 const AnimatedHeader = ({
   allTileGroups,
+  ariaLabels = {},
   selectedTileGroup,
   setSelectedTileGroup,
   description,
@@ -40,17 +42,13 @@ const AnimatedHeader = ({
   const blockClass = `${prefix}--animated-header`;
   const animationContainer = useRef(null);
   const [open, setOpen] = useState(true);
-  const [headingTextAnimation, setHeadingTextAnimation] = useState('');
   const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
   const collapsed = `${blockClass}--collapsed`;
   const contentCollapsed = `${blockClass}__content--collapsed`;
   const descriptionCollapsed = `${blockClass}__left-area-container--collapsed`;
-  const headingCollapsed = `${blockClass}__heading--collapsed`;
-  const headingExpanded = `${blockClass}__heading--expanded`;
   const lottieCollapsed = `${blockClass}__lottie-animation--collapsed`;
   const handleButtonCollapseClick = () => {
     setOpen(!open);
-    open ? setHeadingTextAnimation(headingCollapsed) : setHeadingTextAnimation(headingExpanded);
   };
   useEffect(() => {
     if (!animationContainer.current) {
@@ -87,7 +85,7 @@ const AnimatedHeader = ({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isReduced]);
-  return /*#__PURE__*/React.createElement("section", {
+  return /*#__PURE__*/React.createElement("header", {
     className: `${blockClass}${!open ? ` ${collapsed}` : ''}`
   }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__gradient--overlay`
@@ -101,32 +99,32 @@ const AnimatedHeader = ({
     ,
     style: {
       backgroundImage: `url(${headerStatic})`
-    }
+    },
+    "aria-hidden": "true"
   })), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__lottie-animation--container`
   }, /*#__PURE__*/React.createElement("div", {
     ref: animationContainer,
-    className: `${blockClass}__lottie-animation${!open ? ` ${lottieCollapsed}` : ''}`
+    className: `${blockClass}__lottie-animation${!open ? ` ${lottieCollapsed}` : ''}`,
+    "aria-hidden": "true"
   })), /*#__PURE__*/React.createElement(Column, {
     sm: 4,
     md: 8,
     lg: 16
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    align: "bottom",
-    label: `${welcomeText}, ${userName}`
-  }, /*#__PURE__*/React.createElement("h1", {
-    className: `${blockClass}__heading ${headingTextAnimation}`
-  }, /*#__PURE__*/React.createElement("span", {
-    className: `${blockClass}__heading-welcome`
-  }, welcomeText, ",", ' '), /*#__PURE__*/React.createElement("span", {
-    className: `${blockClass}__heading-name`
-  }, userName)))), (description || tasksControllerConfig) && /*#__PURE__*/React.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(HeaderTitle, {
+    userName: userName,
+    welcomeText: welcomeText,
+    headerExpanded: open,
+    ariaLabels: ariaLabels
+  })), (description || tasksControllerConfig) && /*#__PURE__*/React.createElement(Column, {
     sm: 4,
     md: 8,
     lg: 4,
+    id: `${blockClass}-content`,
     className: `${blockClass}__left-area-container${!open ? ` ${descriptionCollapsed}` : ''}`
   }, description && /*#__PURE__*/React.createElement("h2", {
-    className: `${blockClass}__description`
+    className: `${blockClass}__description`,
+    "aria-label": ariaLabels?.description ?? `Header description`
   }, description), /*#__PURE__*/React.createElement(TasksController, {
     tasksControllerConfig: tasksControllerConfig,
     isLoading: isLoading,
@@ -145,7 +143,9 @@ const AnimatedHeader = ({
     userName: userName,
     isLoading: isLoading
   })), /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__tiles-container`
+    className: `${blockClass}__tiles-container`,
+    "aria-label": ariaLabels?.tilesContainer ?? `Feature tiles`,
+    role: "list"
   }, selectedTileGroup.tiles.map(tile => {
     return /*#__PURE__*/React.createElement(BaseTile, {
       onClick: tile.href || tile.onClick ? () => {
@@ -164,7 +164,8 @@ const AnimatedHeader = ({
       customContent: tile.customContent,
       isLoading: isLoading || tile.isLoading,
       isDisabled: tile.isDisabled,
-      disabledTaskLabel: disabledTaskLabel
+      disabledTaskLabel: disabledTaskLabel,
+      ariaLabel: tile.ariaLabel
     });
   }))), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__button-collapse--gradient`
@@ -174,7 +175,10 @@ const AnimatedHeader = ({
     id: `${blockClass}__button-collapse`,
     kind: "ghost",
     renderIcon: open ? ChevronUp : ChevronDown,
-    onClick: handleButtonCollapseClick
+    onClick: handleButtonCollapseClick,
+    "aria-expanded": open,
+    "aria-controls": `${blockClass}-content`,
+    "aria-label": open ? ariaLabels?.collapseButton ?? 'Collapse header details' : ariaLabels?.expandButton ?? 'Expand header details'
   }, open ? collapseButtonLabel : expandButtonLabel))));
 };
 AnimatedHeader.displayName = 'Animated Header';
@@ -183,6 +187,10 @@ AnimatedHeader.propTypes = {
    * Array of each tile group setup
    */
   allTileGroups: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * Provide custom aria labels for each part of the header.
+   */
+  ariaLabels: PropTypes.object,
   /**
    * Specify an optional className to be added to your Animated Header
    */

package/es/components/HeaderTitle/HeaderTitle.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * 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 { AriaLabels } from '../AnimatedHeader/AnimatedHeader';
+export type HeaderTitleProps = {
+    userName?: string;
+    welcomeText?: string;
+    headerExpanded?: boolean;
+    ariaLabels?: AriaLabels;
+};
+declare const HeaderTitle: React.FC<HeaderTitleProps>;
+export default HeaderTitle;

package/es/components/HeaderTitle/HeaderTitle.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 { Tooltip } from '@carbon/react';
+import { usePrefix } from '../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
+
+const NAME_FIRST_LANGS = ['ar',
+// Arabic
+'he',
+// Hebrew
+'fa',
+// Farsi/Persian
+'ur',
+// Urdu
+'ja',
+// Japanese
+'zh' // Chinese
+];
+const HeaderTitle = ({
+  userName,
+  welcomeText,
+  headerExpanded,
+  ariaLabels
+}) => {
+  const prefix = usePrefix();
+  const blockClass = `${prefix}--animated-header__title`;
+  const currentLang = typeof window !== 'undefined' ? document.documentElement.lang || 'en' : 'en';
+  const isNameFirst = NAME_FIRST_LANGS.includes(currentLang.slice(0, 2));
+  const headingCollapsed = `${blockClass}-collapsed`;
+  const headingExpanded = `${blockClass}-expanded`;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    align: "bottom",
+    label: `${welcomeText}, ${userName}`
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: `${blockClass} ${headerExpanded ? headingExpanded : headingCollapsed}`,
+    "aria-label": ariaLabels?.welcome ?? `${welcomeText}, ${userName}`
+  }, isNameFirst ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: `${blockClass}-first`
+  }, userName, ", "), /*#__PURE__*/React.createElement("span", {
+    className: `${blockClass}-second`
+  }, welcomeText)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: `${blockClass}-first`
+  }, welcomeText, ", "), /*#__PURE__*/React.createElement("span", {
+    className: `${blockClass}-second`
+  }, userName))));
+};
+
+export { HeaderTitle as default };

package/es/components/TasksController/TasksController.d.ts

@@ -17,6 +17,7 @@ export interface TasksControllerConfig {
     };
     dropdown?: {
         propsOverrides?: Partial<Omit<DropdownProps<TileGroup>, 'id' | 'items' | 'selectedItem'>>;
+        ariaLabel?: string;
     };
 }
 export type TasksControllerProps = {

package/es/components/TasksController/TasksController.js

@@ -46,9 +46,10 @@ const TasksController = ({
         setSelectedTileGroup?.(e);
         dropdownCustomOnChange?.(e);
       },
+      'aria-label': tasksControllerConfig?.dropdown?.ariaLabel ?? 'Select a task group',
       ...dropdownOverrideProps
     };
-  }, [allTileGroups, selectedTileGroup, setSelectedTileGroup, blockClass, dropdownCustomClass, dropdownOverrideProps, dropdownCustomOnChange]);
+  }, [allTileGroups, blockClass, dropdownCustomClass, selectedTileGroup, tasksControllerConfig?.dropdown?.ariaLabel, dropdownOverrideProps, setSelectedTileGroup, dropdownCustomOnChange]);
   if (!tasksControllerConfig?.type) {
     return null;
   }

package/es/components/Tiles/AIPromptTile/AIPromptTile.d.ts

@@ -19,6 +19,7 @@ interface AIPromptTileProps {
     isDisabled?: boolean;
     disabledTaskLabel?: string;
     onClick?: (() => void) | null;
+    ariaLabel?: string;
 }
 export declare const AIPromptTile: React.FC<AIPromptTileProps>;
 export {};

package/es/components/Tiles/AIPromptTile/AIPromptTile.js

@@ -24,7 +24,8 @@ const AIPromptTile = ({
   isLoading,
   isDisabled,
   disabledTaskLabel,
-  onClick
+  onClick,
+  ariaLabel
 }) => {
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__ai-prompt-tile`;
@@ -48,6 +49,8 @@ const AIPromptTile = ({
   return /*#__PURE__*/React.createElement("div", {
     id: `${blockClass}`,
     className: `${prefix}--animated-header__tile ${blockClass}${isDisabled ? ' ' + disabled : ''}`,
+    "aria-label": ariaLabel ?? title ?? 'AI Tile',
+    role: "listitem",
     title: isDisabled ? disabledTaskLabel ?? '' : '',
     key: id
   }, isLoading ? /*#__PURE__*/React.createElement(SkeletonPlaceholder, {

package/es/components/Tiles/BaseTile/BaseTile.d.ts

@@ -22,6 +22,7 @@ interface BaseTileProps {
     isDisabled?: boolean;
     disabledTaskLabel?: string;
     onClick?: (() => void) | null;
+    ariaLabel?: string;
 }
 export declare const BaseTile: React.FC<BaseTileProps>;
 export {};

package/es/components/Tiles/GlassTile/GlassTile.d.ts

@@ -15,6 +15,7 @@ interface GlassTileProps {
     isDisabled?: boolean;
     disabledTaskLabel?: string;
     onClick?: (() => void) | null;
+    ariaLabel?: string;
 }
 export declare const GlassTile: React.FC<GlassTileProps>;
 export {};

package/es/components/Tiles/GlassTile/GlassTile.js

@@ -24,7 +24,8 @@ const GlassTile = ({
   isLoading,
   isDisabled,
   disabledTaskLabel,
-  onClick: glassTileClickHandler
+  onClick: glassTileClickHandler,
+  ariaLabel
 }) => {
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__glass-tile`;
@@ -42,7 +43,10 @@ const GlassTile = ({
   if (!href && !glassTileClickHandler) {
     return /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--animated-header__tile ${blockClass}`,
-      key: id
+      key: id,
+      "aria-label": ariaLabel ?? title ?? 'Glass Tile',
+      title: isDisabled ? disabledTaskLabel ?? '' : '',
+      tabIndex: -1
     }, body);
   }
   return /*#__PURE__*/React.createElement(Link, {
@@ -50,6 +54,9 @@ const GlassTile = ({
       glassTileClickHandler?.();
     },
     className: `${prefix}--animated-header__tile ${blockClass}`,
+    "aria-label": ariaLabel ?? title ?? 'Glass Tile',
+    role: "listitem",
+    tabIndex: isDisabled || isLoading ? -1 : 0,
     key: id,
     href: href ?? undefined,
     disabled: isDisabled || isLoading,

package/es/components/WorkspaceSelector/WorkspaceSelector.d.ts

@@ -13,6 +13,7 @@ export interface Workspace {
 }
 export type WorkspaceSelectorConfig = {
     propsOverrides: Partial<Omit<DropdownProps<Workspace>, 'id' | 'items' | 'selectedItem' | 'setSelectedWorkspace'>>;
+    ariaLabel?: string;
     allWorkspaces: Workspace[];
     selectedWorkspace?: Workspace | null;
     setSelectedWorkspace: (e: any) => void;

package/es/components/WorkspaceSelector/WorkspaceSelector.js

@@ -39,6 +39,7 @@ const WorkspaceSelector = ({
         workspaceSelectorConfig?.setSelectedWorkspace?.(e);
         dropdownCustomOnChange?.(e);
       },
+      'aria-label': workspaceSelectorConfig?.ariaLabel ?? 'Select a workspace',
       ...dropdownOverrideProps
     };
   }, [blockClass, dropdownCustomClass, dropdownOverrideProps, userName, workspaceSelectorConfig, dropdownCustomOnChange]);

package/es/index.d.ts

@@ -6,9 +6,10 @@
  * 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 AnimatedHeader from './components/AnimatedHeader/AnimatedHeader';
+import AnimatedHeader, { AriaLabels } from './components/AnimatedHeader/AnimatedHeader';
+import HeaderTitle from './components/HeaderTitle/HeaderTitle';
 import { BaseTile } from './components/Tiles/index.js';
 export * from './assets';
 export type { Workspace, WorkspaceSelectorConfig, } from './components/WorkspaceSelector/WorkspaceSelector';
 export type { TasksControllerConfig } from './components/TasksController/TasksController';
-export { AnimatedHeader, BaseTile };
+export { AnimatedHeader, BaseTile, HeaderTitle, type AriaLabels };

package/es/index.js

@@ -6,6 +6,7 @@
  */
 
 export { default as AnimatedHeader } from './components/AnimatedHeader/AnimatedHeader.js';
+export { default as HeaderTitle } from './components/HeaderTitle/HeaderTitle.js';
 import 'react';
 import '@carbon/react';
 import '@carbon/react/icons';