@availity/mui-stepper 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.3.1](https://github.com/Availity/element/compare/@availity/mui-stepper@0.3.0...@availity/mui-stepper@0.3.1) (2025-01-15)
+
 ## [0.3.0](https://github.com/Availity/element/compare/@availity/mui-stepper@0.2.4...@availity/mui-stepper@0.3.0) (2025-01-09)
 
 

package/README.md

@@ -12,7 +12,7 @@ This package extends the MUI Stepper component: [MUI Stepper Docs](https://mui.c
 
 Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-stepper-introduction--docs)
 
-Availity standards for design and usage can be found in the [Availity Design Guide](https://zeroheight.com/2e36e50c7)
+Availity standards for design and usage can be found in the [Availity Design Guide](https://design.availity.com/2e36e50c7)
 
 ## Installation
 

package/dist/index.js

@@ -1595,12 +1595,16 @@ var Stepper = (_a) => {
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       import_Stepper.default,
-      __spreadProps(__spreadValues({}, rest), {
+      __spreadProps(__spreadValues({
+        "aria-label": "multi-step process",
+        role: "region"
+      }, rest), {
         connector,
         orientation,
         alternativeLabel,
         ref: stepperRef,
-        children
+        children,
+        tabIndex: 0
       })
     ),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ScrollIconContainer, { style: { paddingLeft: "8px" }, children: showRightButton && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -1620,7 +1624,10 @@ var Stepper = (_a) => {
     ) })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_Stepper.default,
-    __spreadProps(__spreadValues({}, rest), {
+    __spreadProps(__spreadValues({
+      "aria-label": "multi-step process",
+      role: "region"
+    }, rest), {
       connector,
       orientation,
       alternativeLabel,

package/dist/index.mjs

@@ -1576,12 +1576,16 @@ var Stepper = (_a) => {
     ) }),
     /* @__PURE__ */ jsx14(
       MuiStepper,
-      __spreadProps(__spreadValues({}, rest), {
+      __spreadProps(__spreadValues({
+        "aria-label": "multi-step process",
+        role: "region"
+      }, rest), {
         connector,
         orientation,
         alternativeLabel,
         ref: stepperRef,
-        children
+        children,
+        tabIndex: 0
       })
     ),
     /* @__PURE__ */ jsx14(ScrollIconContainer, { style: { paddingLeft: "8px" }, children: showRightButton && /* @__PURE__ */ jsx14(
@@ -1601,7 +1605,10 @@ var Stepper = (_a) => {
     ) })
   ] }) : /* @__PURE__ */ jsx14(
     MuiStepper,
-    __spreadProps(__spreadValues({}, rest), {
+    __spreadProps(__spreadValues({
+      "aria-label": "multi-step process",
+      role: "region"
+    }, rest), {
       connector,
       orientation,
       alternativeLabel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-stepper",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Availity MUI Stepper Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/StepButton.stories.tsx

@@ -22,12 +22,15 @@ export const _StepButton: StoryObj<typeof StepButton> = {
       <Paper sx={{ padding: '2rem' }}>
         <Stepper>
           <Step>
-            <StepButton {...args}/>
+            <StepButton {...args} />
           </Step>
         </Stepper>
       </Paper>
     </Box>
   ),
+  args: {
+    'aria-label': '1',
+  },
 };
 
 // credit: https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs

package/src/lib/Stepper.stories.tsx

@@ -174,6 +174,9 @@ export const _Stepper: StoryObj<typeof Stepper> = {
       </Box>
     );
   },
+  args: {
+    'aria-label': 'stepper example',
+  },
 };
 
 export const _StepperScrollButtons: StoryObj<typeof Stepper> = {

package/src/lib/Stepper.tsx

@@ -71,12 +71,15 @@ export const Stepper = ({ children, connector, orientation, scrollButtons, ...re
       </ScrollIconContainer>
 
       <MuiStepper
+        aria-label="multi-step process"
+        role="region"
         {...rest}
         connector={connector}
         orientation={orientation}
         alternativeLabel={alternativeLabel}
         ref={stepperRef}
         children={children}
+        tabIndex={0}
       />
 
       <ScrollIconContainer style={{ paddingLeft: '8px' }}>
@@ -98,6 +101,8 @@ export const Stepper = ({ children, connector, orientation, scrollButtons, ...re
     </Grid>
   ) : (
     <MuiStepper
+      aria-label="multi-step process"
+      role="region"
       {...rest}
       connector={connector}
       orientation={orientation}