@veracity/vui 2.8.3 → 2.8.4

package/dist/cjs/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAatB,CAAA;AAMD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAqHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAatB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UA0IX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}

package/dist/cjs/button/button.js

@@ -71,9 +71,6 @@ exports.ButtonBase = core_1.styled.buttonBox `
   user-select: none;
   width: fit-content;
 `;
-const ariaProps = {
-    'aria-label': 'button'
-};
 /**
  * Triggers given actions on click. Supports multiple states, sizes and variants.
  *
@@ -86,7 +83,7 @@ exports.Button = (0, core_1.vui)((props, ref) => {
     const buttonGroupProps = (0, context_1.useButtonGroupContext)();
     const mergedProps = Object.assign(Object.assign({}, buttonGroupProps), props);
     const { borderWidth: borderWidthProp, children, className, colorScheme, disabled, dropDownIcon = 'falAngleDown', icon, iconLeft, iconRight, isActive, isDropDown, isElevated, isFullWidth, isLoading, // eslint-disable-line
-    isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, variant: variantProp } = mergedProps, rest = __rest(mergedProps, ["borderWidth", "children", "className", "colorScheme", "disabled", "dropDownIcon", "icon", "iconLeft", "iconRight", "isActive", "isDropDown", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "isTruncated", "size", "state", "stateMapping", "text", "variant"]);
+    isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, title, variant: variantProp } = mergedProps, rest = __rest(mergedProps, ["borderWidth", "children", "className", "colorScheme", "disabled", "dropDownIcon", "icon", "iconLeft", "iconRight", "isActive", "isDropDown", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "isTruncated", "size", "state", "stateMapping", "text", "title", "variant"]);
     const hasState = Boolean(state) && state !== 'idle';
     const states = Object.assign(Object.assign({}, consts_1.buttonStateMapping), stateMapping);
     const _e = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, { iconProps: stateIconProps } = _e, stateProps = __rest(_e, ["iconProps"]);
@@ -105,6 +102,29 @@ exports.Button = (0, core_1.vui)((props, ref) => {
     const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px';
     const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px';
     const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px';
+    let ariaLabel = 'vui-button';
+    if (title) {
+        ariaLabel = title;
+    }
+    else {
+        if ((0, utils_1.isString)(text)) {
+            ariaLabel = text;
+        }
+        else if ((0, utils_1.isReactText)(text)) {
+            ariaLabel = text.toString();
+        }
+        else {
+            if ((0, utils_1.isString)(icon)) {
+                ariaLabel = icon;
+            }
+            else if ((0, utils_1.isString)(iconLeft)) {
+                ariaLabel = iconLeft;
+            }
+            else if ((0, utils_1.isString)(iconRight)) {
+                ariaLabel = iconRight;
+            }
+        }
+    }
     const disabledProps = disabled
         ? {
             'aria-disabled': disabled,
@@ -126,7 +146,7 @@ exports.Button = (0, core_1.vui)((props, ref) => {
         w: isFullWidth ? '100%' : undefined
     });
     return (react_1.default.createElement(context_2.ButtonProvider, { value: context },
-        react_1.default.createElement(exports.ButtonBase, Object.assign({ borderWidth: border, className: (0, utils_1.cs)('vui-button', className, isActive && utils_1.activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, type: "button", variant: variant }, ariaProps, buttonStyles, disabledProps, aliasedProps, rest),
+        react_1.default.createElement(exports.ButtonBase, Object.assign({ "aria-label": ariaLabel, borderWidth: border, className: (0, utils_1.cs)('vui-button', className, isActive && utils_1.activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, title: title, type: "button", variant: variant }, buttonStyles, disabledProps, aliasedProps, rest),
             hasState && (react_1.default.createElement(StateWrapper, Object.assign({ onClick: (e) => e.stopPropagation() }, stateProps),
                 react_1.default.createElement(buttonIcon_1.default, Object.assign({ m: "auto" }, stateIconProps)))),
             react_1.default.createElement(Content, null,

package/dist/cjs/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAyBpE,eAAO,MAAM,YAAY,ulJAkBxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,uDAmFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAyBpE,eAAO,MAAM,YAAY,ulJAiBxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,uDAuFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/cjs/checkbox/checkbox.js

@@ -65,7 +65,6 @@ const CheckboxInput = core_1.styled.input `
   z-index: 1;
 `;
 exports.CheckboxBase = core_1.styled.labelBox `
-  align-items: center;
   cursor: pointer;
   display: inline-flex;
   width: fit-content;
@@ -96,9 +95,10 @@ exports.Checkbox = (0, core_1.vui)((props, ref) => {
     const styles = (0, core_1.useStyleConfig)('Checkbox', mergedProps);
     const _d = styles.control, { color: controlColor, hoverColor } = _d, controlStyles = __rest(_d, ["color", "hoverColor"]);
     const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp;
-    const controlMr = children || label ? 1 : 0;
+    const controlMr = children || label ? '12px' : 0;
     const color = controlColor ? controlColor : consts_1.checkboxColors.main;
     const controlHoverColor = hoverColor ? hoverColor : consts_1.checkboxColors.hover;
+    const isLongLabel = label && (label === null || label === void 0 ? void 0 : label.length) >= 60;
     (0, react_1.useEffect)(() => {
         checked !== undefined && setIsChecked(checked);
     }, [checked]);
@@ -109,9 +109,9 @@ exports.Checkbox = (0, core_1.vui)((props, ref) => {
     const aliasedProps = (0, utils_1.filterUndefined)({
         'aria-disabled': disabled
     });
-    return (react_1.default.createElement(exports.CheckboxBase, Object.assign({ className: (0, utils_1.cs)('vui-checkbox', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, aliasedProps, rest),
-        react_1.default.createElement(CheckboxControl, Object.assign({ bg: "white", className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr }, controlStyles),
-            react_1.default.createElement(CheckboxInput, Object.assign({ className: "vui-checkboxInput", onChange: handleOnChange, ref: inputRef, type: "checkbox" }, { checked, defaultChecked, disabled, id, name, required, value }, inputProps)),
-            react_1.default.createElement(icon_1.default, { className: "vui-checkboxIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, Object.assign({ className: "vui-checkboxLabel", lineHeight: "normal" }, styles.label), label)))));
+    return (react_1.default.createElement(exports.CheckboxBase, Object.assign({ alignItems: isLongLabel ? 'flex-start' : 'center', className: (0, utils_1.cs)('vui-checkbox', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, aliasedProps, rest),
+        react_1.default.createElement(CheckboxControl, Object.assign({ bg: "white", className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr, role: "none" }, controlStyles),
+            react_1.default.createElement(CheckboxInput, Object.assign({ "aria-label": label ? label : 'input-checkbox', className: "vui-checkboxInput", onChange: handleOnChange, ref: inputRef, type: "checkbox" }, { checked, defaultChecked, disabled, id, name, required, value }, inputProps)),
+            react_1.default.createElement(icon_1.default, { className: "vui-checkboxIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, Object.assign({ className: "vui-checkboxLabel", lineHeight: isLongLabel ? '26px' : 'normal' }, styles.label), label)))));
 });
 exports.default = exports.Checkbox;

package/dist/cjs/footer/footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/footer/footer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwC,YAAY,EAAE,MAAM,SAAS,CAAA;AAM5E,OAAO,EAAkB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAK3C,eAAO,MAAM,UAAU,+HAItB,CAAA;AAGD,oGAAoG;AACpG,eAAO,MAAM,MAAM;YAuKT,mBAAmB;aAClB,oBAAoB;aACpB,oBAAoB;UACvB,iBAAiB;SAClB,gBAAgB;aACZ,oBAAoB;CAC9B,CAAA;AASD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/footer/footer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwC,YAAY,EAAE,MAAM,SAAS,CAAA;AAM5E,OAAO,EAAkB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAK3C,eAAO,MAAM,UAAU,+HAItB,CAAA;AAGD,oGAAoG;AACpG,eAAO,MAAM,MAAM;YAwKT,mBAAmB;aAClB,oBAAoB;aACpB,oBAAoB;UACvB,iBAAiB;SAClB,gBAAgB;aACZ,oBAAoB;CAC9B,CAAA;AASD,eAAe,MAAM,CAAA"}

package/dist/cjs/footer/footer.js

@@ -70,7 +70,7 @@ exports.Footer = (0, core_1.vui)((props, ref) => {
     const downMd = (0, core_1.useDown)('md');
     const downLg = (0, core_1.useDown)('lg');
     return (react_1.default.createElement(context_1.FooterProvider, { value: context },
-        react_1.default.createElement(exports.FooterBase, Object.assign({ className: (0, utils_1.cs)('vui-footer', isApplication ? 'vui-footer-app' : '', className), px: isApplication ? '40px' : 3, py: isSlim ? (downMd ? '16px' : '9px') : 5 }, styles.container, { ref: ref }, rest),
+        react_1.default.createElement(exports.FooterBase, Object.assign({ className: (0, utils_1.cs)('vui-footer', isApplication ? 'vui-footer-app' : '', className), px: isApplication ? '40px' : 3, py: isSlim ? (downMd ? '16px' : '9px') : 5, role: "contentinfo" }, styles.container, { ref: ref }, rest),
             isApplication && (react_1.default.createElement(footerContent_1.default, { alignContent: "center", alignItems: "center", maxW: "100%" },
                 react_1.default.createElement(footerRow_1.default, { alignContent: "space-between", w: 1 },
                     react_1.default.createElement(box_1.Box, { alignItems: "self-start", columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true }, applicationLinks === null || applicationLinks === void 0 ? void 0 : applicationLinks.map((link, index) => (react_1.default.createElement(box_1.Box, { flex: { xs: '0 0 50%', sm: '0 0 auto' }, key: index, minW: 70 },

package/dist/cjs/header/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/header/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,YAAY,EAAE,MAAM,SAAS,CAAA;AAGpF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAG3C,eAAO,MAAM,UAAU,kIAMtB,CAAA;AAGD,qHAAqH;AACrH,eAAO,MAAM,MAAM;aA4CR,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;mBACd,0BAA0B;aAChC,oBAAoB;cACnB,qBAAqB;UACzB,iBAAiB;eACZ,sBAAsB;mBAClB,0BAA0B;kBAC3B,yBAAyB;mBACxB,0BAA0B;cAC/B,qBAAqB;qBACd,4BAA4B;YACrC,mBAAmB;CAC5B,CAAA;AAmBD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/header/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,YAAY,EAAE,MAAM,SAAS,CAAA;AAGpF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAG3C,eAAO,MAAM,UAAU,kIAMtB,CAAA;AAGD,qHAAqH;AACrH,eAAO,MAAM,MAAM;aA6CR,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;mBACd,0BAA0B;aAChC,oBAAoB;cACnB,qBAAqB;UACzB,iBAAiB;eACZ,sBAAsB;mBAClB,0BAA0B;kBAC3B,yBAAyB;mBACxB,0BAA0B;cAC/B,qBAAqB;qBACd,4BAA4B;YACrC,mBAAmB;CAC5B,CAAA;AAmBD,eAAe,MAAM,CAAA"}

package/dist/cjs/header/header.js

@@ -94,7 +94,7 @@ exports.Header = (0, core_1.vui)((props, ref) => {
         variant
     };
     return (react_1.default.createElement(context_1.HeaderProvider, { value: context },
-        react_1.default.createElement(exports.HeaderBase, Object.assign({ className: (0, utils_1.cs)('vui-header', className), h: headerHeight, px: { xs: 2, lg: 5 }, ref: ref }, styles.container, rest))));
+        react_1.default.createElement(exports.HeaderBase, Object.assign({ className: (0, utils_1.cs)('vui-header', className), h: headerHeight, px: { xs: 2, lg: 5 }, ref: ref, role: "banner" }, styles.container, rest))));
 });
 exports.Header.Account = headerAccount_1.default;
 exports.Header.AccountUserInfo = headerAccountUserInfo_1.default;

package/dist/cjs/image/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/image/image.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,eAAO,MAAM,SAAS,+HAIrB,CAAA;AAED,gDAAgD;AAChD,eAAO,MAAM,KAAK,mDAKhB,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/image/image.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,eAAO,MAAM,SAAS,+HAIrB,CAAA;AAED,gDAAgD;AAChD,eAAO,MAAM,KAAK,mDAchB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/cjs/image/image.js

@@ -25,8 +25,8 @@ exports.ImageBase = core_1.styled.imgBox `
 `;
 /** Displays an image. Includes base styling. */
 exports.Image = (0, core_1.vui)((props, ref) => {
-    const _a = (0, core_1.omitThemingProps)(props), { className } = _a, rest = __rest(_a, ["className"]);
+    const _a = (0, core_1.omitThemingProps)(props), { alt, className, title } = _a, rest = __rest(_a, ["alt", "className", "title"]);
     const styles = (0, core_1.useStyleConfig)('Image', props);
-    return react_1.default.createElement(exports.ImageBase, Object.assign({ className: (0, utils_1.cs)('vui-image', className), ref: ref }, styles, rest));
+    return (react_1.default.createElement(exports.ImageBase, Object.assign({ alt: alt ? alt : title ? title : '', className: (0, utils_1.cs)('vui-image', className), ref: ref, title: title }, styles, rest)));
 });
 exports.default = exports.Image;

package/dist/cjs/input/inputInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputInput.d.ts","sourceRoot":"","sources":["../../../src/input/inputInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,cAAc,2GAe1B,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,UAAU,0DAoBrB,CAAA;AAEF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"inputInput.d.ts","sourceRoot":"","sources":["../../../src/input/inputInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,cAAc,2GAe1B,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,UAAU,0DAqBrB,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/cjs/input/inputInput.js

@@ -44,6 +44,6 @@ exports.InputInput = (0, core_1.vui)((props, ref) => {
     const aliasedProps = (0, utils_1.filterUndefined)({
         'aria-disabled': mergedProps.disabled
     });
-    return (react_1.default.createElement(exports.InputInputBase, Object.assign({ autoComplete: "false", className: (0, utils_1.cs)('vui-inputInput', className), ref: ref }, styles.input, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.InputInputBase, Object.assign({ "aria-label": "input-text", autoComplete: "false", className: (0, utils_1.cs)('vui-inputInput', className), ref: ref }, styles.input, aliasedProps, rest)));
 });
 exports.default = exports.InputInput;

package/dist/cjs/notification/notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/notification/notification.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAI3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AAEnD;;;GAGG;AACH,eAAO,MAAM,YAAY;YAwDf,yBAAyB;UAC3B,uBAAuB;UACvB,uBAAuB;WACtB,wBAAwB;CAChC,CAAA;AAOD,eAAe,YAAY,CAAA"}
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/notification/notification.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAI3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AAEnD;;;GAGG;AACH,eAAO,MAAM,YAAY;YAyDf,yBAAyB;UAC3B,uBAAuB;UACvB,uBAAuB;WACtB,wBAAwB;CAChC,CAAA;AAOD,eAAe,YAAY,CAAA"}

package/dist/cjs/notification/notification.js

@@ -40,7 +40,7 @@ exports.Notification = (0, core_1.vui)((props, ref) => {
     const titleDisplay = action ? 'block' : 'inline-flex';
     const alignSelf = verticalAlign === 'center' ? 'center' : 'flex-start';
     return (react_1.default.createElement(context_1.NotificationProvider, { value: context },
-        react_1.default.createElement(box_1.default, Object.assign({ borderRadius: "md", borderWidth: 1, className: (0, utils_1.cs)('vui-notification', className), ref: ref, w: "fit-content" }, styles.container, rest),
+        react_1.default.createElement(box_1.default, Object.assign({ borderRadius: "md", borderWidth: 1, className: (0, utils_1.cs)('vui-notification', className), ref: ref, role: "mark", w: "fit-content" }, styles.container, rest),
             iconName ? react_1.default.createElement(notificationIcon_1.default, { alignSelf: alignSelf, name: iconName }) : icon, children !== null && children !== void 0 ? children : (react_1.default.createElement(notificationText_1.default, { alignSelf: alignSelf },
             (0, utils_1.isReactText)(title) ? react_1.default.createElement(notificationTitle_1.default, { display: titleDisplay, text: title }) : title,
             " ",

package/dist/cjs/radio/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/radio/radio.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAuB3D,eAAO,MAAM,SAAS,olJAkBrB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,oDA2FhB,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/radio/radio.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAuB3D,eAAO,MAAM,SAAS,olJAkBrB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,oDA4FhB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/cjs/radio/radio.js

@@ -117,7 +117,7 @@ exports.Radio = (0, core_1.vui)((props, ref) => {
     });
     return (react_1.default.createElement(exports.RadioBase, Object.assign({ className: (0, utils_1.cs)('vui-radio', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, aliasedProps, rest),
         react_1.default.createElement(RadioControl, Object.assign({ bg: "white", className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr }, controlStyles),
-            react_1.default.createElement(RadioInput, Object.assign({ className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { checked, defaultChecked, disabled, id, name, required, value }, inputProps)),
+            react_1.default.createElement(RadioInput, Object.assign({ "aria-label": "input-radio", className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { checked, defaultChecked, disabled, id, name, required, value }, inputProps)),
             react_1.default.createElement(icon_1.default, { className: "vui-radioIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, Object.assign({ className: "vui-radioLabel", lineHeight: "normal" }, styles.label), label)))));
 });
 exports.default = exports.Radio;

package/dist/cjs/table/th.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"th.d.ts","sourceRoot":"","sources":["../../../src/table/th.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,eAAO,MAAM,MAAM,8HAIlB,CAAA;AAED,oDAAoD;AACpD,eAAO,MAAM,EAAE,+CA8Db,CAAA;AAEF,eAAe,EAAE,CAAA"}
+{"version":3,"file":"th.d.ts","sourceRoot":"","sources":["../../../src/table/th.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,eAAO,MAAM,MAAM,8HAIlB,CAAA;AAED,oDAAoD;AACpD,eAAO,MAAM,EAAE,+CA+Db,CAAA;AAEF,eAAe,EAAE,CAAA"}

package/dist/cjs/table/th.js

@@ -18,6 +18,7 @@ exports.Th = exports.ThBase = void 0;
 const react_1 = __importDefault(require("react"));
 const box_1 = __importDefault(require("../box"));
 const core_1 = require("../core");
+const t_1 = require("../t");
 const utils_1 = require("../utils");
 const context_1 = require("./context");
 const tableSortIcon_1 = __importDefault(require("./tableSortIcon"));
@@ -54,6 +55,7 @@ exports.Th = (0, core_1.vui)((props, ref) => {
         : {};
     return (react_1.default.createElement(exports.ThBase, Object.assign({ className: (0, utils_1.cs)('vui-th', className), "data-active": isActive, "data-disabled": disabled, hoverBg: hoverBg, px: 2, ref: ref }, styles.th, activeProps, disabledProps, interactiveProps, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(box_1.default, { centerV: true, display: "inline-flex" },
         title,
-        isSortable && react_1.default.createElement(tableSortIcon_1.default, { ml: 1, my: 0.5, order: sortOrder })))));
+        isSortable && react_1.default.createElement(tableSortIcon_1.default, { ml: 1, my: 0.5, order: sortOrder }))),
+        !title && react_1.default.createElement(t_1.T, { color: "white" }, "a11y fix")));
 });
 exports.default = exports.Th;

package/dist/cjs/table/thead.js

@@ -42,6 +42,6 @@ exports.Thead = (0, core_1.vui)((props, ref) => {
             zIndex: 3
         }
         : {};
-    return (react_1.default.createElement(TheadBase, Object.assign({ className: (0, utils_1.cs)('vui-thead', className), ref: ref }, stickyProps, styles.thead, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(tr_1.default, null, columns === null || columns === void 0 ? void 0 : columns.map(column => (react_1.default.createElement(th_1.default, Object.assign({ key: column.field }, column))))))));
+    return (react_1.default.createElement(TheadBase, Object.assign({ className: (0, utils_1.cs)('vui-thead', className), ref: ref }, stickyProps, styles.thead, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(tr_1.default, null, columns === null || columns === void 0 ? void 0 : columns.map(column => (react_1.default.createElement(th_1.default, Object.assign({ key: column.field, role: "columnheader" }, column))))))));
 });
 exports.default = exports.Thead;

package/dist/cjs/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAkBhD,eAAO,MAAM,YAAY,+HAKxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,sDA+FnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAkBhD,eAAO,MAAM,YAAY,+HAKxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,sDAgGnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/cjs/textarea/textarea.js

@@ -94,7 +94,7 @@ exports.Textarea = (0, core_1.vui)((props, ref) => {
         setCount(((_a = `${value}`) === null || _a === void 0 ? void 0 : _a.length) ? `${value}`.length : 0);
     }, [value]);
     return (react_1.default.createElement(exports.TextareaBase, Object.assign({ className: (0, utils_1.cs)('vui-textarea', className), ref: ref }, styles.container, aliasedProps, rest),
-        react_1.default.createElement(TextareaTextarea, Object.assign({ className: "vui-textareaTextarea", ref: textareaRef }, {
+        react_1.default.createElement(TextareaTextarea, Object.assign({ "aria-label": "input-textarea", className: "vui-textareaTextarea", ref: textareaRef }, {
             autoFocus,
             cols,
             defaultValue,

package/dist/esm/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAatB,CAAA;AAMD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAqHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAatB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UA0IX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}

package/dist/esm/button/button.js

@@ -31,9 +31,6 @@ export const ButtonBase = styled.buttonBox `
   user-select: none;
   width: fit-content;
 `;
-const ariaProps = {
-    'aria-label': 'button'
-};
 /**
  * Triggers given actions on click. Supports multiple states, sizes and variants.
  *
@@ -45,7 +42,7 @@ export const Button = vui((props, ref) => {
     const buttonGroupProps = useButtonGroupContext();
     const mergedProps = { ...buttonGroupProps, ...props };
     const { borderWidth: borderWidthProp, children, className, colorScheme, disabled, dropDownIcon = 'falAngleDown', icon, iconLeft, iconRight, isActive, isDropDown, isElevated, isFullWidth, isLoading, // eslint-disable-line
-    isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, variant: variantProp, ...rest } = mergedProps;
+    isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, title, variant: variantProp, ...rest } = mergedProps;
     const hasState = Boolean(state) && state !== 'idle';
     const states = { ...buttonStateMapping, ...stateMapping };
     const { iconProps: stateIconProps, ...stateProps } = states[state] ?? {};
@@ -64,6 +61,29 @@ export const Button = vui((props, ref) => {
     const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px';
     const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px';
     const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px';
+    let ariaLabel = 'vui-button';
+    if (title) {
+        ariaLabel = title;
+    }
+    else {
+        if (isString(text)) {
+            ariaLabel = text;
+        }
+        else if (isReactText(text)) {
+            ariaLabel = text.toString();
+        }
+        else {
+            if (isString(icon)) {
+                ariaLabel = icon;
+            }
+            else if (isString(iconLeft)) {
+                ariaLabel = iconLeft;
+            }
+            else if (isString(iconRight)) {
+                ariaLabel = iconRight;
+            }
+        }
+    }
     const disabledProps = disabled
         ? {
             'aria-disabled': disabled,
@@ -85,7 +105,7 @@ export const Button = vui((props, ref) => {
         w: isFullWidth ? '100%' : undefined
     });
     return (React.createElement(ButtonProvider, { value: context },
-        React.createElement(ButtonBase, { borderWidth: border, className: cs('vui-button', className, isActive && activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, type: "button", variant: variant, ...ariaProps, ...buttonStyles, ...disabledProps, ...aliasedProps, ...rest },
+        React.createElement(ButtonBase, { "aria-label": ariaLabel, borderWidth: border, className: cs('vui-button', className, isActive && activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, title: title, type: "button", variant: variant, ...buttonStyles, ...disabledProps, ...aliasedProps, ...rest },
             hasState && (React.createElement(StateWrapper, { onClick: (e) => e.stopPropagation(), ...stateProps },
                 React.createElement(ButtonIcon, { m: "auto", ...stateIconProps }))),
             React.createElement(Content, null,

package/dist/esm/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAyBpE,eAAO,MAAM,YAAY,ulJAkBxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,uDAmFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAyBpE,eAAO,MAAM,YAAY,ulJAiBxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,uDAuFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/esm/checkbox/checkbox.js

@@ -25,7 +25,6 @@ const CheckboxInput = styled.input `
   z-index: 1;
 `;
 export const CheckboxBase = styled.labelBox `
-  align-items: center;
   cursor: pointer;
   display: inline-flex;
   width: fit-content;
@@ -55,9 +54,10 @@ export const Checkbox = vui((props, ref) => {
     const styles = useStyleConfig('Checkbox', mergedProps);
     const { color: controlColor, hoverColor, ...controlStyles } = styles.control;
     const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp;
-    const controlMr = children || label ? 1 : 0;
+    const controlMr = children || label ? '12px' : 0;
     const color = controlColor ? controlColor : checkboxColors.main;
     const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover;
+    const isLongLabel = label && label?.length >= 60;
     useEffect(() => {
         checked !== undefined && setIsChecked(checked);
     }, [checked]);
@@ -68,11 +68,11 @@ export const Checkbox = vui((props, ref) => {
     const aliasedProps = filterUndefined({
         'aria-disabled': disabled
     });
-    return (React.createElement(CheckboxBase, { className: cs('vui-checkbox', className), controlHoverColor: controlHoverColor, ref: ref, ...styles.container, ...aliasedProps, ...rest },
-        React.createElement(CheckboxControl, { bg: "white", className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr, ...controlStyles },
-            React.createElement(CheckboxInput, { className: "vui-checkboxInput", onChange: handleOnChange, ref: inputRef, type: "checkbox", ...{ checked, defaultChecked, disabled, id, name, required, value }, ...inputProps }),
+    return (React.createElement(CheckboxBase, { alignItems: isLongLabel ? 'flex-start' : 'center', className: cs('vui-checkbox', className), controlHoverColor: controlHoverColor, ref: ref, ...styles.container, ...aliasedProps, ...rest },
+        React.createElement(CheckboxControl, { bg: "white", className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr, role: "none", ...controlStyles },
+            React.createElement(CheckboxInput, { "aria-label": label ? label : 'input-checkbox', className: "vui-checkboxInput", onChange: handleOnChange, ref: inputRef, type: "checkbox", ...{ checked, defaultChecked, disabled, id, name, required, value }, ...inputProps }),
             React.createElement(Icon, { className: "vui-checkboxIcon", h: "100%", name: icon, w: "100%" })),
         children ??
-            (label && (React.createElement(T, { className: "vui-checkboxLabel", lineHeight: "normal", ...styles.label }, label)))));
+            (label && (React.createElement(T, { className: "vui-checkboxLabel", lineHeight: isLongLabel ? '26px' : 'normal', ...styles.label }, label)))));
 });
 export default Checkbox;

package/dist/esm/footer/footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/footer/footer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwC,YAAY,EAAE,MAAM,SAAS,CAAA;AAM5E,OAAO,EAAkB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAK3C,eAAO,MAAM,UAAU,+HAItB,CAAA;AAGD,oGAAoG;AACpG,eAAO,MAAM,MAAM;YAuKT,mBAAmB;aAClB,oBAAoB;aACpB,oBAAoB;UACvB,iBAAiB;SAClB,gBAAgB;aACZ,oBAAoB;CAC9B,CAAA;AASD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/footer/footer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwC,YAAY,EAAE,MAAM,SAAS,CAAA;AAM5E,OAAO,EAAkB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAK3C,eAAO,MAAM,UAAU,+HAItB,CAAA;AAGD,oGAAoG;AACpG,eAAO,MAAM,MAAM;YAwKT,mBAAmB;aAClB,oBAAoB;aACpB,oBAAoB;UACvB,iBAAiB;SAClB,gBAAgB;aACZ,oBAAoB;CAC9B,CAAA;AASD,eAAe,MAAM,CAAA"}

package/dist/esm/footer/footer.js

@@ -52,7 +52,7 @@ export const Footer = vui((props, ref) => {
     const downMd = useDown('md');
     const downLg = useDown('lg');
     return (React.createElement(FooterProvider, { value: context },
-        React.createElement(FooterBase, { className: cs('vui-footer', isApplication ? 'vui-footer-app' : '', className), px: isApplication ? '40px' : 3, py: isSlim ? (downMd ? '16px' : '9px') : 5, ...styles.container, ref: ref, ...rest },
+        React.createElement(FooterBase, { className: cs('vui-footer', isApplication ? 'vui-footer-app' : '', className), px: isApplication ? '40px' : 3, py: isSlim ? (downMd ? '16px' : '9px') : 5, role: "contentinfo", ...styles.container, ref: ref, ...rest },
             isApplication && (React.createElement(FooterContent, { alignContent: "center", alignItems: "center", maxW: "100%" },
                 React.createElement(FooterRow, { alignContent: "space-between", w: 1 },
                     React.createElement(Box, { alignItems: "self-start", columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true }, applicationLinks?.map((link, index) => (React.createElement(Box, { flex: { xs: '0 0 50%', sm: '0 0 auto' }, key: index, minW: 70 },

package/dist/esm/header/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/header/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,YAAY,EAAE,MAAM,SAAS,CAAA;AAGpF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAG3C,eAAO,MAAM,UAAU,kIAMtB,CAAA;AAGD,qHAAqH;AACrH,eAAO,MAAM,MAAM;aA4CR,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;mBACd,0BAA0B;aAChC,oBAAoB;cACnB,qBAAqB;UACzB,iBAAiB;eACZ,sBAAsB;mBAClB,0BAA0B;kBAC3B,yBAAyB;mBACxB,0BAA0B;cAC/B,qBAAqB;qBACd,4BAA4B;YACrC,mBAAmB;CAC5B,CAAA;AAmBD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/header/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,YAAY,EAAE,MAAM,SAAS,CAAA;AAGpF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAG3C,eAAO,MAAM,UAAU,kIAMtB,CAAA;AAGD,qHAAqH;AACrH,eAAO,MAAM,MAAM;aA6CR,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;mBACd,0BAA0B;aAChC,oBAAoB;cACnB,qBAAqB;UACzB,iBAAiB;eACZ,sBAAsB;mBAClB,0BAA0B;kBAC3B,yBAAyB;mBACxB,0BAA0B;cAC/B,qBAAqB;qBACd,4BAA4B;YACrC,mBAAmB;CAC5B,CAAA;AAmBD,eAAe,MAAM,CAAA"}

package/dist/esm/header/header.js

@@ -54,7 +54,7 @@ export const Header = vui((props, ref) => {
         variant
     };
     return (React.createElement(HeaderProvider, { value: context },
-        React.createElement(HeaderBase, { className: cs('vui-header', className), h: headerHeight, px: { xs: 2, lg: 5 }, ref: ref, ...styles.container, ...rest })));
+        React.createElement(HeaderBase, { className: cs('vui-header', className), h: headerHeight, px: { xs: 2, lg: 5 }, ref: ref, role: "banner", ...styles.container, ...rest })));
 });
 Header.Account = HeaderAccount;
 Header.AccountUserInfo = HeaderAccountUserInfo;

package/dist/esm/image/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/image/image.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,eAAO,MAAM,SAAS,+HAIrB,CAAA;AAED,gDAAgD;AAChD,eAAO,MAAM,KAAK,mDAKhB,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/image/image.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,eAAO,MAAM,SAAS,+HAIrB,CAAA;AAED,gDAAgD;AAChD,eAAO,MAAM,KAAK,mDAchB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/esm/image/image.js

@@ -8,8 +8,8 @@ export const ImageBase = styled.imgBox `
 `;
 /** Displays an image. Includes base styling. */
 export const Image = vui((props, ref) => {
-    const { className, ...rest } = omitThemingProps(props);
+    const { alt, className, title, ...rest } = omitThemingProps(props);
     const styles = useStyleConfig('Image', props);
-    return React.createElement(ImageBase, { className: cs('vui-image', className), ref: ref, ...styles, ...rest });
+    return (React.createElement(ImageBase, { alt: alt ? alt : title ? title : '', className: cs('vui-image', className), ref: ref, title: title, ...styles, ...rest }));
 });
 export default Image;

package/dist/esm/input/inputInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputInput.d.ts","sourceRoot":"","sources":["../../../src/input/inputInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,cAAc,2GAe1B,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,UAAU,0DAoBrB,CAAA;AAEF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"inputInput.d.ts","sourceRoot":"","sources":["../../../src/input/inputInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,cAAc,2GAe1B,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,UAAU,0DAqBrB,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/esm/input/inputInput.js

@@ -27,6 +27,6 @@ export const InputInput = vui((props, ref) => {
     const aliasedProps = filterUndefined({
         'aria-disabled': mergedProps.disabled
     });
-    return (React.createElement(InputInputBase, { autoComplete: "false", className: cs('vui-inputInput', className), ref: ref, ...styles.input, ...aliasedProps, ...rest }));
+    return (React.createElement(InputInputBase, { "aria-label": "input-text", autoComplete: "false", className: cs('vui-inputInput', className), ref: ref, ...styles.input, ...aliasedProps, ...rest }));
 });
 export default InputInput;

package/dist/esm/notification/notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/notification/notification.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAI3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AAEnD;;;GAGG;AACH,eAAO,MAAM,YAAY;YAwDf,yBAAyB;UAC3B,uBAAuB;UACvB,uBAAuB;WACtB,wBAAwB;CAChC,CAAA;AAOD,eAAe,YAAY,CAAA"}
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/notification/notification.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAI3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AAEnD;;;GAGG;AACH,eAAO,MAAM,YAAY;YAyDf,yBAAyB;UAC3B,uBAAuB;UACvB,uBAAuB;WACtB,wBAAwB;CAChC,CAAA;AAOD,eAAe,YAAY,CAAA"}

package/dist/esm/notification/notification.js

@@ -22,7 +22,7 @@ export const Notification = vui((props, ref) => {
     const titleDisplay = action ? 'block' : 'inline-flex';
     const alignSelf = verticalAlign === 'center' ? 'center' : 'flex-start';
     return (React.createElement(NotificationProvider, { value: context },
-        React.createElement(Box, { borderRadius: "md", borderWidth: 1, className: cs('vui-notification', className), ref: ref, w: "fit-content", ...styles.container, ...rest },
+        React.createElement(Box, { borderRadius: "md", borderWidth: 1, className: cs('vui-notification', className), ref: ref, role: "mark", w: "fit-content", ...styles.container, ...rest },
             iconName ? React.createElement(NotificationIcon, { alignSelf: alignSelf, name: iconName }) : icon,
             children ?? (React.createElement(NotificationText, { alignSelf: alignSelf },
                 isReactText(title) ? React.createElement(NotificationTitle, { display: titleDisplay, text: title }) : title,

package/dist/esm/radio/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/radio/radio.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAuB3D,eAAO,MAAM,SAAS,olJAkBrB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,oDA2FhB,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/radio/radio.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAuB3D,eAAO,MAAM,SAAS,olJAkBrB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,oDA4FhB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/esm/radio/radio.js

@@ -76,7 +76,7 @@ export const Radio = vui((props, ref) => {
     });
     return (React.createElement(RadioBase, { className: cs('vui-radio', className), controlHoverColor: controlHoverColor, ref: ref, ...styles.container, ...aliasedProps, ...rest },
         React.createElement(RadioControl, { bg: "white", className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr, ...controlStyles },
-            React.createElement(RadioInput, { className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio", ...{ checked, defaultChecked, disabled, id, name, required, value }, ...inputProps }),
+            React.createElement(RadioInput, { "aria-label": "input-radio", className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio", ...{ checked, defaultChecked, disabled, id, name, required, value }, ...inputProps }),
             React.createElement(Icon, { className: "vui-radioIcon", h: "100%", name: icon, w: "100%" })),
         children ??
             (label && (React.createElement(T, { className: "vui-radioLabel", lineHeight: "normal", ...styles.label }, label)))));

package/dist/esm/table/th.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"th.d.ts","sourceRoot":"","sources":["../../../src/table/th.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,eAAO,MAAM,MAAM,8HAIlB,CAAA;AAED,oDAAoD;AACpD,eAAO,MAAM,EAAE,+CA8Db,CAAA;AAEF,eAAe,EAAE,CAAA"}
+{"version":3,"file":"th.d.ts","sourceRoot":"","sources":["../../../src/table/th.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,eAAO,MAAM,MAAM,8HAIlB,CAAA;AAED,oDAAoD;AACpD,eAAO,MAAM,EAAE,+CA+Db,CAAA;AAEF,eAAe,EAAE,CAAA"}

package/dist/esm/table/th.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Box from '../box';
 import { styled, useStyleConfig, vui } from '../core';
+import { T } from '../t';
 import { cs, useCallbackRef } from '../utils';
 import { useTableContext } from './context';
 import TableSortIcon from './tableSortIcon';
@@ -34,8 +35,10 @@ export const Th = vui((props, ref) => {
             userSelect: 'none'
         }
         : {};
-    return (React.createElement(ThBase, { className: cs('vui-th', className), "data-active": isActive, "data-disabled": disabled, hoverBg: hoverBg, px: 2, ref: ref, ...styles.th, ...activeProps, ...disabledProps, ...interactiveProps, ...rest }, children ?? (React.createElement(Box, { centerV: true, display: "inline-flex" },
-        title,
-        isSortable && React.createElement(TableSortIcon, { ml: 1, my: 0.5, order: sortOrder })))));
+    return (React.createElement(ThBase, { className: cs('vui-th', className), "data-active": isActive, "data-disabled": disabled, hoverBg: hoverBg, px: 2, ref: ref, ...styles.th, ...activeProps, ...disabledProps, ...interactiveProps, ...rest },
+        children ?? (React.createElement(Box, { centerV: true, display: "inline-flex" },
+            title,
+            isSortable && React.createElement(TableSortIcon, { ml: 1, my: 0.5, order: sortOrder }))),
+        !title && React.createElement(T, { color: "white" }, "a11y fix")));
 });
 export default Th;

package/dist/esm/table/thead.js

@@ -24,6 +24,6 @@ export const Thead = vui((props, ref) => {
             zIndex: 3
         }
         : {};
-    return (React.createElement(TheadBase, { className: cs('vui-thead', className), ref: ref, ...stickyProps, ...styles.thead, ...rest }, children ?? (React.createElement(Tr, null, columns?.map(column => (React.createElement(Th, { key: column.field, ...column })))))));
+    return (React.createElement(TheadBase, { className: cs('vui-thead', className), ref: ref, ...stickyProps, ...styles.thead, ...rest }, children ?? (React.createElement(Tr, null, columns?.map(column => (React.createElement(Th, { key: column.field, role: "columnheader", ...column })))))));
 });
 export default Thead;

package/dist/esm/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAkBhD,eAAO,MAAM,YAAY,+HAKxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,sDA+FnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAkBhD,eAAO,MAAM,YAAY,+HAKxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,sDAgGnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/esm/textarea/textarea.js

@@ -53,7 +53,7 @@ export const Textarea = vui((props, ref) => {
         setCount(`${value}`?.length ? `${value}`.length : 0);
     }, [value]);
     return (React.createElement(TextareaBase, { className: cs('vui-textarea', className), ref: ref, ...styles.container, ...aliasedProps, ...rest },
-        React.createElement(TextareaTextarea, { className: "vui-textareaTextarea", ref: textareaRef, ...{
+        React.createElement(TextareaTextarea, { "aria-label": "input-textarea", className: "vui-textareaTextarea", ref: textareaRef, ...{
                 autoFocus,
                 cols,
                 defaultValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.8.3",
+  "version": "2.8.4",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/button/button.tsx

@@ -37,10 +37,6 @@ export const ButtonBase = styled.buttonBox<ButtonProps>`
   width: fit-content;
 `
 
-const ariaProps = {
-  'aria-label': 'button'
-}
-
 /**
  * Triggers given actions on click. Supports multiple states, sizes and variants.
  *
@@ -65,7 +61,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
     isDropDown,
     isElevated,
     isFullWidth,
-        isLoading, // eslint-disable-line
+    isLoading, // eslint-disable-line
     isRound,
     isSplit,
     isTruncated,
@@ -73,6 +69,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
     state = props.isLoading ? 'loading' : '',
     stateMapping,
     text,
+    title,
     variant: variantProp,
     ...rest
   } = mergedProps
@@ -101,6 +98,25 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
   const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px'
   const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px'
 
+  let ariaLabel = 'vui-button'
+  if (title) {
+    ariaLabel = title
+  } else {
+    if (isString(text)) {
+      ariaLabel = text
+    } else if (isReactText(text)) {
+      ariaLabel = text.toString()
+    } else {
+      if (isString(icon)) {
+        ariaLabel = icon
+      } else if (isString(iconLeft)) {
+        ariaLabel = iconLeft
+      } else if (isString(iconRight)) {
+        ariaLabel = iconRight
+      }
+    }
+  }
+
   const disabledProps = disabled
     ? {
         'aria-disabled': disabled,
@@ -126,6 +142,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
   return (
     <ButtonProvider value={context}>
       <ButtonBase
+        aria-label={ariaLabel}
         borderWidth={border}
         className={cs('vui-button', className, isActive && activeClassName)}
         disabled={disabled}
@@ -134,9 +151,9 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
         pl={pl}
         pr={isDropDown ? 0 : pr}
         ref={ref}
+        title={title}
         type="button"
         variant={variant}
-        {...ariaProps}
         {...buttonStyles}
         {...disabledProps}
         {...aliasedProps}

package/src/checkbox/checkbox.tsx

@@ -30,7 +30,6 @@ const CheckboxInput = styled.input`
 `
 
 export const CheckboxBase = styled.labelBox<CheckboxStyleProps>`
-  align-items: center;
   cursor: pointer;
   display: inline-flex;
   width: fit-content;
@@ -82,9 +81,10 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
   const { color: controlColor, hoverColor, ...controlStyles } = styles.control
 
   const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp
-  const controlMr = children || label ? 1 : 0
+  const controlMr = children || label ? '12px' : 0
   const color = controlColor ? controlColor : checkboxColors.main
   const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover
+  const isLongLabel = label && label?.length >= 60
 
   useEffect(() => {
     checked !== undefined && setIsChecked(checked)
@@ -101,6 +101,7 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
 
   return (
     <CheckboxBase
+      alignItems={isLongLabel ? 'flex-start' : 'center'}
       className={cs('vui-checkbox', className)}
       controlHoverColor={controlHoverColor}
       ref={ref}
@@ -114,9 +115,11 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
         color={color}
         focusWithinRing={3}
         mr={controlMr}
+        role="none"
         {...controlStyles}
       >
         <CheckboxInput
+          aria-label={label ? label : 'input-checkbox'}
           className="vui-checkboxInput"
           onChange={handleOnChange}
           ref={inputRef}
@@ -130,7 +133,7 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
 
       {children ??
         (label && (
-          <T className="vui-checkboxLabel" lineHeight="normal" {...styles.label}>
+          <T className="vui-checkboxLabel" lineHeight={isLongLabel ? '26px' : 'normal'} {...styles.label}>
             {label}
           </T>
         ))}

package/src/footer/footer.tsx

@@ -80,6 +80,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
         className={cs('vui-footer', isApplication ? 'vui-footer-app' : '', className)}
         px={isApplication ? '40px' : 3}
         py={isSlim ? (downMd ? '16px' : '9px') : 5}
+        role="contentinfo"
         {...styles.container}
         ref={ref}
         {...rest}

package/src/header/header.tsx

@@ -70,6 +70,7 @@ export const Header = vui<'header', HeaderProps>((props, ref) => {
         h={headerHeight}
         px={{ xs: 2, lg: 5 }}
         ref={ref}
+        role="banner"
         {...styles.container}
         {...rest}
       />

package/src/image/image.tsx

@@ -12,10 +12,19 @@ export const ImageBase = styled.imgBox`
 
 /** Displays an image. Includes base styling. */
 export const Image = vui<'img', ImageProps>((props, ref) => {
-  const { className, ...rest } = omitThemingProps(props)
+  const { alt, className, title, ...rest } = omitThemingProps(props)
   const styles = useStyleConfig('Image', props)
 
-  return <ImageBase className={cs('vui-image', className)} ref={ref} {...styles} {...rest} />
+  return (
+    <ImageBase
+      alt={alt ? alt : title ? title : ''}
+      className={cs('vui-image', className)}
+      ref={ref}
+      title={title}
+      {...styles}
+      {...rest}
+    />
+  )
 })
 
 export default Image

package/src/input/inputInput.tsx

@@ -35,6 +35,7 @@ export const InputInput = vui<'input', InputInputProps>((props, ref) => {
 
   return (
     <InputInputBase
+      aria-label="input-text"
       autoComplete="false"
       className={cs('vui-inputInput', className)}
       ref={ref}

package/src/notification/notification.tsx

@@ -50,6 +50,7 @@ export const Notification = vui<'div', NotificationProps>((props, ref) => {
         borderWidth={1}
         className={cs('vui-notification', className)}
         ref={ref}
+        role="mark"
         w="fit-content"
         {...styles.container}
         {...rest}

package/src/radio/radio.tsx

@@ -126,6 +126,7 @@ export const Radio = vui<'span', RadioProps>((props, ref) => {
         {...controlStyles}
       >
         <RadioInput
+          aria-label="input-radio"
           className="vui-radioInput"
           onChange={handleOnChange}
           ref={inputRef}

package/src/table/th.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import Box from '../box'
 import { styled, useStyleConfig, vui } from '../core'
+import { T } from '../t'
 import { cs, MouseEvent, useCallbackRef } from '../utils'
 import { useTableContext } from './context'
 import { ThProps } from './table.types'
@@ -74,6 +75,7 @@ export const Th = vui<'th', ThProps>((props, ref) => {
           {isSortable && <TableSortIcon ml={1} my={0.5} order={sortOrder} />}
         </Box>
       )}
+      {!title && <T color="white">a11y fix</T>}
     </ThBase>
   )
 })

package/src/table/thead.tsx

@@ -35,7 +35,7 @@ export const Thead = vui<'thead', TheadProps>((props, ref) => {
       {children ?? (
         <Tr>
           {columns?.map(column => (
-            <Th key={column.field} {...column} />
+            <Th key={column.field} role="columnheader" {...column} />
           ))}
         </Tr>
       )}

package/src/textarea/textarea.tsx

@@ -90,6 +90,7 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
   return (
     <TextareaBase className={cs('vui-textarea', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
       <TextareaTextarea
+        aria-label="input-textarea"
         className="vui-textareaTextarea"
         ref={textareaRef}
         {...{