@iota/apps-ui-kit 0.9.3 → 0.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.9.3",
+  "version": "0.9.5",
   "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.3"
+    "@iota/apps-ui-icons": "0.7.5"
   },
   "peerDependencies": {
     "react": "^18 || ^19",

package/src/lib/components/atoms/badge/Badge.tsx

@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
+import { BadgeSize } from './badge.enums';
 import type { BadgeType } from './badge.enums';
-import { BACKGROUND_COLORS, BADGE_TEXT_CLASS, BORDER_COLORS, TEXT_COLORS } from './badge.classes';
+import { BACKGROUND_COLORS, BORDER_COLORS, TEXT_COLORS } from './badge.classes';
 
 interface BadgeProps {
     /**
@@ -14,24 +15,30 @@ interface BadgeProps {
      * The label of the badge.
      */
     label?: string;
+    /**
+     * The size of the badge
+     */
+    size?: BadgeSize;
 }
 
-export function Badge({ type, label }: BadgeProps): React.JSX.Element {
+export function Badge({ type, label, size = BadgeSize.Medium }: BadgeProps): React.JSX.Element {
     const backgroundClasses = BACKGROUND_COLORS[type];
     const textClasses = TEXT_COLORS[type];
-    const borderClasses = BORDER_COLORS[type];
+    const isSmall = size === BadgeSize.Small;
     const labelClasses = label ? 'px-xs py-xxs' : 'h-1.5 w-1.5';
+    const textSizeClass = isSmall ? 'text-label-sm' : 'text-label-md';
 
     return (
         <div
             className={cx(
-                'inline-flex items-center space-x-2 rounded-full border disabled:opacity-30',
+                'inline-flex items-center space-x-2 rounded-full disabled:opacity-30',
+                { border: !isSmall },
                 backgroundClasses,
-                borderClasses,
+                { [BORDER_COLORS[type]]: !isSmall },
                 labelClasses,
             )}
         >
-            <span className={cx(BADGE_TEXT_CLASS, textClasses)}>{label}</span>
+            <span className={cx(textSizeClass, textClasses)}>{label}</span>
         </div>
     );
 }

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

@@ -29,5 +29,3 @@ export const BORDER_COLORS: Record<BadgeType, string> = {
     [BadgeType.Warning]: 'border-warning-surface',
     [BadgeType.Error]: 'border-error-surface',
 };
-
-export const BADGE_TEXT_CLASS = 'text-label-md';

package/src/lib/components/atoms/badge/badge.enums.ts

@@ -9,3 +9,8 @@ export enum BadgeType {
     Warning = 'warning',
     Error = 'error',
 }
+
+export enum BadgeSize {
+    Medium = 'medium',
+    Small = 'small',
+}

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,6 +89,7 @@ export function ButtonSegment({
                 },
             )}
             disabled={disabled}
+            {...ariaProps}
         >
             <div className={cx('flex flex-row items-center justify-center gap-2', textSize)}>
                 {icon && <span>{icon}</span>}

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/molecules/account/Account.tsx

@@ -134,13 +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>
                         )}
                     </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

@@ -82,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>
@@ -90,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>

package/src/lib/components/molecules/select/Select.tsx

@@ -16,7 +16,9 @@ export type SelectOption =
     | { id: string; renderLabel: () => React.JSX.Element }
     | { id: string; label: React.ReactNode };
 
-interface SelectProps extends Pick<React.HTMLProps<HTMLSelectElement>, 'disabled'> {
+interface SelectProps
+    extends Pick<React.HTMLProps<HTMLSelectElement>, 'disabled'>,
+        React.AriaAttributes {
     /**
      * The selected option value.
      */
@@ -83,6 +85,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
             value,
             dropdownPosition = DropdownPosition.Bottom,
             size = SelectSize.Default,
+            ...ariaProps
         },
         ref,
     ) => {
@@ -156,10 +159,13 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
                         ref={ref}
                         onClick={onSelectorClick}
                         disabled={disabled}
+                        aria-expanded={isOpen}
+                        aria-haspopup="listbox"
                         className={cx(
                             'select-container select-border-color focus-visible:enabled:select-border-focus-color active:enabled:select-border-focus-color group-[.errored]:select-border-error-color group-[.opened]:select-border-focus-color [&:is(:focus,_:focus-visible,_:active)]:enabled:select-border-focus-color hover:enabled:select-border-hover-color flex flex-row items-center gap-x-3 rounded-lg border py-sm disabled:cursor-not-allowed [&_svg]:h-5 [&_svg]:w-5',
                             selectPadding,
                         )}
+                        {...ariaProps}
                     >
                         {leadingIcon && <span className="select-icon-color">{leadingIcon}</span>}
 
@@ -195,29 +201,31 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
                             onClick={closeDropdown}
                         />
                     )}
-                    <div
-                        className={cx('absolute z-50 min-w-full', {
-                            hidden: !isOpen,
-                            'top-full':
-                                !dropdownPosition || dropdownPosition === DropdownPosition.Bottom,
-                            'bottom-full': dropdownPosition === DropdownPosition.Top,
-                        })}
-                    >
-                        <Dropdown>
-                            {options.map((option) => {
-                                const optionIsString = typeof option === 'string';
-                                return (
-                                    <ListItem
-                                        onClick={() => handleOptionClick(option)}
-                                        hideBottomBorder
-                                        key={optionIsString ? option : option.id}
-                                    >
-                                        <OptionLabel option={option} />
-                                    </ListItem>
-                                );
-                            })}
-                        </Dropdown>
-                    </div>
+                    {isOpen && (
+                        <div
+                            className={cx(
+                                'absolute z-50 min-w-full animate-dropdown-show',
+                                dropdownPosition === DropdownPosition.Top
+                                    ? 'bottom-full origin-bottom'
+                                    : 'top-full origin-top',
+                            )}
+                        >
+                            <Dropdown>
+                                {options.map((option) => {
+                                    const optionIsString = typeof option === 'string';
+                                    return (
+                                        <ListItem
+                                            onClick={() => handleOptionClick(option)}
+                                            hideBottomBorder
+                                            key={optionIsString ? option : option.id}
+                                        >
+                                            <OptionLabel option={option} />
+                                        </ListItem>
+                                    );
+                                })}
+                            </Dropdown>
+                        </div>
+                    )}
                 </div>
             </InputWrapper>
         );