diff --git a/packages/block-editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/block-editor/src/components/mobile/bottom-sheet/cell.native.js index 9acc94bbfb3bb..689aeeb38dbec 100644 --- a/packages/block-editor/src/components/mobile/bottom-sheet/cell.native.js +++ b/packages/block-editor/src/components/mobile/bottom-sheet/cell.native.js @@ -2,12 +2,14 @@ * External dependencies */ import { TouchableOpacity, Text, View, TextInput, I18nManager } from 'react-native'; +import { isEmpty } from 'lodash'; /** * WordPress dependencies */ import { Dashicon } from '@wordpress/components'; import { Component } from '@wordpress/element'; +import { __, _x, sprintf } from '@wordpress/i18n'; /** * Internal dependencies @@ -31,6 +33,9 @@ export default class Cell extends Component { render() { const { + accessibilityLabel, + accessibilityHint, + accessibilityRole, onPress, label, value, @@ -118,8 +123,38 @@ export default class Cell extends Component { ); }; + const getAccessibilityLabel = () => { + if ( accessibilityLabel || ! showValue ) { + return accessibilityLabel || label; + } + return isEmpty( value ) ? + sprintf( + /* translators: accessibility text. Empty state of a inline textinput cell. %s: The cell's title */ + _x( '%s. Empty', 'inline textinput cell' ), + label + ) : + // Separating by ',' is necessary to make a pause on urls (non-capitalized text) + sprintf( + /* translators: accessibility text. Inline textinput title and value.%1: Cell title, %2: cell value. */ + _x( '%1$s, %2$s', 'inline textinput cell' ), + label, + value + ); + }; + return ( - + { icon && ( diff --git a/packages/block-editor/src/components/mobile/bottom-sheet/index.native.js b/packages/block-editor/src/components/mobile/bottom-sheet/index.native.js index fbda22cc7aa66..6caed0b1da485 100644 --- a/packages/block-editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/block-editor/src/components/mobile/bottom-sheet/index.native.js @@ -17,6 +17,7 @@ import styles from './styles.scss'; import Button from './button'; import Cell from './cell'; import PickerCell from './picker-cell'; +import SwitchCell from './switch-cell'; import KeyboardAvoidingView from './keyboard-avoiding-view'; class BottomSheet extends Component { @@ -162,5 +163,6 @@ BottomSheet.getWidth = getWidth; BottomSheet.Button = Button; BottomSheet.Cell = Cell; BottomSheet.PickerCell = PickerCell; +BottomSheet.SwitchCell = SwitchCell; export default BottomSheet; diff --git a/packages/block-editor/src/components/mobile/bottom-sheet/switch-cell.native.js b/packages/block-editor/src/components/mobile/bottom-sheet/switch-cell.native.js new file mode 100644 index 0000000000000..2682b82668c60 --- /dev/null +++ b/packages/block-editor/src/components/mobile/bottom-sheet/switch-cell.native.js @@ -0,0 +1,57 @@ + +/** + * External dependencies + */ +import { Switch } from 'react-native'; +/** + * WordPress dependencies + */ +import { __, _x, sprintf } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import Cell from './cell'; + +export default function SwitchCell( props ) { + const { + value, + onValueChange, + ...cellProps + } = props; + + const onPress = () => { + onValueChange( ! value ); + }; + + const accessibilityLabel = value ? + sprintf( + /* translators: accessibility text. Switch setting ON state. %s: Switch title. */ + _x( '%s. On', 'switch control' ), + cellProps.label + ) : + sprintf( + /* translators: accessibility text. Switch setting OFF state. %s: Switch title. */ + _x( '%s. Off', 'switch control' ), + cellProps.label + ); + + return ( + + + + ); +} diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 93e21246f5e74..6037814912ff6 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -197,6 +197,7 @@ class ImageEdit extends React.Component { onChangeValue={ this.onSetLinkDestination } autoCapitalize="none" autoCorrect={ false } + keyboardType="url" /> - { /* eslint-disable jsx-a11y/no-autofocus */ } - - { /* eslint-enable jsx-a11y/no-autofocus */ } + { /* eslint-disable jsx-a11y/no-autofocus */ + + /* eslint-enable jsx-a11y/no-autofocus */ } - - - + value={ this.state.opensInNewWindow } + onValueChange={ this.onChangeOpensInNewWindow } + separatorType={ 'fullWidth' } + />