[Component Audit] Divider: keep numeric labels visible and named (#7572)

Author: cixzhang

.changeset/divider-renderable-labels.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] `Divider` now keeps numeric zero labels inside the labelled separator and omits boolean or empty-string labels without leaving empty label spacing.
+
+@cixzhang

apps/storybook/stories/Divider.stories.tsx

@@ -109,19 +109,15 @@ export const FullBleed: Story = {
         <Card>
           <VStack gap={3}>
             <Text type="label">Normal divider</Text>
-            <Text type="body">
-              The divider respects container padding.
-            </Text>
+            <Text type="body">The divider respects container padding.</Text>
             <Divider />
             <Text type="body">Content below the divider.</Text>
           </VStack>
         </Card>
         <Card>
           <VStack gap={3}>
             <Text type="label">Full bleed divider</Text>
-            <Text type="body">
-              The divider extends to container edges.
-            </Text>
+            <Text type="body">The divider extends to container edges.</Text>
             <Divider isFullBleed />
             <Text type="body">Content below the divider.</Text>
           </VStack>
@@ -187,6 +183,28 @@ export const InCard: Story = {
   ),
 };
 
+export const NumericLabel: Story = {
+  render: () => (
+    <Section variant="muted">
+      <div {...stylex.props(styles.storyWrapper)}>
+        <Card>
+          <VStack gap={3}>
+            <Text type="supporting">Horizontal numeric label</Text>
+            <Divider label={0} />
+          </VStack>
+        </Card>
+        <Card height={200}>
+          <HStack gap={4} xstyle={styles.fullHeight}>
+            <Text type="body">Start</Text>
+            <Divider orientation="vertical" label={0} />
+            <Text type="body">End</Text>
+          </HStack>
+        </Card>
+      </div>
+    </Section>
+  ),
+};
+
 export const FullBleedVertical: Story = {
   render: () => (
     <Section variant="muted">

packages/core/src/Chat/ChatSystemMessage.spec.md

@@ -152,16 +152,16 @@ describe('ChatSystemMessage', () => {
     expect(root).toContainElement(screen.getByRole('separator'));
   });
 
-  it('records Divider numeric-zero output for the shared FR15 advisory', () => {
+  it('keeps the numeric-zero label visible and names the shared divider', () => {
     render(
       <ChatSystemMessage variant="divider" data-testid="divider-zero">
         {0}
       </ChatSystemMessage>,
     );
     const root = screen.getByTestId('divider-zero');
     const separator = screen.getByRole('separator');
-    expect(root).toHaveTextContent('00');
-    expect(separator).not.toHaveAccessibleName();
-    expect(separator).not.toHaveAttribute('aria-labelledby');
+    expect(root).toHaveTextContent(/^0$/);
+    expect(separator).toHaveAccessibleName('0');
+    expect(separator).toHaveAttribute('aria-labelledby');
   });
 });

packages/core/src/Chat/ChatSystemMessage.test.tsx

@@ -40,7 +40,8 @@ export const docs = {
     {
       name: 'label',
       type: 'ReactNode',
-      description: 'Optional label centered on the divider.',
+      description:
+        'Optional label centered on the divider. Numeric zero is preserved; null, booleans, and empty strings render no label.',
     },
     {
       name: 'variant',
@@ -92,7 +93,8 @@ export const docsZh = {
     {
       name: 'label',
       type: 'ReactNode',
-      description: '居中显示在分隔线上的可选标签。',
+      description:
+        '居中显示在分隔线上的可选标签。数字 0 会保留；null、布尔值和空字符串不渲染标签。',
     },
     {
       name: 'variant',
@@ -143,7 +145,7 @@ export const docsDense = {
   },
   propDescriptions: {
     orientation: 'divider orientation',
-    label: 'optional centered label on divider',
+    label: 'optional centered label; preserves 0; null/boolean/"" omit it',
     variant: 'visual weight of divider line',
     isFullBleed: 'extend to container edges w/ negative margins',
     xstyle: 'StyleX styles for layout; must be stylex.create() value',

packages/core/src/Divider/Divider.doc.mjs

@@ -128,6 +128,21 @@ describe('Divider', () => {
     expect(divider).not.toHaveAttribute('aria-labelledby');
   });
 
+  it.each([false, true, ''])('omits a label wrapper for %j', label => {
+    render(<Divider label={label} data-testid="divider" />);
+    const divider = screen.getByTestId('divider');
+    expect(divider).not.toHaveAttribute('aria-labelledby');
+    expect(divider.children).toHaveLength(1);
+  });
+
+  it('preserves a numeric zero label and uses it as the accessible name', () => {
+    render(<Divider label={0} data-testid="divider" />);
+    const divider = screen.getByTestId('divider');
+    expect(screen.getByText('0')).toBeInTheDocument();
+    expect(divider).toHaveAccessibleName('0');
+    expect(divider.children).toHaveLength(3);
+  });
+
   it('renders astryx-* class names for theme targeting', () => {
     render(
       <Divider variant="strong" orientation="vertical" data-testid="divider" />,

packages/core/src/Divider/Divider.spec.md

@@ -25,7 +25,7 @@ import {
   typeScaleVars,
   borderVars,
 } from '../theme/tokens.stylex';
-import {mergeProps} from '../utils';
+import {isRenderable, mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
 import type {DividerVariantMap} from './index';
 
@@ -45,6 +45,7 @@ export interface DividerProps extends BaseProps<HTMLDivElement> {
 
   /**
    * Optional label to display centered on the divider.
+   * Numeric zero is preserved; null, booleans, and empty strings render no label.
    * Rendered with small, secondary text styling.
    */
   label?: ReactNode;
@@ -153,14 +154,15 @@ export function Divider({
   ...props
 }: DividerProps) {
   const isHorizontal = orientation === 'horizontal';
+  const hasLabel = isRenderable(label);
   const labelId = useId();
 
   // A separator does not derive its accessible name from its content, so the
   // rendered label must be referenced explicitly via aria-labelledby to be
   // exposed as the separator's name (WCAG 1.3.1). An explicit aria-label or
   // aria-labelledby from the consumer takes precedence.
   const resolvedLabelledBy =
-    ariaLabelledBy ?? (label && ariaLabel == null ? labelId : undefined);
+    ariaLabelledBy ?? (hasLabel && ariaLabel == null ? labelId : undefined);
 
   return (
     <div
@@ -189,7 +191,7 @@ export function Divider({
           lineStyles[variant],
         )}
       />
-      {label && (
+      {hasLabel && (
         <div
           id={labelId}
           {...stylex.props(
@@ -199,7 +201,7 @@ export function Divider({
           {label}
         </div>
       )}
-      {label && (
+      {hasLabel && (
         <div
           {...stylex.props(
             isHorizontal ? lineStyles.horizontalLine : lineStyles.verticalLine,