Skip to content
Permalink
Browse files
Support for accessibility Label prop to the Picker component (#27342)
Summary:
With a Picker we would like to allow accessibility labels to be passed as a prop for situations where we want go give more detail. For example if we have a number picker that will be used for a timer instead of just saying 3, we might want to say 3 hours.

## Changelog
[General] [Added] - Picker test with an accessibility label prop
[General] [Added] - Support for accessibility Label prop to the Picker component
Pull Request resolved: #27342

Test Plan: Test plan is testing in RNTester making sure the examples work

Differential Revision: D18770184

Pulled By: hramos

fbshipit-source-id: e6f8ab4a9c50f3fb46342198441ecc71394913d3
  • Loading branch information
KevinGVargas authored and facebook-github-bot committed Dec 18, 2019
1 parent 973253a commit 0a525b6d9d2a88dddf24b85a2485b928fca23b16
Show file tree
Hide file tree
Showing 6 changed files with 46 additions and 1 deletion.
@@ -106,6 +106,10 @@ type PickerProps = $ReadOnly<{|
* Used to locate this view in end-to-end tests.
*/
testID?: ?string,
/**
* The string used for the accessibility label. Will be read once focused on the picker but not on change.
*/
accessibilityLabel?: ?string,
|}>;

/**
@@ -48,6 +48,7 @@ type Props = $ReadOnly<{|
onChange?: ?(event: PickerIOSChangeEvent) => mixed,
onValueChange?: ?(itemValue: string | number, itemIndex: number) => mixed,
selectedValue: ?(number | string),
accessibilityLabel?: ?string,
|}>;

type State = {|
@@ -106,6 +107,7 @@ class PickerIOS extends React.Component<Props, State> {
items={this.state.items}
selectedIndex={this.state.selectedIndex}
onChange={this._onChange}
accessibilityLabel={this.props.accessibilityLabel}
/>
</View>
);
@@ -39,6 +39,7 @@ type NativeProps = $ReadOnly<{|
selectedIndex: number,
style?: ?TextStyleProp,
testID?: ?string,
accessibilityLabel?: ?string,
|}>;

type ComponentType = HostComponent<NativeProps>;
@@ -125,6 +125,25 @@ class ColorPickerExample extends React.Component<{...}, ColorState> {
);
}
}
class AccessibilityLabelPickerExample extends React.Component<{}, State> {
state: State = {
value: '3',
};

render(): React.Node {
return (
<Picker
accessibilityLabel={this.state.value + 'Hours'}
style={styles.picker}
selectedValue={this.state.value}
onValueChange={v => this.setState({value: v})}>
<Item label="1" value="1" />
<Item label="2" value="2" />
<Item label="3" value="3" />
</Picker>
);
}
}

const styles = StyleSheet.create({
picker: {
@@ -160,6 +179,12 @@ exports.examples = [
return <PromptPickerExample />;
},
},
{
title: 'Accessibility Label pickers',
render: function(): React.Element<typeof AccessibilityLabelPickerExample> {
return <AccessibilityLabelPickerExample />;
},
},
{
title: 'Picker with no listener',
render: function(): React.Element<typeof PromptPickerExample> {
@@ -186,4 +211,10 @@ exports.examples = [
return <ColorPickerExample />;
},
},
{
title: 'AccessibilityLabel pickers',
render: function(): React.Element<typeof AccessibilityLabelPickerExample> {
return <AccessibilityLabelPickerExample />;
},
},
];
@@ -10,7 +10,7 @@
#import "RCTConvert.h"
#import "RCTUtils.h"

@interface RCTPicker() <UIPickerViewDataSource, UIPickerViewDelegate>
@interface RCTPicker() <UIPickerViewDataSource, UIPickerViewDelegate, UIPickerViewAccessibilityDelegate>
@end

@implementation RCTPicker
@@ -109,4 +109,10 @@ - (void)pickerView:(__unused UIPickerView *)pickerView
}
}

#pragma mark - UIPickerViewAccessibilityDelegate protocol

- (NSString *)pickerView:(UIPickerView *)pickerView accessibilityLabelForComponent:(NSInteger)component{
return super.accessibilityLabel;
}

@end
@@ -23,6 +23,7 @@ - (UIView *)view

RCT_EXPORT_VIEW_PROPERTY(items, NSArray<NSDictionary *>)
RCT_EXPORT_VIEW_PROPERTY(selectedIndex, NSInteger)
RCT_REMAP_VIEW_PROPERTY(accessibilityLabel, reactAccessibilityElement.accessibilityLabel, NSString)
RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
RCT_EXPORT_VIEW_PROPERTY(color, UIColor)
RCT_EXPORT_VIEW_PROPERTY(textAlign, NSTextAlignment)

0 comments on commit 0a525b6

Please sign in to comment.