IFRCGo · frozenhelium · Apr 2, 2026
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -56,12 +56,11 @@
     "dependencies": {
         "@ifrc-go/icons": "^2.0.1",
         "@togglecorp/fujs": "^2.1.1",
-        "jiti": "^2.5.1",
         "react-focus-on": "^3.9.1",
         "sanitize-html": "^2.11.0"
     },
     "peerDependencies": {
-        "@ifrc-go/icons": "^1.3.1",
+        "@ifrc-go/icons": "^2.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },
@@ -91,9 +90,8 @@
         "postcss": "^8.5.3",
         "postcss-nested": "^7.0.2",
         "postcss-normalize": "^13.0.1",
+        "jiti": "^2.5.1",
         "postcss-preset-env": "^10.1.5",
-        "react-focus-on": "^3.9.1",
-        "sanitize-html": "^2.11.0",
         "stylelint": "^16.17.0",
         "stylelint-config-concentric": "^2.0.2",
         "stylelint-config-recommended": "^15.0.0",

diff --git a/packages/ui/src/components/ChartContainer/index.tsx b/packages/ui/src/components/ChartContainer/index.tsx
@@ -2,7 +2,7 @@ import { _cs } from '@togglecorp/fujs';
 
 import styles from './styles.module.css';
 
-interface Props {
+export interface Props {
     className?: string;
     children: React.ReactNode;
     chartData: {

diff --git a/packages/ui/src/components/Checkbox/index.tsx b/packages/ui/src/components/Checkbox/index.tsx
@@ -1,4 +1,7 @@
-import { useCallback } from 'react';
+import {
+    useCallback,
+    useId,
+} from 'react';
 import { _cs } from '@togglecorp/fujs';
 
 import InputError from '../InputError';
@@ -64,6 +67,7 @@ function Checkbox<const NAME>(props: Props<NAME>) {
         [name, onChange, invertedLogic],
     );
 
+    const inputId = useId();
     const checked = invertedLogic ? !value : value;
 
     const className = _cs(
@@ -77,12 +81,14 @@ function Checkbox<const NAME>(props: Props<NAME>) {
     );
 
     return (
-        <label // eslint-disable-line jsx-a11y/label-has-associated-control
+        <label
             className={className}
             title={tooltip}
+            htmlFor={inputId}
         >
             <div className={_cs(styles.checkmarkContainer, checkmarkContainerClassName)}>
                 <input
+                    id={inputId}
                     onChange={handleChange}
                     className={_cs(styles.input, inputClassName)}
                     type="checkbox"

diff --git a/packages/ui/src/components/DropdownMenu/index.tsx b/packages/ui/src/components/DropdownMenu/index.tsx
@@ -136,6 +136,8 @@ function DropdownMenu(props: Props) {
                 colorVariant={labelColorVariant}
                 withoutPadding={labelWithoutPadding}
                 spacing={labelSpacing}
+                aria-expanded={showDropdown}
+                aria-haspopup="menu"
                 after={hasAfterContent ? (
                     <>
                         {labelAfter}
@@ -159,6 +161,7 @@ function DropdownMenu(props: Props) {
                     )}
                     parentRef={buttonRef}
                     preferredWidth={preferredPopupWidth}
+                    role="menu"
                 >
                     {children}
                 </Popup>

diff --git a/packages/ui/src/components/Modal/index.tsx b/packages/ui/src/components/Modal/index.tsx
@@ -1,6 +1,7 @@
 import {
     useCallback,
     useEffect,
+    useId,
 } from 'react';
 import { FocusOn } from 'react-focus-on';
 import { CloseFillIcon } from '@ifrc-go/icons';
@@ -53,6 +54,7 @@ function Modal(props: Props) {
     } = props;
 
     const strings = useTranslation(i18n);
+    const headingId = useId();
 
     useEffect(
         () => {
@@ -80,6 +82,8 @@ function Modal(props: Props) {
         }
     }, [onClose, closeOnEscape]);
 
+    const { heading, ...restContainerProps } = containerProps;
+
     return (
         <Portal>
             <div className={_cs(styles.overlay, overlayClassName)}>
@@ -88,11 +92,14 @@ function Modal(props: Props) {
                     onClickOutside={handleClickOutside}
                     onEscapeKey={handleEscape}
                     gapMode="padding"
-                    // gapMode={null}
+                    role="dialog"
+                    aria-modal="true"
+                    aria-labelledby={heading ? headingId : undefined}
                 >
                     <Container
                         // eslint-disable-next-line react/jsx-props-no-spreading
-                        {...containerProps}
+                        {...restContainerProps}
+                        heading={heading ? <span id={headingId}>{heading}</span> : undefined}
                         withPadding
                         withoutWrapInHeader
                         withoutWrapInFooter

diff --git a/packages/ui/src/components/Pager/index.tsx b/packages/ui/src/components/Pager/index.tsx
@@ -233,7 +233,7 @@ function Pager(props: Props) {
                 onClick={onActivePageChange}
                 disabled={activePage >= numPages || disabled}
                 className={styles.pageButton}
-                title={`${strings.rawButtonGoToPage} ${activePage - 1}`}
+                title={`${strings.rawButtonGoToPage} ${activePage + 1}`}
             >
                 <ChevronRightLineIcon className={styles.icon} />
             </RawButton>

diff --git a/packages/ui/src/components/Popup/index.tsx b/packages/ui/src/components/Popup/index.tsx
@@ -12,6 +12,7 @@ export interface Props {
     parentRef: React.RefObject<HTMLElement | undefined>;
     children?: React.ReactNode;
     preferredWidth?: number;
+    role?: React.AriaRole;
 }
 
 function Popup(props: Props) {
@@ -22,6 +23,7 @@ function Popup(props: Props) {
         className,
         pointerClassName,
         preferredWidth,
+        role,
     } = props;
 
     const {
@@ -44,6 +46,7 @@ function Popup(props: Props) {
                     orientation.vertical === 'bottom' && styles.topOrientation,
                     className,
                 )}
+                role={role}
             >
                 {children}
             </div>

diff --git a/packages/ui/src/components/ProgressBar/index.tsx b/packages/ui/src/components/ProgressBar/index.tsx
@@ -77,6 +77,10 @@ function ProgressBar(props: Props) {
                     && colorVariantToClassName[colorVariant],
                 className,
             )}
+            role="progressbar"
+            aria-valuenow={percentage}
+            aria-valuemin={0}
+            aria-valuemax={100}
         >
             {(title || showPercentageInTitle) && (
                 <div className={styles.title}>

diff --git a/packages/ui/src/components/TabLayout/index.tsx b/packages/ui/src/components/TabLayout/index.tsx
@@ -141,7 +141,6 @@ function TabLayout(props: Props) {
                     isFirstStep && styles.firstStep,
                     isLastStep && styles.lastStep,
                 )}
-                role="tab"
             >
                 <div className={styles.dotWrapper}>
                     <div className={styles.beforeLine} />

diff --git a/packages/ui/src/components/Tabs/Tab/index.tsx b/packages/ui/src/components/Tabs/Tab/index.tsx
@@ -65,6 +65,8 @@ export default function Tab<NAME extends TabKey>(props: Props<NAME>) {
             name={name}
             disabled={disabled}
             type="button"
+            role="tab"
+            aria-selected={isActive}
         >
             <TabLayout
                 // eslint-disable-next-line react/jsx-props-no-spreading

diff --git a/packages/ui/src/components/Tooltip/index.tsx b/packages/ui/src/components/Tooltip/index.tsx
@@ -37,11 +37,11 @@ function Tooltip(props: Props) {
 
     useEffect(
         () => {
-            const handleMouseEnter = () => {
+            const handleShow = () => {
                 setShowPopup(true);
             };
 
-            const handleMouseOut = () => {
+            const handleHide = () => {
                 setShowPopup(false);
             };
 
@@ -60,13 +60,17 @@ function Tooltip(props: Props) {
             }
 
             parentRef.current = parentNode as HTMLElement;
-            parentNode.addEventListener('mouseover', handleMouseEnter);
-            parentNode.addEventListener('mouseout', handleMouseOut);
+            parentNode.addEventListener('mouseover', handleShow);
+            parentNode.addEventListener('mouseout', handleHide);
+            parentNode.addEventListener('focusin', handleShow);
+            parentNode.addEventListener('focusout', handleHide);
             setHasParentRef(true);
 
             return () => {
-                parentNode.removeEventListener('mouseover', handleMouseEnter);
-                parentNode.removeEventListener('mouseout', handleMouseOut);
+                parentNode.removeEventListener('mouseover', handleShow);
+                parentNode.removeEventListener('mouseout', handleHide);
+                parentNode.removeEventListener('focusin', handleShow);
+                parentNode.removeEventListener('focusout', handleHide);
             };
         },
         [],
@@ -86,6 +90,7 @@ function Tooltip(props: Props) {
                     parentRef={parentRef as React.RefObject<HTMLElement>}
                     pointerClassName={styles.pointer}
                     preferredWidth={preferredWidth}
+                    role="tooltip"
                 >
                     <Container
                         heading={title}

diff --git a/packages/ui/src/components/TopBanner/index.tsx b/packages/ui/src/components/TopBanner/index.tsx
@@ -3,7 +3,7 @@ import { _cs } from '@togglecorp/fujs';
 
 import styles from './styles.module.css';
 
-interface Props {
+export interface Props {
   className?: string;
   children?: React.ReactNode;
   variant: 'warning' | 'negative' | 'positive' | 'information';

diff --git a/packages/ui/src/hooks/useFloatPlacement.ts b/packages/ui/src/hooks/useFloatPlacement.ts
@@ -9,10 +9,9 @@ import {
     isNotDefined,
 } from '@togglecorp/fujs';
 
-const ONE_REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
-// px
-const MIN_WIDTH = 16 * ONE_REM;
-const VERTICAL_OFFSET = 0.5 * ONE_REM;
+// NOTE: ONE_REM, MIN_WIDTH, and VERTICAL_OFFSET are computed inside calculatePlacement
+// to avoid calling getComputedStyle at module scope (which crashes in SSR and produces
+// stale values if the root font-size changes at runtime).
 
 type Orientation = {
     vertical: 'top' | 'bottom';
@@ -72,6 +71,10 @@ function useFloatPlacement(
             return;
         }
 
+        const ONE_REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        const MIN_WIDTH = 16 * ONE_REM;
+        const VERTICAL_OFFSET = 0.5 * ONE_REM;
+
         const parentBCR = parentRef.current.getBoundingClientRect();
         const {
             x: parentX,

diff --git a/packages/ui/src/hooks/useKeyboard.ts b/packages/ui/src/hooks/useKeyboard.ts
@@ -10,8 +10,8 @@ enum Keys {
     Tab = 9,
     Esc = 27,
     Enter = 13,
-    Down = 38,
-    Up = 40,
+    Up = 38,
+    Down = 40,
     Backspace = 8,
 }
 
@@ -100,12 +100,12 @@ function useKeyboard<T, Q extends OptionKey>(
             } else if (keyCode === Keys.Up) {
                 e.stopPropagation();
                 e.preventDefault();
-                const newFocusedKey = getNewKey(myKey, 1, options, keySelector);
+                const newFocusedKey = getNewKey(myKey, -1, options, keySelector);
                 onFocusChange(newFocusedKey ? { key: newFocusedKey } : undefined);
             } else if (keyCode === Keys.Down) {
                 e.stopPropagation();
                 e.preventDefault();
-                const newFocusedKey = getNewKey(myKey, -1, options, keySelector);
+                const newFocusedKey = getNewKey(myKey, 1, options, keySelector);
                 onFocusChange(newFocusedKey ? { key: newFocusedKey } : undefined);
             }
         },