td-stylekit 28.4.0 → 28.5.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [28.5.0](https://github.com/treasure-data/td-stylekit/compare/v28.4.0...v28.5.0) (2022-10-14)
+
+
+### Features
+
+* **CON-10759:** Increase accessibility of FormControl validation errors ([#1348](https://github.com/treasure-data/td-stylekit/issues/1348)) ([4c7c734](https://github.com/treasure-data/td-stylekit/commit/4c7c734))
+
 # [28.4.0](https://github.com/treasure-data/td-stylekit/compare/v28.3.0...v28.4.0) (2022-10-12)
 
 

package/dist/es/FormControl/FormControl.js

@@ -162,6 +162,7 @@ var FormControl = /*#__PURE__*/function (_PureComponent) {
       var input = (0, _jsxRuntime.jsx)(InputComponent, _objectSpread({
         "data-gs-c": gsC(name, value),
         "data-gs": gs("src", "formcontrol", "formcontrol.tsx", "input-component"),
+        "aria-describedby": "".concat(name, "-validationError"),
         id: id || name,
         inputId: name,
         invalid: isInvalid,
@@ -195,6 +196,7 @@ var FormControl = /*#__PURE__*/function (_PureComponent) {
       });
       var errorAddon = (0, _jsxRuntime.jsx)(_FormFieldAddon["default"], {
         "data-gs": gs("src", "formcontrol", "formcontrol.tsx", "form-field-addon"),
+        id: "".concat(name, "-validationError"),
         className: addOnClassName,
         showFullError: showFullError,
         errorList: errorList,

package/dist/es/FormFieldAddon/FormFieldAddon.d.ts

@@ -26,6 +26,7 @@ declare type FormFieldInfoProps = {
 };
 export declare const FormFieldInfo: React.FunctionComponent<FormFieldInfoProps>;
 declare type FormFieldErrorProps = {
+    id?: string;
     className?: string;
     showFullError?: boolean;
     errorList: Array<string>;

package/dist/es/FormFieldAddon/FormFieldAddon.js

@@ -122,6 +122,7 @@ var FormFieldError = function FormFieldError(_ref4) {
   return (0, _jsxRuntime.jsx)(_FormFieldAddonElements.AddonError, _objectSpread(_objectSpread({
     "data-gs-c": gsC(errorText, title),
     "data-gs": gs("src", "formfieldaddon", "formfieldaddon.tsx", "addon-error"),
+    role: "alert",
     className: className,
     errorList: errorList,
     title: title
@@ -133,7 +134,8 @@ var FormFieldError = function FormFieldError(_ref4) {
 exports.FormFieldError = FormFieldError;
 
 var FormFieldAddon = function FormFieldAddon(_ref5) {
-  var className = _ref5.className,
+  var id = _ref5.id,
+      className = _ref5.className,
       showFullError = _ref5.showFullError,
       showFullHint = _ref5.showFullHint,
       showFullInfo = _ref5.showFullInfo,
@@ -151,6 +153,7 @@ var FormFieldAddon = function FormFieldAddon(_ref5) {
   if (errorList && errorList.length) {
     return (0, _jsxRuntime.jsx)(FormFieldError, {
       "data-gs": gs("src", "formfieldaddon", "formfieldaddon.tsx", "form-field-error"),
+      id: id,
       className: className,
       showFullError: showFullError,
       errorList: errorList,

package/dist/es/FormFieldAddon/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare type FormFieldAddonProps = {
+    id?: string;
     className?: string;
     showFullError?: boolean;
     showFullHint?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "td-stylekit",
-  "version": "28.4.0",
+  "version": "28.5.0",
   "main": "dist/es/index.js",
   "module": "dist/es/index.js",
   "types": "dist/es/index.d.ts",