@tui-cruises/mein-schiff-web-react-component-library 3.1.0 → 3.1.2

package/CHANGELOG.md

@@ -2,6 +2,49 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [3.1.2](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.1.1...v3.1.2) (2025-11-06)
+
+
+### Features
+
+* **Alert:** A11Y enhancements ([fbd789a](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/fbd789ae3e1c5d8ea98c1ad63a92ff8a3b01edd6))
+* **AlertDialog:** A11Y enhancements ([b78fef9](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/b78fef95e6313d0ebcb6e0d894eb649c7fa2fc9a))
+* **BirthdateField:** A11Y enhancements ([545aaa8](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/545aaa851c9f3b061a9708d258b7e306a5972498))
+* **Calendar:** A11Y enhancements ([c83bf5c](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/c83bf5c83cc48ddb1c2d4a5d8f2f18fda552d73f))
+* **Dialog:** A11Y enhancements ([71b3283](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/71b32830d688036255e253579d388584bdbbdc8c))
+* **Icon:** A11Y enhancements ([88249b5](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/88249b5677601c15577a031eef19fc590b5e69f4))
+* **InputField:** A11Y enhancements ([f9834cd](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/f9834cdabfff5c2ac30c6da12d3579f7f11db2bc))
+* **Pagination:** A11Y enhancements ([a807395](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/a807395835832c7e0def06cbec10d10de04aeda6))
+* **PasswordField:** A11Y enhancements ([ffb97e1](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/ffb97e1e35c412a4395f7548532798bbc6ff06f4))
+* **PhoneNumberInput:** A11Y enhancements ([d52df9c](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/d52df9c830339a5f23a13e6eda01c7959b28c4b2))
+* **Pictogram:** A11Y enhancements ([b776286](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/b776286e867f6c0ced29b913705a210ed2496da7))
+* **Popover:** A11Y enhancements ([efc44c2](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/efc44c2d193b7462d7399c3b4528703aa4d7ac11))
+* **RadioField:** A11Y enhancements ([c932dda](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/c932ddafc59113f793645d2d3c494ca92b363e07))
+* **RadixSelect:** A11Y enhancements ([edabf50](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/edabf50e6281b4c0e049330c3611c37ea89499be))
+* **Select:** A11Y enhancements ([afbb337](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/afbb33708ffab2db2fa8cecb92ea7359d01dc1ce))
+* **Select:** A11Y enhancements ([bab7a84](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/bab7a846facf2a5cfb5d9937cde723c1482d6e16))
+* **SelectField:** A11Y enhancements ([edc178c](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/edc178ce216a5d3e70999d1461b893f089f4c176))
+* **SwitchToggle:** A11Y enhancements ([06070db](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/06070dba2c0cadbe23ff61aa7287121001fe744e))
+* **Tabs:** A11Y enhancements ([36f7b11](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/36f7b111999614bfee2d8f0170c2b8343b07dec1))
+
+
+### Bug Fixes
+
+* **Chip:** focus style ([a71d57b](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/a71d57be51099ccd8b6df03de8fb13510ddca99c))
+
+### [3.1.1](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.1.0...v3.1.1) (2025-10-30)
+
+
+### Features
+
+* **Chip:** add Chip component (EC-2491) ([3b7efbe](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/3b7efbe4c8edccb9187bcae9dd72fee1d7cadc07))
+
+
+### Bug Fixes
+
+* **Calendar:** typography ([77578c0](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/77578c01e26b6544f124e427a3a51072d6d9d315))
+* **Tabs:** add hover border style ([e9e45e5](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/e9e45e54cdcb3efd5d5e11bddaeda9106707b499))
+
 ## [3.1.0](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.0.7...v3.1.0) (2025-10-28)
 
 

package/index.tsx

@@ -10,6 +10,7 @@ export * from './src/components/core/ButtonGroup';
 export * from './src/components/core/Calendar';
 export * from './src/components/core/Checkbox';
 export * from './src/components/core/CheckboxField';
+export * from './src/components/core/Chip';
 export * from './src/components/core/Countdown';
 export * from './src/components/core/DataTable';
 export * from './src/components/core/Dialog';
@@ -19,7 +20,6 @@ export * from './src/components/core/FormLabel';
 export * from './src/components/core/Icon';
 export * from './src/components/core/LoadingSpinner';
 export * from './src/components/core/Pictogram';
-export * from './src/components/core/Portlist';
 export * from './src/components/core/Price';
 export * from './src/components/core/QuantityItem';
 export * from './src/components/core/RangeSlider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tui-cruises/mein-schiff-web-react-component-library",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "main": "./index.tsx",
   "types": "./index.tsx",
   "type": "module",
@@ -73,10 +73,10 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@storybook/addon-a11y": "9.1.15",
-    "@storybook/addon-designs": "^10.0.2",
-    "@storybook/addon-docs": "9.1.15",
-    "@storybook/nextjs": "9.1.15",
+    "@storybook/addon-a11y": "10.0.1",
+    "@storybook/addon-designs": "^11.0.1",
+    "@storybook/addon-docs": "10.0.1",
+    "@storybook/nextjs": "10.0.1",
     "@svgr/cli": "^8.0.1",
     "@types/d3": "^7.4.3",
     "@types/lodash": "^4.17.13",
@@ -89,13 +89,13 @@
     "commitizen": "^3.0.0",
     "esbuild": "^0.25.11",
     "eslint": "^8.47.0",
-    "eslint-plugin-storybook": "9.1.15",
+    "eslint-plugin-storybook": "10.0.1",
     "postcss": "^8.4.26",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.4.1",
     "react-markdown": "^10.0.0",
     "standard-version": "^9.5.0",
-    "storybook": "9.1.15",
+    "storybook": "10.0.1",
     "storybook-version": "^0.1.4",
     "tailwindcss": "^3.4.17",
     "ts-loader": "^9.5.2",

package/src/components/core/Alert/Alert.tsx

@@ -24,6 +24,7 @@ export type AlertProps = PropsWithChildren<{
   as?: keyof HTMLElementTagNameMap;
   onClose?: () => void | Promise<void>;
   cta?: TextButtonProps;
+  ariaLabelClose?: string;
 }>;
 
 export const Alert: FC<AlertProps> = ({
@@ -36,6 +37,7 @@ export const Alert: FC<AlertProps> = ({
   as: Element = 'aside',
   onClose,
   className,
+  ariaLabelClose = 'Close',
 }) => {
   const [isClosePending, setIsClosePending] = useState(false);
 
@@ -65,8 +67,10 @@ export const Alert: FC<AlertProps> = ({
 
   const iconName = icon ?? 'warning-circle';
 
+  const role = mode === 'error' || mode === 'attention' ? 'alert' : 'status';
+
   return (
-    <Element className={classList}>
+    <Element className={classList} role={role}>
       {headline && (
         <div className="flex items-center gap-2">
           {iconName && (
@@ -90,6 +94,7 @@ export const Alert: FC<AlertProps> = ({
                 size="sm"
                 variant="ghost"
                 disabled={isClosePending}
+                aria-label={ariaLabelClose}
               />
             </div>
           )}
@@ -121,6 +126,7 @@ export const Alert: FC<AlertProps> = ({
                 size="sm"
                 variant="ghost"
                 disabled={isClosePending}
+                aria-label={ariaLabelClose}
               />
             </div>
           )}

package/src/components/core/AlertDialog/AlertDialog.tsx

@@ -8,6 +8,7 @@ import type {
   PropsWithChildren,
   ReactNode,
 } from 'react';
+import { useId } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Button } from '../../core/Button';
 import { ButtonGroup } from '../../core/ButtonGroup';
@@ -143,6 +144,8 @@ const renderContent = (
   title: ReactNode,
   children: ReactNode,
   centerTitle: boolean,
+  titleId: string,
+  descriptionId: string,
 ) => {
   if (!title && !children) {
     return null;
@@ -152,13 +155,17 @@ const renderContent = (
     <div className="space-y-4">
       {title && (
         <AlertDialogPrimitive.Title
+          id={titleId}
           className={twJoin('headline-md', centerTitle && 'text-center')}
         >
           {title}
         </AlertDialogPrimitive.Title>
       )}
       {children && (
-        <AlertDialogPrimitive.Description className="text-lg">
+        <AlertDialogPrimitive.Description
+          id={descriptionId}
+          className="text-lg"
+        >
           {children}
         </AlertDialogPrimitive.Description>
       )}
@@ -255,6 +262,9 @@ export const AlertDialog: FC<Props> = ({
   centerItems = true,
   containerClassName,
 }) => {
+  const titleId = useId();
+  const descriptionId = useId();
+
   return (
     <AlertDialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
       <AlertDialogPrimitive.Portal container={container || undefined}>
@@ -266,6 +276,8 @@ export const AlertDialog: FC<Props> = ({
           )}
         >
           <AlertDialogPrimitive.Content
+            aria-labelledby={titleId}
+            aria-describedby={descriptionId}
             data-track-click-area={EventClickArea.Dialog}
             data-track-dialog={`alert-dialog-${title}`}
             className={twJoin(
@@ -275,9 +287,14 @@ export const AlertDialog: FC<Props> = ({
               containerClassName,
             )}
           >
-            <button className="h-0 w-0" name="trap-focus-placeholder" />
             <div className="space-y-8">
-              {renderContent(title, children, centerItems)}
+              {renderContent(
+                title,
+                children,
+                centerItems,
+                titleId,
+                descriptionId,
+              )}
               {renderActionCollection(actions, centerItems)}
             </div>
           </AlertDialogPrimitive.Content>

package/src/components/core/Badge/Badge.tsx

@@ -1,10 +1,10 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, HTMLAttributes } from 'react';
 import { twJoin } from 'tailwind-merge';
 
 /**
  * Props for the Badge component.
  */
-export type BadgeProps = {
+export type BadgeProps = HTMLAttributes<HTMLDivElement> & {
   /**
    * The content to be displayed inside the badge.
    * Can be a single ReactNode or an array of ReactNodes.
@@ -49,7 +49,7 @@ const variants = {
  * ```
  */
 const Badge = (props: BadgeProps) => {
-  const { className, variant = 'solid', children } = props;
+  const { className, variant = 'solid', children, ...rest } = props;
 
   return (
     <div
@@ -59,6 +59,7 @@ const Badge = (props: BadgeProps) => {
         variants.variant[variant],
         className,
       )}
+      {...rest}
     >
       {children}
     </div>

package/src/components/core/BirthdateField/BirthdateField.tsx

@@ -6,8 +6,9 @@ import React, {
   forwardRef,
   useEffect,
   InputHTMLAttributes,
+  useId,
 } from 'react';
-import { twJoin, twMerge } from 'tailwind-merge';
+import { twMerge } from 'tailwind-merge';
 import { Control as RadixFormControl } from '@radix-ui/react-form';
 
 /**
@@ -44,6 +45,7 @@ export type BirthdateFieldProps = InputAttributes & {
   defaultValue?: string; // YYYY-MM-JJ
   readOnly?: Boolean;
   disabled?: Boolean;
+  legend?: string;
 };
 
 type SetPartFunction = {
@@ -135,6 +137,7 @@ const BirthdateField = forwardRef<HTMLInputElement, BirthdateFieldProps>(
       defaultValue,
       readOnly,
       disabled,
+      legend,
       ...props
     },
     ref,
@@ -153,6 +156,7 @@ const BirthdateField = forwardRef<HTMLInputElement, BirthdateFieldProps>(
     const dayRef = useRef<HTMLInputElement>(null);
     const monthRef = useRef<HTMLInputElement>(null);
     const yearRef = useRef<HTMLInputElement>(null);
+    const baseId = useId();
 
     const inputClassNames = twMerge(
       'w-full rounded-md border border-stroke-secondary-40 bg-surface-white p-4 text-center text-sm placeholder-marine-medium-emphasis outline-none transition-all',
@@ -196,20 +200,22 @@ const BirthdateField = forwardRef<HTMLInputElement, BirthdateFieldProps>(
       }
     };
 
-    // Simple function to generate a "unique" ID by appending a random number
-    const uniqueId = (base: string) =>
-      `${base}-${Math.floor(Math.random() * 1000)}`;
-
     const inputs = [
       { part: 'day', ref: dayRef, nextRef: monthRef },
       { part: 'month', ref: monthRef, nextRef: yearRef },
       { part: 'year', ref: yearRef, nextRef: undefined },
     ].map(({ part, ref, nextRef }) => {
       const formatDetail = format[part];
-      const id = uniqueId(`birthdate-${part}`);
+      const id = `${baseId}-${part}`;
       if (!formatDetail) return null;
       return (
         <div key={part}>
+          <label
+            htmlFor={id}
+            className="mb-1 inline-block cursor-pointer text-sm text-marine-medium-emphasis"
+          >
+            {formatDetail.label}
+          </label>
           <input
             id={id}
             {...props}
@@ -235,12 +241,6 @@ const BirthdateField = forwardRef<HTMLInputElement, BirthdateFieldProps>(
                   : 31
             }
           />
-          <label
-            htmlFor={id}
-            className="mt-1 inline-block cursor-pointer text-sm text-marine-medium-emphasis"
-          >
-            {formatDetail.label}
-          </label>
         </div>
       );
     });
@@ -256,9 +256,10 @@ const BirthdateField = forwardRef<HTMLInputElement, BirthdateFieldProps>(
             value={combinedValue}
           />
         </RadixFormControl>
-        <div className={twJoin('grid grid-cols-3 gap-3', className)}>
-          {inputs}
-        </div>
+        <fieldset className={className}>
+          {legend && <legend className="sr-only">{legend}</legend>}
+          <div className="grid grid-cols-3 gap-3">{inputs}</div>
+        </fieldset>
       </>
     );
   },

package/src/components/core/ButtonGroup/ButtonGroup.tsx

@@ -42,7 +42,6 @@ const ButtonGroupRenderFunction: ForwardRefRenderFunction<
         orientation === 'horizontal-center' &&
           'justify-center gap-6 sm:flex-row',
         className,
-        disabled && 'pointer-events-none',
       )}
     >
       {children}

package/src/components/core/Calendar/Calendar.tsx

@@ -24,6 +24,8 @@ export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
   showNextMonthsButtonLabel?: string;
   numberOfMonthsToShowMore?: number;
   pastIsPickable?: boolean;
+  previousMonthLabel?: string;
+  nextMonthLabel?: string;
 };
 
 const DEFAULT_LOCALE: I18nLocale = 'de';
@@ -51,6 +53,8 @@ function Calendar({
   fromMonth,
   pastIsPickable = false,
   toMonth,
+  previousMonthLabel,
+  nextMonthLabel,
   ...props
 }: CalendarProps) {
   const [usedLocale, setUsedLocale] = useState<Locale | undefined>(undefined);
@@ -220,18 +224,19 @@ function Calendar({
           [UI.Month]: 'space-y-4 lg:w-1/2',
           [UI.MonthCaption]:
             'flex justify-center pt-1 relative items-center pointer-events-none',
-          [UI.CaptionLabel]: 'label-md text-marine-high-emphasis',
+          [UI.CaptionLabel]:
+            'font-semibold text-base text-marine-high-emphasis',
           [UI.Nav]: 'space-x-1 flex items-center',
           [UI.MonthGrid]: 'w-full border-collapse space-y-1',
           [UI.Weekdays]: 'flex w-full flex-row',
           [UI.Weekday]:
-            'inline-flex items-center justify-center h-11 w-1/7 font-normal text-xs rounded-sm',
+            'inline-flex items-center justify-center h-11 w-1/7 font-normal text-base rounded-sm',
           [UI.DayButton]: twJoin(
             'h-11 w-full p-0 font-normal aria-selected:opacity-100',
           ),
           [UI.Week]: 'flex flex-row nowrap gap-x-0.5 w-full mt-0.5',
           [UI.Day]: twJoin(
-            'relative w-1/7 rounded-sm p-0 text-center text-xs focus-within:relative focus-within:z-20',
+            'relative w-1/7 rounded-sm p-0 text-center text-base focus-within:relative focus-within:z-20',
             'hover:border-stroke-primary-100 hover:bg-surface-primary-60 data-[disabled]:hover:bg-transparent',
             'active:border-stroke-primary-100 active:bg-surface-primary-60',
             'focus:outline-none focus-visible:shadow-focus-state',
@@ -282,6 +287,7 @@ function Calendar({
               variant="secondary"
               className={twJoin('!mr-4 h-5 w-5', navButtonClasses)}
               size="sm"
+              aria-label={nextMonthLabel ?? 'Go to next month'}
               {...props}
             />
           ),
@@ -291,6 +297,7 @@ function Calendar({
               variant="secondary"
               iconName="nav-arrow-left"
               size="sm"
+              aria-label={previousMonthLabel ?? 'Go to previous month'}
               {...props}
             />
           ),

package/src/components/core/CheckboxField/CheckboxField.tsx

@@ -78,6 +78,7 @@ const CheckboxFieldRenderFunction: ForwardRefRenderFunction<
           <Checkbox
             {...attrs}
             required={typeof required === 'boolean' ? required : undefined}
+            aria-required={required === 'label' ? true : undefined}
             ref={inputRef}
           />
 
@@ -115,6 +116,7 @@ const CheckboxFieldRenderFunction: ForwardRefRenderFunction<
               <Checkbox
                 {...attrs}
                 required={typeof required === 'boolean' ? required : undefined}
+                aria-required={required === 'label' ? true : undefined}
               />
             </RadixRoot>
           </RadixForm.Control>

package/src/components/core/Chip/Chip.tsx

@@ -0,0 +1,101 @@
+import type { ReactNode, RefObject } from 'react';
+import { twJoin, twMerge } from 'tailwind-merge';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import { Pictogram, PictogramName } from '../Pictogram';
+
+/**
+ * All allowed variants for the Chip component.
+ */
+type Variant = 'text' | 'pictogram';
+
+/**
+ * Props for the Chip component.
+ */
+export type ChipProps = {
+  asChild?: boolean;
+  className?: string;
+  variant?: Variant;
+  pictogram?: PictogramName;
+  on?: 'white' | 'gray';
+  children?: ReactNode;
+  active?: boolean;
+  disabled?: boolean;
+  ref?: RefObject<HTMLButtonElement>;
+};
+
+/**
+ * A Chip component designed for basic labeling or marking destinations
+ */
+const Chip = ({
+  asChild,
+  className,
+  variant = 'text',
+  pictogram,
+  on = 'white',
+  active = false,
+  disabled = false,
+  children,
+  ref,
+  ...args
+}: ChipProps) => {
+  const Element = asChild ? Slot : 'button';
+
+  const borderRadius = variant === 'text' ? 'rounded-full' : 'rounded-md';
+  const padding = variant === 'text' ? 'px-4 py-3' : 'p-3 lg:p-2';
+  const variantClasses = twMerge(
+    'border-none text-center text-sm font-semibold transition-all',
+
+    // Variants
+    variant === 'text' && [
+      // Shared
+      'text-marine-high-emphasis hover:bg-surface-primary-100',
+
+      // On surfaces
+      on === 'white' && 'bg-surface-secondary-7',
+      on === 'gray' && 'bg-surface-white',
+
+      // States
+      active && 'bg-surface-primary-100',
+      disabled &&
+        'bg-surface-secondary-7 shadow-[inset_0_0_0_2px_theme(colors.stroke.secondary-20)]',
+      on === 'gray' &&
+        disabled &&
+        'bg-surface-white shadow-[inset_0_0_0_2px_theme(colors.stroke.secondary-20)]',
+    ],
+
+    variant === 'pictogram' && [
+      // Shared
+      'bg-surface-white shadow-[inset_0_0_0_2px_theme(colors.stroke.primary-100)] hover:shadow-[inset_0_0_0_4px_theme(colors.stroke.primary-100)]',
+
+      // States
+      active && 'bg-surface-primary-100',
+      disabled && 'bg-surface-secondary-7 shadow-none',
+      on === 'gray' && disabled && 'bg-surface-white shadow-none',
+    ],
+
+    // States
+    'focus:outline-none focus:transition-none focus-visible:shadow-focus-state',
+    disabled && '!pointer-events-none !text-secondary-marine-48',
+  );
+
+  return (
+    <Element
+      ref={ref}
+      {...args}
+      className={twJoin(
+        'inline-flex items-center justify-center',
+        borderRadius,
+        padding,
+        variantClasses,
+        className,
+      )}
+    >
+      <Slottable>{children ?? ''}</Slottable>
+      {pictogram && <Pictogram name={pictogram} size="sm" />}
+    </Element>
+  );
+};
+
+Chip.displayName = 'Chip';
+
+export { Chip };

package/src/components/core/Chip/index.ts

@@ -0,0 +1 @@
+export * from './Chip';

package/src/components/core/Countdown/Countdown.tsx

@@ -40,7 +40,10 @@ export function Countdown({
   }, [destinationDate]);
 
   return (
-    <div className={twMerge('flex w-full flex-row justify-center', className)}>
+    <div
+      className={twMerge('flex w-full flex-row justify-center', className)}
+      role="timer"
+    >
       <div className="flex flex-row gap-2 p-3">
         {calculatedSegmentTouples?.map(([label, value], index: number) => {
           return (

package/src/components/core/DataTable/DataTable.tsx

@@ -6,9 +6,15 @@ type DataTableRow = ReactNode;
 export type DataTableProps = HTMLAttributes<HTMLTableElement> & {
   headers: DataTableRow[];
   dataRows: DataTableRow[][];
+  caption?: string;
 };
 
-export const DataTable = ({ headers, dataRows, ...attrs }: DataTableProps) => {
+export const DataTable = ({
+  headers,
+  dataRows,
+  caption,
+  ...attrs
+}: DataTableProps) => {
   const baseClass = 'text-left text-sm text-marine-high-emphasis';
   const cellClass = 'max-w-[250px] gap-2 overflow-x-auto whitespace-normal p-4';
   const headerClass = 'md:text-base font-semibold gap-2 whitespace-normal p-4';
@@ -28,6 +34,7 @@ export const DataTable = ({ headers, dataRows, ...attrs }: DataTableProps) => {
   const renderTableForSmallScreens = () => (
     <div className="overflow-x-auto rounded-md bg-surface-white [clip-path:border-box] md:hidden">
       <table {...attrs} className={tableClass}>
+        {caption && <caption>{caption}</caption>}
         <tbody>
           {longestRow.map((_, rowIndex) => (
             <tr key={rowIndex}>
@@ -36,6 +43,7 @@ export const DataTable = ({ headers, dataRows, ...attrs }: DataTableProps) => {
                   <th
                     key={`${rowIndex}-${colIndex}`}
                     className={stickyHeaderClass}
+                    scope="row"
                   >
                     {column[rowIndex]}
                   </th>
@@ -58,10 +66,11 @@ export const DataTable = ({ headers, dataRows, ...attrs }: DataTableProps) => {
   const renderTableForLargeScreens = () => (
     <div className="hidden overflow-x-auto rounded-md bg-surface-white [clip-path:border-box] md:block">
       <table {...attrs} className={tableClass}>
+        {caption && <caption>{caption}</caption>}
         <thead className="bg-surface-primary-40">
           <tr>
             {headers.map((header, i) => (
-              <th key={i} className={headerClass}>
+              <th key={i} className={headerClass} scope="col">
                 {header}
               </th>
             ))}

package/src/components/core/Dialog/Dialog.tsx

@@ -6,7 +6,7 @@ import {
   formatTrackingString,
   trackEvent,
 } from '../../../libs/tracking';
-import { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
+import { ComponentProps, FC, PropsWithChildren, ReactNode, useId } from 'react';
 import { twJoin } from 'tailwind-merge';
 import { IconButton } from '../../core/IconButton';
 
@@ -295,6 +295,9 @@ const DialogContent = ({
   disableOnCloseFocusReset,
   ...rest
 }: DialogContentProps) => {
+  const titleId = useId();
+  const descriptionId = useId();
+
   return (
     <DialogPrimitive.Portal container={container || undefined}>
       <DialogPrimitive.Overlay
@@ -316,6 +319,8 @@ const DialogContent = ({
           onCloseAutoFocus={createOnCloseAutoFocusHandler(
             disableOnCloseFocusReset,
           )}
+          aria-labelledby={titleId}
+          aria-describedby={descriptionId}
           data-track-click-area={EventClickArea.Dialog}
           data-track-dialog={
             trackingName ? formatTrackingString(trackingName) : title
@@ -348,7 +353,10 @@ const DialogContent = ({
               !fullscreen && 'rounded-t-md',
             )}
           >
-            <DialogPrimitive.Title className="relative max-w-full truncate text-nowrap text-lg font-semibold text-marine-high-emphasis">
+            <DialogPrimitive.Title
+              id={titleId}
+              className="relative max-w-full truncate text-nowrap text-lg font-semibold text-marine-high-emphasis"
+            >
               {title}
             </DialogPrimitive.Title>
             {showCloseButton && (
@@ -365,6 +373,7 @@ const DialogContent = ({
             )}
           </div>
           <div
+            id={descriptionId}
             className={twJoin(
               'mt-12 flex max-h-[calc(100%_-_theme(space.12))] w-full flex-col overflow-y-auto',
               bodyClassName,

package/src/components/core/Divider/Divider.tsx

@@ -33,5 +33,5 @@ export const Divider: FC<Props> = ({
 
   const Element = asChild ? Slot : 'div';
 
-  return <Element {...rest} className={className} />;
+  return <Element {...rest} className={className} aria-hidden="true" />;
 };