@daoyi/nmtl-ui 2.0.1-beta.130 → 2.0.1-beta.131

package/lib/components/{ContactModal-7e5b14e8.js → ContactModal-eaed02b8.js}

@@ -1,17 +1,17 @@
 import { _ as _extends$1, a as _slicedToArray$2, b as _objectSpread2, e as _defineProperty$1 } from './_rollupPluginBabelHelpers-a52356f6.js';
-import React__default, { createContext, forwardRef, createElement, useContext, useRef, useEffect, useReducer, useCallback, useMemo, useLayoutEffect, Component, useState, useImperativeHandle, Fragment } from 'react';
+import React__default, { createContext, forwardRef, createElement, useContext, useRef, useEffect, useReducer, useCallback, useMemo, useLayoutEffect, useState, useImperativeHandle, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { h as hoistNonReactStatics_cjs } from './hoist-non-react-statics.cjs-3f408ad2.js';
-import axios from 'axios';
-import { M as Modal } from './Modal-e04532fa.js';
-import { c as commonjsGlobal, a as getDefaultExportFromCjs } from './_commonjsHelpers-70de2c37.js';
-import { c as classNames } from './index-b76a85f4.js';
-import { Input, IconButton, Button, Box, Typography, FormControl, RadioGroup, FormControlLabel, Radio, TextField, TextareaAutosize } from '@material-ui/core';
+import './hoist-non-react-statics.cjs-3f408ad2.js';
 import './defaultTheme-ed7746fe.js';
 import 'react-is';
 import '@material-ui/styles';
 import { u as useTheme } from './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
+import axios from 'axios';
+import { M as Modal } from './Modal-e04532fa.js';
+import { c as commonjsGlobal, a as getDefaultExportFromCjs } from './_commonjsHelpers-70de2c37.js';
+import { c as classNames } from './index-b76a85f4.js';
+import { Input, IconButton, Button, Box, Typography, FormControl, RadioGroup, FormControlLabel, Radio, TextField, TextareaAutosize } from '@material-ui/core';
 import { S as Select } from './Select-cb3e1ba1.js';
 import { VolumeUp } from '@material-ui/icons';
 import { getIntl } from './globalConfig';
@@ -2803,12 +2803,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
-}
-
 function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -2969,7 +2963,7 @@ function setNestedObjectValues(object, value, visited, response) {
 var FormikContext = /*#__PURE__*/createContext(undefined);
 FormikContext.displayName = 'FormikContext';
 var FormikProvider = FormikContext.Provider;
-var FormikConsumer = FormikContext.Consumer;
+FormikContext.Consumer;
 function useFormikContext() {
   var formik = useContext(FormikContext);
   return formik;
@@ -4025,65 +4019,6 @@ var Form = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 Form.displayName = 'Form';
 
-/**
- * Connect any component to Formik context, and inject as a prop called `formik`;
- * @param Comp React Component
- */
-
-function connect(Comp) {
-  var C = function C(props) {
-    return createElement(FormikConsumer, null, function (formik) {
-      return createElement(Comp, Object.assign({}, props, {
-        formik: formik
-      }));
-    });
-  };
-
-  var componentDisplayName = Comp.displayName || Comp.name || Comp.constructor && Comp.constructor.name || 'Component'; // Assign Comp to C.WrappedComponent so we can access the inner component in tests
-  // For example, <Field.WrappedComponent /> gets us <FieldInner/>
-
-  C.WrappedComponent = Comp;
-  C.displayName = "FormikConnect(" + componentDisplayName + ")";
-  return hoistNonReactStatics_cjs(C, Comp // cast type to ComponentClass (even if SFC)
-  );
-}
-
-var ErrorMessageImpl = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(ErrorMessageImpl, _React$Component);
-
-  function ErrorMessageImpl() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-
-  var _proto = ErrorMessageImpl.prototype;
-
-  _proto.shouldComponentUpdate = function shouldComponentUpdate(props) {
-    if (getIn(this.props.formik.errors, this.props.name) !== getIn(props.formik.errors, this.props.name) || getIn(this.props.formik.touched, this.props.name) !== getIn(props.formik.touched, this.props.name) || Object.keys(this.props).length !== Object.keys(props).length) {
-      return true;
-    } else {
-      return false;
-    }
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        component = _this$props.component,
-        formik = _this$props.formik,
-        render = _this$props.render,
-        children = _this$props.children,
-        name = _this$props.name,
-        rest = _objectWithoutPropertiesLoose$1(_this$props, ["component", "formik", "render", "children", "name"]);
-
-    var touch = getIn(formik.touched, name);
-    var error = getIn(formik.errors, name);
-    return !!touch && !!error ? render ? isFunction(render) ? render(error) : null : children ? isFunction(children) ? children(error) : null : component ? createElement(component, rest, error) : error : null;
-  };
-
-  return ErrorMessageImpl;
-}(Component);
-
-var ErrorMessage = /*#__PURE__*/connect(ErrorMessageImpl);
-
 // const sendMail = {
 // 	from: "orient.cc.noreply@gmail.com",
 // 	to: email,
@@ -9998,16 +9933,27 @@ const getConfig = () => ({
   color: [getRandom(100, 255, 3), getRandom(100, 255, 4), getRandom(100, 255, 3), getRandom(100, 255, 3)]
 });
 
-var css_248z$2 = ".vcode {\n  display: block;\n  align-items: center;\n}\n.vcode__image {\n  margin-top: 10px;\n  background: rgba(0, 0, 0, 0.8);\n  width: 160px;\n  overflow: hidden;\n  height: 50px;\n  text-align: center;\n  position: relative;\n}\n.vcode__image:hover .vcode__mask {\n  opacity: 0.8;\n}\n.vcode__image__mask {\n  position: absolute;\n  width: 100%;\n  top: 0;\n  line-height: 50px;\n  background-color: rgba(0, 0, 0, 0.95);\n  opacity: 0;\n  z-index: 1;\n  transition: opacity 0.3s ease-in-out;\n  cursor: pointer;\n}\n.vcode__image__itemStr {\n  float: left;\n  margin-left: 20px;\n}\n.vcode__box {\n  display: flex;\n  align-items: center;\n}\n.vcode__error {\n  color: #d93333;\n  font-weight: bold;\n  margin-left: 1rem;\n}\n\n#bgi {\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}";
-styleInject(css_248z$2);
-
+var css_248z$3 = ".vcode {\n  display: block;\n  align-items: center;\n}\n.vcode__image {\n  margin-top: 10px;\n  background: rgba(0, 0, 0, 0.8);\n  width: 160px;\n  overflow: hidden;\n  height: 50px;\n  text-align: center;\n  position: relative;\n}\n.vcode__image:hover .vcode__mask {\n  opacity: 0.8;\n}\n.vcode__image__mask {\n  position: absolute;\n  width: 100%;\n  top: 0;\n  line-height: 50px;\n  background-color: rgba(0, 0, 0, 0.95);\n  opacity: 0;\n  z-index: 1;\n  transition: opacity 0.3s ease-in-out;\n  cursor: pointer;\n}\n.vcode__image__itemStr {\n  float: left;\n  margin-left: 20px;\n}\n.vcode__box {\n  display: flex;\n  align-items: center;\n}\n.vcode__error {\n  color: #b91c1c;\n  font-weight: bold;\n  margin-left: 1rem;\n}\n\n#bgi {\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}";
+styleInject(css_248z$3);
+
+/* 視覺隱藏的輸入說明（不依賴各站的 .visually-hidden，同 Select） */
+const hiddenStyle = {
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  overflow: 'hidden',
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  whiteSpace: 'nowrap'
+};
 const VCode = _ref => {
   let {
     visible,
     onChange,
     formatMessage,
-    name,
     inputId,
+    labelId,
+    errorId,
+    errorMessage,
     required
   } = _ref;
   const [codeConfig, setCodeConfig] = useState(getConfig());
@@ -10018,6 +9964,12 @@ const VCode = _ref => {
     fz,
     color
   } = codeConfig;
+  const hintId = `${inputId}-hint`;
+  /* WCAG 1.4.3 錯誤文字深色主題改亮色（同 FormItem 必填星號） */
+  const theme = useTheme();
+  const errorStyle = theme && theme.palette && theme.palette.type === 'dark' ? {
+    color: '#ff8a80'
+  } : undefined;
   const refresh = () => {
     canvas();
     setCodeConfig(getConfig());
@@ -10032,7 +9984,7 @@ const VCode = _ref => {
   }, [visible]);
   const vcodeNumber = `${convert(data[0])}${convert(data[1])}${convert(data[2])}${convert(data[3])}`;
 
-  /* WCAG 1.1.1 驗證碼語音替代（tltc 認證模式）：speechSynthesis 逐字報讀，
+  /* WCAG 1.1.1 驗證碼語音替代（tltc 認證模式）：speechSynthesis 逐字報讀，
      讓無法辨識圖片的使用者取得驗證碼內容 */
   const speakVerificationCode = () => {
     if ('speechSynthesis' in window) {
@@ -10062,84 +10014,99 @@ const VCode = _ref => {
       setTimeout(() => setLiveMessage(''), 3000);
     }
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "vcode"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    "aria-live": "polite",
-    "aria-atomic": "true",
-    role: "status",
-    className: "visually-hidden"
-  }, liveMessage), /*#__PURE__*/React__default.createElement(Input, {
-    inputProps: {
-      id: inputId,
-      'aria-required': required || undefined
-    },
-    placeholder: formatMessage({
-      id: 'common.form.code.check'
-    }),
-    onChange: e => onChange(e.target.value.toUpperCase() === vcodeNumber.toUpperCase())
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "vcode__box"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    className: "vcode__audio",
-    "aria-label": getIntl().formatMessage({
-      id: 'aria.vcode.audioPlay'
-    }),
-    title: getIntl().formatMessage({
-      id: 'aria.vcode.audioPlay'
-    }),
-    onClick: speakVerificationCode
-  }, /*#__PURE__*/React__default.createElement(VolumeUp, {
-    "aria-hidden": "true"
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "vcode__image",
-    role: "img",
-    "aria-label": getIntl().formatMessage({
-      id: 'aria.vcode.image'
-    })
-  }, /*#__PURE__*/React__default.createElement("canvas", {
-    id: "bgi",
-    width: "200",
-    height: "200",
-    "aria-hidden": "true"
-  }), data.map((v, i) => /*#__PURE__*/React__default.createElement("div", {
-    key: i.toString(),
-    className: "vcode__image__itemStr",
-    "aria-hidden": "true",
-    style: {
-      transform: `rotate(${rotate[i]}deg)`,
-      fontSize: `${fz[i]}px`,
-      color: `rgb(${color[i].toString()})`
-    }
-  }, convert(v))), /*#__PURE__*/React__default.createElement("div", {
-    className: "vcode__image__mask",
-    role: "button",
-    tabIndex: 0,
-    "aria-label": getIntl().formatMessage({
-      id: 'aria.vcode.refresh'
-    }),
-    onClick: refresh,
-    onKeyDown: e => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        refresh();
+  return (
+    /*#__PURE__*/
+    /* WCAG 1.3.1 驗證碼由輸入框、語音、圖片、刷新組成，以 group 包起來並沿用欄位標題命名（規範 04 §3） */
+    React__default.createElement("div", {
+      className: "vcode",
+      role: "group",
+      "aria-labelledby": labelId
+    }, /*#__PURE__*/React__default.createElement("div", {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      role: "status",
+      className: "visually-hidden"
+    }, liveMessage), /*#__PURE__*/React__default.createElement("span", {
+      id: hintId,
+      style: hiddenStyle
+    }, getIntl().formatMessage({
+      id: 'aria.vcode.hint'
+    })), /*#__PURE__*/React__default.createElement(Input, {
+      inputProps: {
+        id: inputId,
+        'aria-required': required || undefined,
+        'aria-invalid': errorMessage ? true : undefined,
+        'aria-describedby': errorMessage ? `${hintId} ${errorId}` : hintId
+      },
+      placeholder: formatMessage({
+        id: 'common.form.code.check'
+      }),
+      onChange: e => onChange(e.target.value.toUpperCase() === vcodeNumber.toUpperCase())
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "vcode__box"
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      className: "vcode__audio",
+      "aria-label": getIntl().formatMessage({
+        id: 'aria.vcode.audioPlay'
+      }),
+      title: getIntl().formatMessage({
+        id: 'aria.vcode.audioPlay'
+      }),
+      onClick: speakVerificationCode
+    }, /*#__PURE__*/React__default.createElement(VolumeUp, {
+      "aria-hidden": "true"
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "vcode__image",
+      role: "img",
+      "aria-label": getIntl().formatMessage({
+        id: 'aria.vcode.image'
+      })
+    }, /*#__PURE__*/React__default.createElement("canvas", {
+      id: "bgi",
+      width: "200",
+      height: "200",
+      "aria-hidden": "true"
+    }), data.map((v, i) => /*#__PURE__*/React__default.createElement("div", {
+      key: i.toString(),
+      className: "vcode__image__itemStr",
+      "aria-hidden": "true",
+      style: {
+        transform: `rotate(${rotate[i]}deg)`,
+        fontSize: `${fz[i]}px`,
+        color: `rgb(${color[i].toString()})`
       }
-    }
-  }, formatMessage({
-    id: 'common.click.refresh'
-  }))), /*#__PURE__*/React__default.createElement(ErrorMessage, {
-    className: "vcode__error",
-    name: name,
-    component: "div"
-  })));
+    }, convert(v))), /*#__PURE__*/React__default.createElement("div", {
+      className: "vcode__image__mask",
+      role: "button",
+      tabIndex: 0,
+      "aria-label": getIntl().formatMessage({
+        id: 'aria.vcode.refresh'
+      }),
+      onClick: refresh,
+      onKeyDown: e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          refresh();
+        }
+      }
+    }, formatMessage({
+      id: 'common.click.refresh'
+    }))), errorMessage && /*#__PURE__*/React__default.createElement("div", {
+      id: errorId,
+      className: "vcode__error",
+      style: errorStyle
+    }, errorMessage)))
+  );
 };
 VCode.defaultProps = {
   visible: false,
   // placeholder: undefined,
   onChange: () => {},
   formatMessage: () => {},
-  name: undefined,
   inputId: undefined,
+  labelId: undefined,
+  errorId: undefined,
+  errorMessage: undefined,
   required: false
 };
 VCode.propTypes = {
@@ -10147,9 +10114,14 @@ VCode.propTypes = {
   // placeholder: PropTypes.string,
   onChange: PropTypes.func,
   formatMessage: PropTypes.func,
-  name: PropTypes.string,
   /** 與外部 label 關聯用的 input id（WCAG 3.3.2） */
   inputId: PropTypes.string,
+  /** 欄位標題元素 id，作為驗證碼群組的名稱（WCAG 1.3.1） */
+  labelId: PropTypes.string,
+  /** 錯誤訊息元素 id（aria-describedby 關聯用） */
+  errorId: PropTypes.string,
+  /** 目前要顯示的錯誤訊息；沒有錯誤時不給 */
+  errorMessage: PropTypes.string,
   /** 是否必填(aria-required) */
   required: PropTypes.bool
 };
@@ -10170,8 +10142,8 @@ var googleLogin = {exports: {}};
 
 var GoogleLogin = /*@__PURE__*/getDefaultExportFromCjs(googleLogin.exports);
 
-var css_248z$1 = ".emailInput__loginSDK {\n  display: flex;\n  align-items: center;\n}\n.emailInput__loginSDK__google {\n  padding: 6px 10px 4px !important;\n  border: 1px solid black !important;\n}\n.emailInput__loginSDK__google div {\n  padding: 0 !important;\n}\n.emailInput__loginSDK__google span {\n  padding: 0 !important;\n}\n.emailInput__loginSDK__fb {\n  padding: 9px 10px !important;\n  border-radius: 3px;\n  margin-left: 10px;\n  background-color: #4c69ba;\n  border: 1px solid black;\n  color: white;\n}\n.emailInput__loginSDK__fb i {\n  margin-right: 10px;\n}\n.emailInput__operator {\n  margin-top: 10px;\n}";
-styleInject(css_248z$1);
+var css_248z$2 = ".emailInput__loginSDK {\n  display: flex;\n  align-items: center;\n}\n.emailInput__loginSDK__google {\n  padding: 6px 10px 4px !important;\n  border: 1px solid black !important;\n}\n.emailInput__loginSDK__google div {\n  padding: 0 !important;\n}\n.emailInput__loginSDK__google span {\n  padding: 0 !important;\n}\n.emailInput__loginSDK__fb {\n  padding: 9px 10px !important;\n  border-radius: 3px;\n  margin-left: 10px;\n  background-color: #4c69ba;\n  border: 1px solid black;\n  color: white;\n}\n.emailInput__loginSDK__fb i {\n  margin-right: 10px;\n}\n.emailInput__operator {\n  margin-top: 10px;\n}";
+styleInject(css_248z$2);
 
 const EmailInput = _ref => {
   let {
@@ -10180,7 +10152,9 @@ const EmailInput = _ref => {
     onChange,
     onNotify,
     inputId,
-    required
+    required,
+    ariaInvalid,
+    ariaDescribedby
   } = _ref;
   const [init, setInit] = useState(false); // google login 在init時會先failed
   useMemo(() => () => setTimeout(() => setInit(true), 1000), []); // 故延遲一秒後再給google call(最非最佳解 可優化)
@@ -10231,7 +10205,9 @@ const EmailInput = _ref => {
     value: value,
     inputProps: {
       id: inputId,
-      'aria-required': required || undefined
+      'aria-required': required || undefined,
+      'aria-invalid': ariaInvalid,
+      'aria-describedby': ariaDescribedby
     },
     placeholder: placeholder,
     onChange: e => onChange(e.target.value)
@@ -10243,7 +10219,9 @@ EmailInput.defaultProps = {
   onChange: () => {},
   onNotify: () => {},
   inputId: undefined,
-  required: false
+  required: false,
+  ariaInvalid: undefined,
+  ariaDescribedby: undefined
 };
 EmailInput.propTypes = {
   value: PropTypes.string,
@@ -10253,7 +10231,11 @@ EmailInput.propTypes = {
   /** 與外部 label 關聯用的 input id（WCAG 3.3.2） */
   inputId: PropTypes.string,
   /** 是否必填(aria-required) */
-  required: PropTypes.bool
+  required: PropTypes.bool,
+  /** 欄位驗證未通過（aria-invalid，WCAG 3.3.1） */
+  ariaInvalid: PropTypes.bool,
+  /** 錯誤訊息元素 id（aria-describedby） */
+  ariaDescribedby: PropTypes.string
 };
 
 var CloudUpload = {};
@@ -11600,6 +11582,7 @@ function reducer(state, action) {
 const Upload = _ref => {
   let {
     ariaLabelledby,
+    ariaDescribedby,
     buttonText,
     onChange
   } = _ref;
@@ -11634,6 +11617,7 @@ const Upload = _ref => {
       startIcon: /*#__PURE__*/React__default.createElement(default_1, {
         "aria-hidden": "true"
       }),
+      "aria-describedby": ariaDescribedby,
       onClick: openDialog
     }, buttonText || 'Upload')), /*#__PURE__*/React__default.createElement("aside", null, /*#__PURE__*/React__default.createElement("ul", {
       "aria-live": "polite"
@@ -11644,19 +11628,29 @@ const Upload = _ref => {
 };
 Upload.defaultProps = {
   ariaLabelledby: undefined,
+  ariaDescribedby: undefined,
   buttonText: undefined
 };
 Upload.propTypes = {
   /** 欄位標題元素 id（aria-labelledby 關聯用） */
   ariaLabelledby: PropTypes.string,
+  /** 錯誤訊息元素 id（aria-describedby 關聯用） */
+  ariaDescribedby: PropTypes.string,
   /** 觸發按鈕的可見文字（建議傳欄位標題，如「附件上傳」） */
   buttonText: PropTypes.string,
   onChange: PropTypes.func.isRequired
 };
 
-var css_248z = ".formItem {\n  width: 100%;\n  margin-bottom: 16px;\n}\n.formItem:last-child {\n  margin-bottom: initial;\n}\n.formItem__title {\n  display: flex;\n  font-size: 1rem;\n  font-weight: bold;\n}\n.formItem__title__star {\n  margin-left: 3px;\n  color: #b91c1c;\n}\n.formItem__operator {\n  margin: 2px 0;\n  font-size: 0.875rem;\n}\n.formItem__operator__radio__desc {\n  margin-left: 35px !important;\n}\n.formItem__operator--unsupport {\n  border: 1px solid #d93333;\n  background: pink;\n  color: black;\n  padding: 5px 10px;\n}\n.formItem__error {\n  color: #b91c1c;\n  font-weight: bold;\n}\n.formItem textarea {\n  border: 1px solid #d9d9d9;\n  border-radius: 3px;\n  width: 100%;\n  background: transparent;\n  padding: 6px 10px;\n}\n.formItem ::-webkit-calendar-picker-indicator {\n  filter: invert(1);\n}";
-styleInject(css_248z);
+var css_248z$1 = ".formItem {\n  width: 100%;\n  margin-bottom: 16px;\n}\n.formItem:last-child {\n  margin-bottom: initial;\n}\n.formItem__title {\n  display: flex;\n  font-size: 1rem;\n  font-weight: bold;\n}\n.formItem__title__star {\n  margin-left: 3px;\n  color: #b91c1c;\n}\n.formItem__operator {\n  margin: 2px 0;\n  font-size: 0.875rem;\n}\n.formItem__operator__radio__desc {\n  margin-left: 35px !important;\n}\n.formItem__operator--unsupport {\n  border: 1px solid #d93333;\n  background: pink;\n  color: black;\n  padding: 5px 10px;\n}\n.formItem__error {\n  color: #b91c1c;\n  font-weight: bold;\n}\n.formItem textarea {\n  border: 1px solid #d9d9d9;\n  border-radius: 3px;\n  width: 100%;\n  background: transparent;\n  padding: 6px 10px;\n}\n.formItem ::-webkit-calendar-picker-indicator {\n  filter: invert(1);\n}";
+styleInject(css_248z$1);
 
+/* 欄位相關元素的 id 命名集中在這裡：ContactModal 的錯誤摘要靠同一組 id 找到欄位 */
+const getFormItemIds = name => ({
+  containerId: `form-${name}`,
+  inputId: `form-input-${name}`,
+  labelId: `form-label-${name}`,
+  errorId: `form-error-${name}`
+});
 const FormItem = _ref => {
   let {
     name,
@@ -11675,21 +11669,36 @@ const FormItem = _ref => {
     id: 'common.enter'
   })} ${label}`;
   /* WCAG 1.3.1/3.3.2 欄位與標題的程式化關聯（WAVE: Missing form label） */
-  const inputId = `form-input-${name}`;
-  const labelId = `form-label-${name}`;
-  const a11yInputProps = {
-    id: inputId,
-    'aria-required': required || undefined
-  };
+  const {
+    containerId,
+    inputId,
+    labelId,
+    errorId
+  } = getFormItemIds(name);
   /* 這些欄位型別會渲染帶 inputId 的 input，標題才能用 label htmlFor；其餘型別改以 aria-labelledby 關聯 */
   const hasInputId = ['input', 'textarea', 'datePicker', 'email', 'vcode'].includes(type);
   /* WCAG 1.4.3 必填星號依主題深淺自動選色：formItem.scss 的 #b91c1c 只適用淺底 Modal，
-     深色主題（如 ocean Paper #30353d）對比僅約 1.5:1（WAVE 實測被抓）→ 深色用 #ff8a80（約 5.4:1） */
+     深色主題（如 ocean Paper #30353d）對比僅約 1.5:1（WAVE 實測被抓）→ 深色用 #ff8a80（約 5.4:1）。
+     錯誤訊息同色，一併套用 */
   const theme = useTheme();
   const starStyle = theme && theme.palette && theme.palette.type === 'dark' ? {
     color: '#ff8a80'
   } : undefined;
-  const render = field => {
+
+  /* WCAG 3.3.1 欄位出錯時：aria-invalid，並以 aria-describedby 指向下方的錯誤訊息，
+     讀屏聚焦欄位就會唸出錯在哪裡（規範 04 §2）。沒有錯誤時兩者都不輸出 */
+  const render = (field, _ref2) => {
+    let {
+      invalid,
+      describedBy,
+      errorMessage
+    } = _ref2;
+    const a11yInputProps = {
+      id: inputId,
+      'aria-required': required || undefined,
+      'aria-invalid': invalid,
+      'aria-describedby': describedBy
+    };
     let component;
     switch (type) {
       case 'input':
@@ -11699,9 +11708,7 @@ const FormItem = _ref => {
         }));
         break;
       case 'textarea':
-        component = /*#__PURE__*/React__default.createElement(TextareaAutosize, _extends$1({}, field, {
-          id: inputId,
-          "aria-required": required || undefined,
+        component = /*#__PURE__*/React__default.createElement(TextareaAutosize, _extends$1({}, field, a11yInputProps, {
           minRows: 3,
           placeholder: currentPlaceholder
         }));
@@ -11725,6 +11732,8 @@ const FormItem = _ref => {
         component = /*#__PURE__*/React__default.createElement(EmailInput, _extends$1({}, field, {
           inputId: inputId,
           required: required,
+          ariaInvalid: invalid,
+          ariaDescribedby: describedBy,
           placeholder: currentPlaceholder,
           onChange: email => setFieldValue(field.name, email),
           onNotify: onNotify
@@ -11734,8 +11743,12 @@ const FormItem = _ref => {
         component = /*#__PURE__*/React__default.createElement(FormControl, {
           component: "fieldset",
           "aria-labelledby": labelId
-        }, /*#__PURE__*/React__default.createElement(RadioGroup, field, options.map(option => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FormControlLabel, {
-          key: option.value,
+        }, /*#__PURE__*/React__default.createElement(RadioGroup, _extends$1({}, field, {
+          "aria-invalid": invalid,
+          "aria-describedby": describedBy
+        }), options.map(option => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+          key: option.value
+        }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
           value: option.value,
           control: /*#__PURE__*/React__default.createElement(Radio, null),
           label: option.label
@@ -11748,6 +11761,7 @@ const FormItem = _ref => {
         /* WCAG 1.3.1/3.3.2 附件上傳：標題 id 關聯內部 file input；按鈕以欄位標題為可見文字（WAVE: Missing form label） */
         component = /*#__PURE__*/React__default.createElement(Upload, _extends$1({}, field, {
           ariaLabelledby: labelId,
+          ariaDescribedby: describedBy,
           buttonText: label,
           onChange: files => setFieldValue(field.name, files)
         }));
@@ -11755,11 +11769,13 @@ const FormItem = _ref => {
       case 'vcode':
         component = /*#__PURE__*/React__default.createElement(VCode, {
           inputId: inputId,
+          labelId: labelId,
+          errorId: errorId,
+          errorMessage: errorMessage,
           required: required,
           placeholder: currentPlaceholder,
           onChange: pass => setFieldValue(field.name, pass),
-          formatMessage: formatMessage,
-          name: name
+          formatMessage: formatMessage
         });
         break;
       default:
@@ -11769,13 +11785,20 @@ const FormItem = _ref => {
   };
   return /*#__PURE__*/React__default.createElement(Field, {
     name: name,
-    render: _ref2 => {
+    render: _ref3 => {
       let {
-        field
-      } = _ref2;
-      const component = render(field);
+        field,
+        meta
+      } = _ref3;
+      /* 與 formik ErrorMessage 相同的顯示條件：碰過（或按過送出）且有錯誤 */
+      const hasError = Boolean(meta.touched && meta.error);
+      const component = render(field, {
+        invalid: hasError || undefined,
+        describedBy: hasError ? errorId : undefined,
+        errorMessage: hasError ? meta.error : undefined
+      });
       return /*#__PURE__*/React__default.createElement("div", {
-        id: `form-${name}`,
+        id: containerId,
         className: "formItem"
       }, label && (hasInputId ?
       /*#__PURE__*/
@@ -11807,11 +11830,11 @@ const FormItem = _ref => {
         className: classNames('formItem__operator', {
           'formItem__operator--unsupport': !component
         })
-      }, component || 'Check component type is support on FormItem'), field.name === 'vcode' ? null : /*#__PURE__*/React__default.createElement(ErrorMessage, {
+      }, component || 'Check component type is support on FormItem'), hasError && type !== 'vcode' && /*#__PURE__*/React__default.createElement("div", {
+        id: errorId,
         className: "formItem__error",
-        name: name,
-        component: "div"
-      }));
+        style: starStyle
+      }, meta.error));
     }
   });
 };
@@ -11964,7 +11987,27 @@ const problemMail = _ref2 => {
   return body.join('<br />');
 };
 
-var errorId;
+var css_248z = "@charset \"UTF-8\";\n/* 送出失敗的錯誤摘要（WCAG 3.3.1，規範 04 §2）；深色主題由 ContactModal 以 inline color 覆寫 */\n.contactModal__errorSummary {\n  color: #b91c1c;\n  border-left: 4px solid currentColor;\n  padding: 0.5rem 0.75rem;\n  margin-bottom: 1rem;\n  /* 容器常駐 DOM（role=\"alert\" 才能可靠播報），沒有錯誤時不佔版面 */\n}\n.contactModal__errorSummary:empty {\n  padding: 0;\n  margin: 0;\n  border: 0;\n}\n.contactModal__errorSummary__title {\n  margin: 0 0 0.25rem;\n  font-weight: bold;\n}\n.contactModal__errorSummary__list {\n  margin: 0;\n  padding-left: 1.25rem;\n}\n.contactModal__errorSummary__link {\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  text-decoration: underline;\n  cursor: pointer;\n}";
+styleInject(css_248z);
+
+/* 錯誤摘要的「前往該欄位」：優先聚焦帶 inputId 的欄位；
+   單選、下拉、上傳沒有該 id，改找欄位容器內第一個看得到、可聚焦的元素 */
+var focusFormItem = function focusFormItem(name) {
+  var _getFormItemIds = getFormItemIds(name),
+    containerId = _getFormItemIds.containerId,
+    inputId = _getFormItemIds.inputId;
+  var input = document.getElementById(inputId);
+  if (input) {
+    input.focus();
+    return;
+  }
+  var container = document.getElementById(containerId);
+  if (!container) return;
+  var target = Array.from(container.querySelectorAll('input, textarea, button, [role="button"]')).find(function (el) {
+    return !el.disabled && el.tabIndex >= 0 && el.getClientRects().length > 0;
+  });
+  if (target) target.focus();
+};
 var ContactModal = function ContactModal(_ref) {
   var type = _ref.type,
     mailto = _ref.mailto,
@@ -11982,6 +12025,21 @@ var ContactModal = function ContactModal(_ref) {
     _useState4 = _slicedToArray$2(_useState3, 2),
     formType = _useState4[0],
     setFormType = _useState4[1];
+  /* WCAG 3.3.1 錯誤摘要（規範 04 §2）：只在按下送出時更新，使用者逐欄修正時不跟著變動 */
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray$2(_useState5, 2),
+    errorSummary = _useState6[0],
+    setErrorSummary = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray$2(_useState7, 2),
+    summaryVersion = _useState8[0],
+    setSummaryVersion = _useState8[1];
+  var summaryRef = useRef(null);
+  /* WCAG 1.4.3 錯誤文字與必填星號同色：深色主題（如 ocean Paper #30353d）改亮色 */
+  var theme = useTheme();
+  var errorStyle = theme && theme.palette && theme.palette.type === 'dark' ? {
+    color: '#ff8a80'
+  } : undefined;
 
   /* 建立表單設定檔 */
   var template = contactTemplate({
@@ -11989,6 +12047,11 @@ var ContactModal = function ContactModal(_ref) {
     formType: formType
   });
 
+  /* 送出失敗後把焦點移到錯誤摘要：摘要內容在這一輪才渲染，要等 commit 之後再聚焦 */
+  useEffect(function () {
+    if (summaryVersion > 0 && summaryRef.current) summaryRef.current.focus();
+  }, [summaryVersion]);
+
   /* 表單控制元件 */
   var formik = useFormik({
     initialValues: template.reduce(function (obj, item) {
@@ -12030,9 +12093,6 @@ var ContactModal = function ContactModal(_ref) {
           id: 'common.form.attachment.valid.error'
         });
       }
-
-      /* 取得第一個錯誤的id */
-      errorId = Object.keys(errors).length > 0 ? Object.keys(errors).shift() : null;
       return errors;
     },
     onSubmit: function onSubmit(values) {
@@ -12111,28 +12171,36 @@ var ContactModal = function ContactModal(_ref) {
   /* 關閉表單 */
   var handleClose = function handleClose() {
     formik.resetForm();
+    setErrorSummary([]);
     setOpen(false);
   };
 
-  /* 送出郵件 */
+  /* 送出：先取得驗證結果決定摘要內容，再交給 formik 送出。
+     formik 送出時會把所有欄位標為 touched，欄位下方的錯誤訊息才會出現；驗證通過才會真的寄信。
+     （原本在 handleSubmit 之後同步讀取驗證結果，但 formik 2 的驗證是非同步的，第一次按送出時讀不到） */
   var handleSubmit = function handleSubmit() {
-    formik.handleSubmit();
-    /* 滾動過去錯誤的地方 */
-    var errorElement = document.getElementById("form-".concat(errorId));
-    if (errorElement) {
-      var offsetY = errorElement.offsetTop - 65;
-      if (errorElement.parentElement.scrollTo) {
-        errorElement.parentElement.scrollTo({
-          top: offsetY,
-          behavior: 'smooth'
+    formik.validateForm().then(function (errors) {
+      var invalidItems = template.filter(function (_ref6) {
+        var name = _ref6.name;
+        return errors[name];
+      }).map(function (_ref7) {
+        var name = _ref7.name;
+        return {
+          name: name,
+          message: errors[name]
+        };
+      });
+      setErrorSummary(invalidItems);
+      formik.handleSubmit();
+      if (invalidItems.length > 0) {
+        setSummaryVersion(function (version) {
+          return version + 1;
+        });
+        onNotify({
+          type: 'error',
+          message: 'common.form.error'
         });
-      } else {
-        errorElement.parentElement.scrollTop = offsetY;
       }
-    }
-    if (errorId) onNotify({
-      type: 'error',
-      message: 'common.form.error'
     });
   };
   return /*#__PURE__*/React__default.createElement(Modal, {
@@ -12150,7 +12218,33 @@ var ContactModal = function ContactModal(_ref) {
     okText: formatMessage({
       id: 'common.submit'
     })
-  }, /*#__PURE__*/React__default.createElement(FormikProvider, {
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: summaryRef,
+    className: "contactModal__errorSummary",
+    role: "alert",
+    tabIndex: -1,
+    style: errorStyle
+  }, errorSummary.length > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
+    className: "contactModal__errorSummary__title"
+  }, formatMessage({
+    id: 'common.form.errorSummary'
+  }, {
+    count: errorSummary.length
+  })), /*#__PURE__*/React__default.createElement("ul", {
+    className: "contactModal__errorSummary__list"
+  }, errorSummary.map(function (_ref8) {
+    var name = _ref8.name,
+      message = _ref8.message;
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: name
+    }, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "contactModal__errorSummary__link",
+      onClick: function onClick() {
+        return focusFormItem(name);
+      }
+    }, message));
+  })))), /*#__PURE__*/React__default.createElement(FormikProvider, {
     value: formik
   }, template.map(function (schema) {
     return /*#__PURE__*/React__default.createElement(FormItem, _extends$1({

package/lib/components/ContactModal.js

@@ -1,9 +1,13 @@
-export { C as default } from './ContactModal-7e5b14e8.js';
+export { C as default } from './ContactModal-eaed02b8.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import './hoist-non-react-statics.cjs-3f408ad2.js';
 import 'react-is';
+import './defaultTheme-ed7746fe.js';
+import '@material-ui/styles';
+import './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
 import 'axios';
 import './Modal-e04532fa.js';
 import './index-b76a85f4.js';
@@ -14,10 +18,6 @@ import './style-inject.es-1f59c1d0.js';
 import './Spin-8f87eadc.js';
 import './globalConfig';
 import './_commonjsHelpers-70de2c37.js';
-import './defaultTheme-ed7746fe.js';
-import '@material-ui/styles';
-import './useTheme-d16d02d9.js';
-import './withTheme-2d778133.js';
 import './Select-cb3e1ba1.js';
 import './Empty-c6a44967.js';
 import './createSvgIcon-e3803ee1.js';

package/lib/components/Footer.js

@@ -3,21 +3,21 @@ import React__default, { useState, useEffect } from 'react';
 import { c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
 import axios from 'axios';
-import { C as ContactModal } from './ContactModal-7e5b14e8.js';
+import { C as ContactModal } from './ContactModal-eaed02b8.js';
 import { S as Spin } from './Spin-8f87eadc.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './hoist-non-react-statics.cjs-3f408ad2.js';
 import 'react-is';
+import './defaultTheme-ed7746fe.js';
+import '@material-ui/styles';
+import './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
 import './Modal-e04532fa.js';
 import '@material-ui/core';
 import '@material-ui/icons';
 import './Button-7bd5aa09.js';
 import './_commonjsHelpers-70de2c37.js';
-import './defaultTheme-ed7746fe.js';
-import '@material-ui/styles';
-import './useTheme-d16d02d9.js';
-import './withTheme-2d778133.js';
 import './Select-cb3e1ba1.js';
 import './Empty-c6a44967.js';
 import './createSvgIcon-e3803ee1.js';

package/lib/components/globalConfig.js

@@ -55,6 +55,7 @@ var zhtw = {
 	"common.form.attachment.hint2": "2.若有多個檔案請先集中至同一資料夾並以壓縮檔上傳",
 	"common.form.contactUs": "聯繫我們",
 	"common.form.error": "表單尚未完成 請檢察必填項目",
+	"common.form.errorSummary": "表單有 {count} 個欄位需要修正，點選下列項目可前往該欄位：",
 	"common.sna.reset": "回到原來位置與大小",
 	"aria.header.searchOpen": "開啟搜尋",
 	"aria.header.menuOpen": "開啟主選單",
@@ -79,6 +80,7 @@ var zhtw = {
 	"aria.vcode.audioIntro": "驗證碼為：",
 	"aria.vcode.audioUnsupported": "瀏覽器不支援語音合成，請刷新驗證碼或改用圖片辨識",
 	"aria.vcode.refreshed": "驗證碼已更新",
+	"aria.vcode.hint": "請輸入圖片中的 4 個字元，英文不分大小寫；看不清楚可播放語音或刷新驗證碼",
 	"aria.moreButton.loaded": "已載入更多結果",
 	"aria.moreButton.collapsed": "已收合結果",
 	"aria.filter.hint": "（篩選條件，選取後過濾下方結果）",
@@ -179,6 +181,7 @@ var zhcn = {
 	"common.form.attachment.hint2": "2.若有多个档案请先集中至同一资料夹并以压缩档上传",
 	"common.form.contactUs": "联系我们",
 	"common.form.error": "表单尚未完成 请检察必填项目",
+	"common.form.errorSummary": "表单有 {count} 个字段需要修正，点击下列项目可前往该字段：",
 	"aria.header.searchOpen": "开启搜寻",
 	"aria.header.menuOpen": "开启主选单",
 	"aria.header.logoHome": "回首页",
@@ -202,6 +205,7 @@ var zhcn = {
 	"aria.vcode.audioIntro": "验证码为：",
 	"aria.vcode.audioUnsupported": "浏览器不支持语音合成，请刷新验证码或改用图片辨识",
 	"aria.vcode.refreshed": "验证码已更新",
+	"aria.vcode.hint": "请输入图片中的 4 个字符，英文不区分大小写；看不清楚可播放语音或刷新验证码",
 	"aria.moreButton.loaded": "已载入更多结果",
 	"aria.moreButton.collapsed": "已收合结果",
 	"aria.filter.hint": "（筛选条件，选取后过滤下方结果）",
@@ -304,6 +308,7 @@ var enus = {
 	"common.form.attachment.hint2": "2. If there are multiple files, please gather them in the same folder and upload them as compressed files",
 	"common.form.contactUs": "Contact Us",
 	"common.form.error": "The form has not been completed, please check the required items",
+	"common.form.errorSummary": "{count} field(s) need to be corrected. Select an item below to go to that field:",
 	"aria.header.searchOpen": "Open search",
 	"aria.header.menuOpen": "Open main menu",
 	"aria.header.logoHome": "Back to home",
@@ -327,6 +332,7 @@ var enus = {
 	"aria.vcode.audioIntro": "The verification code is:",
 	"aria.vcode.audioUnsupported": "Speech synthesis not supported; please refresh the code",
 	"aria.vcode.refreshed": "Verification code refreshed",
+	"aria.vcode.hint": "Enter the 4 characters shown in the image (not case-sensitive). If you cannot read them, play the audio or refresh the code.",
 	"aria.moreButton.loaded": "More results loaded",
 	"aria.moreButton.collapsed": "Results collapsed",
 	"aria.filter.hint": " (filter, updates the results below)",

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@daoyi/nmtl-ui",
 	"packageManager": "pnpm@10.34.5",
-	"version": "2.0.1-beta.130",
+	"version": "2.0.1-beta.131",
 	"description": "This project is to be used as a starter kit for building React component using Storybook and Rollup",
 	"author": "daoyi",
 	"main": "lib/index.js",