@arbor-education/design-system.components 0.21.1 → 0.22.0

package/src/components/{icoText/IcoText.tsx → iconText/IconText.tsx}

@@ -3,20 +3,20 @@ import type { IconName } from 'Components/icon/allowedIcons';
 import { Icon } from 'Components/icon/Icon';
 import { Children, isValidElement } from 'react';
 
-export type IcoTextProps = {
+export type IconTextProps = {
   children?: React.ReactNode;
   className?: string;
 };
 
-export type IcoTextHeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {
+export type IconTextHeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {
   children: React.ReactNode;
 };
 
-export type IcoTextParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {
+export type IconTextParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {
   children: React.ReactNode;
 };
 
-export type IcoTextIconProps = {
+export type IconTextIconProps = {
   className?: string;
   color?: Icon.Props['color'];
   name: IconName;
@@ -24,33 +24,33 @@ export type IcoTextIconProps = {
   size?: 12 | 16 | 24;
 };
 
-const IcoTextHeading = ({
+const IconTextHeading = ({
   children,
   className,
   ...rest
-}: IcoTextHeadingProps): React.JSX.Element => (
+}: IconTextHeadingProps): React.JSX.Element => (
   <h4 className={classNames('ds-ico-text__heading', className)} {...rest}>
     {children}
   </h4>
 );
 
-const IcoTextParagraph = ({
+const IconTextParagraph = ({
   children,
   className,
   ...rest
-}: IcoTextParagraphProps): React.JSX.Element => (
+}: IconTextParagraphProps): React.JSX.Element => (
   <p className={classNames('ds-ico-text__paragraph', className)} {...rest}>
     {children}
   </p>
 );
 
-const IcoTextIcon = ({
+const IconTextIcon = ({
   className,
   color,
   name,
   screenReaderText,
   size = 24,
-}: IcoTextIconProps): React.JSX.Element => (
+}: IconTextIconProps): React.JSX.Element => (
   <Icon
     name={name}
     className={classNames('ds-ico-text__icon', className)}
@@ -60,12 +60,12 @@ const IcoTextIcon = ({
   />
 );
 
-const IcoTextRoot = ({ children, className }: IcoTextProps): React.JSX.Element => {
+const IconTextRoot = ({ children, className }: IconTextProps): React.JSX.Element => {
   const iconChildren: React.ReactNode[] = [];
   const contentChildren: React.ReactNode[] = [];
 
   Children.forEach(children, (child) => {
-    if (isValidElement(child) && child.type === IcoTextIcon) {
+    if (isValidElement(child) && child.type === IconTextIcon) {
       iconChildren.push(child);
       return;
     }
@@ -81,13 +81,20 @@ const IcoTextRoot = ({ children, className }: IcoTextProps): React.JSX.Element =
   );
 };
 
-IcoTextHeading.displayName = 'IcoText.Heading';
-IcoTextParagraph.displayName = 'IcoText.Paragraph';
-IcoTextIcon.displayName = 'IcoText.Icon';
-IcoTextRoot.displayName = 'IcoText';
+IconTextHeading.displayName = 'IconText.Heading';
+IconTextParagraph.displayName = 'IconText.Paragraph';
+IconTextIcon.displayName = 'IconText.Icon';
+IconTextRoot.displayName = 'IconText';
 
-export const IcoText = Object.assign(IcoTextRoot, {
-  Heading: IcoTextHeading,
-  Paragraph: IcoTextParagraph,
-  Icon: IcoTextIcon,
+export const IconText = Object.assign(IconTextRoot, {
+  Heading: IconTextHeading,
+  Paragraph: IconTextParagraph,
+  Icon: IconTextIcon,
 });
+
+export namespace IconText {
+  export type Props = IconTextProps;
+  export type HeadingProps = IconTextHeadingProps;
+  export type ParagraphProps = IconTextParagraphProps;
+  export type IconProps = IconTextIconProps;
+}

package/src/components/modal/Modal.tsx

@@ -20,6 +20,8 @@ export type ModalProps = {
   overlayClassName?: string;
   open?: boolean;
   portalTarget?: HTMLElement | null;
+  // Optional id for the dialog content so external triggers can point aria-controls at it.
+  contentId?: string;
   children?: React.ReactNode;
   hideCloseButton?: boolean;
   closeHandler?: ModalContextValue['closeHandler'];
@@ -32,6 +34,7 @@ export const Modal = (props: ModalProps) => {
     overlayClassName,
     open,
     portalTarget,
+    contentId,
     children,
     closeHandler,
     hideCloseButton = false,
@@ -46,7 +49,8 @@ export const Modal = (props: ModalProps) => {
         <Dialog.Root open={open}>
           <Dialog.Portal container={portalTarget}>
             <Dialog.Overlay ref={overlayRef} className={classNames('ds-modal__overlay', overlayClassName)}>
-              <Dialog.Content className={classNames('ds-modal__container', className)}>
+              {/* Preserve an optional target for trigger/content relationships such as FilterBar button-to-dialog wiring. */}
+              <Dialog.Content id={contentId} className={classNames('ds-modal__container', className)}>
                 {title && <ModalHeader><ModalTitle>{title}</ModalTitle></ModalHeader>}
                 {children}
                 {!hideCloseButton && <ModalCloseButon className="ds-modal__close-button--top-right" />}

package/src/components/tag/Tag.stories.tsx

@@ -1,17 +1,17 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Controls,
   Heading as DocHeading,
-  Markdown,
   Primary as DocPrimary,
+  Markdown,
   Stories,
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { useState } from 'react';
-import { fn } from 'storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Dot } from 'Components/dot/Dot';
 import { Icon } from 'Components/icon/Icon';
+import { useState } from 'react';
+import { fn } from 'storybook/test';
 import { Tag, type TagColor } from './Tag.js';
 
 // ---------------------------------------------------------------------------

package/src/components/tag/Tag.test.tsx

@@ -108,8 +108,48 @@ describe('Tag', () => {
     });
   });
 
+  describe('onClick', () => {
+    test('renders a primary action button when onClick is provided', () => {
+      render(<Tag onClick={() => {}}>Clickable</Tag>);
+      expect(screen.getByRole('button', { name: 'Clickable' })).toBeInTheDocument();
+    });
+
+    test('uses a custom action label when provided', () => {
+      render(<Tag onClick={() => {}} actionLabel="Open filter for Alice Johnson">Alice Johnson</Tag>);
+      expect(screen.getByRole('button', { name: 'Open filter for Alice Johnson' })).toBeInTheDocument();
+    });
+
+    test('allows composite parents to remove the primary action from the tab order', () => {
+      render(
+        <Tag onClick={() => {}} actionButtonTabIndex={-1}>
+          Clickable
+        </Tag>,
+      );
+      expect(screen.getByRole('button', { name: 'Clickable' })).toHaveAttribute('tabindex', '-1');
+    });
+
+    test('fires onClick callback when the primary action is clicked', async () => {
+      const onClick = vi.fn();
+      render(<Tag onClick={onClick}>Clickable</Tag>);
+
+      await userEvent.click(screen.getByRole('button', { name: 'Clickable' }));
+      expect(onClick).toHaveBeenCalledOnce();
+    });
+
+    test('forwards aria-controls and aria-expanded to the primary action button', () => {
+      render(
+        <Tag onClick={() => {}} ariaControls="filter-modal" ariaExpanded={true}>
+          Clickable
+        </Tag>,
+      );
+
+      expect(screen.getByRole('button', { name: 'Clickable' })).toHaveAttribute('aria-controls', 'filter-modal');
+      expect(screen.getByRole('button', { name: 'Clickable' })).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+
   describe('combined slots', () => {
-    test('renders slotStart, children, slotEnd, and remove button in correct order', () => {
+    test('renders non-clickable removable tags through the shared content wrapper', () => {
       const { container } = render(
         <Tag
           slotStart={<span>S</span>}
@@ -122,10 +162,27 @@ describe('Tag', () => {
 
       const tag = container.querySelector('.ds-tag')!;
       const children = Array.from(tag.children);
-      expect(children[0]).toHaveClass('ds-tag__slot-start');
-      expect(children[1]).toHaveClass('ds-tag__label');
-      expect(children[2]).toHaveClass('ds-tag__slot-end');
-      expect(children[3]).toHaveClass('ds-tag__remove');
+      expect(children[0]).toHaveClass('ds-tag__content');
+      expect(children[1]).toHaveClass('ds-tag__remove');
+
+      const contentChildren = Array.from(children[0]!.children);
+      expect(contentChildren[0]).toHaveClass('ds-tag__slot-start');
+      expect(contentChildren[1]).toHaveClass('ds-tag__label');
+      expect(contentChildren[2]).toHaveClass('ds-tag__slot-end');
+    });
+
+    test('renders clickable tags through the same shared content wrapper', () => {
+      const { container } = render(
+        <Tag
+          slotStart={<span>S</span>}
+          slotEnd={<span>E</span>}
+          onClick={() => {}}
+        >
+          Label
+        </Tag>,
+      );
+
+      expect(container.querySelector('.ds-tag__content.ds-tag__action')).toBeInTheDocument();
     });
   });
 });

package/src/components/tag/Tag.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { Icon } from 'Components/icon/Icon';
+import type { ButtonHTMLAttributes } from 'react';
 
 export type TagColor = 'neutral'
   | 'orange'
@@ -16,9 +17,21 @@ export type TagProps = {
   selected?: boolean;
   slotStart?: React.ReactNode;
   slotEnd?: React.ReactNode;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+  onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+  actionLabel?: string;
+  actionButtonTabIndex?: 0 | -1;
+  actionRef?: React.Ref<HTMLButtonElement>;
   onRemove?: () => void;
   removeLabel?: string;
+  onRemoveKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+  onRemoveFocus?: React.FocusEventHandler<HTMLButtonElement>;
   removeButtonTabIndex?: 0 | -1;
+  removeButtonRef?: React.Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  ariaControls?: string;
+  ariaExpanded?: ButtonHTMLAttributes<HTMLButtonElement>['aria-expanded'];
 };
 
 export const Tag = ({
@@ -27,18 +40,59 @@ export const Tag = ({
   selected = false,
   slotStart,
   slotEnd,
+  onClick,
+  onKeyDown,
+  onFocus,
+  actionLabel,
+  actionButtonTabIndex = 0,
+  actionRef,
   onRemove,
   removeLabel = 'Remove',
+  onRemoveKeyDown,
+  onRemoveFocus,
   removeButtonTabIndex = 0,
+  removeButtonRef,
+  disabled = false,
+  ariaControls,
+  ariaExpanded,
 }: TagProps): React.JSX.Element => {
+  const tagContent = onClick
+    ? (
+        <button
+          type="button"
+          className="ds-tag__content ds-tag__action"
+          aria-label={actionLabel}
+          aria-controls={ariaControls}
+          aria-expanded={ariaExpanded}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          onFocus={onFocus}
+          tabIndex={actionButtonTabIndex}
+          ref={actionRef}
+          disabled={disabled}
+        >
+          {slotStart && <span className="ds-tag__slot-start">{slotStart}</span>}
+          <span className="ds-tag__label">{children}</span>
+          {slotEnd && <span className="ds-tag__slot-end">{slotEnd}</span>}
+        </button>
+      )
+    : (
+        <span className="ds-tag__content">
+          {slotStart && <span className="ds-tag__slot-start">{slotStart}</span>}
+          <span className="ds-tag__label">{children}</span>
+          {slotEnd && <span className="ds-tag__slot-end">{slotEnd}</span>}
+        </span>
+      );
+
   return (
     <span className={classNames('ds-tag', `ds-tag--${color}`, {
       'ds-tag--selected': selected,
+      'ds-tag--interactive': Boolean(onClick),
+      'ds-tag--removable': Boolean(onRemove),
+      'ds-tag--disabled': disabled,
     })}
     >
-      {slotStart && <span className="ds-tag__slot-start">{slotStart}</span>}
-      <span className="ds-tag__label">{children}</span>
-      {slotEnd && <span className="ds-tag__slot-end">{slotEnd}</span>}
+      {tagContent}
       {onRemove && (
         <button
           type="button"
@@ -48,7 +102,11 @@ export const Tag = ({
             e.stopPropagation();
             onRemove();
           }}
+          onKeyDown={onRemoveKeyDown}
+          onFocus={onRemoveFocus}
           tabIndex={removeButtonTabIndex}
+          ref={removeButtonRef}
+          disabled={disabled}
         >
           <Icon name="x" size={12} />
         </button>

package/src/components/tag/tag.scss

@@ -1,6 +1,5 @@
 .ds-tag {
   display: inline-flex;
-  padding: 0 var(--tag-spacing-horizontal);
   align-items: center;
   gap: var(--tag-spacing-gap-horizontal);
   border-radius: var(--tag-radius);
@@ -13,6 +12,7 @@
   height: var(--tag-height);
   font-style: normal;
   line-height: 150%;
+  overflow: visible;
 
   &--neutral {
     color: var(--tag-neutral-color-text);
@@ -60,6 +60,68 @@
     border-color: var(--tag-selected-color-border);
   }
 
+  .ds-tag__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &--disabled {
+    opacity: 0.6;
+  }
+}
+
+.ds-tag__content {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--tag-spacing-horizontal);
+  border-radius: inherit;
+  box-sizing: border-box;
+}
+
+.ds-tag__action {
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+    background-color: var(--color-grey-100);
+  }
+
+  &:hover {
+    background-color: var(--color-grey-100);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.ds-tag--removable {
+  gap: 0;
+
+  .ds-tag__label {
+    padding: 0 var(--tag-spacing-horizontal) 0 0;
+  }
+
+  .ds-tag__content {
+    gap: var(--tag-spacing-horizontal);
+    padding-right: 0;
+  }
+}
+
+.ds-tag:has(.ds-tag__action:focus-visible) {
+  outline: var(--focus-border) solid var(--focus-color-focus);
+  outline-offset: 2px;
 }
 
 .ds-tag__slot-start {
@@ -68,11 +130,6 @@
   flex-shrink: 0;
 }
 
-.ds-tag__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .ds-tag__slot-end {
   display: flex;
   align-items: center;
@@ -80,19 +137,33 @@
 }
 
 .ds-tag__remove {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   border: none;
   background: transparent;
+  align-self: stretch;
+  min-width: calc(var(--tag-height) - (var(--border-weight) * 2));
   padding: 0;
   cursor: pointer;
   color: inherit;
-  border-radius: 50%;
+  border-radius: var(--tag-radius);
   flex-shrink: 0;
+  line-height: 0;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--focus-border) solid var(--focus-color-focus);
+    outline-offset: 2px;
+    border-radius: var(--tag-radius);
+    background-color: var(--color-grey-100);
+  }
 
   &:hover {
-    background-color: var(--color-grey-200);
+    background-color: var(--color-grey-100);
   }
 
   &:disabled {