@iota/apps-ui-kit 0.9.3 → 0.9.5

package/src/lib/components/molecules/table-header-cell/TableHeaderCell.tsx

@@ -6,7 +6,7 @@ import cx from 'classnames';
 import { Checkbox } from '@/components/atoms/checkbox';
 import { TableHeaderCellSortOrder } from './tableHeaderCell.enums';
 
-export interface TableHeaderCellProps {
+export interface TableHeaderCellProps extends React.AriaAttributes {
     /**
      * The column key.
      */
@@ -68,6 +68,7 @@ export function TableHeaderCell({
     onSortClick,
     onCheckboxChange,
     sortOrder,
+    ...ariaProps
 }: TableHeaderCellProps): JSX.Element {
     const handleSort = () => {
         const newSortOrder =
@@ -107,6 +108,16 @@ export function TableHeaderCell({
                     'cursor-pointer': hasSort,
                 },
             )}
+            aria-sort={
+                hasSort
+                    ? sortOrder === TableHeaderCellSortOrder.Asc
+                        ? 'ascending'
+                        : sortOrder === TableHeaderCellSortOrder.Desc
+                          ? 'descending'
+                          : 'none'
+                    : undefined
+            }
+            {...ariaProps}
         >
             <div
                 className={cx(

package/src/lib/components/molecules/visual-asset-card/VisualAssetCard.tsx

@@ -7,7 +7,7 @@ import cx from 'classnames';
 import { AssetMediaRenderer } from '../../molecules/asset-media-renderer';
 import type { AssetMediaRendererProps } from '../../molecules/asset-media-renderer';
 
-interface VisualAssetBaseProps {
+interface VisualAssetBaseProps extends React.AriaAttributes {
     /**
      * The onClick event for the icon.
      */
@@ -73,6 +73,7 @@ export function VisualAssetCard({
                 <ButtonUnstyled
                     className="visual-asset-icon-color absolute right-2 top-2 z-10 h-9 w-9 cursor-pointer rounded-full p-xs opacity-0 transition-opacity duration-300 group-hover:bg-shader-neutral-light-72 group-hover:opacity-100 [&_svg]:h-5 [&_svg]:w-5"
                     onClick={handleIconClick}
+                    aria-label="More options"
                 >
                     {icon}
                 </ButtonUnstyled>

package/src/lib/components/organisms/accordion/Accordion.tsx

@@ -48,6 +48,8 @@ export function AccordionHeader({
     return (
         <div
             onClick={onToggle}
+            role="button"
+            aria-expanded={isExpanded}
             className={cx(
                 'state-layer relative flex cursor-pointer items-center justify-between gap-md overflow-hidden rounded-xl py-sm--rs',
                 {

package/src/lib/components/organisms/dialog/Dialog.tsx

@@ -42,11 +42,15 @@ const DialogOverlay = React.forwardRef<
     <RadixDialog.Overlay
         ref={ref}
         className={cx(
-            ' dialog-overlay-bg absolute h-full w-full backdrop-blur-md names:backdrop-blur-lg',
+            'dialog-overlay-bg absolute h-full w-full backdrop-blur-md names:backdrop-blur-lg',
+            'data-[state=open]:animate-dialog-overlay-show',
         )}
         {...props}
     >
-        <DialogClose className={cx('fixed right-3 top-3', { hidden: !showCloseIcon })}>
+        <DialogClose
+            className={cx('fixed right-3 top-3', { hidden: !showCloseIcon })}
+            aria-label="Close"
+        >
             <Close className="button-text-color-neutral" />
         </DialogClose>
     </RadixDialog.Overlay>
@@ -115,6 +119,9 @@ const DialogContent = React.forwardRef<
                             'dialog-content-bg dialog-outline absolute flex flex-col justify-center',
                             dialogPositioning,
                             widthClass,
+                            position === DialogPosition.Right
+                                ? 'data-[state=open]:animate-dialog-panel-show'
+                                : 'data-[state=open]:animate-dialog-content-show',
                         )}
                         {...props}
                     >

package/src/lib/components/organisms/navbar/Navbar.tsx

@@ -61,6 +61,8 @@ export function Navbar({
                     <div
                         className="state-layer navbar-icon-color relative rounded-full p-xs hover:cursor-pointer sm:hidden [&_svg]:h-6 [&_svg]:w-6"
                         onClick={onToggleNavbar}
+                        role="button"
+                        aria-label="Toggle menu"
                     >
                         <MenuIcon />
                     </div>

package/src/lib/components/organisms/navbar/NavbarSlideout.tsx

@@ -38,6 +38,7 @@ export function NavbarSlideout({
                             type={ButtonType.Ghost}
                             onClick={onToggleNavbar}
                             icon={<ArrowBack />}
+                            aria-label="Close menu"
                         />
                     </div>
                     {items.map((item) => (

package/src/lib/components/organisms/table/Table.tsx

@@ -119,6 +119,7 @@ export function Table({
                                         icon={<DoubleArrowLeft />}
                                         disabled={!paginationOptions.hasFirst}
                                         onClick={paginationOptions.onFirst}
+                                        aria-label="First page"
                                     />
                                     <Button
                                         type={ButtonType.Secondary}
@@ -126,6 +127,7 @@ export function Table({
                                         icon={<ArrowLeft />}
                                         disabled={!paginationOptions.hasPrev}
                                         onClick={paginationOptions.onPrev}
+                                        aria-label="Previous page"
                                     />
                                     <Button
                                         type={ButtonType.Secondary}
@@ -133,6 +135,7 @@ export function Table({
                                         icon={<ArrowRight />}
                                         disabled={!paginationOptions.hasNext}
                                         onClick={paginationOptions.onNext}
+                                        aria-label="Next page"
                                     />
                                     <Button
                                         type={ButtonType.Secondary}
@@ -140,6 +143,7 @@ export function Table({
                                         icon={<DoubleArrowRight />}
                                         disabled={!paginationOptions.hasLast}
                                         onClick={paginationOptions.onLast}
+                                        aria-label="Last page"
                                     />
                                 </>
                             )}

package/src/lib/tailwind/base.presets.ts

@@ -53,6 +53,48 @@ export const BASE_CONFIG: Config = {
             backgroundImage: {
                 ...NAMES_GRADIENTS,
             },
+            keyframes: {
+                'dialog-overlay-show': {
+                    from: { opacity: '0' },
+                    to: { opacity: '1' },
+                },
+                'dialog-content-show': {
+                    from: {
+                        opacity: '0',
+                        transform: 'translate(-50%, -50%) scale(0.92)',
+                    },
+                    to: {
+                        opacity: '1',
+                        transform: 'translate(-50%, -50%) scale(1)',
+                    },
+                },
+                'dialog-panel-show': {
+                    from: {
+                        opacity: '0',
+                        transform: 'translateX(12px)',
+                    },
+                    to: {
+                        opacity: '1',
+                        transform: 'translateX(0)',
+                    },
+                },
+                'dropdown-show': {
+                    from: {
+                        opacity: '0',
+                        transform: 'scale(0.94)',
+                    },
+                    to: {
+                        opacity: '1',
+                        transform: 'scale(1)',
+                    },
+                },
+            },
+            animation: {
+                'dialog-overlay-show': 'dialog-overlay-show 170ms ease-out',
+                'dialog-content-show': 'dialog-content-show 170ms ease-out',
+                'dialog-panel-show': 'dialog-panel-show 210ms ease-out',
+                'dropdown-show': 'dropdown-show 125ms ease-out',
+            },
         },
     },
 };