@daoyi/nmtl-ui 2.0.1-beta.108 → 2.0.1-beta.109

package/lib/components/Keywords.js

@@ -1,5 +1,5 @@
 import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
-import React__default, { useState, useEffect } from 'react';
+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-777fe87d.js';
@@ -65,23 +65,57 @@ const KeywordList = _ref => {
     onMoreClick,
     onKeywordClick
   } = _ref;
-  return Array.isArray(keywords) && /*#__PURE__*/React__default.createElement("div", {
-    className: classNames('keywordList', className)
-  }, (limit ? keywords.slice(0, limit) : keywords).map((keyword, i) => /*#__PURE__*/React__default.createElement(Typography, {
+  /* WCAG 2.4.3 roving tabindex（實測回饋 R32）：關鍵字 chip 原本各自 tabIndex=0，
+     一張卡片 N 個關鍵字＝N 個 Tab 站點，鍵盤使用者要逐一跳過才能離開卡片。
+     改為整組僅一個 Tab 站點（role=group），組內以方向鍵/Home/End 瀏覽，
+     Tab 直接離開整組。瀏覽模式（NVDA 上下鍵）不受影響。 */
+  const [current, setCurrent] = useState(0);
+  const itemRefs = useRef([]);
+  if (!Array.isArray(keywords)) return null;
+  const items = limit ? keywords.slice(0, limit) : keywords;
+  const hasMore = !!(limit && keywords.length > limit);
+  const count = items.length + (hasMore ? 1 : 0);
+  // 關鍵字資料變動使 current 超界時退回第一個
+  const activeIndex = current < count ? current : 0;
+  const moveTo = (event, next) => {
+    event.preventDefault();
+    const target = (next + count) % count;
+    setCurrent(target);
+    const el = itemRefs.current[target];
+    if (el) el.focus();
+  };
+  const handleRovingKeyDown = (event, index) => {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') moveTo(event, index + 1);else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') moveTo(event, index - 1);else if (event.key === 'Home') moveTo(event, 0);else if (event.key === 'End') moveTo(event, count - 1);
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('keywordList', className),
+    role: "group",
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.keyword.groupLabel'
+    }, {
+      count: keywords.length
+    })
+  }, items.map((keyword, i) => /*#__PURE__*/React__default.createElement(Typography, {
     color: "textSecondary",
     className: "keywordList__item",
     key: i.toString(),
     role: "button",
-    tabIndex: 0,
+    tabIndex: activeIndex === i ? 0 : -1,
+    ref: el => {
+      itemRefs.current[i] = el;
+    },
     "aria-label": `${keyword}${getIntl().formatMessage({
       id: 'aria.keyword.searchHint'
     })}`,
     onClick: () => onKeywordClick(keyword),
+    onFocus: () => setCurrent(i),
     onKeyDown: event => {
       if (event.key === 'Enter' || event.key === ' ') {
         event.preventDefault();
         onKeywordClick(keyword);
+        return;
       }
+      handleRovingKeyDown(event, i);
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -89,23 +123,29 @@ const KeywordList = _ref => {
       backgroundColor
     },
     className: "keywordList__item__hover"
-  }, keyword))), limit && keywords.length > limit && /*#__PURE__*/React__default.createElement("div", {
+  }, keyword))), hasMore && /*#__PURE__*/React__default.createElement("div", {
     className: classNames('keywordList__item', 'keywordList__icon'),
     style: {
       backgroundColor
     },
     role: "button",
-    tabIndex: 0,
+    tabIndex: activeIndex === items.length ? 0 : -1,
+    ref: el => {
+      itemRefs.current[items.length] = el;
+    },
     "aria-haspopup": "dialog",
     "aria-label": getIntl().formatMessage({
       id: 'aria.keyword.more'
     }),
     onClick: onMoreClick,
+    onFocus: () => setCurrent(items.length),
     onKeyDown: event => {
       if (event.key === 'Enter' || event.key === ' ') {
         event.preventDefault();
         onMoreClick();
+        return;
       }
+      handleRovingKeyDown(event, items.length);
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "keywordList__item__hover",

package/lib/components/globalConfig.js

@@ -89,7 +89,8 @@ var zhtw = {
 	"aria.pagination.page": "第 {page} 頁",
 	"aria.pagination.pageCurrent": "第 {page} 頁，目前頁",
 	"aria.pagination.select": "選擇頁碼，目前在第 {page} 頁，共 {totalPage} 頁（選擇後結果將更新）",
-	"aria.pagination.changed": "已切換至第 {page} 頁，結果已更新"
+	"aria.pagination.changed": "已切換至第 {page} 頁，結果已更新",
+	"aria.keyword.groupLabel": "關鍵字，共 {count} 個，可用方向鍵瀏覽"
 };
 
 var zhcn = {
@@ -167,7 +168,8 @@ var zhcn = {
 	"aria.pagination.page": "第 {page} 页",
 	"aria.pagination.pageCurrent": "第 {page} 页，目前页",
 	"aria.pagination.select": "选择页码，目前在第 {page} 页，共 {totalPage} 页（选择后结果将更新）",
-	"aria.pagination.changed": "已切换至第 {page} 页，结果已更新"
+	"aria.pagination.changed": "已切换至第 {page} 页，结果已更新",
+	"aria.keyword.groupLabel": "关键字，共 {count} 个，可用方向键浏览"
 };
 
 var enus = {
@@ -245,7 +247,8 @@ var enus = {
 	"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"
+	"aria.pagination.changed": "Moved to page {page}. Results updated",
+	"aria.keyword.groupLabel": "Keywords, {count} items, use arrow keys to browse"
 };
 
 var _languages;

package/package.json

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