@daoyi/nmtl-ui 2.0.1-beta.96 → 2.0.1-beta.97

package/lib/components/{ContactModal-560b9bdd.js → ContactModal-7427edd0.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-5a27951f.js';
+import { M as Modal } from './Modal-777fe87d.js';
 import { c as commonjsGlobal, a as getDefaultExportFromCjs } from './_commonjsHelpers-70de2c37.js';
 import { c as classNames } from './index-b76a85f4.js';
 import { Input, Button, Box, Typography, FormControl, RadioGroup, FormControlLabel, Radio, TextField, TextareaAutosize } from '@material-ui/core';
@@ -11540,6 +11540,8 @@ function reducer(state, action) {
 
 const Upload = _ref => {
   let {
+    ariaLabelledby,
+    buttonText,
     onChange
   } = _ref;
   const fileRef = useRef(null);
@@ -11565,17 +11567,31 @@ const Upload = _ref => {
       className: "container"
     }, /*#__PURE__*/React__default.createElement("div", getRootProps({
       className: 'dropzone'
-    }), /*#__PURE__*/React__default.createElement("input", getInputProps()), /*#__PURE__*/React__default.createElement(Button, {
+    }), /*#__PURE__*/React__default.createElement("input", getInputProps({
+      'aria-labelledby': ariaLabelledby
+    })), /*#__PURE__*/React__default.createElement(Button, {
       variant: "contained",
       color: "default",
-      startIcon: /*#__PURE__*/React__default.createElement(default_1, null),
+      startIcon: /*#__PURE__*/React__default.createElement(default_1, {
+        "aria-hidden": "true"
+      }),
       onClick: openDialog
-    }, "Upload")), /*#__PURE__*/React__default.createElement("aside", null, /*#__PURE__*/React__default.createElement("ul", null, acceptedFiles.map(file => /*#__PURE__*/React__default.createElement("li", {
+    }, buttonText || 'Upload')), /*#__PURE__*/React__default.createElement("aside", null, /*#__PURE__*/React__default.createElement("ul", {
+      "aria-live": "polite"
+    }, acceptedFiles.map(file => /*#__PURE__*/React__default.createElement("li", {
       key: file.path
     }, file.path)))));
   });
 };
+Upload.defaultProps = {
+  ariaLabelledby: undefined,
+  buttonText: undefined
+};
 Upload.propTypes = {
+  /** 欄位標題元素 id（aria-labelledby 關聯用） */
+  ariaLabelledby: PropTypes.string,
+  /** 觸發按鈕的可見文字（建議傳欄位標題，如「附件上傳」） */
+  buttonText: PropTypes.string,
   onChange: PropTypes.func.isRequired
 };
 
@@ -11664,7 +11680,10 @@ const FormItem = _ref => {
         }, option.desc)))));
         break;
       case 'upload':
+        /* WCAG 1.3.1/3.3.2 附件上傳：標題 id 關聯內部 file input；按鈕以欄位標題為可見文字（WAVE: Missing form label） */
         component = /*#__PURE__*/React__default.createElement(Upload, _extends$1({}, field, {
+          ariaLabelledby: labelId,
+          buttonText: label,
           onChange: files => setFieldValue(field.name, files)
         }));
         break;
@@ -11703,13 +11722,13 @@ const FormItem = _ref => {
       }, label, required && /*#__PURE__*/React__default.createElement("div", {
         className: "formItem__title__star",
         "aria-hidden": "true"
-      }, '*')) : /*#__PURE__*/React__default.createElement("div", {
+      }, "*")) : /*#__PURE__*/React__default.createElement("div", {
         className: "formItem__title",
         id: labelId
       }, label, required && /*#__PURE__*/React__default.createElement("div", {
         className: "formItem__title__star",
         "aria-hidden": "true"
-      }, '*'))), hint && /*#__PURE__*/React__default.createElement(Box, {
+      }, "*"))), hint && /*#__PURE__*/React__default.createElement(Box, {
         my: 1
       }, /*#__PURE__*/React__default.createElement(Typography, {
         variant: "body2"

package/lib/components/ContactModal.js

@@ -1,11 +1,11 @@
-export { C as default } from './ContactModal-560b9bdd.js';
+export { C as default } from './ContactModal-7427edd0.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-5a27951f.js';
+import './Modal-777fe87d.js';
 import './index-b76a85f4.js';
 import '@material-ui/core';
 import '@material-ui/icons';

package/lib/components/{ExtraTools-94eeda8d.js → ExtraTools-8d2ef84d.js}

@@ -3143,7 +3143,7 @@ const ResetMobileIcon = _ref => {
   })));
 };
 
-var css_248z = ".extraTools {\n  width: 100%;\n  display: inline-flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 1rem;\n  padding: 0px 20px;\n  padding-top: 12px;\n}\n.extraTools__share button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__download {\n  cursor: pointer;\n}\n.extraTools__download-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__fullscreenBtn {\n  cursor: pointer;\n  padding-top: 0;\n}\n.extraTools__fullscreenBtn-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__fontsize {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools .font-size-changer,\n.extraTools .font-size-changer-buttons,\n.extraTools .font-size-up,\n.extraTools .font-size-down,\n.extraTools .tooltip {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools .font-size-up {\n  width: 32px !important;\n  cursor: pointer;\n  margin-right: 16px !important;\n}\n.extraTools .font-size-down {\n  cursor: pointer;\n  width: 32px !important;\n}\n.extraTools .fullscreenExit {\n  text-align: right;\n  cursor: pointer;\n  border: 0;\n}\n.extraTools #download-menu .MuiMenuItem-root {\n  color: #4e3a16;\n  width: auto;\n  overflow: hidden;\n  font-size: 1rem;\n  box-sizing: border-box;\n  min-height: 48px;\n  font-weight: 400;\n  line-height: 1;\n  padding-top: 1rem;\n  white-space: initial;\n  border-bottom: 0;\n  letter-spacing: 0.00938em;\n  padding-bottom: 1rem;\n}";
+var css_248z = ".extraTools {\n  width: 100%;\n  display: inline-flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 1rem;\n  padding: 0px 20px;\n  padding-top: 12px;\n}\n.extraTools__share button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__download {\n  cursor: pointer;\n}\n.extraTools__download-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__fullscreenBtn {\n  cursor: pointer;\n  padding-top: 0;\n}\n.extraTools__fullscreenBtn-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__fontsize {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools .font-size-changer,\n.extraTools .font-size-changer-buttons,\n.extraTools .font-size-up,\n.extraTools .font-size-down,\n.extraTools .tooltip {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools .font-size-up {\n  width: 32px !important;\n  cursor: pointer;\n  margin-right: 16px !important;\n}\n.extraTools .font-size-down {\n  cursor: pointer;\n  width: 32px !important;\n}\n.extraTools .font-size-up,\n.extraTools .font-size-down {\n  height: 32px;\n  line-height: 32px !important;\n}\n.extraTools .fullscreenExit {\n  text-align: right;\n  cursor: pointer;\n  border: 0;\n}\n.extraTools #download-menu .MuiMenuItem-root {\n  color: #4e3a16;\n  width: auto;\n  overflow: hidden;\n  font-size: 1rem;\n  box-sizing: border-box;\n  min-height: 48px;\n  font-weight: 400;\n  line-height: 1;\n  padding-top: 1rem;\n  white-space: initial;\n  border-bottom: 0;\n  letter-spacing: 0.00938em;\n  padding-bottom: 1rem;\n}";
 styleInject(css_248z);
 
 /* eslint-disable prefer-destructuring */

package/lib/components/ExtraTools.js

@@ -1,4 +1,4 @@
-export { E as default } from './ExtraTools-94eeda8d.js';
+export { E as default } from './ExtraTools-8d2ef84d.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import './index-b76a85f4.js';

package/lib/components/Footer.js

@@ -3,12 +3,12 @@ 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-560b9bdd.js';
+import { C as ContactModal } from './ContactModal-7427edd0.js';
 import { S as Spin } from './Spin-8dc60bfe.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './hoist-non-react-statics.cjs-3f408ad2.js';
 import 'react-is';
-import './Modal-5a27951f.js';
+import './Modal-777fe87d.js';
 import '@material-ui/core';
 import '@material-ui/icons';
 import './Button-305b69a0.js';

package/lib/components/Keywords.js

@@ -2,7 +2,7 @@ import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
 import React__default, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
-import { M as Modal } from './Modal-5a27951f.js';
+import { M as Modal } from './Modal-777fe87d.js';
 import { Typography } from '@material-ui/core';
 import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';

package/lib/components/MUITheme.js

@@ -2386,6 +2386,21 @@ const defaultColors = {
   secondaryColor: '#ffc400'
 };
 
+/* WCAG 1.4.3：依背景色相對亮度自動選深/白前景（Dialog 標題列底色為各站 primaryColor，
+   淺色品牌（如 #9dc9da、#ECC651）配固定白字對比不足——WAVE 實測「聯繫我們」標題被抓） */
+const contrastText = hex => {
+  const h = (hex || '').replace('#', '');
+  if (h.length !== 6 && h.length !== 3) return 'white';
+  const f = h.length === 3 ? h.split('').map(c => c + c).join('') : h;
+  const [r, g, b] = [0, 2, 4].map(i => {
+    const s = parseInt(f.slice(i, i + 2), 16) / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  /* 白字需底色亮度 ≤ 0.1833 才達 4.5:1；否則配深字 */
+  return luminance <= 0.1833 ? 'white' : '#0f1315';
+};
+
 // export const commonThemeProps = ({ darkMode, colors }) => {
 const commonTheme = _ref => {
   let {
@@ -2557,7 +2572,7 @@ const commonTheme = _ref => {
         root: {
           padding: '0 4px 0 12px',
           background: primaryColor,
-          color: 'white'
+          color: contrastText(primaryColor)
         }
       },
       MuiDialogContent: {

package/lib/components/{Modal-5a27951f.js → Modal-777fe87d.js}

@@ -8,7 +8,7 @@ import { S as Spin } from './Spin-8dc60bfe.js';
 import { getIntl } from './globalConfig';
 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: 16px;\n  padding: 8px 0;\n  color: white;\n}\n.modal__title__close {\n  cursor: pointer;\n  color: white;\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}";
+var css_248z = ".modal__title h2 {\n  display: flex;\n  align-items: center;\n}\n.modal__title__text {\n  flex: 1;\n  font-size: 16px;\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);
 
 var Modal = function Modal(props) {

package/lib/components/Modal.js

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

package/lib/components/SNA.js

@@ -2,7 +2,7 @@ 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-94eeda8d.js';
+import { E as ExtraTools } from './ExtraTools-8d2ef84d.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import './_commonjsHelpers-70de2c37.js';

package/package.json

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