@astryxdesign/core 0.7.5-canary.7cb897b → 0.7.5-canary.bc40b80

package/dist/Stepper/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAsBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AA2yBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BA80BX;yBA/1Be,IAAI"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAsBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AA2yBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BAq1BX;yBAt2Be,IAAI"}

package/dist/Stepper/Step.js

@@ -872,7 +872,7 @@ export function Step({
     ...{
       className: "x78zum5 x1q0g3np x6s0dn4 x1txdalj xeuugli"
     },
-    children: [(!isCompact || indicatorPosition !== 'on-track') && indicatorNode, /*#__PURE__*/_jsx("span", {
+    children: [(!isCompact || indicatorPosition !== 'on-track') && indicatorNode, ' ', /*#__PURE__*/_jsx("span", {
       ...mergeProps(labelThemeProps, stylex.props(styles.label, labelColorStyle)),
       children: label
     }), statusTextNode, isOptional && /*#__PURE__*/_jsxs(_Fragment, {
@@ -1063,7 +1063,7 @@ export function Step({
             "aria-hidden": "true",
             ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegFlexV, styles.connectorTrack, hasIndicator && styles.otSegGapRailV, afterSegStyle, railTiming, styles.otSegHiddenIfLast))
           })]
-        }), /*#__PURE__*/_jsxs("div", {
+        }), ' ', /*#__PURE__*/_jsxs("div", {
           ...{
             className: "x78zum5 xdt5ytf x1nhvcw1 x98rzlu x1lsbc85 xeuugli"
           },
@@ -1103,7 +1103,7 @@ export function Step({
           "aria-hidden": "true",
           ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, styles.connectorTrack, hasIndicator && styles.otSegGapRailH, afterSegStyle, railTiming, styles.otSegHiddenIfLast))
         })]
-      }), !isCompact && /*#__PURE__*/_jsxs("div", {
+      }), ' ', !isCompact && /*#__PURE__*/_jsxs("div", {
         ...stylex.props(styles.otLabelWrapH, styles.otMarginTop(densitySpace)),
         children: [labelLineNode, otDescriptionNode]
       })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.5-canary.7cb897b",
+  "version": "0.7.5-canary.bc40b80",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -792,8 +792,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.5-canary.7cb897b",
-    "@astryxdesign/cli": "0.7.5-canary.7cb897b",
+    "@astryxdesign/a11y-spec": "0.7.5-canary.bc40b80",
+    "@astryxdesign/cli": "0.7.5-canary.bc40b80",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Stepper/Step.tsx

@@ -1316,6 +1316,10 @@ export function Step({
   const iconLabelNode = (
     <div {...stylex.props(styles.iconLabelRow)}>
       {(!isCompact || indicatorPosition !== 'on-track') && indicatorNode}
+      {/* A space between the indicator and the label: the row is a flex
+          container, which drops whitespace-only text, so nothing changes on
+          screen, but a text reading of the button then keeps "1 Account" as two
+          words instead of "1Account". */}{' '}
       <span
         {...mergeProps(
           labelThemeProps,
@@ -1576,6 +1580,8 @@ export function Step({
               )}
             />
           </div>
+          {/* Whitespace between the indicator column and the label, as in
+              iconLabelNode. */}{' '}
           <div {...stylex.props(styles.otBodyV)}>
             {labelLineNode}
             {otDescriptionNode}
@@ -1658,6 +1664,7 @@ export function Step({
             )}
           />
         </div>
+        {/* Whitespace between the rail and the label, as in iconLabelNode. */}{' '}
         {/* The on-track indicator remains visible as a node on the rail at
             compact widths, but the wrapper becomes presentational with its
             label. Navigation moves to the named controls in the summary row. */}

package/src/Stepper/Stepper.test.tsx

@@ -2016,3 +2016,36 @@ describe('step-label and step-description theme targets', () => {
     );
   });
 });
+
+describe('clickable step text reading', () => {
+  // axe-core's Label in Name rule joins a button's text nodes with nothing
+  // between them, aria-hidden ones included, so a number badge next to a label
+  // reads as one word ("1Account") that the step's name does not contain.
+  // Whitespace between them changes nothing on screen (the rows are flex
+  // containers) and keeps the two words apart.
+  it.each([
+    ['vertical', 'separated'],
+    ['horizontal', 'separated'],
+    ['vertical', 'on-track'],
+    ['horizontal', 'on-track'],
+  ] as const)(
+    'keeps the number and label apart in a %s %s step',
+    (orientation, indicatorPosition) => {
+      render(
+        <Stepper
+          orientation={orientation}
+          indicatorPosition={indicatorPosition}
+          activeStep={0}
+          label="Steps"
+          onStepClick={() => {}}>
+          <Step step={0} label="Account" indicator="number" />
+          <Step step={1} label="Payment" indicator="number" />
+        </Stepper>,
+      );
+
+      const button = screen.getByRole('button', {name: /Account/});
+      expect(button.textContent).toMatch(/1\s+Account/);
+      expect(button.textContent).not.toMatch(/1Account/);
+    },
+  );
+});