@daoyi/nmtl-ui 2.0.1-beta.106 → 2.0.1-beta.107

package/lib/components/Filter.js

@@ -739,12 +739,19 @@ var Filter = function Filter(_ref) {
     setLiveMessage = _useState2[1];
   var urlSearch = queryString.parse(search);
   var FilterItem = He.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\tcolor: ", ";\n\t\t.filter__item--active {\n\t\t\tcolor: ", ";\n\t\t}\n\t\t:hover {\n\t\t\tcolor: ", ";\n\t\t}\n\t\t::after {\n\t\t\tcolor: ", ";\n\t\t}\n\t"])), textColor, textHoverColor || textColor, textHoverColor || textColor, textColor);
-  var handleClick = useCallback(function (key, title) {
+  var handleClick = useCallback(function (key, title, count) {
     if (disabled) return;
     if (onClick && typeof onClick === 'function') onClick(key);else historyAppendSearch(_defineProperty({
       history: history
     }, filterKey, key));
-    setLiveMessage(getIntl().formatMessage({
+    /* WCAG 4.1.3 篩選後播報結果筆數（實測回饋 R28）：筆數是篩選效果最直接的回饋，
+       尤其結果為 0 筆時；各分類筆數已在各 chip 可及名稱中（隨選可得），不逐一播報 */
+    setLiveMessage(typeof count === 'number' ? getIntl().formatMessage({
+      id: 'aria.filter.appliedCount'
+    }, {
+      title: title,
+      count: count
+    }) : getIntl().formatMessage({
       id: 'aria.filter.applied'
     }, {
       title: title
@@ -781,12 +788,12 @@ var Filter = function Filter(_ref) {
         id: 'aria.filter.hint'
       })),
       onClick: function onClick() {
-        return handleClick(key, title);
+        return handleClick(key, title, count);
       },
       onKeyDown: function onKeyDown(event) {
         if (event.key === 'Enter' || event.key === ' ') {
           event.preventDefault();
-          handleClick(key, title);
+          handleClick(key, title, count);
         }
       }
     }, "".concat(title, "(").concat(count, ")"));

package/lib/components/Pagination.js

@@ -1,6 +1,6 @@
-import { c as _objectWithoutProperties$1 } from './_rollupPluginBabelHelpers-a52356f6.js';
+import { c as _objectWithoutProperties$1, a as _slicedToArray$1 } from './_rollupPluginBabelHelpers-a52356f6.js';
 import * as React$2 from 'react';
-import React__default, { Children, isValidElement, cloneElement } from 'react';
+import React__default, { Children, isValidElement, cloneElement, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { k as _objectWithoutProperties, o as _slicedToArray, _ as _extends, q as _objectWithoutPropertiesLoose, r as alpha, j as formatMuiErrorMessage } from './defaultTheme-ed7746fe.js';
 import { u as useControlled, c as clsx, b as useEventCallback, w as withStyles, d as useIsFocusVisible, e as useForkRef, f as createSvgIcon, g as capitalize, h as debounce, r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
@@ -13,6 +13,7 @@ import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import { c as classNames } from './index-b76a85f4.js';
 import { IconButton } from '@material-ui/core';
+import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './_commonjsHelpers-70de2c37.js';
 
@@ -3551,58 +3552,127 @@ var Pagination = function Pagination(_ref) {
   var current = Number.parseInt(props.current, 10) || 1;
   // eslint-disable-next-line react/destructuring-assignment
   var defaultCurrent = Number.parseInt(props.defaultCurrent, 10) || 1;
+
+  /* WCAG 4.1.3 換頁後清單於原頁面更新，aria-live 播報（實測回饋 R29） */
+  var _useState = useState(''),
+    _useState2 = _slicedToArray$1(_useState, 2),
+    liveMessage = _useState2[0],
+    setLiveMessage = _useState2[1];
+  var didMountRef = useRef(false);
+  useEffect(function () {
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      return undefined;
+    }
+    setLiveMessage(getIntl().formatMessage({
+      id: 'aria.pagination.changed'
+    }, {
+      page: current
+    }));
+    var timer = setTimeout(function () {
+      return setLiveMessage('');
+    }, 3000);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [current]);
   var handlePageSelected = function handlePageSelected(event) {
     var page = Number.parseInt(event.target.value, 10);
     _onChange(page);
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames('ntml-pagination', className)
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "ntml-pagination__center"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    disabled: current === 1,
-    onClick: function onClick() {
-      return _onChange(current - 1);
-    }
-  }, /*#__PURE__*/React__default.createElement(default_1$1, {
-    color: "secondary"
-  })), /*#__PURE__*/React__default.createElement(MUIPagination, {
-    color: "secondary",
-    count: count,
-    boundaryCount: 1,
-    siblingCount: 0,
-    page: current,
-    defaultPage: defaultCurrent,
-    hideNextButton: true,
-    hidePrevButton: true,
-    onChange: function onChange(event, value) {
-      return _onChange(value);
-    }
-  }), /*#__PURE__*/React__default.createElement(IconButton, {
-    disabled: current === count,
-    onClick: function onClick() {
-      return _onChange(current + 1);
-    }
-  }, /*#__PURE__*/React__default.createElement(default_1, {
-    color: "secondary"
-  })))), /*#__PURE__*/React__default.createElement("div", {
-    className: "ntml-pagination__rightSide"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "ntml-pagination__rightSide-showTotal"
-  }, /*#__PURE__*/React__default.createElement("span", null, "\u76EE\u524D\u5728\u7B2C"), /*#__PURE__*/React__default.createElement(NativeSelect$1, {
-    value: current,
-    onChange: handlePageSelected
-  }, pages.map(function (page, idx) {
-    return /*#__PURE__*/React__default.createElement("option", {
-      value: page,
-      key: idx.toString()
-    }, page);
-  })), /*#__PURE__*/React__default.createElement("span", null, "\u9801\uFF0C\u5171"), count, /*#__PURE__*/React__default.createElement("span", null, "\u9801"))));
+
+  /* WCAG 2.4.6 / 4.1.2 頁碼項可及名稱（實測回饋 R29）：
+     MUI 預設英文「Go to page N」，改為 locale 化「第 N 頁」；目前頁項另帶
+     aria-current（MUI PaginationItem 內建） */
+  var getItemAriaLabel = function getItemAriaLabel(type, page, selected) {
+    if (type === 'page') {
+      return getIntl().formatMessage({
+        id: selected ? 'aria.pagination.pageCurrent' : 'aria.pagination.page'
+      }, {
+        page: page
+      });
+    }
+    return undefined;
+  };
+  return (
+    /*#__PURE__*/
+    /* WCAG 1.3.1 分頁為導覽 landmark（實測回饋 R29） */
+    React__default.createElement("nav", {
+      className: classNames('ntml-pagination', className),
+      "aria-label": getIntl().formatMessage({
+        id: 'aria.pagination.nav'
+      })
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "ntml-pagination__center"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      "aria-label": getIntl().formatMessage({
+        id: 'aria.pagination.prev'
+      }),
+      disabled: current === 1,
+      onClick: function onClick() {
+        return _onChange(current - 1);
+      }
+    }, /*#__PURE__*/React__default.createElement(default_1$1, {
+      color: "secondary"
+    })), /*#__PURE__*/React__default.createElement(MUIPagination, {
+      color: "secondary",
+      count: count,
+      boundaryCount: 1,
+      siblingCount: 0,
+      page: current,
+      defaultPage: defaultCurrent,
+      hideNextButton: true,
+      hidePrevButton: true,
+      getItemAriaLabel: getItemAriaLabel,
+      onChange: function onChange(event, value) {
+        return _onChange(value);
+      }
+    }), /*#__PURE__*/React__default.createElement(IconButton, {
+      "aria-label": getIntl().formatMessage({
+        id: 'aria.pagination.next'
+      }),
+      disabled: current === count,
+      onClick: function onClick() {
+        return _onChange(current + 1);
+      }
+    }, /*#__PURE__*/React__default.createElement(default_1, {
+      color: "secondary"
+    })))), /*#__PURE__*/React__default.createElement("div", {
+      className: "ntml-pagination__rightSide"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "ntml-pagination__rightSide-showTotal"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      "aria-hidden": "true"
+    }, "\u76EE\u524D\u5728\u7B2C"), /*#__PURE__*/React__default.createElement(NativeSelect$1, {
+      value: current,
+      onChange: handlePageSelected,
+      inputProps: {
+        'aria-label': getIntl().formatMessage({
+          id: 'aria.pagination.select'
+        }, {
+          page: current,
+          totalPage: count
+        })
+      }
+    }, pages.map(function (page, idx) {
+      return /*#__PURE__*/React__default.createElement("option", {
+        value: page,
+        key: idx.toString()
+      }, page);
+    })), /*#__PURE__*/React__default.createElement("span", {
+      "aria-hidden": "true"
+    }, "\u9801\uFF0C\u5171".concat(count, "\u9801")))), /*#__PURE__*/React__default.createElement("div", {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      role: "status",
+      className: "visually-hidden"
+    }, liveMessage))
+  );
 };
 Pagination.defaultProps = {
   className: undefined,

package/lib/components/globalConfig.js

@@ -81,7 +81,15 @@ var zhtw = {
 	"aria.filter.applied": "已套用篩選：{title}，結果已更新",
 	"aria.export.download": "（下載檔案）",
 	"aria.backTop": "回到頁面頂端",
-	"aria.moreButton.hintCollapse": "（點選後收合、僅顯示部分結果）"
+	"aria.moreButton.hintCollapse": "（點選後收合、僅顯示部分結果）",
+	"aria.filter.appliedCount": "已套用篩選：{title}，共 {count} 筆結果",
+	"aria.pagination.nav": "分頁導覽",
+	"aria.pagination.prev": "上一頁",
+	"aria.pagination.next": "下一頁",
+	"aria.pagination.page": "第 {page} 頁",
+	"aria.pagination.pageCurrent": "第 {page} 頁，目前頁",
+	"aria.pagination.select": "選擇頁碼，目前在第 {page} 頁，共 {totalPage} 頁（選擇後結果將更新）",
+	"aria.pagination.changed": "已切換至第 {page} 頁，結果已更新"
 };
 
 var zhcn = {
@@ -151,7 +159,15 @@ var zhcn = {
 	"aria.filter.applied": "已套用筛选：{title}，结果已更新",
 	"aria.export.download": "（下载档案）",
 	"aria.backTop": "回到页面顶端",
-	"aria.moreButton.hintCollapse": "（点选后收合、仅显示部分结果）"
+	"aria.moreButton.hintCollapse": "（点选后收合、仅显示部分结果）",
+	"aria.filter.appliedCount": "已套用筛选：{title}，共 {count} 笔结果",
+	"aria.pagination.nav": "分页导览",
+	"aria.pagination.prev": "上一页",
+	"aria.pagination.next": "下一页",
+	"aria.pagination.page": "第 {page} 页",
+	"aria.pagination.pageCurrent": "第 {page} 页，目前页",
+	"aria.pagination.select": "选择页码，目前在第 {page} 页，共 {totalPage} 页（选择后结果将更新）",
+	"aria.pagination.changed": "已切换至第 {page} 页，结果已更新"
 };
 
 var enus = {
@@ -221,7 +237,15 @@ var enus = {
 	"aria.filter.applied": "Filter applied: {title}. Results updated",
 	"aria.export.download": " (downloads a file)",
 	"aria.backTop": "Back to top",
-	"aria.moreButton.hintCollapse": " (click to collapse results)"
+	"aria.moreButton.hintCollapse": " (click to collapse results)",
+	"aria.filter.appliedCount": "Filter applied: {title}. {count} results",
+	"aria.pagination.nav": "Pagination",
+	"aria.pagination.prev": "Previous page",
+	"aria.pagination.next": "Next page",
+	"aria.pagination.page": "Page {page}",
+	"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"
 };
 
 var _languages;

package/package.json

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