@sj-distributor/react-iconfont-cli 2.4.2 → 2.5.0

package/README.md

@@ -155,6 +155,32 @@ export const App = () => {
 </div>
 ```
 
+## 无障碍支持（WCAG）
+
+无障碍属性添加在最终生成的单图标 SVG 上。重新运行生成命令后，现有调用无需修改即可获得默认的可访问名称。
+
+将生成类似下面的 SVG：
+
+```html
+<svg role="img" aria-label="alipay" focusable="false">...</svg>
+```
+
+默认的 `aria-label` 是本包提供的兜底值：它根据去除前缀后的图标名生成，并将连字符、下划线和驼峰命名转换为空格。例如 `arrow-left` 会生成 `aria-label="arrow left"`。
+
+本包无法判断图标在具体页面中的含义和语言。调用方应根据实际语境覆盖默认标签：
+
+```tsx
+<IconFont name="alipay" aria-label="支付宝" />
+```
+
+如果图标只是装饰，或者所在按钮、链接已经有可访问名称，可以显式隐藏图标，避免读屏软件重复朗读：
+
+```tsx
+<button type="button" aria-label="关闭">
+  <IconFont name="close" aria-hidden="true" />
+</button>
+```
+
 ## 更新图标
 
 当 iconfont 项目图标有变更时，更新 `iconfont.json` 中的 `symbol_url` 后重新生成：

package/libs/generateComponent.js

@@ -39,6 +39,7 @@ var generateComponent = function (data, config) {
         cases += "".concat((0, whitespace_1.whitespace)(6), "return <").concat(componentName, " {...rest} />;\n");
         singleFile = (0, getTemplate_1.getTemplate)("SingleIcon" + jsxExtension);
         singleFile = (0, replace_1.replaceSize)(singleFile, config.default_icon_size);
+        singleFile = (0, replace_1.replaceAriaLabel)(singleFile, getAccessibleLabel(iconIdAfterTrim));
         if (jsxExtension === ".tsx") {
             singleFile = (0, replace_1.replaceReactName)(singleFile, config.can_import_react);
         }
@@ -74,7 +75,7 @@ var generateComponent = function (data, config) {
 exports.generateComponent = generateComponent;
 var generateCase = function (data, baseIdent) {
     var e_1, _a;
-    var template = "\n".concat((0, whitespace_1.whitespace)(baseIdent), "<svg viewBox=\"").concat(data.$.viewBox, "\" width={size} height={size} style={style} {...rest}>\n");
+    var template = "\n".concat((0, whitespace_1.whitespace)(baseIdent), "<svg viewBox=\"").concat(data.$.viewBox, "\" width={size} height={size} style={style} role={role} aria-label={accessibilityLabel} focusable=\"false\" {...rest}>\n");
     // Determine the primary fill color (first path's fill)
     // to distinguish primary paths from detail paths at runtime.
     var primaryFill = getPrimaryFill(data);
@@ -115,6 +116,14 @@ var generateCase = function (data, baseIdent) {
     template += "".concat((0, whitespace_1.whitespace)(baseIdent), "</svg>\n");
     return template;
 };
+var getAccessibleLabel = function (iconName) {
+    var label = iconName
+        .replace(/([a-z\d])([A-Z])/g, "$1 $2")
+        .replace(/[-_.=+#@!~*]+/g, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+    return label || iconName;
+};
 var getPrimaryFill = function (data) {
     var e_2, _a;
     var _b;

package/libs/replace.d.ts

@@ -1,4 +1,5 @@
 export declare const replaceSize: (content: string, size: number) => string;
+export declare const replaceAriaLabel: (content: string, label: string) => string;
 export declare const replaceCases: (content: string, cases: string) => string;
 export declare const replaceNames: (content: string, names: string[]) => string;
 export declare const replaceNamesArray: (content: string, names: string[]) => string;

package/libs/replace.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.replaceExports = exports.replaceSizeUnit = exports.replaceImports = exports.replaceSingleIconContent = exports.replaceReactName = exports.replaceComponentName = exports.replaceNamesArray = exports.replaceNames = exports.replaceCases = exports.replaceSize = void 0;
+exports.replaceExports = exports.replaceSizeUnit = exports.replaceImports = exports.replaceSingleIconContent = exports.replaceReactName = exports.replaceComponentName = exports.replaceNamesArray = exports.replaceNames = exports.replaceCases = exports.replaceAriaLabel = exports.replaceSize = void 0;
 var replaceSize = function (content, size) {
     return content.replace(/#size#/g, String(size));
 };
 exports.replaceSize = replaceSize;
+var replaceAriaLabel = function (content, label) {
+    return content.replace(/#ariaLabel#/g, JSON.stringify(label));
+};
+exports.replaceAriaLabel = replaceAriaLabel;
 var replaceCases = function (content, cases) {
     return content.replace(/#cases#/g, cases);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sj-distributor/react-iconfont-cli",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "main": "index.js",
   "keywords": [
     "iconfont",

package/templates/SingleIcon.js.template

@@ -7,8 +7,16 @@ const DEFAULT_STYLE = {
   display: 'block',
 };
 
-const #componentName# = ({ size = #size#, color, style: _style, ...rest }) => {
+const #componentName# = ({
+  size = #size#,
+  color,
+  style: _style,
+  role = 'img',
+  'aria-label': ariaLabel,
+  ...rest
+}) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+  const accessibilityLabel = typeof ariaLabel === 'string' && ariaLabel.trim() ? ariaLabel.trim() : #ariaLabel#;
 
   return (#iconContent#  );
 };

package/templates/SingleIcon.tsx.template

@@ -13,8 +13,16 @@ const DEFAULT_STYLE: CSSProperties = {
   display: 'block',
 };
 
-const #componentName#: FunctionComponent<Props> = ({ size = #size#, color, style: _style, ...rest }) => {
+const #componentName#: FunctionComponent<Props> = ({
+  size = #size#,
+  color,
+  style: _style,
+  role = 'img',
+  'aria-label': ariaLabel,
+  ...rest
+}) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+  const accessibilityLabel = ariaLabel && ariaLabel.trim() ? ariaLabel.trim() : #ariaLabel#;
 
   return (#iconContent#  );
 };