@daoyi/nmtl-ui 2.0.1-beta.118 → 2.0.1-beta.119

package/lib/components/{Autocomplete-864269ac.js → Autocomplete-3b418e5f.js}

@@ -173,13 +173,20 @@ var useAutocomplete = (_ref => {
         className: "autocomplete__icon",
         color: "inherit",
         size: 20
+        // WCAG 4.1.2 progressbar 需可及名稱（axe aria-progressbar-name）
+        ,
+        "aria-label": getIntl().formatMessage({
+          id: 'aria.loading'
+        })
       }), searchIcon &&
       /*#__PURE__*/
-      // WCAG 2.1.1 / 4.1.2 搜尋圖示為可點擊元素，需可鍵盤操作並有名稱
+      // WCAG 2.1.1 / 4.1.2 搜尋圖示為可點擊元素，需可鍵盤操作並有名稱；
+      // MUI SvgIcon 預設 aria-hidden="true"，可聚焦元素必須覆蓋（axe aria-hidden-focus）
       React__default.createElement(SearchOutlined, {
         className: "autocomplete__icon",
         role: "button",
         tabIndex: 0,
+        "aria-hidden": false,
         "aria-label": getIntl().formatMessage({
           id: 'aria.autocomplete.search'
         }),

package/lib/components/Autocomplete.js

@@ -1,4 +1,4 @@
-export { A as default } from './Autocomplete-864269ac.js';
+export { A as default } from './Autocomplete-3b418e5f.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';

package/lib/components/{ContactModal-c3d96d09.js → ContactModal-763fc7cb.js}

@@ -3,7 +3,7 @@ import React__default, { createContext, forwardRef, createElement, useContext, u
 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-2451be75.js';
+import { M as Modal } from './Modal-76fef34f.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';

package/lib/components/ContactModal.js

@@ -1,17 +1,17 @@
-export { C as default } from './ContactModal-c3d96d09.js';
+export { C as default } from './ContactModal-763fc7cb.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-2451be75.js';
+import './Modal-76fef34f.js';
 import './index-b76a85f4.js';
 import '@material-ui/core';
 import '@material-ui/icons';
 import './Button-305b69a0.js';
 import './style-inject.es-1f59c1d0.js';
-import './Spin-8dc60bfe.js';
+import './Spin-8f87eadc.js';
 import './globalConfig';
 import './_commonjsHelpers-70de2c37.js';
 import './defaultTheme-ed7746fe.js';

package/lib/components/Footer.js

@@ -3,13 +3,13 @@ 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-c3d96d09.js';
-import { S as Spin } from './Spin-8dc60bfe.js';
+import { C as ContactModal } from './ContactModal-763fc7cb.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 './Modal-2451be75.js';
+import './Modal-76fef34f.js';
 import '@material-ui/core';
 import '@material-ui/icons';
 import './Button-305b69a0.js';

package/lib/components/Header.js

@@ -6,7 +6,7 @@ import { d as debounce_1 } from './debounce-127da66c.js';
 import { useHistory, useRouteMatch, NavLink } from 'react-router-dom';
 import { Typography, IconButton } from '@material-ui/core';
 import { SearchOutlined } from '@material-ui/icons';
-import { K as KeywordSearch } from './KeywordSearch-d12e1b4f.js';
+import { K as KeywordSearch } from './KeywordSearch-fec33a2c.js';
 import { S as Select } from './Select-141d7992.js';
 import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-c04df870.js';
 import { getIntl } from './globalConfig';
@@ -14,7 +14,7 @@ import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './isObjectLike-e111475d.js';
 import './_commonjsHelpers-70de2c37.js';
 import 'axios';
-import './Autocomplete-864269ac.js';
+import './Autocomplete-3b418e5f.js';
 import '@material-ui/lab';
 import './createSvgIcon-e3803ee1.js';
 import './defaultTheme-ed7746fe.js';

package/lib/components/{KeywordSearch-d12e1b4f.js → KeywordSearch-fec33a2c.js}

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import axios from 'axios';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
-import { A as Autocomplete } from './Autocomplete-864269ac.js';
+import { A as Autocomplete } from './Autocomplete-3b418e5f.js';
 
 var css_248z = ".keywordSearch {\n  border-radius: 4px;\n  width: 100%;\n  margin-right: 14px;\n}\n.keywordSearch--animation .autocomplete {\n  transition: max-width 0.3s ease-out;\n  max-width: 240px;\n}\n.keywordSearch--focus {\n  flex: 1;\n}\n.keywordSearch--focus .autocomplete {\n  max-width: 100%;\n}\n.keywordSearch .MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  border-radius: 10px;\n  background-color: #ffffff66;\n}";
 styleInject(css_248z);

package/lib/components/KeywordSearch.js

@@ -1,11 +1,11 @@
-export { K as default } from './KeywordSearch-d12e1b4f.js';
+export { K as default } from './KeywordSearch-fec33a2c.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import './index-b76a85f4.js';
 import 'axios';
 import './style-inject.es-1f59c1d0.js';
-import './Autocomplete-864269ac.js';
+import './Autocomplete-3b418e5f.js';
 import './debounce-127da66c.js';
 import './isObjectLike-e111475d.js';
 import './_commonjsHelpers-70de2c37.js';

package/lib/components/Keywords.js

@@ -2,14 +2,14 @@ import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
 import React__default, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
-import { M as Modal } from './Modal-2451be75.js';
+import { M as Modal } from './Modal-76fef34f.js';
 import { Typography } from '@material-ui/core';
 import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import '@material-ui/icons';
 import './Button-305b69a0.js';
-import './Spin-8dc60bfe.js';
+import './Spin-8f87eadc.js';
 import './_commonjsHelpers-70de2c37.js';
 import './defaultTheme-ed7746fe.js';
 import 'react-is';

package/lib/components/Loading.js

@@ -2,6 +2,7 @@ import React__default from 'react';
 import { c as classNames } from './index-b76a85f4.js';
 import { CircularProgress } from '@material-ui/core';
 import PropTypes from 'prop-types';
+import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
 var css_248z = ".loadingPage {\n  padding: 4rem 0;\n  color: #0087dc;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}";
@@ -12,7 +13,10 @@ var Loading = function Loading(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames('loadingPage', className)
   }, /*#__PURE__*/React__default.createElement(CircularProgress, {
-    size: 80
+    size: 80,
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.loading'
+    })
   }));
 };
 Loading.defaultProps = {

package/lib/components/{Modal-2451be75.js → Modal-76fef34f.js}

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { Dialog, DialogTitle, IconButton, DialogContent, DialogActions, CircularProgress } from '@material-ui/core';
 import { CloseSharp } from '@material-ui/icons';
 import { B as Button } from './Button-305b69a0.js';
-import { S as Spin } from './Spin-8dc60bfe.js';
+import { S as Spin } from './Spin-8f87eadc.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 

package/lib/components/Modal.js

@@ -1,4 +1,4 @@
-export { M as default } from './Modal-2451be75.js';
+export { M as default } from './Modal-76fef34f.js';
 import 'react';
 import './index-b76a85f4.js';
 import 'prop-types';
@@ -6,5 +6,5 @@ import '@material-ui/core';
 import '@material-ui/icons';
 import './Button-305b69a0.js';
 import './style-inject.es-1f59c1d0.js';
-import './Spin-8dc60bfe.js';
+import './Spin-8f87eadc.js';
 import './globalConfig';

package/lib/components/{Spin-8dc60bfe.js → Spin-8f87eadc.js}

@@ -2,6 +2,7 @@ import React__default, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import { Fade, CircularProgress } from '@material-ui/core';
+import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
 var css_248z = ".customSpin {\n  width: 100%;\n  min-height: 100px;\n  position: relative;\n}\n.customSpin__spin {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 2;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}";
@@ -49,7 +50,10 @@ var Spin = function Spin(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "customSpin__spin"
   }, /*#__PURE__*/React__default.createElement(CircularProgress, {
-    size: matchSize
+    size: matchSize,
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.loading'
+    })
   }))), children);
 };
 Spin.defaultProps = {

package/lib/components/Spin.js

@@ -1,6 +1,7 @@
-export { S as default } from './Spin-8dc60bfe.js';
+export { S as default } from './Spin-8f87eadc.js';
 import 'react';
 import 'prop-types';
 import './index-b76a85f4.js';
 import '@material-ui/core';
+import './globalConfig';
 import './style-inject.es-1f59c1d0.js';

package/lib/components/globalConfig.js

@@ -63,6 +63,7 @@ var zhtw = {
 	"aria.header.navigation": "主選單",
 	"aria.header.languageSelect": "選擇語言",
 	"aria.autocomplete.search": "執行搜尋",
+	"aria.loading": "載入中",
 	"aria.modal.close": "關閉視窗",
 	"aria.newWindow": "（另開新視窗）",
 	"aria.vcode.image": "驗證碼圖片，如無法辨識可刷新驗證碼",
@@ -145,6 +146,7 @@ var zhcn = {
 	"aria.header.navigation": "主选单",
 	"aria.header.languageSelect": "选择语言",
 	"aria.autocomplete.search": "执行搜寻",
+	"aria.loading": "载入中",
 	"aria.modal.close": "关闭视窗",
 	"aria.newWindow": "（另开新视窗）",
 	"aria.vcode.image": "验证码图片，如无法辨识可刷新验证码",
@@ -227,6 +229,7 @@ var enus = {
 	"aria.header.navigation": "Main menu",
 	"aria.header.languageSelect": "Select language",
 	"aria.autocomplete.search": "Search",
+	"aria.loading": "Loading",
 	"aria.modal.close": "Close dialog",
 	"aria.newWindow": " (opens in new window)",
 	"aria.vcode.image": "CAPTCHA image, refresh if unreadable",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@daoyi/nmtl-ui",
-	"version": "2.0.1-beta.118",
+	"version": "2.0.1-beta.119",
 	"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",