Skip to content

Commit 20beefe

Browse files
Daksh BhardwajOlimpiaZurek
Daksh Bhardwaj
authored and
OlimpiaZurek
committed
feat: added accessibility value aliases (facebook#34535)
Summary: This adds aliasing for accessibility Value, it's used as requested on facebook#34424. - [aria-valuemax](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) to equivalent [accessibilityValue.max](https://reactnative.dev/docs/accessibility#accessibilityvalue) - [aria-valuemin](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) to equivalent [accessibilityValue.min](https://reactnative.dev/docs/accessibility#accessibilityvalue) - [aria-valuenow](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow) to equivalent [accessibilityValue.now](https://reactnative.dev/docs/accessibility#accessibilityvalue) - [aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) to equivalent [accessibilityValue.text](https://reactnative.dev/docs/accessibility#accessibilityvalue) ## Changelog [General] [Added] - Add `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext` as alias prop to `TouchableOpacity`, `View`, `Pressable` `TouchableHighlight` `TouchableBounce` `TouchableWithoutFeedback` `TouchableOpacity` components Pull Request resolved: facebook#34535 Test Plan: - Enable `talkback`. - Open the RNTester app and navigate to the Api's tab - Go to the `fake Slider Example for Accessibility Value `modes section <Image src="https://user-images.githubusercontent.com/22423684/187472543-05200d8d-2742-4096-a56c-41f81b440a97.png" height="600" width="300" /> Reviewed By: cipolleschi Differential Revision: D39206362 Pulled By: jacdebug fbshipit-source-id: e7ed263badac789d529dd21e961cda5302b031e3
1 parent e3cc890 commit 20beefe

File tree

14 files changed

+444
-5
lines changed

14 files changed

+444
-5
lines changed

‎Libraries/Components/Pressable/Pressable.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@ type Props = $ReadOnly<{|
5050
accessibilityRole?: ?AccessibilityRole,
5151
accessibilityState?: ?AccessibilityState,
5252
accessibilityValue?: ?AccessibilityValue,
53+
'aria-valuemax'?: AccessibilityValue['max'],
54+
'aria-valuemin'?: AccessibilityValue['min'],
55+
'aria-valuenow'?: AccessibilityValue['now'],
56+
'aria-valuetext'?: AccessibilityValue['text'],
5357
accessibilityViewIsModal?: ?boolean,
5458
accessible?: ?boolean,
5559

@@ -240,6 +244,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
240244
_accessibilityState =
241245
disabled != null ? {..._accessibilityState, disabled} : _accessibilityState;
242246

247+
const accessibilityValue = {
248+
max: props['aria-valuemax'] ?? props.accessibilityValue?.max,
249+
min: props['aria-valuemin'] ?? props.accessibilityValue?.min,
250+
now: props['aria-valuenow'] ?? props.accessibilityValue?.now,
251+
text: props['aria-valuetext'] ?? props.accessibilityValue?.text,
252+
};
253+
243254
const accessibilityLiveRegion =
244255
ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion;
245256

@@ -250,6 +261,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
250261
accessibilityLiveRegion,
251262
accessibilityState: _accessibilityState,
252263
focusable: focusable !== false,
264+
accessibilityValue,
253265
hitSlop,
254266
};
255267

‎Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@ exports[`<Pressable /> should render as expected: should deep render when mocked
1111
"selected": undefined,
1212
}
1313
}
14+
accessibilityValue={
15+
Object {
16+
"max": undefined,
17+
"min": undefined,
18+
"now": undefined,
19+
"text": undefined,
20+
}
21+
}
1422
accessible={true}
1523
collapsable={false}
1624
focusable={true}
@@ -39,6 +47,14 @@ exports[`<Pressable /> should render as expected: should deep render when not mo
3947
"selected": undefined,
4048
}
4149
}
50+
accessibilityValue={
51+
Object {
52+
"max": undefined,
53+
"min": undefined,
54+
"now": undefined,
55+
"text": undefined,
56+
}
57+
}
4258
accessible={true}
4359
collapsable={false}
4460
focusable={true}
@@ -79,6 +95,14 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
7995
"selected": undefined,
8096
}
8197
}
98+
accessibilityValue={
99+
Object {
100+
"max": undefined,
101+
"min": undefined,
102+
"now": undefined,
103+
"text": undefined,
104+
}
105+
}
82106
accessible={true}
83107
collapsable={false}
84108
focusable={true}
@@ -107,6 +131,14 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
107131
"selected": undefined,
108132
}
109133
}
134+
accessibilityValue={
135+
Object {
136+
"max": undefined,
137+
"min": undefined,
138+
"now": undefined,
139+
"text": undefined,
140+
}
141+
}
110142
accessible={true}
111143
collapsable={false}
112144
focusable={true}
@@ -151,6 +183,14 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
151183
"selected": undefined,
152184
}
153185
}
186+
accessibilityValue={
187+
Object {
188+
"max": undefined,
189+
"min": undefined,
190+
"now": undefined,
191+
"text": undefined,
192+
}
193+
}
154194
accessible={true}
155195
collapsable={false}
156196
focusable={true}
@@ -179,6 +219,14 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
179219
"selected": undefined,
180220
}
181221
}
222+
accessibilityValue={
223+
Object {
224+
"max": undefined,
225+
"min": undefined,
226+
"now": undefined,
227+
"text": undefined,
228+
}
229+
}
182230
accessible={true}
183231
collapsable={false}
184232
focusable={true}
@@ -225,6 +273,14 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
225273
"selected": undefined,
226274
}
227275
}
276+
accessibilityValue={
277+
Object {
278+
"max": undefined,
279+
"min": undefined,
280+
"now": undefined,
281+
"text": undefined,
282+
}
283+
}
228284
accessible={true}
229285
collapsable={false}
230286
focusable={true}
@@ -253,6 +309,14 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
253309
"selected": undefined,
254310
}
255311
}
312+
accessibilityValue={
313+
Object {
314+
"max": undefined,
315+
"min": undefined,
316+
"now": undefined,
317+
"text": undefined,
318+
}
319+
}
256320
accessible={true}
257321
collapsable={false}
258322
focusable={true}
@@ -307,6 +371,14 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
307371
"selected": undefined,
308372
}
309373
}
374+
accessibilityValue={
375+
Object {
376+
"max": undefined,
377+
"min": undefined,
378+
"now": undefined,
379+
"text": undefined,
380+
}
381+
}
310382
accessible={true}
311383
collapsable={false}
312384
focusable={true}
@@ -335,6 +407,14 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
335407
"selected": undefined,
336408
}
337409
}
410+
accessibilityValue={
411+
Object {
412+
"max": undefined,
413+
"min": undefined,
414+
"now": undefined,
415+
"text": undefined,
416+
}
417+
}
338418
accessible={true}
339419
collapsable={false}
340420
focusable={true}

‎Libraries/Components/Touchable/TouchableBounce.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,13 @@ class TouchableBounce extends React.Component<Props, State> {
146146
this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
147147
};
148148

149+
const accessibilityValue = {
150+
max: this.props['aria-valuemax'] ?? this.props.accessibilityValue?.max,
151+
min: this.props['aria-valuemin'] ?? this.props.accessibilityValue?.min,
152+
now: this.props['aria-valuenow'] ?? this.props.accessibilityValue?.now,
153+
text: this.props['aria-valuetext'] ?? this.props.accessibilityValue?.text,
154+
};
155+
149156
return (
150157
<Animated.View
151158
style={[{transform: [{scale: this.state.scale}]}, this.props.style]}
@@ -157,7 +164,7 @@ class TouchableBounce extends React.Component<Props, State> {
157164
accessibilityState={_accessibilityState}
158165
accessibilityActions={this.props.accessibilityActions}
159166
onAccessibilityAction={this.props.onAccessibilityAction}
160-
accessibilityValue={this.props.accessibilityValue}
167+
accessibilityValue={accessibilityValue}
161168
accessibilityLiveRegion={accessibilityLiveRegion}
162169
importantForAccessibility={
163170
this.props['aria-hidden'] === true

‎Libraries/Components/Touchable/TouchableHighlight.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -290,10 +290,19 @@ class TouchableHighlight extends React.Component<Props, State> {
290290
disabled: this.props.disabled,
291291
}
292292
: this.props.accessibilityState;
293+
294+
const accessibilityValue = {
295+
max: this.props['aria-valuemax'] ?? this.props.accessibilityValue?.max,
296+
min: this.props['aria-valuemin'] ?? this.props.accessibilityValue?.min,
297+
now: this.props['aria-valuenow'] ?? this.props.accessibilityValue?.now,
298+
text: this.props['aria-valuetext'] ?? this.props.accessibilityValue?.text,
299+
};
300+
293301
const accessibilityLiveRegion =
294302
this.props['aria-live'] === 'off'
295303
? 'none'
296304
: this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
305+
297306
return (
298307
<View
299308
accessible={this.props.accessible !== false}
@@ -302,7 +311,7 @@ class TouchableHighlight extends React.Component<Props, State> {
302311
accessibilityLanguage={this.props.accessibilityLanguage}
303312
accessibilityRole={this.props.accessibilityRole}
304313
accessibilityState={accessibilityState}
305-
accessibilityValue={this.props.accessibilityValue}
314+
accessibilityValue={accessibilityValue}
306315
accessibilityActions={this.props.accessibilityActions}
307316
onAccessibilityAction={this.props.onAccessibilityAction}
308317
importantForAccessibility={

‎Libraries/Components/Touchable/TouchableNativeFeedback.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,13 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
273273
}
274274
: _accessibilityState;
275275

276+
const accessibilityValue = {
277+
max: this.props['aria-valuemax'] ?? this.props.accessibilityValue?.max,
278+
min: this.props['aria-valuemin'] ?? this.props.accessibilityValue?.min,
279+
now: this.props['aria-valuenow'] ?? this.props.accessibilityValue?.now,
280+
text: this.props['aria-valuetext'] ?? this.props.accessibilityValue?.text,
281+
};
282+
276283
const accessibilityLiveRegion =
277284
this.props['aria-live'] === 'off'
278285
? 'none'
@@ -296,7 +303,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
296303
accessibilityState: _accessibilityState,
297304
accessibilityActions: this.props.accessibilityActions,
298305
onAccessibilityAction: this.props.onAccessibilityAction,
299-
accessibilityValue: this.props.accessibilityValue,
306+
accessibilityValue: accessibilityValue,
300307
importantForAccessibility:
301308
this.props['aria-hidden'] === true
302309
? 'no-hide-descendants'

‎Libraries/Components/Touchable/TouchableOpacity.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,13 @@ class TouchableOpacity extends React.Component<Props, State> {
235235
}
236236
: _accessibilityState;
237237

238+
const accessibilityValue = {
239+
max: this.props['aria-valuemax'] ?? this.props.accessibilityValue?.max,
240+
min: this.props['aria-valuemin'] ?? this.props.accessibilityValue?.min,
241+
now: this.props['aria-valuenow'] ?? this.props.accessibilityValue?.now,
242+
text: this.props['aria-valuetext'] ?? this.props.accessibilityValue?.text,
243+
};
244+
238245
const accessibilityLiveRegion =
239246
this.props['aria-live'] === 'off'
240247
? 'none'
@@ -250,7 +257,7 @@ class TouchableOpacity extends React.Component<Props, State> {
250257
accessibilityState={_accessibilityState}
251258
accessibilityActions={this.props.accessibilityActions}
252259
onAccessibilityAction={this.props.onAccessibilityAction}
253-
accessibilityValue={this.props.accessibilityValue}
260+
accessibilityValue={accessibilityValue}
254261
importantForAccessibility={
255262
this.props['aria-hidden'] === true
256263
? 'no-hide-descendants'

‎Libraries/Components/Touchable/TouchableWithoutFeedback.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@ type Props = $ReadOnly<{|
4040
accessibilityRole?: ?AccessibilityRole,
4141
accessibilityState?: ?AccessibilityState,
4242
accessibilityValue?: ?AccessibilityValue,
43+
'aria-valuemax'?: AccessibilityValue['max'],
44+
'aria-valuemin'?: AccessibilityValue['min'],
45+
'aria-valuenow'?: AccessibilityValue['now'],
46+
'aria-valuetext'?: AccessibilityValue['text'],
4347
accessibilityViewIsModal?: ?boolean,
4448
accessible?: ?boolean,
4549
/**
@@ -91,6 +95,10 @@ const PASSTHROUGH_PROPS = [
9195
'accessibilityLiveRegion',
9296
'accessibilityRole',
9397
'accessibilityValue',
98+
'aria-valuemax',
99+
'aria-valuemin',
100+
'aria-valuenow',
101+
'aria-valuetext',
94102
'accessibilityViewIsModal',
95103
'hitSlop',
96104
'importantForAccessibility',

‎Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22

33
exports[`TouchableHighlight renders correctly 1`] = `
44
<View
5+
accessibilityValue={
6+
Object {
7+
"max": undefined,
8+
"min": undefined,
9+
"now": undefined,
10+
"text": undefined,
11+
}
12+
}
513
accessible={true}
614
focusable={false}
715
onClick={[Function]}
@@ -26,6 +34,14 @@ exports[`TouchableHighlight with disabled state should be disabled when disabled
2634
"disabled": true,
2735
}
2836
}
37+
accessibilityValue={
38+
Object {
39+
"max": undefined,
40+
"min": undefined,
41+
"now": undefined,
42+
"text": undefined,
43+
}
44+
}
2945
accessible={true}
3046
focusable={false}
3147
onClick={[Function]}
@@ -47,6 +63,14 @@ exports[`TouchableHighlight with disabled state should be disabled when disabled
4763
"disabled": true,
4864
}
4965
}
66+
accessibilityValue={
67+
Object {
68+
"max": undefined,
69+
"min": undefined,
70+
"now": undefined,
71+
"text": undefined,
72+
}
73+
}
5074
accessible={true}
5175
focusable={false}
5276
onClick={[Function]}
@@ -68,6 +92,14 @@ exports[`TouchableHighlight with disabled state should disable button when acces
6892
"disabled": true,
6993
}
7094
}
95+
accessibilityValue={
96+
Object {
97+
"max": undefined,
98+
"min": undefined,
99+
"now": undefined,
100+
"text": undefined,
101+
}
102+
}
71103
accessible={true}
72104
focusable={false}
73105
onClick={[Function]}
@@ -90,6 +122,14 @@ exports[`TouchableHighlight with disabled state should keep accessibilityState w
90122
"disabled": true,
91123
}
92124
}
125+
accessibilityValue={
126+
Object {
127+
"max": undefined,
128+
"min": undefined,
129+
"now": undefined,
130+
"text": undefined,
131+
}
132+
}
93133
accessible={true}
94134
focusable={false}
95135
onClick={[Function]}
@@ -111,6 +151,14 @@ exports[`TouchableHighlight with disabled state should overwrite accessibilitySt
111151
"disabled": true,
112152
}
113153
}
154+
accessibilityValue={
155+
Object {
156+
"max": undefined,
157+
"min": undefined,
158+
"now": undefined,
159+
"text": undefined,
160+
}
161+
}
114162
accessible={true}
115163
focusable={false}
116164
onClick={[Function]}

0 commit comments

Comments
 (0)