@daoyi/nmtl-ui 2.0.1-beta.90 → 2.0.1-beta.92

package/lib/components/{ContactModal-523ae294.js → ContactModal-1997d146.js}

@@ -1,16 +1,16 @@
-import { _ as _extends$1, a as _slicedToArray$2, b as _objectSpread2, e as _defineProperty$1 } from './_rollupPluginBabelHelpers-ed61ffc0.js';
+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 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-6b8c72d7.js';
+import { M as Modal } from './Modal-5a27951f.js';
 import { c as commonjsGlobal, a as getDefaultExportFromCjs } from './_commonjsHelpers-70de2c37.js';
-import { c as classNames } from './index-f491ebce.js';
+import { c as classNames } from './index-b76a85f4.js';
 import { Input, Button, Box, Typography, FormControl, RadioGroup, FormControlLabel, Radio, TextField, TextareaAutosize } from '@material-ui/core';
-import { S as Select } from './Select-7da870e0.js';
-import { s as styleInject } from './style-inject.es-1f59c1d0.js';
-import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-ff0e3b99.js';
+import { S as Select } from './Select-e550d0a5.js';
 import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
 
 var isArray$1 = Array.isArray;
 var keyList = Object.keys;
@@ -10000,7 +10000,9 @@ const VCode = _ref => {
     visible,
     onChange,
     formatMessage,
-    name
+    name,
+    inputId,
+    required
   } = _ref;
   const [codeConfig, setCodeConfig] = useState(getConfig());
   const {
@@ -10020,6 +10022,10 @@ const VCode = _ref => {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "vcode"
   }, /*#__PURE__*/React__default.createElement(Input, {
+    inputProps: {
+      id: inputId,
+      'aria-required': required || undefined
+    },
     placeholder: formatMessage({
       id: 'common.form.code.check'
     }),
@@ -10027,14 +10033,20 @@ const VCode = _ref => {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "vcode__box"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "vcode__image"
+    className: "vcode__image",
+    role: "img",
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.vcode.image'
+    })
   }, /*#__PURE__*/React__default.createElement("canvas", {
     id: "bgi",
     width: "200",
-    height: "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`,
@@ -10042,7 +10054,18 @@ const VCode = _ref => {
     }
   }, convert(v))), /*#__PURE__*/React__default.createElement("div", {
     className: "vcode__image__mask",
-    onClick: refresh
+    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'
   }))), /*#__PURE__*/React__default.createElement(ErrorMessage, {
@@ -10056,14 +10079,20 @@ VCode.defaultProps = {
   // placeholder: undefined,
   onChange: () => {},
   formatMessage: () => {},
-  name: undefined
+  name: undefined,
+  inputId: undefined,
+  required: false
 };
 VCode.propTypes = {
   visible: PropTypes.bool,
   // placeholder: PropTypes.string,
   onChange: PropTypes.func,
   formatMessage: PropTypes.func,
-  name: PropTypes.string
+  name: PropTypes.string,
+  /** 與外部 label 關聯用的 input id（WCAG 3.3.2） */
+  inputId: PropTypes.string,
+  /** 是否必填(aria-required) */
+  required: PropTypes.bool
 };
 
 var facebookLoginWithButton = {exports: {}};
@@ -10090,7 +10119,9 @@ const EmailInput = _ref => {
     value,
     placeholder,
     onChange,
-    onNotify
+    onNotify,
+    inputId,
+    required
   } = _ref;
   const [init, setInit] = useState(false); // google login 在init時會先failed
   useMemo(() => () => setTimeout(() => setInit(true), 1000), []); // 故延遲一秒後再給google call(最非最佳解 可優化)
@@ -10139,6 +10170,10 @@ const EmailInput = _ref => {
     className: "emailInput__operator"
   }, /*#__PURE__*/React__default.createElement(Input, {
     value: value,
+    inputProps: {
+      id: inputId,
+      'aria-required': required || undefined
+    },
     placeholder: placeholder,
     onChange: e => onChange(e.target.value)
   })));
@@ -10147,13 +10182,19 @@ EmailInput.defaultProps = {
   value: undefined,
   placeholder: undefined,
   onChange: () => {},
-  onNotify: () => {}
+  onNotify: () => {},
+  inputId: undefined,
+  required: false
 };
 EmailInput.propTypes = {
   value: PropTypes.string,
   placeholder: PropTypes.string,
   onChange: PropTypes.func,
-  onNotify: PropTypes.func
+  onNotify: PropTypes.func,
+  /** 與外部 label 關聯用的 input id（WCAG 3.3.2） */
+  inputId: PropTypes.string,
+  /** 是否必填(aria-required) */
+  required: PropTypes.bool
 };
 
 var CloudUpload = {};
@@ -10208,7 +10249,7 @@ function __generator(thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -11538,7 +11579,7 @@ Upload.propTypes = {
   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: 16px;\n  font-weight: bold;\n}\n.formItem__title__star {\n  margin-left: 3px;\n  color: #d93333;\n}\n.formItem__operator {\n  margin: 2px 0;\n  font-size: 14px;\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: #d93333;\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}";
+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: 16px;\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: 14px;\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);
 
 const FormItem = _ref => {
@@ -11558,22 +11599,35 @@ const FormItem = _ref => {
   const currentPlaceholder = placeholder || `${formatMessage({
     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
+  };
+  /* 這些欄位型別會渲染帶 inputId 的 input，標題才能用 label htmlFor；其餘型別改以 aria-labelledby 關聯 */
+  const hasInputId = ['input', 'textarea', 'datePicker', 'email', 'vcode'].includes(type);
   const render = field => {
     let component;
     switch (type) {
       case 'input':
         component = /*#__PURE__*/React__default.createElement(Input, _extends$1({}, field, {
+          inputProps: a11yInputProps,
           placeholder: currentPlaceholder
         }));
         break;
       case 'textarea':
         component = /*#__PURE__*/React__default.createElement(TextareaAutosize, _extends$1({}, field, {
+          id: inputId,
+          "aria-required": required || undefined,
           minRows: 3,
           placeholder: currentPlaceholder
         }));
         break;
       case 'select':
         component = /*#__PURE__*/React__default.createElement(Select, _extends$1({}, field, {
+          ariaLabelledby: labelId,
           options: options,
           placeholder: currentPlaceholder,
           onChange: age => setFieldValue(field.name, age)
@@ -11581,12 +11635,15 @@ const FormItem = _ref => {
         break;
       case 'datePicker':
         component = /*#__PURE__*/React__default.createElement(TextField, _extends$1({}, field, {
+          inputProps: a11yInputProps,
           type: "date",
           onChange: event => setFieldValue(field.name, event.target.value)
         }));
         break;
       case 'email':
         component = /*#__PURE__*/React__default.createElement(EmailInput, _extends$1({}, field, {
+          inputId: inputId,
+          required: required,
           placeholder: currentPlaceholder,
           onChange: email => setFieldValue(field.name, email),
           onNotify: onNotify
@@ -11594,7 +11651,8 @@ const FormItem = _ref => {
         break;
       case 'radio':
         component = /*#__PURE__*/React__default.createElement(FormControl, {
-          component: "fieldset"
+          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,
           value: option.value,
@@ -11612,6 +11670,8 @@ const FormItem = _ref => {
         break;
       case 'vcode':
         component = /*#__PURE__*/React__default.createElement(VCode, {
+          inputId: inputId,
+          required: required,
           placeholder: currentPlaceholder,
           onChange: pass => setFieldValue(field.name, pass),
           formatMessage: formatMessage,
@@ -11633,11 +11693,23 @@ const FormItem = _ref => {
       return /*#__PURE__*/React__default.createElement("div", {
         id: `form-${name}`,
         className: "formItem"
-      }, label && /*#__PURE__*/React__default.createElement("div", {
-        className: "formItem__title"
+      }, label && (hasInputId ?
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/label-has-for, jsx-a11y/label-has-associated-control
+      React__default.createElement("label", {
+        className: "formItem__title",
+        id: labelId,
+        htmlFor: inputId
+      }, label, required && /*#__PURE__*/React__default.createElement("div", {
+        className: "formItem__title__star",
+        "aria-hidden": "true"
+      }, '*')) : /*#__PURE__*/React__default.createElement("div", {
+        className: "formItem__title",
+        id: labelId
       }, label, required && /*#__PURE__*/React__default.createElement("div", {
-        className: "formItem__title__star"
-      }, "*")), hint && /*#__PURE__*/React__default.createElement(Box, {
+        className: "formItem__title__star",
+        "aria-hidden": "true"
+      }, '*'))), hint && /*#__PURE__*/React__default.createElement(Box, {
         my: 1
       }, /*#__PURE__*/React__default.createElement(Typography, {
         variant: "body2"

package/lib/components/ContactModal.js

@@ -1,22 +1,22 @@
-export { C as default } from './ContactModal-523ae294.js';
-import './_rollupPluginBabelHelpers-ed61ffc0.js';
+export { C as default } from './ContactModal-1997d146.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import './hoist-non-react-statics.cjs-3f408ad2.js';
 import 'react-is';
 import 'axios';
-import './Modal-6b8c72d7.js';
-import './index-f491ebce.js';
+import './Modal-5a27951f.js';
+import './index-b76a85f4.js';
 import '@material-ui/core';
 import '@material-ui/icons';
-import './Button-430d39e6.js';
+import './Button-305b69a0.js';
 import './style-inject.es-1f59c1d0.js';
-import './Spin-9a07b106.js';
+import './Spin-8dc60bfe.js';
+import './globalConfig';
 import './_commonjsHelpers-70de2c37.js';
-import './Select-7da870e0.js';
-import './Empty-dc5fc2fc.js';
-import './createSvgIcon-ff0e3b99.js';
+import './Select-e550d0a5.js';
+import './Empty-bf77164f.js';
+import './createSvgIcon-e3803ee1.js';
 import './defaultTheme-ed7746fe.js';
 import '@material-ui/styles';
 import 'react-dom';
-import './globalConfig';

package/lib/components/{Drawer-ec47e780.js → Drawer-b9855a54.js}

@@ -1,10 +1,11 @@
-import { a as _slicedToArray } from './_rollupPluginBabelHelpers-ed61ffc0.js';
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
 import React__default, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { List, ListItem, ListItemIcon, ListItemText, IconButton, Drawer as Drawer$1, Divider } from '@material-ui/core';
 import { DehazeRounded } from '@material-ui/icons';
-import { S as Select } from './Select-7da870e0.js';
+import { S as Select } from './Select-e550d0a5.js';
 import { useHistory, useRouteMatch } from 'react-router-dom';
+import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
 var defaultSupportLanguage = [
@@ -90,11 +91,17 @@ var Drawer = function Drawer(_ref) {
     className: "drawer"
   }, /*#__PURE__*/React__default.createElement(IconButton, {
     className: "drawer__icon",
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.header.menuOpen'
+    }),
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
     onClick: function onClick() {
       return setOpen(true);
     }
   }, /*#__PURE__*/React__default.createElement(DehazeRounded, {
-    fontSize: "large"
+    fontSize: "large",
+    "aria-hidden": "true"
   })), /*#__PURE__*/React__default.createElement(Drawer$1, {
     anchor: "right",
     open: open,

package/lib/components/Drawer.js

@@ -1,11 +1,12 @@
-export { D as default } from './Drawer-ec47e780.js';
-import './_rollupPluginBabelHelpers-ed61ffc0.js';
+export { D as default } from './Drawer-b9855a54.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import '@material-ui/core';
 import '@material-ui/icons';
-import './Select-7da870e0.js';
-import './index-f491ebce.js';
-import './Empty-dc5fc2fc.js';
+import './Select-e550d0a5.js';
+import './index-b76a85f4.js';
+import './Empty-bf77164f.js';
 import './style-inject.es-1f59c1d0.js';
 import 'react-router-dom';
+import './globalConfig';

package/lib/components/Dropdown.js

@@ -1,6 +1,6 @@
-import { a as _slicedToArray } from './_rollupPluginBabelHelpers-ed61ffc0.js';
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
 import React__default, { useRef, useState } from 'react';
-import { c as classNames } from './index-f491ebce.js';
+import { c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
 import { Button, Menu, Divider, MenuItem, ListItemIcon, ListItemText } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';

package/lib/components/{Empty-dc5fc2fc.js → Empty-bf77164f.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import PropTypes from 'prop-types';
-import { c as classNames } from './index-f491ebce.js';
+import { c as classNames } from './index-b76a85f4.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
 var img = "data:image/svg+xml,%3csvg class='ant-empty-img-default' width='184' height='152' viewBox='0 0 184 152' xmlns='http://www.w3.org/2000/svg'%3e %3cg fill='none' fill-rule='evenodd'%3e %3cg transform='translate(24 31.67)'%3e %3cellipse fill='%23f5f5f5' fill-opacity='0.8' cx='67.797' cy='106.89' rx='67.797' ry='12.668'%3e%3c/ellipse%3e %3cpath fill='%23aeb8c2' d='M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z'%3e%3c/path%3e %3cpath fill='url(%23linearGradient-1)' d='M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z' transform='translate(13.56)'%3e%3c/path%3e %3cpath fill='%23f5f5f7' d='M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z'%3e%3c/path%3e %3cpath fill='%23dce0e6' d='M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z'%3e%3c/path%3e %3c/g%3e %3cpath fill='%23dce0e6' d='M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z'%3e%3c/path%3e %3cg fill='white' transform='translate(149.65 15.383)'%3e %3cellipse cx='20.654' cy='3.167' rx='2.849' ry='2.815'%3e%3c/ellipse%3e %3cpath d='M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e";

package/lib/components/Empty.js

@@ -1,5 +1,5 @@
-export { E as default } from './Empty-dc5fc2fc.js';
+export { E as default } from './Empty-bf77164f.js';
 import 'react';
 import 'prop-types';
-import './index-f491ebce.js';
+import './index-b76a85f4.js';
 import './style-inject.es-1f59c1d0.js';

package/lib/components/ExportButton.js

@@ -1,7 +1,7 @@
-import { a as _slicedToArray } from './_rollupPluginBabelHelpers-ed61ffc0.js';
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
 import React__default, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { c as classNames } from './index-f491ebce.js';
+import { c as classNames } from './index-b76a85f4.js';
 import { ExitToApp } from '@material-ui/icons';
 import { Dialog, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core';
 import { f as fileDownload, j as jsonTxt, a as jsonExcel } from './dataExport-d55d6fa3.js';

package/lib/components/{ExtraTools-0ffc772b.js → ExtraTools-5954ee3a.js}

@@ -1,11 +1,11 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-ed61ffc0.js';
+import { _ as _extends } from './_rollupPluginBabelHelpers-a52356f6.js';
 import * as React from 'react';
 import React__default, { Component, forwardRef, useState } from 'react';
-import { c as classNames } from './index-f491ebce.js';
+import { c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
 import { a as getDefaultExportFromCjs } from './_commonjsHelpers-70de2c37.js';
 import { Menu, MenuItem, useMediaQuery, IconButton } from '@material-ui/core';
-import { T as Tooltip } from './Tooltip-6d53cb6e.js';
+import { T as Tooltip } from './Tooltip-6ebfa9c1.js';
 import { s as snaToExcel, f as fileDownload$1, a as jsonExcel } from './dataExport-d55d6fa3.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
@@ -66,67 +66,6 @@ function objectToGetParams(object) {
     return params.length > 0 ? "?" + params.join('&') : '';
 }
 
-var classnames = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-(function (module) {
-	/* global define */
-
-	(function () {
-
-		var hasOwn = {}.hasOwnProperty;
-
-		function classNames() {
-			var classes = [];
-
-			for (var i = 0; i < arguments.length; i++) {
-				var arg = arguments[i];
-				if (!arg) continue;
-
-				var argType = typeof arg;
-
-				if (argType === 'string' || argType === 'number') {
-					classes.push(arg);
-				} else if (Array.isArray(arg)) {
-					if (arg.length) {
-						var inner = classNames.apply(null, arg);
-						if (inner) {
-							classes.push(inner);
-						}
-					}
-				} else if (argType === 'object') {
-					if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-						classes.push(arg.toString());
-						continue;
-					}
-
-					for (var key in arg) {
-						if (hasOwn.call(arg, key) && arg[key]) {
-							classes.push(key);
-						}
-					}
-				}
-			}
-
-			return classes.join(' ');
-		}
-
-		if (module.exports) {
-			classNames.default = classNames;
-			module.exports = classNames;
-		} else {
-			window.classNames = classNames;
-		}
-	}());
-} (classnames));
-
-var cx = classnames.exports;
-
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -277,7 +216,7 @@ var ShareButton$1 = /** @class */ (function (_super) {
     }
     ShareButton.prototype.render = function () {
         var _a = this.props; _a.beforeOnClick; var children = _a.children, className = _a.className, disabled = _a.disabled, disabledStyle = _a.disabledStyle, forwardedRef = _a.forwardedRef; _a.networkLink; var networkName = _a.networkName; _a.onShareWindowClose; _a.openShareDialogOnClick; _a.opts; var resetButtonStyle = _a.resetButtonStyle, style = _a.style; _a.url; _a.windowHeight; _a.windowPosition; _a.windowWidth; var rest = __rest$1(_a, ["beforeOnClick", "children", "className", "disabled", "disabledStyle", "forwardedRef", "networkLink", "networkName", "onShareWindowClose", "openShareDialogOnClick", "opts", "resetButtonStyle", "style", "url", "windowHeight", "windowPosition", "windowWidth"]);
-        var newClassName = cx('react-share__ShareButton', {
+        var newClassName = classNames('react-share__ShareButton', {
             'react-share__ShareButton--disabled': !!disabled,
             disabled: !!disabled,
         }, className);
@@ -1131,7 +1070,7 @@ var SocialMediaShareCount = /** @class */ (function (_super) {
     SocialMediaShareCount.prototype.render = function () {
         var _a = this.state, count = _a.count, isLoading = _a.isLoading;
         var _b = this.props, _c = _b.children, children = _c === void 0 ? defaultChildren : _c, className = _b.className; _b.getCount; var rest = __rest(_b, ["children", "className", "getCount"]);
-        return (React__default.createElement("span", __assign({ className: cx('react-share__ShareCount', className) }, rest), !isLoading && count !== undefined && children(count)));
+        return (React__default.createElement("span", __assign({ className: classNames('react-share__ShareCount', className) }, rest), !isLoading && count !== undefined && children(count)));
     };
     return SocialMediaShareCount;
 }(Component));
@@ -3208,6 +3147,16 @@ var css_248z = ".extraTools {\n  width: 100%;\n  display: inline-flex;\n  justif
 styleInject(css_248z);
 
 /* eslint-disable prefer-destructuring */
+
+/* 視覺隱藏文字（供按鈕內容作為可及名稱, WCAG 4.1.2） */
+const hiddenTextStyle = {
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  overflow: 'hidden',
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  whiteSpace: 'nowrap'
+};
 const ShareButton = _ref => {
   let {
     className
@@ -3215,11 +3164,15 @@ const ShareButton = _ref => {
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames('extraTools__share', className)
   }, /*#__PURE__*/React__default.createElement(FacebookShareButton, {
-    url: document.location.href
+    url: document.location.href,
+    "aria-label": "\u5206\u4EAB\u81F3 Facebook"
   }, /*#__PURE__*/React__default.createElement(FacebookIcon, {
     size: 32,
-    round: true
-  })));
+    round: true,
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    style: hiddenTextStyle
+  }, "\u5206\u4EAB\u81F3 Facebook")));
 };
 ShareButton.defaultProps = {
   className: undefined
@@ -3281,9 +3234,23 @@ const DownloadMenu = _ref2 => {
     placement: "bottom"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "extraTools__download-icon",
-    onClick: e => setAnchorEl(e.currentTarget)
+    role: "button",
+    tabIndex: 0,
+    "aria-label": intl ? intl.formatMessage({
+      id: 'knowledge.writersAndWorksSNA.download'
+    }) : '下載',
+    "aria-haspopup": "menu",
+    "aria-expanded": Boolean(anchorEl),
+    onClick: e => setAnchorEl(e.currentTarget),
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        setAnchorEl(e.currentTarget);
+      }
+    }
   }, /*#__PURE__*/React__default.createElement(DownloadImg, {
-    fill: iconColor
+    fill: iconColor,
+    "aria-hidden": "true"
   }))), /*#__PURE__*/React__default.createElement(Menu, {
     id: "download-menu",
     anchorEl: anchorEl,
@@ -3350,11 +3317,23 @@ const FullscreenBtn = _ref4 => {
     placement: "bottom"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "extraTools__fullscreenBtn-icon",
+    role: "button",
+    tabIndex: 0,
+    "aria-label": intl ? intl.formatMessage({
+      id: 'knowledge.writersAndWorksSNA.fullscreen'
+    }) : '全螢幕模式',
     onClick: () => {
       if (screenfull.isEnabled && fullscreenDomId) screenfull.request(document.getElementById(fullscreenDomId));
+    },
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        if (screenfull.isEnabled && fullscreenDomId) screenfull.request(document.getElementById(fullscreenDomId));
+      }
     }
   }, /*#__PURE__*/React__default.createElement(SVGComponent, {
-    fill: iconColor
+    fill: iconColor,
+    "aria-hidden": "true"
   }))));
 };
 FullscreenBtn.defaultProps = {
@@ -3389,22 +3368,35 @@ const FontSizeChanger = _ref5 => {
     targets: FontSizeTargets,
     options: FontSizeOptions,
     customButtons: {
+      /* 外層按鈕由 react-font-size-changer 渲染，以 role="img" + aria-label 提供按鈕可及名稱（WCAG 4.1.2） */
       up: /*#__PURE__*/React__default.createElement(Tooltip, {
         title: intl ? intl.formatMessage({
           id: 'knowledge.writersAndWorksSNA.big'
         }) : '字級放大',
         placement: "bottom"
+      }, /*#__PURE__*/React__default.createElement("span", {
+        role: "img",
+        "aria-label": intl ? intl.formatMessage({
+          id: 'knowledge.writersAndWorksSNA.big'
+        }) : '字級放大'
       }, /*#__PURE__*/React__default.createElement(SVGComponent$2, {
-        fill: iconColor
-      })),
+        fill: iconColor,
+        "aria-hidden": "true"
+      }))),
       down: /*#__PURE__*/React__default.createElement(Tooltip, {
         title: intl ? intl.formatMessage({
           id: 'knowledge.writersAndWorksSNA.small'
         }) : '字級縮小',
         placement: "bottom"
+      }, /*#__PURE__*/React__default.createElement("span", {
+        role: "img",
+        "aria-label": intl ? intl.formatMessage({
+          id: 'knowledge.writersAndWorksSNA.small'
+        }) : '字級縮小'
       }, /*#__PURE__*/React__default.createElement(SVGComponent$1, {
-        fill: iconColor
-      })),
+        fill: iconColor,
+        "aria-hidden": "true"
+      }))),
       style: {
         border: 'none'
       },
@@ -3454,14 +3446,19 @@ const SNAResetBtn = _ref6 => {
     }) : '回到原來位置與大小',
     placement: "bottom"
   }, /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": intl ? intl.formatMessage({
+      id: 'common.sna.reset'
+    }) : '回到原來位置與大小',
     onClick: () => renderSNA(),
     style: {
       padding: '0px'
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(ResetMobileIcon, {
-    fill: iconColor
+    fill: iconColor,
+    "aria-hidden": "true"
   }) : /*#__PURE__*/React__default.createElement(ResetIcon, {
-    fill: iconColor
+    fill: iconColor,
+    "aria-hidden": "true"
   })))));
 };
 SNAResetBtn.defaultProps = {

package/lib/components/ExtraTools.js

@@ -1,10 +1,10 @@
-export { E as default } from './ExtraTools-0ffc772b.js';
-import './_rollupPluginBabelHelpers-ed61ffc0.js';
+export { E as default } from './ExtraTools-5954ee3a.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
-import './index-f491ebce.js';
+import './index-b76a85f4.js';
 import 'prop-types';
 import './_commonjsHelpers-70de2c37.js';
 import '@material-ui/core';
-import './Tooltip-6d53cb6e.js';
+import './Tooltip-6ebfa9c1.js';
 import './style-inject.es-1f59c1d0.js';
 import './dataExport-d55d6fa3.js';