@unif/react-native-design 0.23.0 → 0.23.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/module/components/ui/Cell/Cell.js +15 -7
- package/lib/module/components/ui/Cell/Cell.js.map +1 -1
- package/lib/module/components/ui/Cell/content.js +13 -0
- package/lib/module/components/ui/Cell/content.js.map +1 -1
- package/lib/module/components/ui/shared/a11y.js +17 -0
- package/lib/module/components/ui/shared/a11y.js.map +1 -1
- package/lib/typescript/src/components/ui/Cell/Cell.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/Cell/content.d.ts +8 -0
- package/lib/typescript/src/components/ui/Cell/content.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/shared/a11y.d.ts +16 -0
- package/lib/typescript/src/components/ui/shared/a11y.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/ui/Cell/Cell.tsx +16 -3
- package/src/components/ui/Cell/content.ts +15 -0
- package/src/components/ui/shared/a11y.ts +17 -0
|
@@ -6,12 +6,12 @@ import { Pressable } from 'react-native-gesture-handler';
|
|
|
6
6
|
import { pressedOpacity, r, useColors, useThemedStyles } from "../../../theme/index.js";
|
|
7
7
|
import { createLogger } from "../../../utils/logger/index.js";
|
|
8
8
|
import { Icon } from "../Icon/index.js";
|
|
9
|
-
import { A11Y_HIDDEN_PROPS } from "../shared/a11y.js";
|
|
10
|
-
import { resolveCellActionAccessibilityLabel, resolveCellTitleColor, stringifyCellText } from "./content.js";
|
|
9
|
+
import { A11Y_HIDDEN_PROPS, A11Y_TEXT_ONLY_STYLE } from "../shared/a11y.js";
|
|
10
|
+
import { resolveCellActionAccessibilityLabel, resolveCellTitleColor, resolveExtraSemanticText, stringifyCellText } from "./content.js";
|
|
11
11
|
import { useListVariant } from "./context.js";
|
|
12
12
|
import { Leading } from "./Leading.js";
|
|
13
13
|
import { makeStyles } from "./styles.js";
|
|
14
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
15
|
const log = createLogger('Cell');
|
|
16
16
|
function CellExtraContent({
|
|
17
17
|
extra,
|
|
@@ -26,10 +26,18 @@ function CellExtraContent({
|
|
|
26
26
|
children: stringifyCellText(extra.value)
|
|
27
27
|
});
|
|
28
28
|
case 'display':
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
{
|
|
30
|
+
const semantic = resolveExtraSemanticText(extra);
|
|
31
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
32
|
+
children: [/*#__PURE__*/_jsx(View, {
|
|
33
|
+
...A11Y_HIDDEN_PROPS,
|
|
34
|
+
children: extra.node
|
|
35
|
+
}), semantic !== undefined ? /*#__PURE__*/_jsx(Text, {
|
|
36
|
+
style: A11Y_TEXT_ONLY_STYLE,
|
|
37
|
+
children: semantic
|
|
38
|
+
}) : null]
|
|
39
|
+
});
|
|
40
|
+
}
|
|
33
41
|
case 'control':
|
|
34
42
|
return extra.node;
|
|
35
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","Text","View","Pressable","pressedOpacity","r","useColors","useThemedStyles","createLogger","Icon","A11Y_HIDDEN_PROPS","resolveCellActionAccessibilityLabel","resolveCellTitleColor","stringifyCellText","useListVariant","Leading","makeStyles","jsx","_jsx","jsxs","_jsxs","log","CellExtraContent","extra","textStyle","kind","style","numberOfLines","children","value","node","Cell","props","c","styles","variant","flush","requestedAction","onPress","accessibilityLabel","title","desc","
|
|
1
|
+
{"version":3,"names":["React","useEffect","Text","View","Pressable","pressedOpacity","r","useColors","useThemedStyles","createLogger","Icon","A11Y_HIDDEN_PROPS","A11Y_TEXT_ONLY_STYLE","resolveCellActionAccessibilityLabel","resolveCellTitleColor","resolveExtraSemanticText","stringifyCellText","useListVariant","Leading","makeStyles","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","log","CellExtraContent","extra","textStyle","kind","style","numberOfLines","children","value","semantic","node","undefined","Cell","props","c","styles","variant","flush","requestedAction","onPress","accessibilityLabel","title","desc","hasEffectiveAction","hasMissingActionName","warn","cellStyle","cell","cellFlush","cellFlushWithDesc","titleColor","danger","selected","dangerColor","error","selectedColor","primary","titleStyle","titleFlush","color","descStyle","descFlush","extraStyle","extraFlush","inner","testID","leading","slot","body","titleLines","arrow","chevronFlush","name","size","foregroundSubtle","isDisabled","disabled","accessibilityRole","accessibilityHint","accessibilityState","pressed","opacity","staticLabel","trim","length","accessible"],"sourceRoot":"../../../../../src","sources":["components/ui/Cell/Cell.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -47,4 +47,17 @@ export function resolveCellTitleColor({
|
|
|
47
47
|
if (selected === true) return selectedColor;
|
|
48
48
|
return undefined;
|
|
49
49
|
}
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* `extra` 需要额外渲染一份「仅读屏可见」的语义文本吗?
|
|
53
|
+
*
|
|
54
|
+
* 只有 `display` 分支需要:它的视觉节点被 A11Y_HIDDEN_PROPS 移出 a11y 树,
|
|
55
|
+
* 声明的 `accessibilityText` 若不落成真实节点,读屏与按文字查询都拿不到它。
|
|
56
|
+
* `text` 分支本身就是可读文本,`control` 分支由控件自己负责名称。
|
|
57
|
+
*/
|
|
58
|
+
export function resolveExtraSemanticText(extra) {
|
|
59
|
+
if (extra?.kind !== 'display') return undefined;
|
|
60
|
+
const text = extra.accessibilityText?.trim();
|
|
61
|
+
return text !== undefined && text.length > 0 ? text : undefined;
|
|
62
|
+
}
|
|
50
63
|
//# sourceMappingURL=content.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["normalizeNonBlankText","stringifyCellText","value","String","appendNonBlank","parts","normalized","undefined","push","buildCellAccessibilityLabel","title","desc","extra","kind","accessibilityText","join","resolveCellActionAccessibilityLabel","accessibilityLabel","content","resolveCellTitleColor","danger","selected","dangerColor","selectedColor"],"sourceRoot":"../../../../../src","sources":["components/ui/Cell/content.ts"],"mappings":";;AACA,SAASA,qBAAqB,QAAQ,gCAA6B;AAInE,OAAO,SAASC,iBAAiBA,CAACC,KAAoB,EAAU;EAC9D,OAAOC,MAAM,CAACD,KAAK,CAAC;AACtB;AAEA,SAASE,cAAcA,CAACC,KAAe,EAAEH,KAAa,EAAQ;EAC5D,MAAMI,UAAU,GAAGN,qBAAqB,CAACE,KAAK,CAAC;EAC/C,IAAII,UAAU,KAAKC,SAAS,EAAEF,KAAK,CAACG,IAAI,CAACF,UAAU,CAAC;AACtD;AAEA,OAAO,SAASG,2BAA2BA,CAAC;EAC1CC,KAAK;EACLC,IAAI;EACJC;AAKF,CAAC,EAAU;EACT,MAAMP,KAAe,GAAG,EAAE;EAC1BD,cAAc,CAACC,KAAK,EAAEJ,iBAAiB,CAACS,KAAK,CAAC,CAAC;EAE/C,IAAIC,IAAI,KAAKJ,SAAS,EAAE;IACtBH,cAAc,CAACC,KAAK,EAAEJ,iBAAiB,CAACU,IAAI,CAAC,CAAC;EAChD;EAEA,IAAIC,KAAK,EAAEC,IAAI,KAAK,MAAM,EAAE;IAC1BT,cAAc,CAACC,KAAK,EAAEJ,iBAAiB,CAACW,KAAK,CAACV,KAAK,CAAC,CAAC;EACvD,CAAC,MAAM,IAAIU,KAAK,EAAEC,IAAI,KAAK,SAAS,EAAE;IACpCT,cAAc,CAACC,KAAK,EAAEO,KAAK,CAACE,iBAAiB,IAAI,EAAE,CAAC;EACtD;EAEA,OAAOT,KAAK,CAACU,IAAI,CAAC,GAAG,CAAC;AACxB;AAEA,OAAO,SAASC,mCAAmCA,CAAC;EAClDC,kBAAkB;EAClB,GAAGC;AAML,CAAC,EAAsB;EACrB,OACElB,qBAAqB,CAACiB,kBAAkB,CAAC,IACzCjB,qBAAqB,CAACS,2BAA2B,CAACS,OAAO,CAAC,CAAC;AAE/D;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CAAC;EACpCC,MAAM;EACNC,QAAQ;EACRC,WAAW;EACXC;AAMF,CAAC,EAAsB;EACrB,IAAIH,MAAM,KAAK,IAAI,EAAE,OAAOE,WAAW;EACvC,IAAID,QAAQ,KAAK,IAAI,EAAE,OAAOE,aAAa;EAC3C,OAAOhB,SAAS;AAClB","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["normalizeNonBlankText","stringifyCellText","value","String","appendNonBlank","parts","normalized","undefined","push","buildCellAccessibilityLabel","title","desc","extra","kind","accessibilityText","join","resolveCellActionAccessibilityLabel","accessibilityLabel","content","resolveCellTitleColor","danger","selected","dangerColor","selectedColor","resolveExtraSemanticText","text","trim","length"],"sourceRoot":"../../../../../src","sources":["components/ui/Cell/content.ts"],"mappings":";;AACA,SAASA,qBAAqB,QAAQ,gCAA6B;AAInE,OAAO,SAASC,iBAAiBA,CAACC,KAAoB,EAAU;EAC9D,OAAOC,MAAM,CAACD,KAAK,CAAC;AACtB;AAEA,SAASE,cAAcA,CAACC,KAAe,EAAEH,KAAa,EAAQ;EAC5D,MAAMI,UAAU,GAAGN,qBAAqB,CAACE,KAAK,CAAC;EAC/C,IAAII,UAAU,KAAKC,SAAS,EAAEF,KAAK,CAACG,IAAI,CAACF,UAAU,CAAC;AACtD;AAEA,OAAO,SAASG,2BAA2BA,CAAC;EAC1CC,KAAK;EACLC,IAAI;EACJC;AAKF,CAAC,EAAU;EACT,MAAMP,KAAe,GAAG,EAAE;EAC1BD,cAAc,CAACC,KAAK,EAAEJ,iBAAiB,CAACS,KAAK,CAAC,CAAC;EAE/C,IAAIC,IAAI,KAAKJ,SAAS,EAAE;IACtBH,cAAc,CAACC,KAAK,EAAEJ,iBAAiB,CAACU,IAAI,CAAC,CAAC;EAChD;EAEA,IAAIC,KAAK,EAAEC,IAAI,KAAK,MAAM,EAAE;IAC1BT,cAAc,CAACC,KAAK,EAAEJ,iBAAiB,CAACW,KAAK,CAACV,KAAK,CAAC,CAAC;EACvD,CAAC,MAAM,IAAIU,KAAK,EAAEC,IAAI,KAAK,SAAS,EAAE;IACpCT,cAAc,CAACC,KAAK,EAAEO,KAAK,CAACE,iBAAiB,IAAI,EAAE,CAAC;EACtD;EAEA,OAAOT,KAAK,CAACU,IAAI,CAAC,GAAG,CAAC;AACxB;AAEA,OAAO,SAASC,mCAAmCA,CAAC;EAClDC,kBAAkB;EAClB,GAAGC;AAML,CAAC,EAAsB;EACrB,OACElB,qBAAqB,CAACiB,kBAAkB,CAAC,IACzCjB,qBAAqB,CAACS,2BAA2B,CAACS,OAAO,CAAC,CAAC;AAE/D;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CAAC;EACpCC,MAAM;EACNC,QAAQ;EACRC,WAAW;EACXC;AAMF,CAAC,EAAsB;EACrB,IAAIH,MAAM,KAAK,IAAI,EAAE,OAAOE,WAAW;EACvC,IAAID,QAAQ,KAAK,IAAI,EAAE,OAAOE,aAAa;EAC3C,OAAOhB,SAAS;AAClB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASiB,wBAAwBA,CACtCZ,KAA4B,EACR;EACpB,IAAIA,KAAK,EAAEC,IAAI,KAAK,SAAS,EAAE,OAAON,SAAS;EAC/C,MAAMkB,IAAI,GAAGb,KAAK,CAACE,iBAAiB,EAAEY,IAAI,CAAC,CAAC;EAC5C,OAAOD,IAAI,KAAKlB,SAAS,IAAIkB,IAAI,CAACE,MAAM,GAAG,CAAC,GAAGF,IAAI,GAAGlB,SAAS;AACjE","ignoreList":[]}
|
|
@@ -18,4 +18,21 @@ export const A11Y_HIDDEN_PROPS = {
|
|
|
18
18
|
'importantForAccessibility': 'no-hide-descendants',
|
|
19
19
|
'aria-hidden': true
|
|
20
20
|
};
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* 视觉不可见、但对读屏与测试查询**可达**的文本样式。
|
|
24
|
+
*
|
|
25
|
+
* 用于「视觉由自定义节点承担、语义需要另给一份文字」的场景 —— 典型是 `Cell` 的
|
|
26
|
+
* `extra: { kind: 'display', accessibilityText }`:彩色 Tag 之类的节点本身要从 a11y
|
|
27
|
+
* 树移除(否则读屏逐个念视觉碎片),但它表达的状态必须留下一份可读文本。
|
|
28
|
+
*
|
|
29
|
+
* 不用 `display: 'none'` / `width: 0`:那会让节点连同文本一起从 a11y 树消失,
|
|
30
|
+
* 等于什么都没给。这里是**移出可视区**但保留在树里。
|
|
31
|
+
*/
|
|
32
|
+
export const A11Y_TEXT_ONLY_STYLE = {
|
|
33
|
+
position: 'absolute',
|
|
34
|
+
width: 1,
|
|
35
|
+
height: 1,
|
|
36
|
+
opacity: 0
|
|
37
|
+
};
|
|
21
38
|
//# sourceMappingURL=a11y.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["A11Y_HIDDEN_PROPS"],"sourceRoot":"../../../../../src","sources":["components/ui/shared/a11y.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,iBAAiB,GAAG;EAC/B,YAAY,EAAE,KAAK;EACnB,6BAA6B,EAAE,IAAI;EACnC,2BAA2B,EAAE,qBAAqB;EAClD,aAAa,EAAE;AACjB,CAAU","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["A11Y_HIDDEN_PROPS","A11Y_TEXT_ONLY_STYLE","position","width","height","opacity"],"sourceRoot":"../../../../../src","sources":["components/ui/shared/a11y.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,iBAAiB,GAAG;EAC/B,YAAY,EAAE,KAAK;EACnB,6BAA6B,EAAE,IAAI;EACnC,2BAA2B,EAAE,qBAAqB;EAClD,aAAa,EAAE;AACjB,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,oBAAoB,GAAG;EAClCC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE,CAAC;EACTC,OAAO,EAAE;AACX,CAAU","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Cell/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Cell/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAgBzC,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,SAAS,CAAC;AAsCpD;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyHxD"}
|
|
@@ -25,5 +25,13 @@ export declare function resolveCellTitleColor({ danger, selected, dangerColor, s
|
|
|
25
25
|
dangerColor: string;
|
|
26
26
|
selectedColor: string;
|
|
27
27
|
}): string | undefined;
|
|
28
|
+
/**
|
|
29
|
+
* `extra` 需要额外渲染一份「仅读屏可见」的语义文本吗?
|
|
30
|
+
*
|
|
31
|
+
* 只有 `display` 分支需要:它的视觉节点被 A11Y_HIDDEN_PROPS 移出 a11y 树,
|
|
32
|
+
* 声明的 `accessibilityText` 若不落成真实节点,读屏与按文字查询都拿不到它。
|
|
33
|
+
* `text` 分支本身就是可读文本,`control` 分支由控件自己负责名称。
|
|
34
|
+
*/
|
|
35
|
+
export declare function resolveExtraSemanticText(extra: CellExtra | undefined): string | undefined;
|
|
28
36
|
export {};
|
|
29
37
|
//# sourceMappingURL=content.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Cell/content.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxD,KAAK,sBAAsB,GAAG,OAAO,CAAC,SAAS,EAAE;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC,CAAC;AAEtE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAE9D;AAOD,wBAAgB,2BAA2B,CAAC,EAC1C,KAAK,EACL,IAAI,EACJ,KAAK,GACN,EAAE;IACD,KAAK,EAAE,aAAa,CAAC;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,sBAAsB,CAAC;CAChC,GAAG,MAAM,CAeT;AAED,wBAAgB,mCAAmC,CAAC,EAClD,kBAAkB,EAClB,GAAG,OAAO,EACX,EAAE;IACD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,EAAE,aAAa,CAAC;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,sBAAsB,CAAC;CAChC,GAAG,MAAM,GAAG,SAAS,CAKrB;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,QAAQ,EACR,WAAW,EACX,aAAa,GACd,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;CACvB,GAAG,MAAM,GAAG,SAAS,CAIrB"}
|
|
1
|
+
{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Cell/content.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxD,KAAK,sBAAsB,GAAG,OAAO,CAAC,SAAS,EAAE;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC,CAAC;AAEtE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAE9D;AAOD,wBAAgB,2BAA2B,CAAC,EAC1C,KAAK,EACL,IAAI,EACJ,KAAK,GACN,EAAE;IACD,KAAK,EAAE,aAAa,CAAC;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,sBAAsB,CAAC;CAChC,GAAG,MAAM,CAeT;AAED,wBAAgB,mCAAmC,CAAC,EAClD,kBAAkB,EAClB,GAAG,OAAO,EACX,EAAE;IACD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,EAAE,aAAa,CAAC;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,sBAAsB,CAAC;CAChC,GAAG,MAAM,GAAG,SAAS,CAKrB;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,QAAQ,EACR,WAAW,EACX,aAAa,GACd,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;CACvB,GAAG,MAAM,GAAG,SAAS,CAIrB;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,SAAS,GAAG,SAAS,GAC3B,MAAM,GAAG,SAAS,CAIpB"}
|
|
@@ -16,4 +16,20 @@ export declare const A11Y_HIDDEN_PROPS: {
|
|
|
16
16
|
readonly importantForAccessibility: "no-hide-descendants";
|
|
17
17
|
readonly 'aria-hidden': true;
|
|
18
18
|
};
|
|
19
|
+
/**
|
|
20
|
+
* 视觉不可见、但对读屏与测试查询**可达**的文本样式。
|
|
21
|
+
*
|
|
22
|
+
* 用于「视觉由自定义节点承担、语义需要另给一份文字」的场景 —— 典型是 `Cell` 的
|
|
23
|
+
* `extra: { kind: 'display', accessibilityText }`:彩色 Tag 之类的节点本身要从 a11y
|
|
24
|
+
* 树移除(否则读屏逐个念视觉碎片),但它表达的状态必须留下一份可读文本。
|
|
25
|
+
*
|
|
26
|
+
* 不用 `display: 'none'` / `width: 0`:那会让节点连同文本一起从 a11y 树消失,
|
|
27
|
+
* 等于什么都没给。这里是**移出可视区**但保留在树里。
|
|
28
|
+
*/
|
|
29
|
+
export declare const A11Y_TEXT_ONLY_STYLE: {
|
|
30
|
+
readonly position: "absolute";
|
|
31
|
+
readonly width: 1;
|
|
32
|
+
readonly height: 1;
|
|
33
|
+
readonly opacity: 0;
|
|
34
|
+
};
|
|
19
35
|
//# sourceMappingURL=a11y.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/shared/a11y.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB;;;;;CAKpB,CAAC"}
|
|
1
|
+
{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/shared/a11y.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB;;;;;CAKpB,CAAC;AAEX;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC"}
|
package/package.json
CHANGED
|
@@ -4,10 +4,11 @@ import { Pressable } from 'react-native-gesture-handler';
|
|
|
4
4
|
import { pressedOpacity, r, useColors, useThemedStyles } from '../../../theme';
|
|
5
5
|
import { createLogger } from '../../../utils/logger';
|
|
6
6
|
import { Icon } from '../Icon';
|
|
7
|
-
import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
|
|
7
|
+
import { A11Y_HIDDEN_PROPS, A11Y_TEXT_ONLY_STYLE } from '../shared/a11y';
|
|
8
8
|
import {
|
|
9
9
|
resolveCellActionAccessibilityLabel,
|
|
10
10
|
resolveCellTitleColor,
|
|
11
|
+
resolveExtraSemanticText,
|
|
11
12
|
stringifyCellText,
|
|
12
13
|
} from './content';
|
|
13
14
|
import { useListVariant } from './context';
|
|
@@ -32,8 +33,20 @@ function CellExtraContent({
|
|
|
32
33
|
{stringifyCellText(extra.value)}
|
|
33
34
|
</Text>
|
|
34
35
|
);
|
|
35
|
-
case 'display':
|
|
36
|
-
|
|
36
|
+
case 'display': {
|
|
37
|
+
const semantic = resolveExtraSemanticText(extra);
|
|
38
|
+
return (
|
|
39
|
+
<>
|
|
40
|
+
<View {...A11Y_HIDDEN_PROPS}>{extra.node}</View>
|
|
41
|
+
{/* 视觉节点已从 a11y 树移除;accessibilityText 在这里落成一个真实的
|
|
42
|
+
文本节点,读屏才读得到、测试才按文字查得到。只声明不渲染的话,
|
|
43
|
+
它对两者都不存在。 */}
|
|
44
|
+
{semantic !== undefined ? (
|
|
45
|
+
<Text style={A11Y_TEXT_ONLY_STYLE}>{semantic}</Text>
|
|
46
|
+
) : null}
|
|
47
|
+
</>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
37
50
|
case 'control':
|
|
38
51
|
return extra.node;
|
|
39
52
|
}
|
|
@@ -72,3 +72,18 @@ export function resolveCellTitleColor({
|
|
|
72
72
|
if (selected === true) return selectedColor;
|
|
73
73
|
return undefined;
|
|
74
74
|
}
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* `extra` 需要额外渲染一份「仅读屏可见」的语义文本吗?
|
|
78
|
+
*
|
|
79
|
+
* 只有 `display` 分支需要:它的视觉节点被 A11Y_HIDDEN_PROPS 移出 a11y 树,
|
|
80
|
+
* 声明的 `accessibilityText` 若不落成真实节点,读屏与按文字查询都拿不到它。
|
|
81
|
+
* `text` 分支本身就是可读文本,`control` 分支由控件自己负责名称。
|
|
82
|
+
*/
|
|
83
|
+
export function resolveExtraSemanticText(
|
|
84
|
+
extra: CellExtra | undefined
|
|
85
|
+
): string | undefined {
|
|
86
|
+
if (extra?.kind !== 'display') return undefined;
|
|
87
|
+
const text = extra.accessibilityText?.trim();
|
|
88
|
+
return text !== undefined && text.length > 0 ? text : undefined;
|
|
89
|
+
}
|
|
@@ -16,3 +16,20 @@ export const A11Y_HIDDEN_PROPS = {
|
|
|
16
16
|
'importantForAccessibility': 'no-hide-descendants',
|
|
17
17
|
'aria-hidden': true,
|
|
18
18
|
} as const;
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* 视觉不可见、但对读屏与测试查询**可达**的文本样式。
|
|
22
|
+
*
|
|
23
|
+
* 用于「视觉由自定义节点承担、语义需要另给一份文字」的场景 —— 典型是 `Cell` 的
|
|
24
|
+
* `extra: { kind: 'display', accessibilityText }`:彩色 Tag 之类的节点本身要从 a11y
|
|
25
|
+
* 树移除(否则读屏逐个念视觉碎片),但它表达的状态必须留下一份可读文本。
|
|
26
|
+
*
|
|
27
|
+
* 不用 `display: 'none'` / `width: 0`:那会让节点连同文本一起从 a11y 树消失,
|
|
28
|
+
* 等于什么都没给。这里是**移出可视区**但保留在树里。
|
|
29
|
+
*/
|
|
30
|
+
export const A11Y_TEXT_ONLY_STYLE = {
|
|
31
|
+
position: 'absolute',
|
|
32
|
+
width: 1,
|
|
33
|
+
height: 1,
|
|
34
|
+
opacity: 0,
|
|
35
|
+
} as const;
|