@daoyi/nmtl-ui 2.0.1-beta.101 → 2.0.1-beta.103

package/lib/components/CollapseContent.js

@@ -3,7 +3,7 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import { c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
 import { Typography } from '@material-ui/core';
-import { M as MoreButton } from './MoreButton-493f7c82.js';
+import { M as MoreButton } from './MoreButton-19055e07.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import '@material-ui/icons';
 import './globalConfig';

package/lib/components/{MoreButton-493f7c82.js → MoreButton-19055e07.js}

@@ -76,7 +76,7 @@ var MoreButton = function MoreButton(props) {
       tabIndex: 0,
       "aria-expanded": expand,
       "aria-label": "".concat(messageText).concat(getIntl().formatMessage({
-        id: 'aria.moreButton.hint'
+        id: expand ? 'aria.moreButton.hintCollapse' : 'aria.moreButton.hint'
       })),
       style: {
         color: shadowColor || 'white',

package/lib/components/MoreButton.js

@@ -1,4 +1,4 @@
-export { M as default } from './MoreButton-493f7c82.js';
+export { M as default } from './MoreButton-19055e07.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';

package/lib/components/SNA.js

@@ -1407,7 +1407,8 @@ var SNA = function SNA(props) {
     distance = props.distance,
     SNAData = props.SNAData,
     handleClickNodeGoto = props.handleClickNodeGoto,
-    DownloadExcel = props.DownloadExcel;
+    DownloadExcel = props.DownloadExcel,
+    nodeAriaHint = props.nodeAriaHint;
   // styles
   var width = props.width,
     height = props.height,
@@ -1552,6 +1553,24 @@ var SNA = function SNA(props) {
         id: d.id,
         type: d.type
       }) : null;
+    })
+    /* WCAG 2.1.1/2.4.7 可互動節點支援鍵盤（實測回饋 R11）：tabindex 可聚焦
+       （焦點框由各專案全域 :focus-visible 提供）、role=link＋aria-label 報讀、Enter 觸發 */.attr('tabindex', function (d) {
+      return d.hasClick ? 0 : null;
+    }).attr('role', function (d) {
+      return d.hasClick ? 'link' : null;
+    })
+    /* 報讀提示點選後行為（實測回饋 R15-29）：提示文字由消費端提供（是否另開新視窗依專案 handleClickNodeGoto 而定） */.attr('aria-label', function (d) {
+      return d.hasClick ? "".concat(d.name, "-").concat(translateType(d.type)).concat(nodeAriaHint || '') : null;
+    }).on('keydown', function (d) {
+      if (d.hasClick && event && event.key === 'Enter') {
+        event.preventDefault();
+        handleClickNodeGoto({
+          name: d.name,
+          id: d.id,
+          type: d.type
+        });
+      }
     }).call(drag$1(simulation$1));
     node.append('title').text(function (d) {
       return "".concat(d.name, "-").concat(translateType(d.type));
@@ -1646,6 +1665,7 @@ var SNA = function SNA(props) {
   }));
 };
 SNA.defaultProps = {
+  nodeAriaHint: '',
   className: undefined,
   intl: undefined,
   width: 1050,
@@ -1662,6 +1682,8 @@ SNA.defaultProps = {
 
 /* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
 SNA.propTypes = {
+  /** 可互動節點 aria-label 的行為提示後綴（例：，點選後開啟對應頁面（另開新視窗）） */
+  nodeAriaHint: PropTypes.string,
   /** Css Name */
   className: PropTypes.string,
   /** 語言 */

package/lib/components/globalConfig.js

@@ -80,7 +80,8 @@ var zhtw = {
 	"aria.filter.hint": "（篩選條件，選取後過濾下方結果）",
 	"aria.filter.applied": "已套用篩選：{title}，結果已更新",
 	"aria.export.download": "（下載檔案）",
-	"aria.backTop": "回到頁面頂端"
+	"aria.backTop": "回到頁面頂端",
+	"aria.moreButton.hintCollapse": "（點選後收合、僅顯示部分結果）"
 };
 
 var zhcn = {
@@ -149,7 +150,8 @@ var zhcn = {
 	"aria.filter.hint": "（筛选条件，选取后过滤下方结果）",
 	"aria.filter.applied": "已套用筛选：{title}，结果已更新",
 	"aria.export.download": "（下载档案）",
-	"aria.backTop": "回到页面顶端"
+	"aria.backTop": "回到页面顶端",
+	"aria.moreButton.hintCollapse": "（点选后收合、仅显示部分结果）"
 };
 
 var enus = {
@@ -218,7 +220,8 @@ var enus = {
 	"aria.filter.hint": " (filter, updates the results below)",
 	"aria.filter.applied": "Filter applied: {title}. Results updated",
 	"aria.export.download": " (downloads a file)",
-	"aria.backTop": "Back to top"
+	"aria.backTop": "Back to top",
+	"aria.moreButton.hintCollapse": " (click to collapse results)"
 };
 
 var _languages;

package/package.json

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