@daoyi/nmtl-ui 2.0.1-beta.110 → 2.0.1-beta.113

package/lib/components/{Autocomplete-8aa5b893.js → Autocomplete-dd6540c5.js}

@@ -220,7 +220,7 @@ var useAutocomplete = (_ref => {
   };
 });
 
-var css_248z = ".autocomplete .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  flex-wrap: wrap;\n  padding: 0px 8px;\n}\n.autocomplete .MuiChip-deleteIcon {\n  width: 16px;\n  height: 16px;\n}\n.autocomplete__icon {\n  font-size: 1.25rem;\n  margin-right: 8px;\n  cursor: pointer;\n}\n.autocomplete--showSearchIcon .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  display: flex;\n  flex-wrap: nowrap;\n  padding: 4px 8px;\n}";
+var css_248z = "@charset \"UTF-8\";\n/* 下拉選項鍵盤高亮可視化（R39）：上下鍵挑選時 MUI 只給 data-focus=\"true\"＋\n   action.hover（4% 黑）底色，對使用者幾乎不可見（WCAG 2.4.7 精神）。\n   比照 R30 選單選項聚焦模式＝亮底＋2px 虛線內縮完整框；彈窗為白底 paper（九專案皆未改色），\n   #0f1315 對亮底對比 >12:1。選單以 Popper 掛在 body，選擇器須在 .autocomplete 之外 */\n/* 加上 listbox 父層提高特異度：MUI JSS 的同名規則注入較晚，同特異度時會蓋掉本檔背景色 */\n.MuiAutocomplete-listbox .MuiAutocomplete-option[data-focus=true] {\n  background-color: rgba(0, 0, 0, 0.1);\n  outline: 2px dashed #0f1315;\n  outline-offset: -4px;\n}\n\n.autocomplete .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  flex-wrap: wrap;\n  padding: 0px 8px;\n}\n.autocomplete .MuiChip-deleteIcon {\n  width: 16px;\n  height: 16px;\n}\n.autocomplete__icon {\n  font-size: 1.25rem;\n  margin-right: 8px;\n  cursor: pointer;\n}\n.autocomplete--showSearchIcon .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  display: flex;\n  flex-wrap: nowrap;\n  padding: 4px 8px;\n}";
 styleInject(css_248z);
 
 var Autocomplete = function Autocomplete(props) {
@@ -287,6 +287,10 @@ var Autocomplete = function Autocomplete(props) {
   var handleSearch = useRef(debounce_1(function (result) {
     return onSearch(result);
   }, 500)).current;
+  /* WCAG 2.4.3 renderAfterDefaultValueChange 重繪會使焦點掉到 body（NVDA 改從頁面頂端讀起、
+     蓋掉 aria-live 播報）——unmount 前記錄焦點是否在元件內，remount 後還原 */
+  var rootRef = useRef(null);
+  var hadFocusRef = useRef(false);
 
   // 複選時 defaultValue 必須為Array
   // const currentDefaultValue = typeof defaultValue === 'string' && multiple ? undefined : getValueFromOptions(defaultValue);
@@ -297,10 +301,22 @@ var Autocomplete = function Autocomplete(props) {
     } : getValueFromOptions(defaultValue));
   }, [JSON.stringify(defaultValue)]);
   useEffect(function () {
-    if (renderAfterDefaultValueChange) setRerender(false);
+    if (renderAfterDefaultValueChange) {
+      hadFocusRef.current = !!(rootRef.current && rootRef.current.contains(document.activeElement));
+      setRerender(false);
+    }
   }, [currentDefaultValue]); // defaultValue改變時強制rerender
   useEffect(function () {
-    if (!rerender) setRerender(true);
+    if (!rerender) {
+      setRerender(true);
+    } else if (hadFocusRef.current) {
+      // remount 完成後把焦點還給輸入框（初載/返回時焦點不在元件內，不會搶焦點）
+      hadFocusRef.current = false;
+      setTimeout(function () {
+        var input = rootRef.current && rootRef.current.querySelector('input');
+        if (input) input.focus();
+      }, 0);
+    }
   }, [rerender]);
   /* 監聽result變化時才觸發onSearch */
   useEffect(function () {
@@ -312,6 +328,7 @@ var Autocomplete = function Autocomplete(props) {
 
   /* 這邊邏輯很複雜 變動需再三確認case */
   return /*#__PURE__*/React__default.createElement("div", {
+    ref: rootRef,
     className: classNames('autocomplete', {
       'autocomplete--showSearchIcon': searchIcon
     }, className)

package/lib/components/Autocomplete.js

@@ -1,4 +1,4 @@
-export { A as default } from './Autocomplete-8aa5b893.js';
+export { A as default } from './Autocomplete-dd6540c5.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';

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-0640ae9a.js';
+import { K as KeywordSearch } from './KeywordSearch-f56c8cb2.js';
 import { S as Select } from './Select-52ab5299.js';
 import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-b2edc79b.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-8aa5b893.js';
+import './Autocomplete-dd6540c5.js';
 import '@material-ui/lab';
 import './createSvgIcon-e3803ee1.js';
 import './defaultTheme-ed7746fe.js';
@@ -26,7 +26,7 @@ import './Empty-c6a44967.js';
 import './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
 
-var css_248z = "@charset \"UTF-8\";\n.header {\n  display: flex;\n  align-items: center;\n  background: rgba(255, 255, 255, 0.6);\n  background-color: rgba(255, 255, 255, 0.6);\n  padding: 12px 36px !important;\n  position: fixed;\n  top: 0;\n  z-index: 10;\n  width: 100% !important;\n  transition: top 0.3s ease-in-out;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);\n}\n.header__logo {\n  display: flex;\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n  margin-right: 30px !important;\n  cursor: pointer;\n}\n.header__logo__img {\n  display: flex;\n  align-items: center;\n}\n.header__logo__title {\n  white-space: nowrap;\n  margin-left: 1rem !important;\n  font-size: 1.5rem !important;\n  font-weight: 700 !important;\n  font-family: \"Noto Sans TC\" !important;\n}\n.header__links {\n  display: flex;\n  justify-content: flex-end;\n  padding-right: 14px;\n}\n.header__links a {\n  text-decoration: none;\n}\n.header__links--full {\n  flex: 1;\n}\n.header__links__item {\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 1.125rem !important;\n  font-weight: 500 !important;\n  white-space: nowrap;\n  padding: 6px 14px;\n  font-family: \"Noto Sans TC\" !important;\n}\n.header__links__item--active .header__links__item {\n  font-weight: 800 !important;\n  background: transparent;\n  border-radius: 45px;\n}\n.header__links__item:hover {\n  font-weight: 800 !important;\n}\n.header__language {\n  min-width: 100px !important;\n}\n.header__searchIcon {\n  display: none !important;\n}\n@media screen and (max-width: 768px) {\n  .header--smallUseSearchIcon .header__searchIcon {\n    display: flex !important;\n    margin-right: 10px !important;\n  }\n  .header--smallUseSearchIcon .keywordSearch {\n    visibility: hidden;\n    flex: 1;\n    width: 0;\n  }\n}\n.header--hide {\n  top: -100px;\n}\n.header--focus .header__links {\n  display: none;\n}\n.header .MuiTypography-root {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.header .autocomplete {\n  float: right;\n}\n.header .autocomplete .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  padding: 1px 8px !important;\n}\n.header .keywordSearch {\n  margin-right: 8px;\n}\n.header .keywordSearch--focus .autocomplete {\n  width: 100% !important;\n}\n.header .keywordSearch--animation .autocomplete {\n  width: 240px;\n  transition: width 0.3s ease-in-out;\n}\n\n/* 避免寬度460以下炸版 */\n@media screen and (max-width: 460px) {\n  .header .keywordSearch--animation .autocomplete {\n    width: 100%;\n  }\n}\n@media screen and (max-width: 768px) {\n  .header {\n    padding: 12px 15px !important;\n  }\n  .header__logo {\n    margin-right: 16px !important;\n  }\n  .header__logo__title {\n    display: none !important;\n  }\n  .header__links {\n    display: none;\n  }\n  .header__links__item {\n    font-size: 1rem !important;\n  }\n  .header__language {\n    display: none !important;\n  }\n  .header--focus .header__logo {\n    display: none !important;\n  }\n\n  .autocomplete__icon {\n    display: none !important;\n  }\n}";
+var css_248z = "@charset \"UTF-8\";\n.header {\n  display: flex;\n  align-items: center;\n  background: rgba(255, 255, 255, 0.6);\n  background-color: rgba(255, 255, 255, 0.6);\n  padding: 12px 36px !important;\n  position: fixed;\n  top: 0;\n  z-index: 10;\n  width: 100% !important;\n  transition: top 0.3s ease-in-out;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);\n}\n.header__logo {\n  display: flex;\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n  margin-right: 30px !important;\n  cursor: pointer;\n  text-decoration: none;\n}\n.header__logo__img {\n  display: flex;\n  align-items: center;\n}\n.header__logo__title {\n  white-space: nowrap;\n  margin-left: 1rem !important;\n  font-size: 1.5rem !important;\n  font-weight: 700 !important;\n  font-family: \"Noto Sans TC\" !important;\n}\n.header__links {\n  display: flex;\n  justify-content: flex-end;\n  padding-right: 14px;\n}\n.header__links a {\n  text-decoration: none;\n}\n.header__links--full {\n  flex: 1;\n}\n.header__links__item {\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 1.125rem !important;\n  font-weight: 500 !important;\n  white-space: nowrap;\n  padding: 6px 14px;\n  font-family: \"Noto Sans TC\" !important;\n}\n.header__links__item--active .header__links__item {\n  font-weight: 800 !important;\n  background: transparent;\n  border-radius: 45px;\n}\n.header__links__item:hover {\n  font-weight: 800 !important;\n}\n.header__language {\n  min-width: 100px !important;\n}\n.header__searchIcon {\n  display: none !important;\n}\n@media screen and (max-width: 768px) {\n  .header--smallUseSearchIcon .header__searchIcon {\n    display: flex !important;\n    margin-right: 10px !important;\n  }\n  .header--smallUseSearchIcon .keywordSearch {\n    visibility: hidden;\n    flex: 1;\n    width: 0;\n  }\n}\n.header--hide {\n  top: -100px;\n}\n.header--focus .header__links {\n  display: none;\n}\n.header .MuiTypography-root {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.header .autocomplete {\n  float: right;\n}\n.header .autocomplete .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  padding: 1px 8px !important;\n}\n.header .keywordSearch {\n  margin-right: 8px;\n}\n.header .keywordSearch--focus .autocomplete {\n  width: 100% !important;\n}\n.header .keywordSearch--animation .autocomplete {\n  width: 240px;\n  transition: width 0.3s ease-in-out;\n}\n\n/* 避免寬度460以下炸版 */\n@media screen and (max-width: 460px) {\n  .header .keywordSearch--animation .autocomplete {\n    width: 100%;\n  }\n}\n@media screen and (max-width: 768px) {\n  .header {\n    padding: 12px 15px !important;\n  }\n  .header__logo {\n    margin-right: 16px !important;\n  }\n  .header__logo__title {\n    display: none !important;\n  }\n  .header__links {\n    display: none;\n  }\n  .header__links__item {\n    font-size: 1rem !important;\n  }\n  .header__language {\n    display: none !important;\n  }\n  .header--focus .header__logo {\n    display: none !important;\n  }\n\n  .autocomplete__icon {\n    display: none !important;\n  }\n}";
 styleInject(css_248z);
 
 var showDarkModeSwitch = false;
@@ -72,6 +72,7 @@ var Header = function Header(props) {
     setMenuOpen(false);
   }, [search]);
   return /*#__PURE__*/React__default.createElement("div", {
+    role: "banner",
     className: classNames('MuiPaper-root', 'header', {
       'header--smallUseSearchIcon': smallUseSearchIcon
     }, {
@@ -79,22 +80,16 @@ var Header = function Header(props) {
     }, {
       'header--focus': menuOpen
     }, className)
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(NavLink, {
+    to: "/".concat(locale, "/main/home"),
     className: "header__logo",
-    role: "link",
-    tabIndex: 0,
-    "aria-label": getIntl().formatMessage({
+    "aria-label": title ? getIntl().formatMessage({
+      id: 'aria.header.logoHomeWithTitle'
+    }, {
+      title: title
+    }) : getIntl().formatMessage({
       id: 'aria.header.logoHome'
-    }),
-    onClick: function onClick() {
-      return history.push("/".concat(locale, "/main/home"));
-    },
-    onKeyDown: function onKeyDown(event) {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-        history.push("/".concat(locale, "/main/home"));
-      }
-    }
+    })
   }, logo && /*#__PURE__*/React__default.createElement("div", {
     className: "header__logo__img"
   }, logo), !menuOpen && title && /*#__PURE__*/React__default.createElement(Typography, {
@@ -109,9 +104,12 @@ var Header = function Header(props) {
     menuOpen: menuOpen,
     setMenuOpen: setMenuOpen,
     onSearch: onSearch
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("nav", {
     className: classNames('header__links', {
       'header__links--full': !searchAPI
+    }),
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.header.navigation'
     })
   }, (Array.isArray(pages) ? pages : []).filter(function (_ref) {
     var showInHeader = _ref.showInHeader;

package/lib/components/{KeywordSearch-0640ae9a.js → KeywordSearch-f56c8cb2.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-8aa5b893.js';
+import { A as Autocomplete } from './Autocomplete-dd6540c5.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-0640ae9a.js';
+export { K as default } from './KeywordSearch-f56c8cb2.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import './index-b76a85f4.js';
 import 'axios';
 import './style-inject.es-1f59c1d0.js';
-import './Autocomplete-8aa5b893.js';
+import './Autocomplete-dd6540c5.js';
 import './debounce-127da66c.js';
 import './isObjectLike-e111475d.js';
 import './_commonjsHelpers-70de2c37.js';

package/lib/components/globalConfig.js

@@ -59,6 +59,8 @@ var zhtw = {
 	"aria.header.searchOpen": "開啟搜尋",
 	"aria.header.menuOpen": "開啟主選單",
 	"aria.header.logoHome": "回首頁",
+	"aria.header.logoHomeWithTitle": "{title}，回首頁",
+	"aria.header.navigation": "主選單",
 	"aria.autocomplete.search": "執行搜尋",
 	"aria.modal.close": "關閉視窗",
 	"aria.newWindow": "（另開新視窗）",
@@ -138,6 +140,8 @@ var zhcn = {
 	"aria.header.searchOpen": "开启搜寻",
 	"aria.header.menuOpen": "开启主选单",
 	"aria.header.logoHome": "回首页",
+	"aria.header.logoHomeWithTitle": "{title}，回首页",
+	"aria.header.navigation": "主选单",
 	"aria.autocomplete.search": "执行搜寻",
 	"aria.modal.close": "关闭视窗",
 	"aria.newWindow": "（另开新视窗）",
@@ -217,6 +221,8 @@ var enus = {
 	"aria.header.searchOpen": "Open search",
 	"aria.header.menuOpen": "Open main menu",
 	"aria.header.logoHome": "Back to home",
+	"aria.header.logoHomeWithTitle": "{title}, back to home",
+	"aria.header.navigation": "Main menu",
 	"aria.autocomplete.search": "Search",
 	"aria.modal.close": "Close dialog",
 	"aria.newWindow": " (opens in new window)",

package/package.json

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