@react-native-aria/utils 0.2.8 → 0.2.9-alpha.0
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/commonjs/ariaToAccessibilityMap.js +5 -19
- package/lib/commonjs/ariaToAccessibilityMap.js.map +1 -1
- package/lib/commonjs/index.js +1 -3
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/ariaToAccessibilityMap.js +3 -19
- package/lib/module/ariaToAccessibilityMap.js.map +1 -1
- package/lib/module/index.js +1 -3
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/ariaToAccessibilityMap.d.ts +1 -0
- package/package.json +3 -3
- package/src/ariaToAccessibilityMap.ts +2 -21
- package/src/index.ts +2 -2
- package/lib/typescript/__tests__/ariaToAccessibilityMap.test.d.ts +0 -1
- package/src/__tests__/ariaToAccessibilityMap.test.ts +0 -32
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useMapDomPropsToRN = exports.mapDomPropsToRN = void 0;
|
|
6
|
+
exports.useMapDomPropsToRN = exports.mapDomPropsToRN = exports.ariaToAccessibilityMap = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
@@ -55,36 +55,22 @@ const ariaToAccessibilityMap = {
|
|
|
55
55
|
'aria-valuetext': 'accessibilityValueText'
|
|
56
56
|
}; // Refer - https://necolas.github.io/react-native-web/docs/accessibility/
|
|
57
57
|
|
|
58
|
+
exports.ariaToAccessibilityMap = ariaToAccessibilityMap;
|
|
59
|
+
|
|
58
60
|
const mapDomPropsToRN = props => {
|
|
59
61
|
let newProps = { ...props
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
if (props.tabIndex === '0' || props.tabIndex === 0) {
|
|
63
|
-
newProps.focusable = true;
|
|
64
|
-
} // use the below hook for tabIndex
|
|
62
|
+
}; // use the below hook for tabIndex
|
|
65
63
|
// useMapDomPropsToRN
|
|
66
64
|
// if (props.tabIndex === '-1' || props.tabIndex === -1) {
|
|
67
65
|
// newProps.focusable = false;
|
|
68
66
|
// }
|
|
69
67
|
|
|
70
|
-
|
|
71
|
-
if (props.role) {
|
|
72
|
-
newProps.accessibilityRole = props.role;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
68
|
if (props.id) {
|
|
76
69
|
newProps.nativeID = props.id;
|
|
77
70
|
}
|
|
78
71
|
|
|
79
72
|
for (let key in props) {
|
|
80
|
-
|
|
81
|
-
if (key.indexOf('aria') > -1) {
|
|
82
|
-
if (ariaToAccessibilityMap[key]) {
|
|
83
|
-
newProps[ariaToAccessibilityMap[key]] = props[key];
|
|
84
|
-
} else {
|
|
85
|
-
console.warn('@react-native-aria/utils:: ', 'No equivalent mapping of ' + key + ' found in ariaToAccessibilityMap. Please raise a PR to support this attribute.');
|
|
86
|
-
}
|
|
87
|
-
} else if (key.indexOf('data-') > -1) {
|
|
73
|
+
if (key.indexOf('data-') > -1) {
|
|
88
74
|
if (!newProps.dataSet) {
|
|
89
75
|
newProps.dataSet = {};
|
|
90
76
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ariaToAccessibilityMap.ts"],"names":["ariaToAccessibilityMap","mapDomPropsToRN","props","newProps","
|
|
1
|
+
{"version":3,"sources":["ariaToAccessibilityMap.ts"],"names":["ariaToAccessibilityMap","mapDomPropsToRN","props","newProps","id","nativeID","key","indexOf","dataSet","split","useMapDomPropsToRN","ref","React","useEffect","current","tabIndex"],"mappings":";;;;;;;AAAA;;;;AAEO,MAAMA,sBAA2B,GAAG;AACzC,2BAAyB,+BADgB;AAEzC,iBAAe,qBAF0B;AAGzC,uBAAqB,2BAHoB;AAIzC,eAAa,mBAJ4B;AAKzC,kBAAgB,sBALyB;AAMzC,mBAAiB,0BANwB;AAOzC,mBAAiB,0BAPwB;AAQzC,kBAAgB,yBARyB;AASzC,mBAAiB,uBATwB;AAUzC,sBAAoB,0BAVqB;AAWzC,kBAAgB,sBAXyB;AAYzC,mBAAiB,uBAZwB;AAazC,uBAAqB,2BAboB;AAczC,mBAAiB,uBAdwB;AAezC,iBAAe,qBAf0B;AAgBzC,mBAAiB,uBAhBwB;AAiBzC,iBAAe,qBAjB0B;AAkBzC,kBAAgB,sBAlByB;AAmBzC,uBAAqB,2BAnBoB;AAoBzC,gBAAc,oBApB2B;AAqBzC,qBAAmB,yBArBsB;AAsBzC,eAAa,yBAtB4B;AAuBzC,gBAAc,oBAvB2B;AAwBzC,oBAAkB,wBAxBuB;AAyBzC,0BAAwB,8BAzBiB;AA0BzC,sBAAoB,0BA1BqB;AA2BzC,eAAa,mBA3B4B;AA4BzC,sBAAoB,0BA5BqB;AA6BzC,mBAAiB,uBA7BwB;AA8BzC,kBAAgB,sBA9ByB;AA+BzC,mBAAiB,uBA/BwB;AAgCzC,mBAAiB,uBAhCwB;AAiCzC,0BAAwB,8BAjCiB;AAkCzC,mBAAiB,uBAlCwB;AAmCzC,mBAAiB,uBAnCwB;AAoCzC,kBAAgB,sBApCyB;AAqCzC,mBAAiB,uBArCwB;AAsCzC,kBAAgB,sBAtCyB;AAuCzC,eAAa,mBAvC4B;AAwCzC,mBAAiB,uBAxCwB;AAyCzC,mBAAiB,uBAzCwB;AA0CzC,mBAAiB,uBA1CwB;AA2CzC,oBAAkB;AA3CuB,CAApC,C,CA8CP;;;;AACO,MAAMC,eAAe,GAAIC,KAAD,IAAgB;AAC7C,MAAIC,QAAa,GAAG,EAAE,GAAGD;AAAL,GAApB,CAD6C,CAG7C;AACA;AACA;AACA;AACA;;AAEA,MAAIA,KAAK,CAACE,EAAV,EAAc;AACZD,IAAAA,QAAQ,CAACE,QAAT,GAAoBH,KAAK,CAACE,EAA1B;AACD;;AAED,OAAK,IAAIE,GAAT,IAAgBJ,KAAhB,EAAuB;AACrB,QAAII,GAAG,CAACC,OAAJ,CAAY,OAAZ,IAAuB,CAAC,CAA5B,EAA+B;AAC7B,UAAI,CAACJ,QAAQ,CAACK,OAAd,EAAuB;AACrBL,QAAAA,QAAQ,CAACK,OAAT,GAAmB,EAAnB;AACD;;AAEDL,MAAAA,QAAQ,CAACK,OAAT,CAAiBF,GAAG,CAACG,KAAJ,CAAU,OAAV,EAAmB,CAAnB,CAAjB,IAA0CP,KAAK,CAACI,GAAD,CAA/C;AACD;AACF;;AAED,SAAOH,QAAP;AACD,CAxBM,C,CA0BP;AACA;AACA;;;;;AACO,MAAMO,kBAAkB,GAAG,CAACR,KAAD,EAAaS,GAAb,KAAqC;AACrEC,iBAAMC,SAAN,CAAgB,MAAM;AACpB,QAAIF,GAAG,CAACG,OAAR,EAAiB;AACfH,MAAAA,GAAG,CAACG,OAAJ,CAAYC,QAAZ,GAAuBb,KAAK,CAACa,QAA7B;AACD;AACF,GAJD,EAIG,CAACb,KAAK,CAACa,QAAP,CAJH;;AAMA,SAAOd,eAAe,CAACC,KAAD,CAAtB;AACD,CARM","sourcesContent":["import React, { RefObject } from 'react';\n\nexport const ariaToAccessibilityMap: any = {\n 'aria-activedescendant': 'accessibilityActiveDescendant',\n 'aria-atomic': 'accessibilityAtomic',\n 'aria-autocomplete': 'accessibilityAutoComplete',\n 'aria-busy': 'accessibilityBusy',\n 'aria-checked': 'accessibilityChecked',\n 'aria-colcount': 'accessibilityColumnCount',\n 'aria-colindex': 'accessibilityColumnIndex',\n 'aria-colspan': 'accessibilityColumnSpan',\n 'aria-controls': 'accessibilityControls',\n 'aria-describedby': 'accessibilityDescribedBy',\n 'aria-details': 'accessibilityDetails',\n 'aria-disabled': 'accessibilityDisabled',\n 'aria-errormessage': 'accessibilityErrorMessage',\n 'aria-expanded': 'accessibilityExpanded',\n 'aria-flowto': 'accessibilityFlowTo',\n 'aria-haspopup': 'accessibilityHasPopup',\n 'aria-hidden': 'accessibilityHidden',\n 'aria-invalid': 'accessibilityInvalid',\n 'aria-keyshortcuts': 'accessibilityKeyShortcuts',\n 'aria-label': 'accessibilityLabel',\n 'aria-labelledby': 'accessibilityLabelledBy',\n 'aria-live': 'accessibilityLiveRegion',\n 'aria-modal': 'accessibilityModal',\n 'aria-multiline': 'accessibilityMultiline',\n 'aria-multiselectable': 'accessibilityMultiSelectable',\n 'aria-orientation': 'accessibilityOrientation',\n 'aria-owns': 'accessibilityOwns',\n 'aria-placeholder': 'accessibilityPlaceholder',\n 'aria-posinset': 'accessibilityPosInSet',\n 'aria-pressed': 'accessibilityPressed',\n 'aria-readonly': 'accessibilityReadOnly',\n 'aria-required': 'accessibilityRequired',\n 'aria-roledescription': 'accessibilityRoleDescription',\n 'aria-rowcount': 'accessibilityRowCount',\n 'aria-rowindex': 'accessibilityRowIndex',\n 'aria-rowspan': 'accessibilityRowSpan',\n 'aria-selected': 'accessibilitySelected',\n 'aria-setsize': 'accessibilitySetSize',\n 'aria-sort': 'accessibilitySort',\n 'aria-valuemax': 'accessibilityValueMax',\n 'aria-valuemin': 'accessibilityValueMin',\n 'aria-valuenow': 'accessibilityValueNow',\n 'aria-valuetext': 'accessibilityValueText',\n};\n\n// Refer - https://necolas.github.io/react-native-web/docs/accessibility/\nexport const mapDomPropsToRN = (props: any) => {\n let newProps: any = { ...props };\n\n // use the below hook for tabIndex\n // useMapDomPropsToRN\n // if (props.tabIndex === '-1' || props.tabIndex === -1) {\n // newProps.focusable = false;\n // }\n\n if (props.id) {\n newProps.nativeID = props.id;\n }\n\n for (let key in props) {\n if (key.indexOf('data-') > -1) {\n if (!newProps.dataSet) {\n newProps.dataSet = {};\n }\n\n newProps.dataSet[key.split('data-')[1]] = props[key];\n }\n }\n\n return newProps;\n};\n\n// RN web currently doesn't allow setting tabIndex via props, so need to be set using setNativeProps or ref\n// https://github.com/necolas/react-native-web/issues/1916\n// https://github.com/necolas/react-native-web/issues/1099\nexport const useMapDomPropsToRN = (props: any, ref: RefObject<any>) => {\n React.useEffect(() => {\n if (ref.current) {\n ref.current.tabIndex = props.tabIndex;\n }\n }, [props.tabIndex]);\n\n return mapDomPropsToRN(props);\n};\n"]}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -85,9 +85,7 @@ const attachEventHandlersOnRef = (props, ref) => {
|
|
|
85
85
|
exports.attachEventHandlersOnRef = attachEventHandlersOnRef;
|
|
86
86
|
|
|
87
87
|
const getLabel = props => {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
let label = (_props$accessibilityL = props.accessibilityLabel) !== null && _props$accessibilityL !== void 0 ? _props$accessibilityL : props['aria-label'];
|
|
88
|
+
let label = props['aria-label'];
|
|
91
89
|
|
|
92
90
|
if (!label) {
|
|
93
91
|
label = typeof props.label === 'string' ? props.label : undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":["attachEventHandlersOnRef","props","ref","current","key","startsWith","toLowerCase","getLabel","label","
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["attachEventHandlersOnRef","props","ref","current","key","startsWith","toLowerCase","getLabel","label","undefined","isRTL","I18nManager","getConstants"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAsBA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAMA;;AA3BO,MAAMA,wBAAwB,GAAG,CAACC,KAAD,EAAaC,GAAb,KAA0B;AAChE,MAAIA,GAAG,IAAIA,GAAG,CAACC,OAAf,EAAwB;AACtB,SAAK,IAAIC,GAAT,IAAgBH,KAAhB,EAAuB;AACrB,UAAIG,GAAG,CAACC,UAAJ,CAAe,IAAf,CAAJ,EAA0B;AACxBH,QAAAA,GAAG,CAACC,OAAJ,CAAYC,GAAG,CAACE,WAAJ,EAAZ,IAAiCL,KAAK,CAACG,GAAD,CAAtC;AACD;AACF;AACF;AACF,CARM;;;;AAUA,MAAMG,QAAQ,GAAIN,KAAD,IAAgB;AACtC,MAAIO,KAAK,GAAGP,KAAK,CAAC,YAAD,CAAjB;;AAEA,MAAI,CAACO,KAAL,EAAY;AACVA,IAAAA,KAAK,GAAG,OAAOP,KAAK,CAACO,KAAb,KAAuB,QAAvB,GAAkCP,KAAK,CAACO,KAAxC,GAAgDC,SAAxD;AACD;;AAED,SAAOD,KAAP;AACD,CARM;;;;AAmBA,MAAME,KAAK,GAAG,MAAW;AAC9B;AACA,MAAIC,yBAAYD,KAAZ,KAAsBD,SAA1B,EAAqC;AACnC,WAAOE,yBAAYD,KAAnB;AACD,GAJ6B,CAM9B;;;AACA,MAAIC,yBAAYC,YAAhB,EAA8B;AAC5B;AACA,WAAOD,yBAAYC,YAAZ,GAA2BF,KAAlC;AACD;AACF,CAXM","sourcesContent":["import { I18nManager } from 'react-native';\n\nexport const attachEventHandlersOnRef = (props: any, ref: any) => {\n if (ref && ref.current) {\n for (let key in props) {\n if (key.startsWith('on')) {\n ref.current[key.toLowerCase()] = props[key];\n }\n }\n }\n};\n\nexport const getLabel = (props: any) => {\n let label = props['aria-label'];\n\n if (!label) {\n label = typeof props.label === 'string' ? props.label : undefined;\n }\n\n return label;\n};\n\nexport * from './ariaToAccessibilityMap';\nexport {\n useId,\n useLayoutEffect,\n mergeIds,\n mergeProps,\n} from '@react-aria/utils';\nexport { SSRProvider, useIsSSR } from '@react-aria/ssr';\n\nexport const isRTL = (): any => {\n // To support previous RN versions. Newer versions use below getConstants()\n if (I18nManager.isRTL !== undefined) {\n return I18nManager.isRTL;\n }\n\n // @ts-ignore - RN web only\n if (I18nManager.getConstants) {\n // @ts-ignore - RN web only\n return I18nManager.getConstants().isRTL;\n }\n};\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
const ariaToAccessibilityMap = {
|
|
2
|
+
export const ariaToAccessibilityMap = {
|
|
3
3
|
'aria-activedescendant': 'accessibilityActiveDescendant',
|
|
4
4
|
'aria-atomic': 'accessibilityAtomic',
|
|
5
5
|
'aria-autocomplete': 'accessibilityAutoComplete',
|
|
@@ -47,34 +47,18 @@ const ariaToAccessibilityMap = {
|
|
|
47
47
|
|
|
48
48
|
export const mapDomPropsToRN = props => {
|
|
49
49
|
let newProps = { ...props
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
if (props.tabIndex === '0' || props.tabIndex === 0) {
|
|
53
|
-
newProps.focusable = true;
|
|
54
|
-
} // use the below hook for tabIndex
|
|
50
|
+
}; // use the below hook for tabIndex
|
|
55
51
|
// useMapDomPropsToRN
|
|
56
52
|
// if (props.tabIndex === '-1' || props.tabIndex === -1) {
|
|
57
53
|
// newProps.focusable = false;
|
|
58
54
|
// }
|
|
59
55
|
|
|
60
|
-
|
|
61
|
-
if (props.role) {
|
|
62
|
-
newProps.accessibilityRole = props.role;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
56
|
if (props.id) {
|
|
66
57
|
newProps.nativeID = props.id;
|
|
67
58
|
}
|
|
68
59
|
|
|
69
60
|
for (let key in props) {
|
|
70
|
-
|
|
71
|
-
if (key.indexOf('aria') > -1) {
|
|
72
|
-
if (ariaToAccessibilityMap[key]) {
|
|
73
|
-
newProps[ariaToAccessibilityMap[key]] = props[key];
|
|
74
|
-
} else {
|
|
75
|
-
console.warn('@react-native-aria/utils:: ', 'No equivalent mapping of ' + key + ' found in ariaToAccessibilityMap. Please raise a PR to support this attribute.');
|
|
76
|
-
}
|
|
77
|
-
} else if (key.indexOf('data-') > -1) {
|
|
61
|
+
if (key.indexOf('data-') > -1) {
|
|
78
62
|
if (!newProps.dataSet) {
|
|
79
63
|
newProps.dataSet = {};
|
|
80
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ariaToAccessibilityMap.ts"],"names":["React","ariaToAccessibilityMap","mapDomPropsToRN","props","newProps","
|
|
1
|
+
{"version":3,"sources":["ariaToAccessibilityMap.ts"],"names":["React","ariaToAccessibilityMap","mapDomPropsToRN","props","newProps","id","nativeID","key","indexOf","dataSet","split","useMapDomPropsToRN","ref","useEffect","current","tabIndex"],"mappings":"AAAA,OAAOA,KAAP,MAAiC,OAAjC;AAEA,OAAO,MAAMC,sBAA2B,GAAG;AACzC,2BAAyB,+BADgB;AAEzC,iBAAe,qBAF0B;AAGzC,uBAAqB,2BAHoB;AAIzC,eAAa,mBAJ4B;AAKzC,kBAAgB,sBALyB;AAMzC,mBAAiB,0BANwB;AAOzC,mBAAiB,0BAPwB;AAQzC,kBAAgB,yBARyB;AASzC,mBAAiB,uBATwB;AAUzC,sBAAoB,0BAVqB;AAWzC,kBAAgB,sBAXyB;AAYzC,mBAAiB,uBAZwB;AAazC,uBAAqB,2BAboB;AAczC,mBAAiB,uBAdwB;AAezC,iBAAe,qBAf0B;AAgBzC,mBAAiB,uBAhBwB;AAiBzC,iBAAe,qBAjB0B;AAkBzC,kBAAgB,sBAlByB;AAmBzC,uBAAqB,2BAnBoB;AAoBzC,gBAAc,oBApB2B;AAqBzC,qBAAmB,yBArBsB;AAsBzC,eAAa,yBAtB4B;AAuBzC,gBAAc,oBAvB2B;AAwBzC,oBAAkB,wBAxBuB;AAyBzC,0BAAwB,8BAzBiB;AA0BzC,sBAAoB,0BA1BqB;AA2BzC,eAAa,mBA3B4B;AA4BzC,sBAAoB,0BA5BqB;AA6BzC,mBAAiB,uBA7BwB;AA8BzC,kBAAgB,sBA9ByB;AA+BzC,mBAAiB,uBA/BwB;AAgCzC,mBAAiB,uBAhCwB;AAiCzC,0BAAwB,8BAjCiB;AAkCzC,mBAAiB,uBAlCwB;AAmCzC,mBAAiB,uBAnCwB;AAoCzC,kBAAgB,sBApCyB;AAqCzC,mBAAiB,uBArCwB;AAsCzC,kBAAgB,sBAtCyB;AAuCzC,eAAa,mBAvC4B;AAwCzC,mBAAiB,uBAxCwB;AAyCzC,mBAAiB,uBAzCwB;AA0CzC,mBAAiB,uBA1CwB;AA2CzC,oBAAkB;AA3CuB,CAApC,C,CA8CP;;AACA,OAAO,MAAMC,eAAe,GAAIC,KAAD,IAAgB;AAC7C,MAAIC,QAAa,GAAG,EAAE,GAAGD;AAAL,GAApB,CAD6C,CAG7C;AACA;AACA;AACA;AACA;;AAEA,MAAIA,KAAK,CAACE,EAAV,EAAc;AACZD,IAAAA,QAAQ,CAACE,QAAT,GAAoBH,KAAK,CAACE,EAA1B;AACD;;AAED,OAAK,IAAIE,GAAT,IAAgBJ,KAAhB,EAAuB;AACrB,QAAII,GAAG,CAACC,OAAJ,CAAY,OAAZ,IAAuB,CAAC,CAA5B,EAA+B;AAC7B,UAAI,CAACJ,QAAQ,CAACK,OAAd,EAAuB;AACrBL,QAAAA,QAAQ,CAACK,OAAT,GAAmB,EAAnB;AACD;;AAEDL,MAAAA,QAAQ,CAACK,OAAT,CAAiBF,GAAG,CAACG,KAAJ,CAAU,OAAV,EAAmB,CAAnB,CAAjB,IAA0CP,KAAK,CAACI,GAAD,CAA/C;AACD;AACF;;AAED,SAAOH,QAAP;AACD,CAxBM,C,CA0BP;AACA;AACA;;AACA,OAAO,MAAMO,kBAAkB,GAAG,CAACR,KAAD,EAAaS,GAAb,KAAqC;AACrEZ,EAAAA,KAAK,CAACa,SAAN,CAAgB,MAAM;AACpB,QAAID,GAAG,CAACE,OAAR,EAAiB;AACfF,MAAAA,GAAG,CAACE,OAAJ,CAAYC,QAAZ,GAAuBZ,KAAK,CAACY,QAA7B;AACD;AACF,GAJD,EAIG,CAACZ,KAAK,CAACY,QAAP,CAJH;AAMA,SAAOb,eAAe,CAACC,KAAD,CAAtB;AACD,CARM","sourcesContent":["import React, { RefObject } from 'react';\n\nexport const ariaToAccessibilityMap: any = {\n 'aria-activedescendant': 'accessibilityActiveDescendant',\n 'aria-atomic': 'accessibilityAtomic',\n 'aria-autocomplete': 'accessibilityAutoComplete',\n 'aria-busy': 'accessibilityBusy',\n 'aria-checked': 'accessibilityChecked',\n 'aria-colcount': 'accessibilityColumnCount',\n 'aria-colindex': 'accessibilityColumnIndex',\n 'aria-colspan': 'accessibilityColumnSpan',\n 'aria-controls': 'accessibilityControls',\n 'aria-describedby': 'accessibilityDescribedBy',\n 'aria-details': 'accessibilityDetails',\n 'aria-disabled': 'accessibilityDisabled',\n 'aria-errormessage': 'accessibilityErrorMessage',\n 'aria-expanded': 'accessibilityExpanded',\n 'aria-flowto': 'accessibilityFlowTo',\n 'aria-haspopup': 'accessibilityHasPopup',\n 'aria-hidden': 'accessibilityHidden',\n 'aria-invalid': 'accessibilityInvalid',\n 'aria-keyshortcuts': 'accessibilityKeyShortcuts',\n 'aria-label': 'accessibilityLabel',\n 'aria-labelledby': 'accessibilityLabelledBy',\n 'aria-live': 'accessibilityLiveRegion',\n 'aria-modal': 'accessibilityModal',\n 'aria-multiline': 'accessibilityMultiline',\n 'aria-multiselectable': 'accessibilityMultiSelectable',\n 'aria-orientation': 'accessibilityOrientation',\n 'aria-owns': 'accessibilityOwns',\n 'aria-placeholder': 'accessibilityPlaceholder',\n 'aria-posinset': 'accessibilityPosInSet',\n 'aria-pressed': 'accessibilityPressed',\n 'aria-readonly': 'accessibilityReadOnly',\n 'aria-required': 'accessibilityRequired',\n 'aria-roledescription': 'accessibilityRoleDescription',\n 'aria-rowcount': 'accessibilityRowCount',\n 'aria-rowindex': 'accessibilityRowIndex',\n 'aria-rowspan': 'accessibilityRowSpan',\n 'aria-selected': 'accessibilitySelected',\n 'aria-setsize': 'accessibilitySetSize',\n 'aria-sort': 'accessibilitySort',\n 'aria-valuemax': 'accessibilityValueMax',\n 'aria-valuemin': 'accessibilityValueMin',\n 'aria-valuenow': 'accessibilityValueNow',\n 'aria-valuetext': 'accessibilityValueText',\n};\n\n// Refer - https://necolas.github.io/react-native-web/docs/accessibility/\nexport const mapDomPropsToRN = (props: any) => {\n let newProps: any = { ...props };\n\n // use the below hook for tabIndex\n // useMapDomPropsToRN\n // if (props.tabIndex === '-1' || props.tabIndex === -1) {\n // newProps.focusable = false;\n // }\n\n if (props.id) {\n newProps.nativeID = props.id;\n }\n\n for (let key in props) {\n if (key.indexOf('data-') > -1) {\n if (!newProps.dataSet) {\n newProps.dataSet = {};\n }\n\n newProps.dataSet[key.split('data-')[1]] = props[key];\n }\n }\n\n return newProps;\n};\n\n// RN web currently doesn't allow setting tabIndex via props, so need to be set using setNativeProps or ref\n// https://github.com/necolas/react-native-web/issues/1916\n// https://github.com/necolas/react-native-web/issues/1099\nexport const useMapDomPropsToRN = (props: any, ref: RefObject<any>) => {\n React.useEffect(() => {\n if (ref.current) {\n ref.current.tabIndex = props.tabIndex;\n }\n }, [props.tabIndex]);\n\n return mapDomPropsToRN(props);\n};\n"]}
|
package/lib/module/index.js
CHANGED
|
@@ -9,9 +9,7 @@ export const attachEventHandlersOnRef = (props, ref) => {
|
|
|
9
9
|
}
|
|
10
10
|
};
|
|
11
11
|
export const getLabel = props => {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
let label = (_props$accessibilityL = props.accessibilityLabel) !== null && _props$accessibilityL !== void 0 ? _props$accessibilityL : props['aria-label'];
|
|
12
|
+
let label = props['aria-label'];
|
|
15
13
|
|
|
16
14
|
if (!label) {
|
|
17
15
|
label = typeof props.label === 'string' ? props.label : undefined;
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":["I18nManager","attachEventHandlersOnRef","props","ref","current","key","startsWith","toLowerCase","getLabel","label","
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["I18nManager","attachEventHandlersOnRef","props","ref","current","key","startsWith","toLowerCase","getLabel","label","undefined","useId","useLayoutEffect","mergeIds","mergeProps","SSRProvider","useIsSSR","isRTL","getConstants"],"mappings":"AAAA,SAASA,WAAT,QAA4B,cAA5B;AAEA,OAAO,MAAMC,wBAAwB,GAAG,CAACC,KAAD,EAAaC,GAAb,KAA0B;AAChE,MAAIA,GAAG,IAAIA,GAAG,CAACC,OAAf,EAAwB;AACtB,SAAK,IAAIC,GAAT,IAAgBH,KAAhB,EAAuB;AACrB,UAAIG,GAAG,CAACC,UAAJ,CAAe,IAAf,CAAJ,EAA0B;AACxBH,QAAAA,GAAG,CAACC,OAAJ,CAAYC,GAAG,CAACE,WAAJ,EAAZ,IAAiCL,KAAK,CAACG,GAAD,CAAtC;AACD;AACF;AACF;AACF,CARM;AAUP,OAAO,MAAMG,QAAQ,GAAIN,KAAD,IAAgB;AACtC,MAAIO,KAAK,GAAGP,KAAK,CAAC,YAAD,CAAjB;;AAEA,MAAI,CAACO,KAAL,EAAY;AACVA,IAAAA,KAAK,GAAG,OAAOP,KAAK,CAACO,KAAb,KAAuB,QAAvB,GAAkCP,KAAK,CAACO,KAAxC,GAAgDC,SAAxD;AACD;;AAED,SAAOD,KAAP;AACD,CARM;AAUP,cAAc,0BAAd;AACA,SACEE,KADF,EAEEC,eAFF,EAGEC,QAHF,EAIEC,UAJF,QAKO,mBALP;AAMA,SAASC,WAAT,EAAsBC,QAAtB,QAAsC,iBAAtC;AAEA,OAAO,MAAMC,KAAK,GAAG,MAAW;AAC9B;AACA,MAAIjB,WAAW,CAACiB,KAAZ,KAAsBP,SAA1B,EAAqC;AACnC,WAAOV,WAAW,CAACiB,KAAnB;AACD,GAJ6B,CAM9B;;;AACA,MAAIjB,WAAW,CAACkB,YAAhB,EAA8B;AAC5B;AACA,WAAOlB,WAAW,CAACkB,YAAZ,GAA2BD,KAAlC;AACD;AACF,CAXM","sourcesContent":["import { I18nManager } from 'react-native';\n\nexport const attachEventHandlersOnRef = (props: any, ref: any) => {\n if (ref && ref.current) {\n for (let key in props) {\n if (key.startsWith('on')) {\n ref.current[key.toLowerCase()] = props[key];\n }\n }\n }\n};\n\nexport const getLabel = (props: any) => {\n let label = props['aria-label'];\n\n if (!label) {\n label = typeof props.label === 'string' ? props.label : undefined;\n }\n\n return label;\n};\n\nexport * from './ariaToAccessibilityMap';\nexport {\n useId,\n useLayoutEffect,\n mergeIds,\n mergeProps,\n} from '@react-aria/utils';\nexport { SSRProvider, useIsSSR } from '@react-aria/ssr';\n\nexport const isRTL = (): any => {\n // To support previous RN versions. Newer versions use below getConstants()\n if (I18nManager.isRTL !== undefined) {\n return I18nManager.isRTL;\n }\n\n // @ts-ignore - RN web only\n if (I18nManager.getConstants) {\n // @ts-ignore - RN web only\n return I18nManager.getConstants().isRTL;\n }\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-native-aria/utils",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.9-alpha.0",
|
|
4
4
|
"description": "mono repo setup with bob",
|
|
5
5
|
"main": "lib/commonjs/index",
|
|
6
6
|
"module": "lib/module/index",
|
|
@@ -52,8 +52,8 @@
|
|
|
52
52
|
"react-native": "*"
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
|
-
"@react-aria/
|
|
56
|
-
"@react-aria/
|
|
55
|
+
"@react-aria/ssr": "^3.0.1",
|
|
56
|
+
"@react-aria/utils": "^3.3.0"
|
|
57
57
|
},
|
|
58
58
|
"jest": {
|
|
59
59
|
"preset": "react-native",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { RefObject } from 'react';
|
|
2
2
|
|
|
3
|
-
const ariaToAccessibilityMap: any = {
|
|
3
|
+
export const ariaToAccessibilityMap: any = {
|
|
4
4
|
'aria-activedescendant': 'accessibilityActiveDescendant',
|
|
5
5
|
'aria-atomic': 'accessibilityAtomic',
|
|
6
6
|
'aria-autocomplete': 'accessibilityAutoComplete',
|
|
@@ -50,37 +50,18 @@ const ariaToAccessibilityMap: any = {
|
|
|
50
50
|
export const mapDomPropsToRN = (props: any) => {
|
|
51
51
|
let newProps: any = { ...props };
|
|
52
52
|
|
|
53
|
-
if (props.tabIndex === '0' || props.tabIndex === 0) {
|
|
54
|
-
newProps.focusable = true;
|
|
55
|
-
}
|
|
56
53
|
// use the below hook for tabIndex
|
|
57
54
|
// useMapDomPropsToRN
|
|
58
55
|
// if (props.tabIndex === '-1' || props.tabIndex === -1) {
|
|
59
56
|
// newProps.focusable = false;
|
|
60
57
|
// }
|
|
61
58
|
|
|
62
|
-
if (props.role) {
|
|
63
|
-
newProps.accessibilityRole = props.role;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
59
|
if (props.id) {
|
|
67
60
|
newProps.nativeID = props.id;
|
|
68
61
|
}
|
|
69
62
|
|
|
70
63
|
for (let key in props) {
|
|
71
|
-
|
|
72
|
-
if (key.indexOf('aria') > -1) {
|
|
73
|
-
if (ariaToAccessibilityMap[key]) {
|
|
74
|
-
newProps[ariaToAccessibilityMap[key]] = props[key];
|
|
75
|
-
} else {
|
|
76
|
-
console.warn(
|
|
77
|
-
'@react-native-aria/utils:: ',
|
|
78
|
-
'No equivalent mapping of ' +
|
|
79
|
-
key +
|
|
80
|
-
' found in ariaToAccessibilityMap. Please raise a PR to support this attribute.'
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
} else if (key.indexOf('data-') > -1) {
|
|
64
|
+
if (key.indexOf('data-') > -1) {
|
|
84
65
|
if (!newProps.dataSet) {
|
|
85
66
|
newProps.dataSet = {};
|
|
86
67
|
}
|
package/src/index.ts
CHANGED
|
@@ -11,7 +11,7 @@ export const attachEventHandlersOnRef = (props: any, ref: any) => {
|
|
|
11
11
|
};
|
|
12
12
|
|
|
13
13
|
export const getLabel = (props: any) => {
|
|
14
|
-
let label = props
|
|
14
|
+
let label = props['aria-label'];
|
|
15
15
|
|
|
16
16
|
if (!label) {
|
|
17
17
|
label = typeof props.label === 'string' ? props.label : undefined;
|
|
@@ -29,7 +29,7 @@ export {
|
|
|
29
29
|
} from '@react-aria/utils';
|
|
30
30
|
export { SSRProvider, useIsSSR } from '@react-aria/ssr';
|
|
31
31
|
|
|
32
|
-
export const isRTL = () => {
|
|
32
|
+
export const isRTL = (): any => {
|
|
33
33
|
// To support previous RN versions. Newer versions use below getConstants()
|
|
34
34
|
if (I18nManager.isRTL !== undefined) {
|
|
35
35
|
return I18nManager.isRTL;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { mapDomPropsToRN } from '../ariaToAccessibilityMap';
|
|
2
|
-
|
|
3
|
-
describe('mapDomPropsToRN', () => {
|
|
4
|
-
test('it maps aria attributes to react native', () => {
|
|
5
|
-
const props = {
|
|
6
|
-
'aria-pressed': true,
|
|
7
|
-
'aria-haspopup': 'list',
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
expect(mapDomPropsToRN(props)).toEqual({
|
|
11
|
-
...props,
|
|
12
|
-
accessibilityPressed: true,
|
|
13
|
-
accessibilityHasPopup: 'list',
|
|
14
|
-
});
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
test('it converts dom props to RN props', () => {
|
|
18
|
-
const props = {
|
|
19
|
-
id: 'menu-#12',
|
|
20
|
-
role: 'menu',
|
|
21
|
-
tabIndex: 0,
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
expect(mapDomPropsToRN(props)).toEqual({
|
|
25
|
-
...props,
|
|
26
|
-
|
|
27
|
-
nativeID: 'menu-#12',
|
|
28
|
-
accessibilityRole: 'menu',
|
|
29
|
-
focusable: true,
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
});
|