@iota/apps-ui-kit 0.9.2 → 0.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "sideEffects": false,
   "repository": "https://github.com/iotaledger/iota",
   "license": "Apache-2.0",
@@ -27,7 +27,7 @@
     "classnames": "^2.5.1",
     "lodash.merge": "^4.6.2",
     "react-number-format": "^5.2.2",
-    "@iota/apps-ui-icons": "0.7.2"
+    "@iota/apps-ui-icons": "0.7.4"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -43,7 +43,7 @@
     "@storybook/react": "^7.1.0",
     "@storybook/react-vite": "^7.1.0",
     "@types/lodash.merge": "^4.6.9",
-    "@types/node": "^20.14.10",
+    "@types/node": "^24.0.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.3.2",

package/src/lib/components/atoms/button/Button.tsx

@@ -14,7 +14,7 @@ import {
 } from './button.classes';
 import cx from 'classnames';
 
-export interface ButtonProps {
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
     /**
      * The size of the button.
      */
@@ -75,6 +75,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             iconAfterText = false,
             tabIndex = 0,
             testId,
+            ...buttonProps
         },
         ref,
     ): React.JSX.Element => {
@@ -87,9 +88,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
         return (
             <button
+                type={htmlType}
+                {...buttonProps}
                 ref={ref}
                 onClick={onClick}
-                type={htmlType}
                 className={cx(
                     'state-layer relative flex items-center justify-center gap-2 rounded-full transition-all duration-150 ease-in disabled:cursor-not-allowed disabled:opacity-40',
                     paddingClasses,

package/src/lib/components/atoms/button-segment/ButtonSegment.tsx

@@ -13,7 +13,7 @@ import cx from 'classnames';
 import { ButtonSegmentType } from './buttonSegment.enums';
 import { ButtonUnstyled } from '../button';
 
-interface ButtonSegmentProps {
+interface ButtonSegmentProps extends React.AriaAttributes {
     /**
      * The label of the button.
      */
@@ -52,6 +52,7 @@ export function ButtonSegment({
     onClick,
     type = ButtonSegmentType.Rounded,
     isNested = false,
+    ...ariaProps
 }: ButtonSegmentProps): React.JSX.Element {
     const isUnderlined = type === ButtonSegmentType.Underlined;
 
@@ -88,10 +89,11 @@ export function ButtonSegment({
                 },
             )}
             disabled={disabled}
+            {...ariaProps}
         >
             <div className={cx('flex flex-row items-center justify-center gap-2', textSize)}>
                 {icon && <span>{icon}</span>}
-                <span className="shrink-0 font-inter">{label}</span>
+                <span className="text-start font-inter">{label}</span>
             </div>
         </ButtonUnstyled>
     );

package/src/lib/components/atoms/checkbox/Checkbox.tsx

@@ -5,7 +5,7 @@ import { forwardRef, useEffect, useRef } from 'react';
 import cx from 'classnames';
 import { Dash, Checkmark } from '@iota/apps-ui-icons';
 
-interface CheckboxProps {
+interface CheckboxProps extends React.AriaAttributes {
     /**
      * The label of the checkbox.
      */
@@ -46,6 +46,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             isDisabled,
             onCheckedChange,
             name,
+            ...ariaProps
         }: CheckboxProps,
         ref,
     ) => {
@@ -92,6 +93,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                     onChange={(e) => {
                         onCheckedChange?.(e);
                     }}
+                    {...ariaProps}
                 />
                 <span
                     onClick={() => inputRef.current?.click()}

package/src/lib/components/atoms/header/Header.tsx

@@ -46,6 +46,7 @@ export function Header({
                     type={ButtonType.Ghost}
                     onClick={onBack}
                     icon={<ArrowBack />}
+                    aria-label="Back"
                 />
             ) : (
                 keepSpaceForIcon && <div className="w-9" />
@@ -64,6 +65,7 @@ export function Header({
                     onClick={onClose}
                     icon={<Close />}
                     testId={`close-icon`}
+                    aria-label="Close"
                 />
             ) : (
                 keepSpaceForIcon && <div className="w-9" />

package/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx

@@ -146,7 +146,7 @@ export function KeyValueInfo({
                 )}
                 <div className="self-center">
                     {copyText && (
-                        <ButtonUnstyled onClick={handleCopyClick}>
+                        <ButtonUnstyled onClick={handleCopyClick} aria-label="Copy to clipboard">
                             <Copy className="key-supporting-text-color" />
                         </ButtonUnstyled>
                     )}

package/src/lib/components/atoms/list-item/ListItem.tsx

@@ -6,7 +6,7 @@ import cx from 'classnames';
 import { ArrowRight } from '@iota/apps-ui-icons';
 import { Button, ButtonSize, ButtonType } from '../button';
 
-export interface ListItemProps {
+export interface ListItemProps extends React.AriaAttributes {
     /**
      * Has right icon (optional).
      */
@@ -36,6 +36,7 @@ export function ListItem({
     isDisabled,
     children,
     isHighlighted,
+    ...ariaProps
 }: PropsWithChildren<ListItemProps>): React.JSX.Element {
     function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
         if ((event.key === 'Enter' || event.key === ' ') && !isDisabled && onClick) {
@@ -64,6 +65,7 @@ export function ListItem({
                 role="button"
                 tabIndex={0}
                 onKeyDown={handleKeyDown}
+                {...ariaProps}
                 className={cx(
                     'list-item-color relative flex flex-row items-center justify-between px-md py-sm',
                     !isDisabled && onClick ? 'cursor-pointer' : 'cursor-default',

package/src/lib/components/atoms/radio-button/RadioButton.tsx

@@ -4,7 +4,7 @@
 import cx from 'classnames';
 import { RadioOn, RadioOff } from '@iota/apps-ui-icons';
 
-interface RadioButtonProps {
+interface RadioButtonProps extends React.AriaAttributes {
     /**
      * The id of the radio button.
      */
@@ -48,6 +48,7 @@ function RadioButton({
     isChecked,
     isDisabled,
     onChange,
+    ...ariaProps
 }: RadioButtonProps): React.JSX.Element {
     const RadioIcon = isChecked ? RadioOn : RadioOff;
 
@@ -77,6 +78,7 @@ function RadioButton({
                     onChange={onChange}
                     disabled={isDisabled}
                     className={cx('peer appearance-none')}
+                    {...ariaProps}
                 />
                 <span className="radio-icon-color peer-checked:radio-icon-checked-color peer-checked:peer-disabled:radio-icon-checked-disabled-color absolute size-6">
                     <RadioIcon className="size-full" />

package/src/lib/components/atoms/snackbar/Snackbar.tsx

@@ -6,6 +6,7 @@ import cx from 'classnames';
 import { Close } from '@iota/apps-ui-icons';
 import { SnackbarType } from './snackbar.enums';
 import { BACKGROUND_COLOR, TEXT_COLOR } from './snackbar.classes';
+import { ButtonUnstyled } from '../button';
 
 type Renderable = JSX.Element | string | null;
 export interface SnackbarProps {
@@ -59,10 +60,9 @@ export function Snackbar({
         >
             <div className={cx('w-full text-left text-body-md', TEXT_COLOR[type])}>{text}</div>
             {showClose && (
-                <Close
-                    className={cx('h-5 w-5 cursor-pointer', TEXT_COLOR[type])}
-                    onClick={onClose}
-                />
+                <ButtonUnstyled onClick={onClose} aria-label="Close">
+                    <Close className={cx('h-5 w-5', TEXT_COLOR[type])} />
+                </ButtonUnstyled>
             )}
         </div>
     );

package/src/lib/components/atoms/toggle/Toggle.tsx

@@ -16,7 +16,7 @@ import {
 } from './toggle.classes';
 import cx from 'classnames';
 
-interface ToggleProps {
+interface ToggleProps extends React.AriaAttributes {
     /**
      * The label for the toggle.
      */
@@ -62,6 +62,7 @@ export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
             name,
             size = ToggleSize.Default,
             testId,
+            ...ariaProps
         }: ToggleProps,
         ref,
     ) => {
@@ -123,8 +124,10 @@ export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
 
                 <span
                     role="switch"
+                    aria-checked={isToggled}
                     onClick={() => inputRef.current?.click()}
                     className={toggleClasses}
+                    {...ariaProps}
                 >
                     <span className={thumbClasses} />
                 </span>

package/src/lib/components/atoms/toggle/toggle.classes.ts

@@ -17,15 +17,15 @@ export const TOGGLE_SIZE = {
     [ToggleSize.Default]: 'h-6 w-12',
 };
 
-export const TOGGLE_THUMB = 'absolute rounded-full transition-all duration-200 ease-in';
+export const TOGGLE_THUMB = 'absolute rounded-full transition-all duration-200 ease-in-out';
 export const TOGGLE_THUMB_POSITION = {
     [ToggleSize.Small]: {
         unchecked: 'left-1',
-        checked: 'left-8 -translate-x-full',
+        checked: 'left-[34px] -translate-x-full',
     },
     [ToggleSize.Default]: {
         unchecked: 'left-1',
-        checked: 'left-10 -translate-x-full',
+        checked: 'left-[42px] -translate-x-full',
     },
 };
 export const TOGGLE_THUMB_COLOR = {

package/src/lib/components/molecules/account/Account.tsx

@@ -4,13 +4,7 @@
 import cx from 'classnames';
 import type { BadgeType } from '@/components/atoms';
 import { Badge, Tooltip, TooltipPosition, ButtonUnstyled } from '@/components/atoms';
-import {
-    LockLocked,
-    LockUnlocked,
-    MoreHoriz,
-    CheckmarkFilled,
-    RadioOff,
-} from '@iota/apps-ui-icons';
+import { MoreHoriz, CheckmarkFilled, RadioOff } from '@iota/apps-ui-icons';
 import { Address } from '../address';
 
 interface AccountProps {
@@ -22,26 +16,14 @@ interface AccountProps {
      * The subtitle of the account.
      */
     subtitle: string;
-    /**
-     * Whether the account is unlocked.
-     */
-    isLocked?: boolean;
     /**
      * Handler for more options click.
      */
     onOptionsClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Handler for the lock account icon click.
-     */
-    onLockAccountClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Handle for the unlock account icon click.
-     */
-    onUnlockAccountClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Function to render avatar content.
      */
-    avatarContent: ({ isLocked }: { isLocked?: boolean }) => React.JSX.Element;
+    avatarContent: () => React.JSX.Element;
     /**
      * The onCopy event of the Address  (optional).
      */
@@ -97,11 +79,8 @@ export function Account({
     subtitle,
     badgeType,
     badgeText,
-    isLocked,
     avatarContent,
     onOptionsClick,
-    onLockAccountClick,
-    onUnlockAccountClick,
     onCopy,
     copyText,
     onOpen,
@@ -117,17 +96,15 @@ export function Account({
 
     return (
         <div
+            data-testid="account-tile"
             className={cx(
                 'state-layer group relative flex w-full items-center justify-between space-x-3 rounded-xl px-sm py-xs hover:cursor-pointer',
                 isActive && 'state-active',
-                {
-                    'opacity-60': isLocked && showSelected,
-                },
             )}
         >
             <div className="flex w-full items-center gap-x-3">
                 <div>
-                    <Avatar isLocked={isLocked} />
+                    <Avatar />
                 </div>
                 <div className="flex w-full min-w-0 flex-col items-start py-xs">
                     <div className="flex w-full min-w-0 items-center space-x-2">
@@ -157,30 +134,13 @@ export function Account({
                 <div className="ml-auto flex items-center space-x-2 [&_button]:h-5 [&_button]:w-5 [&_svg]:h-5 [&_svg]:w-5">
                     <div className="account-icon-color flex items-center space-x-2 [&_button:not(.locked)]:invisible group-hover:[&_button:not(.locked)]:visible">
                         {onOptionsClick && (
-                            <ButtonUnstyled onClick={onOptionsClick}>
+                            <ButtonUnstyled onClick={onOptionsClick} aria-label="More options">
                                 <MoreHoriz />
                             </ButtonUnstyled>
                         )}
-                        {onLockAccountClick &&
-                            onUnlockAccountClick &&
-                            (isLocked ? (
-                                <div className="flex items-center">
-                                    <ButtonUnstyled
-                                        onClick={onUnlockAccountClick}
-                                        testId="account-unlock"
-                                        className="locked"
-                                    >
-                                        <LockLocked />
-                                    </ButtonUnstyled>
-                                </div>
-                            ) : (
-                                <ButtonUnstyled onClick={onLockAccountClick} testId="account-lock">
-                                    <LockUnlocked />
-                                </ButtonUnstyled>
-                            ))}
                     </div>
                     {showSelected && (
-                        <ButtonUnstyled>
+                        <ButtonUnstyled aria-label="Checkmark">
                             {isSelected ? (
                                 <CheckmarkFilled className="account-check-active-color h-5 w-5" />
                             ) : (

package/src/lib/components/molecules/address/Address.tsx

@@ -72,9 +72,8 @@ export function Address({
         if (externalLink) {
             const newWindow = window.open(externalLink, '_blank', 'noopener noreferrer');
             if (newWindow) newWindow.opener = null;
-        } else {
-            onOpen?.(event);
         }
+        onOpen?.(event);
     }
 
     return (
@@ -83,7 +82,8 @@ export function Address({
             {isCopyable && (
                 <ButtonUnstyled
                     onClick={handleCopyClick}
-                    className="opacity-0 group-hover:opacity-100"
+                    className="opacity-100"
+                    aria-label="Copy to clipboard"
                 >
                     <Copy />
                 </ButtonUnstyled>
@@ -91,7 +91,8 @@ export function Address({
             {isExternal && (
                 <ButtonUnstyled
                     onClick={handleOpenClick}
-                    className="opacity-0 group-hover:opacity-100"
+                    className="opacity-100"
+                    aria-label="Open in new tab"
                 >
                     <ArrowTopRight />
                 </ButtonUnstyled>

package/src/lib/components/molecules/card/Card.tsx

@@ -5,7 +5,7 @@ import cx from 'classnames';
 import { CARD_DISABLED_CLASSES, CARD_TYPE_CLASSES } from './card.classes';
 import { CardType } from './card.enums';
 
-export interface CardProps {
+export interface CardProps extends React.AriaAttributes {
     /**
      * If `true`, the card will be disabled.
      */
@@ -44,25 +44,29 @@ export function Card({
     onClick,
     children,
     testId,
+    ...ariaProps
 }: CardProps) {
     function handleOnClick() {
         if (!isDisabled) {
             onClick?.();
         }
     }
+    const isClickable = !isDisabled && onClick;
     return (
         <div
             onClick={handleOnClick}
+            role={isClickable ? 'button' : undefined}
             className={cx(
                 'relative inline-flex w-full items-center gap-3 rounded-xl px-sm py-xs',
                 CARD_TYPE_CLASSES[type],
                 {
-                    'state-layer': isHoverable || (!isDisabled && onClick),
+                    'state-layer': isHoverable || isClickable,
                     [CARD_DISABLED_CLASSES]: isDisabled,
                     'cursor-pointer': onClick,
                 },
             )}
             data-testid={testId}
+            {...ariaProps}
         >
             {children}
         </div>

package/src/lib/components/molecules/chip/Chip.tsx

@@ -18,7 +18,7 @@ import {
 } from './chip.classes';
 import { ChipSize, ChipType } from './chip.enums';
 
-interface ChipProps {
+interface ChipProps extends React.AriaAttributes {
     /**
      * The label of the chip
      */
@@ -77,6 +77,7 @@ export function Chip({
     trailingElement,
     disabled,
     size = ChipSize.Default,
+    ...ariaProps
 }: ChipProps) {
     const isOutlineSelected = type === ChipType.Outline && selected;
     const outlineStyle = selected
@@ -104,6 +105,7 @@ export function Chip({
                 selected ? 'border-transparent' : BORDER_CLASSES[type],
             )}
             disabled={disabled}
+            {...ariaProps}
         >
             <span
                 className={cx(
@@ -128,9 +130,13 @@ export function Chip({
                 </span>
                 {trailingElement}
                 {showClose && (
-                    <div
-                        onClick={onClose}
-                        className={cx(disabled ? 'cursor-default' : 'cursor-pointer')}
+                    <ButtonUnstyled
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onClose?.();
+                        }}
+                        disabled={disabled}
+                        aria-label="Remove"
                     >
                         <Close
                             className={cx(
@@ -138,7 +144,7 @@ export function Chip({
                                 disabled ? '' : selected ? 'opacity-100' : CLOSE_ICON_INTERACTIVE,
                             )}
                         />
-                    </div>
+                    </ButtonUnstyled>
                 )}
             </span>
         </ButtonUnstyled>

package/src/lib/components/molecules/display-stats/DisplayStats.tsx

@@ -131,7 +131,7 @@ export function DisplayStats({
                 )}
                 {copyText && (
                     <div className="self-center">
-                        <ButtonUnstyled onClick={handleCopyClick}>
+                        <ButtonUnstyled onClick={handleCopyClick} aria-label="Copy to clipboard">
                             <Copy className="display-stats-copy-icon-color" />
                         </ButtonUnstyled>
                     </div>

package/src/lib/components/molecules/input/Input.tsx

@@ -241,6 +241,7 @@ function InputTrailingElement({
                 className="input-icon-color [&_svg]:h-5 [&_svg]:w-5"
                 onClick={onClearInput}
                 tabIndex={-1}
+                aria-label="Clear input"
             >
                 <Close />
             </ButtonUnstyled>
@@ -251,6 +252,7 @@ function InputTrailingElement({
                 onClick={onToggleButtonClick}
                 className="input-icon-color [&_svg]:h-5 [&_svg]:w-5"
                 tabIndex={-1}
+                aria-label="Toggle visibility"
             >
                 {isContentVisible ? <VisibilityOn /> : <VisibilityOff />}
             </ButtonUnstyled>

package/src/lib/components/molecules/navbar-item/NavbarItem.tsx

@@ -5,7 +5,7 @@ import { NavbarItemHorizontal } from './NavbarItemHorizontal';
 import { NavbarItemVertical } from './NavbarItemVertical';
 import { NavbarItemType } from './navbarItem.enums';
 
-export interface NavbarItemProps {
+export interface NavbarItemProps extends React.AriaAttributes {
     /**
      * The type of the navbar item.
      */

package/src/lib/components/molecules/navbar-item/NavbarItemHorizontal.tsx

@@ -23,6 +23,7 @@ export function NavbarItemHorizontal({
     hasBadge,
     onClick,
     isDisabled = false,
+    ...ariaProps
 }: Omit<NavbarItemProps, 'type'>): React.JSX.Element {
     const fillClasses = isSelected ? SELECTED_ICON : UNSELECTED_ICON;
     const paddingClasses = text ? PADDING_WITH_TEXT : PADDING_WITHOUT_TEXT;
@@ -40,9 +41,11 @@ export function NavbarItemHorizontal({
     return (
         <div
             onClick={handleClick}
+            role="button"
             className={cx(
                 'inline-flex cursor-pointer flex-col items-center justify-center space-y-1',
             )}
+            {...ariaProps}
         >
             <div
                 className={cx(

package/src/lib/components/molecules/navbar-item/NavbarItemVertical.tsx

@@ -19,6 +19,7 @@ export function NavbarItemVertical({
     hasBadge,
     onClick,
     isDisabled = false,
+    ...ariaProps
 }: Omit<NavbarItemProps, 'type'>): React.JSX.Element {
     const fillClasses = isSelected ? SELECTED_ICON : UNSELECTED_ICON;
     const backgroundColors = isSelected && SELECTED_BACKGROUND;
@@ -36,11 +37,13 @@ export function NavbarItemVertical({
     return (
         <div
             onClick={handleClick}
+            role="button"
             className={cx(
                 'relative inline-flex w-full flex-row items-center justify-between rounded-full p-sm',
                 backgroundColors,
                 disabledClasses,
             )}
+            {...ariaProps}
         >
             <div className="flex items-center gap-3">
                 <div className={cx('inline-flex [&_svg]:h-6 [&_svg]:w-6', fillClasses)}>{icon}</div>

package/src/lib/components/molecules/search/Search.tsx

@@ -19,7 +19,7 @@ export interface Suggestion {
     type?: string;
 }
 
-export interface SearchProps {
+export interface SearchProps extends React.AriaAttributes {
     /**
      * The value of the search input.
      */
@@ -63,6 +63,7 @@ export function Search({
     isLoading = false,
     type = SearchBarType.Outlined,
     renderSuggestion,
+    ...ariaProps
 }: SearchProps): React.JSX.Element {
     const inputRef = useRef<HTMLInputElement>(null);
     const suggestionsListRef = useRef<HTMLDivElement>(null);
@@ -181,6 +182,11 @@ export function Search({
                         'search-placeholder-color w-full flex-1 outline-none',
                         backgroundColorClass,
                     )}
+                    role="combobox"
+                    aria-expanded={showSuggestions}
+                    aria-haspopup="listbox"
+                    aria-autocomplete="list"
+                    {...ariaProps}
                 />
                 <SearchIcon />
             </div>
@@ -191,6 +197,7 @@ export function Search({
                         'absolute left-0 top-full flex w-full flex-col items-center overflow-hidden',
                         suggestionsStyle,
                     )}
+                    role="listbox"
                 >
                     <Divider width="w-11/12" />
                     {isLoading ? (
@@ -207,6 +214,9 @@ export function Search({
                                     'w-full cursor-pointer px-md py-sm',
                                     selectedIndex === index ? 'search-selected-index-bg-color' : '',
                                 )}
+                                role="option"
+                                aria-selected={selectedIndex === index}
+                                aria-label={suggestion.label}
                             >
                                 {renderSuggestion(suggestion, index)}
                             </div>