@daoyi/nmtl-ui 2.0.1-beta.126 → 2.0.1-beta.127

package/lib/components/{ContactModal-ac82e7a6.js → ContactModal-7e5b14e8.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-b62ff592.js';
+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';
@@ -12,7 +12,7 @@ import 'react-is';
 import '@material-ui/styles';
 import { u as useTheme } from './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
-import { S as Select } from './Select-141d7992.js';
+import { S as Select } from './Select-cb3e1ba1.js';
 import { VolumeUp } from '@material-ui/icons';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';

package/lib/components/ContactModal.js

@@ -1,11 +1,11 @@
-export { C as default } from './ContactModal-ac82e7a6.js';
+export { C as default } from './ContactModal-7e5b14e8.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-b62ff592.js';
+import './Modal-e04532fa.js';
 import './index-b76a85f4.js';
 import '@material-ui/core';
 import '@material-ui/icons';
@@ -18,7 +18,7 @@ import './defaultTheme-ed7746fe.js';
 import '@material-ui/styles';
 import './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
-import './Select-141d7992.js';
+import './Select-cb3e1ba1.js';
 import './Empty-c6a44967.js';
 import './createSvgIcon-e3803ee1.js';
 import 'react-dom';

package/lib/components/{Drawer-48414c2e.js → Drawer-629e59c7.js}

@@ -3,7 +3,7 @@ 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-141d7992.js';
+import { S as Select } from './Select-cb3e1ba1.js';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';

package/lib/components/Drawer.js

@@ -1,10 +1,10 @@
-export { D as default } from './Drawer-48414c2e.js';
+export { D as default } from './Drawer-629e59c7.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import '@material-ui/core';
 import '@material-ui/icons';
-import './Select-141d7992.js';
+import './Select-cb3e1ba1.js';
 import './index-b76a85f4.js';
 import './defaultTheme-ed7746fe.js';
 import 'react-is';
@@ -13,5 +13,5 @@ import './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
 import './Empty-c6a44967.js';
 import './style-inject.es-1f59c1d0.js';
-import 'react-router-dom';
 import './globalConfig';
+import 'react-router-dom';

package/lib/components/{ExtraTools-0f9ca8be.js → ExtraTools-11d483d5.js}

@@ -7,6 +7,7 @@ import { a as getDefaultExportFromCjs } from './_commonjsHelpers-70de2c37.js';
 import { Menu, MenuItem, useMediaQuery, IconButton } from '@material-ui/core';
 import { T as Tooltip } from './Tooltip-6ebfa9c1.js';
 import { s as snaToExcel, f as fileDownload$1, a as jsonExcel } from './dataExport-a9e3fae1.js';
+import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
 var __assign$3 = (undefined && undefined.__assign) || function () {
@@ -3169,18 +3170,24 @@ const ShareButton = _ref => {
   let {
     className
   } = _ref;
+  /* WCAG 4.1.2：react-share 預設 aria-label 只有 "facebook"，讀屏聽不出點下去會做什麼；
+     一律改為「分享至 Facebook」（走查回饋 5c）。
+     字串走套件自帶的 getIntl（元件內部字串），不依賴各站的訊息檔 */
+  const shareLabel = getIntl().formatMessage({
+    id: 'common.share.facebook'
+  });
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames('extraTools__share', className)
   }, /*#__PURE__*/React__default.createElement(FacebookShareButton, {
     url: document.location.href,
-    "aria-label": "\u5206\u4EAB\u81F3 Facebook"
+    "aria-label": shareLabel
   }, /*#__PURE__*/React__default.createElement(FacebookIcon, {
     size: 32,
     round: true,
     "aria-hidden": "true"
   }), /*#__PURE__*/React__default.createElement("span", {
     style: hiddenTextStyle
-  }, "\u5206\u4EAB\u81F3 Facebook")));
+  }, shareLabel)));
 };
 ShareButton.defaultProps = {
   className: undefined
@@ -3204,18 +3211,31 @@ const DownloadMenu = _ref2 => {
     exportFileName
   } = _ref2;
   const [anchorEl, setAnchorEl] = useState(null);
+  /* react-data-export 的隱藏觸發器（見下方 xlsxTrigger 說明） */
+  const xlsxTriggerRef = useRef(null);
   const hideButton = type => (exclude || []).filter(key => key === type).length > 0;
+  const t = (key, fallback) => intl ? intl.formatMessage({
+    id: key
+  }) : fallback;
+  const downloadLabel = t('knowledge.writersAndWorksSNA.download', '下載');
+
+  /* xlsx 需由 react-data-export 產生檔案，但它只會把傳入的 element 包一層 <span onClick>；
+     若直接把 MenuItem 交給它，選單裡就會出現 <span><li role="menuitem"></span>——
+     既不是 role="menu" 的合法子項，MUI MenuList 的上下鍵巡覽（走 nextElementSibling
+     且要求元素自帶 tabindex）也會直接跳過它，造成「最後一個選項選不到」（走查回饋 2/5b）。
+     改為：選單一律只放真 MenuItem，xlsx 的下載動作轉由選單外的隱藏觸發器代打。 */
+  const hasXlsx = !hideButton('downloadXls') && Boolean(DownloadExcel);
   const btns = [{
     key: 'downloadImage',
     onClick: () => domToImage({
       id: domToImageId,
       fileName: `${exportFileName}_${exportDateSuffix()}`
     }),
-    label: intl ? 'knowledge.writersAndWorksSNA.download.img' : '下載圖片'
+    label: t('knowledge.writersAndWorksSNA.download.img', '下載圖片')
   }, {
     key: 'downloadGephi',
     onClick: () => downloadGephi(data),
-    label: intl ? 'knowledge.writersAndWorksSNA.download.gephi' : '下載Gephi'
+    label: t('knowledge.writersAndWorksSNA.download.gephi', '下載Gephi')
   }, {
     key: 'downloadTsv',
     onClick: () => exportXlsx({
@@ -3224,34 +3244,33 @@ const DownloadMenu = _ref2 => {
       extType: 'tsv',
       fileName: exportFileName
     }),
-    label: intl ? 'knowledge.writersAndWorksSNA.download.tsv' : '下載Tsv'
+    label: t('knowledge.writersAndWorksSNA.download.tsv', '下載Tsv')
   }, {
     key: 'downloadXls',
-    // download click trigger 交給 react-data-export
-    label: intl ? 'knowledge.writersAndWorksSNA.download.xls' : '下載Excel'
+    onClick: () => xlsxTriggerRef.current && xlsxTriggerRef.current.click(),
+    label: t('knowledge.writersAndWorksSNA.download.xls', '下載Excel'),
+    requireExcel: true
   }];
-  // eslint-disable-next-line no-confusing-arrow
-  const isXlsxButton = (key, dom) => key === 'downloadXls' && DownloadExcel ? /*#__PURE__*/React__default.createElement(DownloadExcel, {
-    key: key,
-    element: dom,
-    data: data
-  }) : dom;
+  const menuItems = btns.filter(_ref3 => {
+    let {
+      key,
+      requireExcel
+    } = _ref3;
+    return !hideButton(key) && (!requireExcel || hasXlsx);
+  });
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames('extraTools__download', className)
   }, /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: intl ? intl.formatMessage({
-      id: 'knowledge.writersAndWorksSNA.download'
-    }) : '下載',
+    title: downloadLabel,
     placement: "bottom"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "extraTools__download-icon",
     role: "button",
     tabIndex: 0,
-    "aria-label": intl ? intl.formatMessage({
-      id: 'knowledge.writersAndWorksSNA.download'
-    }) : '下載',
+    "aria-label": downloadLabel,
     "aria-haspopup": "menu",
     "aria-expanded": Boolean(anchorEl),
+    "aria-controls": anchorEl ? 'download-menu' : undefined,
     onClick: e => setAnchorEl(e.currentTarget),
     onKeyDown: e => {
       if (e.key === 'Enter' || e.key === ' ') {
@@ -3267,19 +3286,35 @@ const DownloadMenu = _ref2 => {
     anchorEl: anchorEl,
     keepMounted: true,
     open: Boolean(anchorEl),
-    onClose: () => setAnchorEl(null)
-  }, btns.map(_ref3 => {
+    onClose: () => setAnchorEl(null),
+    MenuListProps: {
+      'aria-label': downloadLabel
+    }
+  }, menuItems.map(_ref4 => {
     let {
       key,
       onClick,
-      label
-    } = _ref3;
-    return !hideButton(key) && isXlsxButton(key, /*#__PURE__*/React__default.createElement(MenuItem, {
+      label: itemLabel
+    } = _ref4;
+    return /*#__PURE__*/React__default.createElement(MenuItem, {
       key: key,
-      onClick: onClick
-    }, intl ? intl.formatMessage({
-      id: label
-    }) : label));
+      onClick: () => {
+        /* 選完就關閉，焦點由 MUI 交還給觸發器（WCAG 2.4.3） */
+        setAnchorEl(null);
+        onClick();
+      }
+    }, itemLabel);
+  })), hasXlsx && /*#__PURE__*/React__default.createElement("div", {
+    className: "extraTools__download-xlsx",
+    style: {
+      display: 'none'
+    },
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React__default.createElement(DownloadExcel, {
+    data: data,
+    element: /*#__PURE__*/React__default.createElement("span", {
+      ref: xlsxTriggerRef
+    })
   })));
 };
 DownloadMenu.defaultProps = {
@@ -3315,13 +3350,13 @@ DownloadMenu.propTypes = {
   /** 匯出檔名前綴（下載圖片/Tsv 檔名＝前綴_YYYY-MM-DD） */
   exportFileName: PropTypes.string
 };
-const FullscreenBtn = _ref4 => {
+const FullscreenBtn = _ref5 => {
   let {
     className,
     intl,
     iconColor,
     fullscreenDomId
-  } = _ref4;
+  } = _ref5;
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames('extraTools__fullscreenBtn', className)
   }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -3368,14 +3403,14 @@ FullscreenBtn.propTypes = {
   /** 全螢幕指定DOM */
   fullscreenDomId: PropTypes.string
 };
-const FontSizeChanger = _ref5 => {
+const FontSizeChanger = _ref6 => {
   let {
     className,
     intl,
     iconColor,
     FontSizeTargets,
     FontSizeOptions
-  } = _ref5;
+  } = _ref6;
   /* WCAG 2.1.1/4.1.2 react-font-size-changer 渲染的 A+/A− 為純 div onClick、
      無法聚焦也無鍵盤操作（第三方庫不提供 prop）：掛載後補 tabindex/role/aria-label/Enter+Space */
   const rootRef = useRef(null);
@@ -3466,13 +3501,13 @@ FontSizeChanger.propTypes = {
   /** 改變文字的選項 */
   FontSizeOptions: PropTypes.objectOf(PropTypes.any)
 };
-const SNAResetBtn = _ref6 => {
+const SNAResetBtn = _ref7 => {
   let {
     className,
     intl,
     iconColor,
     renderSNA
-  } = _ref6;
+  } = _ref7;
   const isMobile = useMediaQuery('(max-width: 746px)');
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames('extraTools__resetSNA', className)

package/lib/components/ExtraTools.js

@@ -1,4 +1,4 @@
-export { E as default } from './ExtraTools-0f9ca8be.js';
+export { E as default } from './ExtraTools-11d483d5.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import './index-b76a85f4.js';
@@ -8,3 +8,4 @@ import '@material-ui/core';
 import './Tooltip-6ebfa9c1.js';
 import './style-inject.es-1f59c1d0.js';
 import './dataExport-a9e3fae1.js';
+import './globalConfig';

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-ac82e7a6.js';
+import { C as ContactModal } from './ContactModal-7e5b14e8.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-b62ff592.js';
+import './Modal-e04532fa.js';
 import '@material-ui/core';
 import '@material-ui/icons';
 import './Button-7bd5aa09.js';
@@ -18,7 +18,7 @@ import './defaultTheme-ed7746fe.js';
 import '@material-ui/styles';
 import './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
-import './Select-141d7992.js';
+import './Select-cb3e1ba1.js';
 import './Empty-c6a44967.js';
 import './createSvgIcon-e3803ee1.js';
 import 'react-dom';

package/lib/components/Header.js

@@ -7,8 +7,8 @@ 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-fec33a2c.js';
-import { S as Select } from './Select-141d7992.js';
-import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-48414c2e.js';
+import { S as Select } from './Select-cb3e1ba1.js';
+import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-629e59c7.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './isObjectLike-e111475d.js';

package/lib/components/Keywords.js

@@ -2,7 +2,7 @@ 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-b62ff592.js';
+import { M as Modal } from './Modal-e04532fa.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';

package/lib/components/{Modal-b62ff592.js → Modal-e04532fa.js}

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import { c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
 import { Dialog, DialogTitle, IconButton, DialogContent, DialogActions, CircularProgress } from '@material-ui/core';
@@ -11,6 +11,8 @@ import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 var css_248z = ".modal__title h2 {\n  display: flex;\n  align-items: center;\n}\n.modal__title__text {\n  flex: 1;\n  font-size: 1rem;\n  padding: 8px 0;\n  color: inherit;\n}\n.modal__title__close {\n  cursor: pointer;\n  color: inherit;\n}\n.modal--transparent .MuiPaper-root {\n  background: transparent !important;\n  box-shadow: none;\n}\n.modal--transparent .modal__title {\n  background: transparent !important;\n}";
 styleInject(css_248z);
 
+/* 每個 Modal 實例需要唯一 id，才能把標題和 role="dialog" 綁起來 */
+var modalSeq = 0;
 var Modal = function Modal(props) {
   var className = props.className,
     title = props.title,
@@ -28,6 +30,16 @@ var Modal = function Modal(props) {
   var endIcon = loading && /*#__PURE__*/React__default.createElement(CircularProgress, {
     size: 14
   });
+
+  /* WCAG 4.1.2 對話框需有可及名稱。MUI Dialog 只把 aria-labelledby 轉給
+     role="dialog" 的那層 Paper；aria-label 會被歸進 ...other 掛到外層 Modal
+     容器上，讀屏開啟時等於沒名字，故改用 aria-labelledby 指向標題文字。 */
+  var titleIdRef = useRef(null);
+  if (!titleIdRef.current) {
+    modalSeq += 1;
+    titleIdRef.current = "nmtl-modal-".concat(modalSeq, "-title");
+  }
+  var titleId = titleIdRef.current;
   return /*#__PURE__*/React__default.createElement(Dialog, {
     className: classNames('modal', {
       'modal--transparent': transparent
@@ -36,15 +48,15 @@ var Modal = function Modal(props) {
     open: visible || false,
     onClose: function onClose() {
       return closable && onCancel();
-    }
-    // WCAG 4.1.2 對話框需有可及名稱
-    ,
-    "aria-label": typeof title === 'string' ? title : undefined
+    },
+    "aria-labelledby": title ? titleId : undefined
   }, /*#__PURE__*/React__default.createElement(DialogTitle, {
     className: "modal__title"
   }, /*#__PURE__*/React__default.createElement("span", {
+    id: titleId,
     className: "modal__title__text"
   }, title), closable && /*#__PURE__*/React__default.createElement(IconButton, {
+    autoFocus: true,
     "aria-label": getIntl().formatMessage({
       id: 'aria.modal.close'
     }),
@@ -63,8 +75,7 @@ var Modal = function Modal(props) {
     onClick: onOk,
     color: "primary",
     endIcon: endIcon,
-    disabled: loading,
-    autoFocus: true
+    disabled: loading
   }, okText)) : footer));
 };
 Modal.defaultProps = {

package/lib/components/Modal.js

@@ -1,4 +1,4 @@
-export { M as default } from './Modal-b62ff592.js';
+export { M as default } from './Modal-e04532fa.js';
 import 'react';
 import './index-b76a85f4.js';
 import 'prop-types';

package/lib/components/SNA.js

@@ -2,13 +2,14 @@ import React__default, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import { e as event, d as d3Select, a as dispatch, c as customEvent, D as DragEvent, q as quadtree, m as map, t as timer, T as Transform, i as identity, b as interrupt, o as ordinal, f as category10 } from './transform-3a04288b.js';
-import { E as ExtraTools } from './ExtraTools-0f9ca8be.js';
+import { E as ExtraTools } from './ExtraTools-11d483d5.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import './_commonjsHelpers-70de2c37.js';
 import '@material-ui/core';
 import './Tooltip-6ebfa9c1.js';
 import './dataExport-a9e3fae1.js';
+import './globalConfig';
 
 function sourceEvent() {
   var current = event, source;

package/lib/components/{Select-141d7992.js → Select-cb3e1ba1.js}

@@ -1,5 +1,5 @@
 import { b as _objectSpread2, d as _typeof } from './_rollupPluginBabelHelpers-a52356f6.js';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import { FormControl, Select as Select$1, CircularProgress, MenuItem } from '@material-ui/core';
@@ -9,11 +9,24 @@ import '@material-ui/styles';
 import { u as useTheme } from './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
 import { E as Empty } from './Empty-c6a44967.js';
+import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
 var css_248z = ".select .MuiSelect-nativeInput {\n  visibility: hidden;\n}\n.select__placeholder {\n  color: #6b6130;\n}\n.select--small {\n  width: 100%;\n}\n.select--small .MuiSelect-root {\n  padding: 0.5rem 1.5rem 0.25rem;\n  color: white;\n}\n.select--small .MuiSelect-root .select__placeholder {\n  color: white;\n}\n.select--small .MuiSelect-root:hover, .select--small .MuiSelect-root:focus {\n  background: transparent;\n}\n.select--small .MuiSvgIcon-root {\n  color: white;\n}\n.select--small .MuiOutlinedInput-root {\n  border-radius: 45px;\n}";
 styleInject(css_248z);
 
+/* 視覺隱藏的可及名稱容器（不依賴各站的 .visually-hidden） */
+var hiddenLabelStyle = {
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  overflow: 'hidden',
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  whiteSpace: 'nowrap'
+};
+
+/* 每個 Select 實例需要唯一 id 才能做 aria-labelledby 串接 */
+var selectSeq = 0;
 var Select = function Select(props) {
   var style = props.style,
     className = props.className,
@@ -24,13 +37,18 @@ var Select = function Select(props) {
     variantSmall = props.variantSmall,
     background = props.background,
     menuItemClass = props.menuItemClass;
+  /* 未指定 placeholder 時走套件 i18n（原本寫死英文 'Please select...'，
+     中文語系也照唸英文，走查回饋 5a） */
+  var placeholderText = placeholder === undefined ? getIntl().formatMessage({
+    id: 'common.select.placeholder'
+  }) : placeholder;
   var options = props.options,
     value = props.value,
     defaultValue = props.defaultValue,
     _onChange = props.onChange,
     ariaLabel = props.ariaLabel,
     ariaLabelledby = props.ariaLabelledby;
-  /* WCAG 1.4.3 提示字顏色依主題深淺自動選色：select.scss 的 #6b6130 只適用淺底，
+  /* WCAG 1.4.3 提示字顏色依主題深淺自動選色：select.scss 的 #6b6130 只適用淺底，
      深色主題（palette.type=dark，如 ocean 深色 Modal）需改亮灰（WAVE 實測「請輸入 年齡」被抓） */
   var theme = useTheme();
   var placeholderStyle = theme && theme.palette && theme.palette.type === 'dark' ? {
@@ -41,24 +59,42 @@ var Select = function Select(props) {
       return _typeof(option) === 'object' ? key === option.value : key === option;
     }) || key;
   };
+
+  /* WCAG 4.1.2／3.3.2 可及名稱＝「這個選單是做什麼的」＋「目前選了什麼」。
+     直接掛 aria-label 會整個蓋掉顯示層的選中值文字（讀屏只唸得出用途、唸不出選了誰），
+     故改採 MUI 原生作法：把用途文字放進視覺隱藏的 label 元素，
+     再以 aria-labelledby="<label id> <顯示層 id>" 串起來（走查回饋 5a）。 */
+  var uidRef = useRef(null);
+  if (!uidRef.current) {
+    selectSeq += 1;
+    uidRef.current = "nmtl-select-".concat(selectSeq);
+  }
+  var uid = uidRef.current;
+  var buttonId = "".concat(uid, "-value");
+  var useHiddenLabel = Boolean(ariaLabel) && !ariaLabelledby;
+  // eslint-disable-next-line no-nested-ternary
+  var labelledby = ariaLabelledby ? "".concat(ariaLabelledby, " ").concat(buttonId) : useHiddenLabel ? "".concat(uid, "-label ").concat(buttonId) : undefined;
   return /*#__PURE__*/React__default.createElement(FormControl, {
     className: classNames('select', {
       'select--small': variantSmall
     }, className),
     variant: "outlined"
-  }, /*#__PURE__*/React__default.createElement(Select$1, {
+  }, useHiddenLabel && /*#__PURE__*/React__default.createElement("span", {
+    id: "".concat(uid, "-label"),
+    style: hiddenLabelStyle
+  }, ariaLabel), /*#__PURE__*/React__default.createElement(Select$1, {
     style: _objectSpread2(_objectSpread2({}, style || {}), {}, {
       background: background
     }),
     displayEmpty: true,
     disabled: disabled || loading
-    // WCAG 3.3.2 可及名稱：顯示層(role=button)預設以其文字內容(選中值/placeholder)為名稱；
-    // 僅在明確提供 ariaLabel/ariaLabelledby 時才覆蓋（避免蓋掉有意義的選中值文字）。
+    // WCAG 3.3.2 可及名稱：未提供 ariaLabel/ariaLabelledby 時，顯示層(role=button)
+    // 以其文字內容(選中值/placeholder)為名稱；有提供時改為「用途 + 選中值」（見上方 labelledby）。
     // 隱藏原生 input 由 select.scss 的 visibility:hidden 讓檢測工具略過，無需再標 label。
     ,
     SelectDisplayProps: {
-      'aria-labelledby': ariaLabelledby || undefined,
-      'aria-label': ariaLabelledby ? undefined : ariaLabel
+      id: buttonId,
+      'aria-labelledby': labelledby
     },
     renderValue: function renderValue(id) {
       var finder = itemFind(id);
@@ -73,7 +109,7 @@ var Select = function Select(props) {
         content = /*#__PURE__*/React__default.createElement("span", {
           className: "select__placeholder",
           style: placeholderStyle
-        }, placeholder);
+        }, placeholderText);
       }
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content, loading && /*#__PURE__*/React__default.createElement(CircularProgress, {
         size: 16,
@@ -109,7 +145,7 @@ Select.defaultProps = {
   labelInValue: undefined,
   disabled: undefined,
   loading: undefined,
-  placeholder: 'Please select...',
+  placeholder: undefined,
   variantSmall: undefined,
   background: undefined,
   menuItemClass: undefined,
@@ -134,7 +170,7 @@ Select.propTypes = {
   disabled: PropTypes.bool,
   /** 是否載入中 */
   loading: PropTypes.bool,
-  /** 下拉選單提示字 */
+  /** 下拉選單提示字（不給則使用套件 i18n 的「請選擇…」） */
   placeholder: PropTypes.string,
   /** 是否使用小size */
   variantSmall: PropTypes.bool,
@@ -144,7 +180,7 @@ Select.propTypes = {
   menuItemClass: PropTypes.objectOf(PropTypes.any),
   /** 點選後的返回 */
   onChange: PropTypes.func,
-  /** 無障礙名稱(WCAG 3.3.2)，未提供時以placeholder代替 */
+  /** 無障礙名稱(WCAG 3.3.2)：說明「這個選單是做什麼的」，會與選中值一起被讀出 */
   ariaLabel: PropTypes.string,
   /** 以外部元素id作為無障礙名稱 */
   ariaLabelledby: PropTypes.string

package/lib/components/Select.js

@@ -1,4 +1,4 @@
-export { S as default } from './Select-141d7992.js';
+export { S as default } from './Select-cb3e1ba1.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
@@ -11,3 +11,4 @@ import './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
 import './Empty-c6a44967.js';
 import './style-inject.es-1f59c1d0.js';
+import './globalConfig';

package/lib/components/globalConfig.js

@@ -94,7 +94,9 @@ var zhtw = {
 	"aria.pagination.pageCurrent": "第 {page} 頁，目前頁",
 	"aria.pagination.select": "選擇頁碼，目前在第 {page} 頁，共 {totalPage} 頁（選擇後結果將更新）",
 	"aria.pagination.changed": "已切換至第 {page} 頁，結果已更新",
-	"aria.keyword.groupLabel": "關鍵字，共 {count} 個，可用方向鍵瀏覽"
+	"aria.keyword.groupLabel": "關鍵字，共 {count} 個，可用方向鍵瀏覽",
+	"common.select.placeholder": "請選擇…",
+	"common.share.facebook": "分享至 Facebook"
 };
 
 var zhcn = {
@@ -177,7 +179,9 @@ var zhcn = {
 	"aria.pagination.pageCurrent": "第 {page} 页，目前页",
 	"aria.pagination.select": "选择页码，目前在第 {page} 页，共 {totalPage} 页（选择后结果将更新）",
 	"aria.pagination.changed": "已切换至第 {page} 页，结果已更新",
-	"aria.keyword.groupLabel": "关键字，共 {count} 个，可用方向键浏览"
+	"aria.keyword.groupLabel": "关键字，共 {count} 个，可用方向键浏览",
+	"common.select.placeholder": "请选择…",
+	"common.share.facebook": "分享至 Facebook"
 };
 
 var enus = {
@@ -260,7 +264,9 @@ var enus = {
 	"aria.pagination.pageCurrent": "Page {page}, current page",
 	"aria.pagination.select": "Select page, currently on page {page} of {totalPage} (results update after selection)",
 	"aria.pagination.changed": "Moved to page {page}. Results updated",
-	"aria.keyword.groupLabel": "Keywords, {count} items, use arrow keys to browse"
+	"aria.keyword.groupLabel": "Keywords, {count} items, use arrow keys to browse",
+	"common.select.placeholder": "Please select...",
+	"common.share.facebook": "Share on Facebook"
 };
 
 var _languages;

package/lib/index.d.ts

@@ -34,4 +34,6 @@ export { default as CollapseContent } from './components/CollapseContent';
 export { default as MoreButton } from './components/MoreButton';
 export { default as KeywordTicker } from './components/KeywordTicker';
 export { default as ExtraTools } from './components/ExtraTools';
-export { default as Filter } from './components/Filter';
+export { default as Filter } from './components/Filter';
+
+export { getIntl } from './components/globalConfig';

package/lib/index.js

@@ -34,4 +34,6 @@ export { default as CollapseContent } from './components/CollapseContent';
 export { default as MoreButton } from './components/MoreButton';
 export { default as KeywordTicker } from './components/KeywordTicker';
 export { default as ExtraTools } from './components/ExtraTools';
-export { default as Filter } from './components/Filter';
+export { default as Filter } from './components/Filter';
+
+export { getIntl } from './components/globalConfig';

package/package.json

@@ -1,125 +1,134 @@
-{
-	"name": "@daoyi/nmtl-ui",
-	"version": "2.0.1-beta.126",
-	"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",
-	"typings": "lib/index.d.ts",
-	"files": [
-		"lib"
-	],
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/HsunTsai/react-storybook-jsx-starter"
-	},
-	"dependencies": {
-		"@geometricpanda/storybook-addon-badges": "0.2.2",
-		"@material-ui/core": "4.12.3",
-		"@material-ui/icons": "4.11.2",
-		"@material-ui/lab": "4.0.0-alpha.60",
-		"@material-ui/styles": "4.11.4",
-		"axios": "0.21.1",
-		"babel-eslint": "10.1.0",
-		"classnames": "2.3.1",
-		"d3": "5.16.0",
-		"d3-selection": "1.4.2",
-		"d3-transition": "1.3.2",
-		"dom-to-image": "2.6.0",
-		"formik": "2.2.9",
-		"html-to-react": "1.4.5",
-		"jquery": "3.6.0",
-		"js-file-download": "0.4.12",
-		"jszip": "3.7.1",
-		"lodash": "4.17.21",
-		"markdown-it": "12.0.6",
-		"moment": "^2.29.4",
-		"notistack": "1.0.10",
-		"prop-types": "15.7.2",
-		"query-string": "6.12.1",
-		"react": "16.14.0",
-		"react-awesome-lightbox": "^1.8.1",
-		"react-data-export": "0.6.0",
-		"react-dom": "16.14.0",
-		"react-dropzone": "11.3.2",
-		"react-facebook-login": "4.1.1",
-		"react-file-download": "0.3.5",
-		"react-font-size-changer": "0.2.0",
-		"react-google-login": "5.2.2",
-		"react-intl": "5.8.0",
-		"react-redux": "7.2.5",
-		"react-router-dom": "5.2.0",
-		"react-share": "4.4.0",
-		"react-slick": "^0.28.1",
-		"redux": "4.1.0",
-		"sass": "1.41.1",
-		"screenfull": "5.2.0",
-		"slick-carousel": "^1.8.1",
-		"styled-components": "5.3.5",
-		"xlsx": "0.18.5"
-	},
-	"devDependencies": {
-		"@babel/core": "7.14.8",
-		"@babel/preset-env": "7.14.8",
-		"@babel/preset-react": "7.14.5",
-		"@rollup/plugin-babel": "5.3.1",
-		"@rollup/plugin-commonjs": "22.0.0",
-		"@rollup/plugin-node-resolve": "13.2.1",
-		"@rollup/plugin-replace": "4.0.0",
-		"@rollup/plugin-image": "2.1.1",
-		"@rollup/plugin-json": "4.1.0",
-		"@storybook/addon-essentials": "6.5.13",
-		"@storybook/addon-links": "6.5.13",
-		"@storybook/addon-notes": "6.0.0-alpha.6",
-		"@storybook/addons": "6.5.13",
-		"@storybook/preset-scss": "1.0.3",
-		"@storybook/react": "6.5.13",
-		"autoprefixer": "9.8.6",
-		"babel-loader": "8.2.2",
-		"babel-plugin-transform-imports": "2.0.0",
-		"css-loader": "1.0.1",
-		"eslint": "7.2.0",
-		"eslint-config-airbnb": "18.2.1",
-		"eslint-config-node": "4.1.0",
-		"eslint-config-prettier": "8.3.0",
-		"eslint-loader": "4.0.2",
-		"eslint-plugin-import": "2.22.1",
-		"eslint-plugin-jsx-a11y": "6.4.1",
-		"eslint-plugin-node": "11.1.0",
-		"eslint-plugin-prettier": "3.4.1",
-		"eslint-plugin-react": "7.21.5",
-		"eslint-plugin-react-hooks": "1.7.0",
-		"http-proxy-middleware": "1.3.1",
-		"prettier": "2.4.1",
-		"rollup": "2.70.2",
-		"rollup-plugin-cleaner": "1.0.0",
-		"rollup-plugin-postcss": "4.0.1",
-		"rollup-plugin-terser": "7.0.2",
-		"sass-loader": "7.1.0",
-		"style-loader": "0.22.1"
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	},
-	"scripts": {
-		"start": "set NODE_OPTIONS=--max_old_space_size=16384 && yarn storybook",
-		"lint": "eslint ./src/**/*.{js,jsx}",
-		"format": "prettier --write --tab-width 4 --use-tabs true \"{,src/**/}*.{js,jsx}\"",
-		"storybook": "start-storybook -p 6006 --no-open",
-		"build": "rollup -c && npm run build-index",
-		"build-index": "node ./rollup.index.js",
-		"build-storybook": "build-storybook -c .storybook -o public",
-		"create": "node ./buildUtils/create.js",
-		"pub": "npm version patch -m Publish && npm publish",
-		"pub-alpha": "npm version prerelease --preid=alpha && npm publish --tag alpha",
-		"pub-beta": "npm version prerelease --preid=beta && npm publish --tag beta"
-	}
-}
+{
+	"name": "@daoyi/nmtl-ui",
+	"packageManager": "pnpm@10.34.5",
+	"version": "2.0.1-beta.127",
+	"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",
+	"typings": "lib/index.d.ts",
+	"files": [
+		"lib"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/HsunTsai/react-storybook-jsx-starter"
+	},
+	"dependencies": {
+		"@geometricpanda/storybook-addon-badges": "0.2.2",
+		"@material-ui/core": "4.12.3",
+		"@material-ui/icons": "4.11.2",
+		"@material-ui/lab": "4.0.0-alpha.60",
+		"@material-ui/styles": "4.11.4",
+		"axios": "0.21.1",
+		"babel-eslint": "10.1.0",
+		"classnames": "2.3.1",
+		"d3": "5.16.0",
+		"d3-selection": "1.4.2",
+		"d3-transition": "1.3.2",
+		"dom-to-image": "2.6.0",
+		"formik": "2.2.9",
+		"html-to-react": "1.4.5",
+		"jquery": "3.6.0",
+		"js-file-download": "0.4.12",
+		"jszip": "3.7.1",
+		"lodash": "4.17.21",
+		"markdown-it": "12.0.6",
+		"moment": "^2.29.4",
+		"notistack": "1.0.10",
+		"prop-types": "15.7.2",
+		"query-string": "6.12.1",
+		"react": "16.14.0",
+		"react-awesome-lightbox": "^1.8.1",
+		"react-data-export": "0.6.0",
+		"react-dom": "16.14.0",
+		"react-dropzone": "11.3.2",
+		"react-facebook-login": "4.1.1",
+		"react-file-download": "0.3.5",
+		"react-font-size-changer": "0.2.0",
+		"react-google-login": "5.2.2",
+		"react-intl": "5.8.0",
+		"react-redux": "7.2.5",
+		"react-router-dom": "5.2.0",
+		"react-share": "4.4.0",
+		"react-slick": "^0.28.1",
+		"redux": "4.1.0",
+		"sass": "1.41.1",
+		"screenfull": "5.2.0",
+		"slick-carousel": "^1.8.1",
+		"styled-components": "5.3.5",
+		"xlsx": "0.18.5"
+	},
+	"devDependencies": {
+		"@babel/core": "7.14.8",
+		"@babel/preset-env": "7.14.8",
+		"@babel/preset-react": "7.14.5",
+		"@rollup/plugin-babel": "5.3.1",
+		"@rollup/plugin-commonjs": "22.0.0",
+		"@rollup/plugin-node-resolve": "13.2.1",
+		"@rollup/plugin-replace": "4.0.0",
+		"@rollup/plugin-image": "2.1.1",
+		"@rollup/plugin-json": "4.1.0",
+		"@storybook/addon-essentials": "6.5.13",
+		"@storybook/addon-links": "6.5.13",
+		"@storybook/addon-notes": "6.0.0-alpha.6",
+		"@storybook/addons": "6.5.13",
+		"@storybook/preset-scss": "1.0.3",
+		"@storybook/react": "6.5.13",
+		"autoprefixer": "9.8.6",
+		"babel-loader": "8.2.2",
+		"babel-plugin-transform-imports": "2.0.0",
+		"css-loader": "1.0.1",
+		"eslint": "7.2.0",
+		"eslint-config-airbnb": "18.2.1",
+		"eslint-config-node": "4.1.0",
+		"eslint-config-prettier": "8.3.0",
+		"eslint-loader": "4.0.2",
+		"eslint-plugin-import": "2.22.1",
+		"eslint-plugin-jsx-a11y": "6.4.1",
+		"eslint-plugin-node": "11.1.0",
+		"eslint-plugin-prettier": "3.4.1",
+		"eslint-plugin-react": "7.21.5",
+		"eslint-plugin-react-hooks": "1.7.0",
+		"http-proxy-middleware": "1.3.1",
+		"prettier": "2.4.1",
+		"rollup": "2.70.2",
+		"rollup-plugin-cleaner": "1.0.0",
+		"rollup-plugin-postcss": "4.0.1",
+		"rollup-plugin-terser": "7.0.2",
+		"sass-loader": "7.1.0",
+		"style-loader": "0.22.1"
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"scripts": {
+		"start": "set NODE_OPTIONS=--max_old_space_size=16384 && yarn storybook",
+		"lint": "eslint ./src/**/*.{js,jsx}",
+		"format": "prettier --write --tab-width 4 --use-tabs true \"{,src/**/}*.{js,jsx}\"",
+		"storybook": "start-storybook -p 6006 --no-open",
+		"build": "rollup -c && npm run build-index",
+		"build-index": "node ./rollup.index.js",
+		"build-storybook": "build-storybook -c .storybook -o public",
+		"create": "node ./buildUtils/create.js",
+		"pub": "npm version patch -m Publish && npm publish",
+		"pub-alpha": "npm version prerelease --preid=alpha && npm publish --tag alpha",
+		"pub-beta": "npm version prerelease --preid=beta && npm publish --tag beta"
+	},
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"core-js",
+			"esbuild",
+			"protobufjs",
+			"styled-components"
+		]
+	}
+}