@astryxdesign/core 0.1.2 → 0.1.3-canary.6d57c8d

package/src/Link/Link.test.tsx

@@ -120,6 +120,24 @@ describe('Link', () => {
     expect(screen.getByRole('link')).toBeInTheDocument();
   });
 
+  it('defaults the inner text type to body', () => {
+    render(<Link href="/test">Body link</Link>);
+    expect(screen.getByText('Body link')).toHaveClass('astryx-text', 'body');
+  });
+
+  it('forwards type="inherit" so the link adopts the surrounding text type', () => {
+    render(
+      <Link href="/test" type="inherit">
+        Inline link
+      </Link>,
+    );
+    // The inner Text renders with the `inherit` type, so font-size/line-height
+    // inherit from the surrounding text rather than imposing the body type.
+    const text = screen.getByText('Inline link');
+    expect(text).toHaveClass('astryx-text', 'inherit');
+    expect(text).not.toHaveClass('body');
+  });
+
   it('applies hasUnderline style when true', () => {
     render(
       <Link href="/test" hasUnderline>
@@ -152,6 +170,38 @@ describe('Link', () => {
     expect(link.querySelector('svg')).toBeInTheDocument();
   });
 
+  it('announces the new-tab context via screen-reader text (obs-4)', () => {
+    render(
+      <Link href="https://example.com" isExternalLink>
+        Docs
+      </Link>,
+    );
+    // The link's accessible name includes the new-tab hint (the icon is
+    // decorative).
+    expect(
+      screen.getByRole('link', {name: 'Docs (opens in new tab)'}),
+    ).toBeInTheDocument();
+  });
+
+  it('supports a custom newTabLabel for localization', () => {
+    render(
+      <Link
+        href="https://example.com"
+        isExternalLink
+        newTabLabel="(new window)">
+        Docs
+      </Link>,
+    );
+    expect(
+      screen.getByRole('link', {name: 'Docs (new window)'}),
+    ).toBeInTheDocument();
+  });
+
+  it('does not add new-tab text to non-external links', () => {
+    render(<Link href="/internal">Internal</Link>);
+    expect(screen.getByRole('link', {name: 'Internal'})).toBeInTheDocument();
+  });
+
   it('renders external link with existing rel merged', () => {
     render(
       <Link href="https://example.com" isExternalLink rel="sponsored">

package/src/Link/Link.tsx

@@ -30,6 +30,7 @@ import {
 import {Icon} from '../Icon';
 import {Tooltip} from '../Tooltip';
 import {Text} from '../Text';
+import {VisuallyHidden} from '../VisuallyHidden';
 import type {
   TextType,
   TextSize,
@@ -106,10 +107,20 @@ const styles = stylex.create({
  */
 const linkColorStyles = stylex.create({
   primary: {
-    color: colorVars['--color-text-primary'],
+    color: {
+      default: colorVars['--color-text-primary'],
+      ':hover': {
+        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-text-primary']}, ${colorVars['--color-tint-hover']} 15%)`,
+      },
+    },
   },
   secondary: {
-    color: colorVars['--color-text-secondary'],
+    color: {
+      default: colorVars['--color-text-secondary'],
+      ':hover': {
+        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-text-secondary']}, ${colorVars['--color-tint-hover']} 15%)`,
+      },
+    },
   },
   disabled: {
     color: colorVars['--color-text-disabled'],
@@ -118,7 +129,12 @@ const linkColorStyles = stylex.create({
     color: colorVars['--color-text-secondary'],
   },
   accent: {
-    color: colorVars['--color-text-accent'],
+    color: {
+      default: colorVars['--color-text-accent'],
+      ':hover': {
+        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-text-accent']}, ${colorVars['--color-tint-hover']} 15%)`,
+      },
+    },
   },
   inherit: {
     color: 'inherit',
@@ -167,6 +183,12 @@ export interface LinkProps extends BaseProps<
    * @default false
    */
   isExternalLink?: boolean;
+  /**
+   * Screen-reader text appended to an external link to announce that it opens
+   * in a new tab (the visual icon is decorative). Override for localization.
+   * @default '(opens in new tab)'
+   */
+  newTabLabel?: string;
   /**
    * Where to open the linked document.
    * Overridden to "_blank" when isExternalLink is true.
@@ -203,6 +225,10 @@ export interface LinkProps extends BaseProps<
   isStandalone?: boolean;
   /**
    * Semantic text type for Text. Determines base typography.
+   *
+   * Use `type="inherit"` for inline links inside an existing `Text` element so
+   * the link adopts the surrounding text's size and line-height instead of
+   * imposing its own (e.g. a link within a `large` paragraph).
    * @default 'body'
    */
   type?: TextType;
@@ -248,6 +274,11 @@ export interface LinkProps extends BaseProps<
  * <Link href="/settings" color="secondary">Settings</Link>
  * <Link href="/privacy" hasUnderline>Privacy Policy</Link>
  * <Link label="Close dialog" href="/home"><Icon icon="x" /></Link>
+ *
+ * // Inline link inside text — inherits the surrounding type/size:
+ * <Text type="large">
+ *   Read our <Link href="/terms" type="inherit">terms</Link> first.
+ * </Text>
  * ```
  */
 export function Link({
@@ -257,6 +288,7 @@ export function Link({
   hasUnderline = false,
   isDisabled = false,
   isExternalLink = false,
+  newTabLabel = '(opens in new tab)',
   target: targetFromProps,
   onClick,
   tooltip,
@@ -300,7 +332,10 @@ export function Link({
         {children}
       </Text>
       {isExternalLink && !renderAsButton && (
-        <Icon icon="externalLink" size="xsm" color="inherit" />
+        <>
+          <Icon icon="externalLink" size="xsm" color="inherit" />
+          <VisuallyHidden>{newTabLabel}</VisuallyHidden>
+        </>
       )}
     </>
   );

package/src/Markdown/Markdown.test.tsx

@@ -189,6 +189,17 @@ describe('Markdown', () => {
     expect(document.querySelectorAll('td')).toHaveLength(2);
   });
 
+  it('makes the table scroll wrapper keyboard-focusable', () => {
+    render(<Markdown>{'| A | B |\n| --- | --- |\n| 1 | 2 |'}</Markdown>);
+    const table = document.querySelector('table');
+    expect(table).toBeInTheDocument();
+    // The GFM table's outer overflow wrapper is keyboard-focusable so keyboard
+    // users can horizontally scroll a wide table.
+    const wrapper = table!.closest('[role="group"][tabindex="0"]');
+    expect(wrapper).toBeTruthy();
+    expect(wrapper).toHaveAttribute('aria-label', 'Table');
+  });
+
   it('renders horizontal rules', () => {
     render(<Markdown>{'---'}</Markdown>);
     expect(document.querySelector('hr')).toBeInTheDocument();

package/src/Markdown/Markdown.tsx

@@ -1399,6 +1399,13 @@ function renderBlock(
       return (
         <div
           key={index}
+          // Keyboard-focusable so keyboard users can scroll a horizontally
+          // overflowing GFM table. Uses role="group" (not "region") so
+          // multiple tables don't create duplicate same-named landmarks
+          // (axe: landmark-unique).
+          tabIndex={0}
+          role="group"
+          aria-label="Table"
           {...stylex.props(
             styles.tableWrapper,
             spacing,

package/src/MetadataList/MetadataListItem.doc.mjs

@@ -8,6 +8,10 @@ export const docs = {
   displayName: 'Metadata List Item',
   isHiddenFromOverview: true,
   description: 'A single labeled metadata value within an MetadataList.',
+  playground: {
+    defaults: {label: 'Status', children: 'Active'},
+    wrapper: {component: 'MetadataList'},
+  },
   props: [
     {
       name: 'children',

package/src/MoreMenu/MoreMenu.doc.mjs

@@ -46,14 +46,7 @@ export const docs = {
       type: 'boolean',
       description: 'Whether the menu trigger is disabled.',
       default: 'false',
-    },
-    {
-      name: 'hasAutoFocus',
-      type: 'boolean',
-      description: 'Whether to auto-focus the first menu item when the menu opens. Set to false for inline showcases or documentation previews.',
-      default: 'true',
-    },
-    {
+    },    {
       name: 'xstyle',
       type: 'StyleXStyles',
       description:
@@ -126,14 +119,7 @@ export const docsZh = {
       type: 'boolean',
       description: '菜单触发器是否禁用。',
       default: 'false',
-    },
-    {
-      name: 'hasAutoFocus',
-      type: 'boolean',
-      description: '菜单打开时是否自动聚焦第一个菜单项。内联展示或文档预览设为 false。',
-      default: 'true',
-    },
-    {
+    },    {
       name: 'xstyle',
       type: 'StyleXStyles',
       description:
@@ -176,7 +162,6 @@ export const docsDense = {
     size: 'Trigger button size.',
     icon: 'Override default three-dot icon. Accepts any ReactNode.',
     isDisabled: 'Whether menu trigger disabled.',
-    hasAutoFocus: 'Auto-focus first item on open; false for showcases.',
     xstyle:
       'StyleX styles for layout customization (margins, positioning, sizing). Must be stylex.create() value.',
   },

package/src/MoreMenu/MoreMenu.tsx

@@ -81,13 +81,6 @@ export interface MoreMenuProps extends Pick<
    */
   onOpenChange?: (isOpen: boolean) => void;
 
-  /**
-   * Whether to auto-focus the first menu item when the menu opens.
-   * Set to `false` for inline showcases or documentation previews.
-   * @default true
-   */
-  hasAutoFocus?: boolean;
-
   /** Test ID for testing frameworks. */
   'data-testid'?: string;
 }
@@ -116,7 +109,6 @@ export function MoreMenu({
   isDisabled = false,
   isMenuOpen,
   onOpenChange,
-  hasAutoFocus,
   xstyle,
   className: classNameProp,
   style,
@@ -149,7 +141,6 @@ export function MoreMenu({
       }}
       items={items}
       hasChevron={false}
-      hasAutoFocus={hasAutoFocus}
       data-testid={testId}
     />
   );

package/src/MultiSelector/MultiSelector.doc.mjs

@@ -112,6 +112,12 @@ export const docs = {
           type: 'boolean',
           description: 'Disables the selector.',
         },
+        {
+          name: 'disabledMessage',
+          type: 'string',
+          description:
+            'Explains why the selector is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the trigger focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled MultiSelector in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        },
         {
           name: 'isLabelHidden',
           type: 'boolean',
@@ -181,6 +187,11 @@ export const docs = {
         description:
           'Enable select-all when most users will want all or nearly all options selected.',
       },
+      {
+        guidance: true,
+        description:
+          'Use inside InputGroup only when the control needs a short prefix or suffix addon as part of one decorated input surface; prefer count or labels trigger display so the group stays single-line.',
+      },
       {
         guidance: false,
         description: 'Use for single-value selection; use Selector instead.',
@@ -189,6 +200,11 @@ export const docs = {
         guidance: false,
         description: 'Show more than ~20 options without enabling search.',
       },
+      {
+        guidance: false,
+        description:
+          'Wrap a disabled MultiSelector in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+      },
     ],
   },
 };
@@ -217,6 +233,8 @@ export const docsZh = {
         hasSearch: '是否显示用于过滤选项的搜索输入。',
         searchPlaceholder: '搜索输入的占位文本。',
         isDisabled: '禁用选择器。',
+        disabledMessage:
+          '解释选择器被禁用的原因。与 isDisabled 一起使用时，悬停/键盘聚焦时显示工具提示，并通过 aria-disabled 保持触发器可聚焦（仍无法激活）。请使用此属性，而不是用 Tooltip 包裹被禁用的选择器。',
         isLabelHidden: '视觉上隐藏标签同时保持其可访问性。',
         description: '标签下方显示的辅助文本。',
         isOptional: '将字段标记为可选。',
@@ -261,6 +279,11 @@ export const docsZh = {
         guidance: false,
         description: 'Show more than ~20 options without enabling search.',
       },
+      {
+        guidance: false,
+        description:
+          'Wrap a disabled MultiSelector in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+      },
     ],
   },
 };
@@ -301,6 +324,11 @@ export const docsDense = {
         guidance: false,
         description: 'Show more than ~20 options without enabling search.',
       },
+      {
+        guidance: false,
+        description:
+          'Wrap a disabled MultiSelector in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+      },
     ],
   },
   components: [
@@ -324,6 +352,8 @@ export const docsDense = {
         hasSearch: 'show search input',
         searchPlaceholder: 'search placeholder',
         isDisabled: 'disables selector',
+        disabledMessage:
+          'why disabled; w/ isDisabled shows tooltip on hover/focus, trigger stays focusable via aria-disabled; use instead of Tooltip wrapper',
         isLabelHidden: 'visually hides label',
         description: 'helper text below label',
         isOptional: 'marks optional',