Skip to content

Commit

Permalink
[RNMobile] Search Block: Add UI Tests and make available to productio…
Browse files Browse the repository at this point in the history 
…n! (#30783)
  • Loading branch information
@AmandaRiu
AmandaRiu authored Apr 26, 2021
1 parent a542c0d commit 6f93825
Show file tree
Hide file tree
Showing 7 changed files with 361 additions and 41 deletions.
2 changes: 1 addition & 1 deletion packages/block-library/src/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ export const registerCoreBlocks = () => {
file,
audio,
devOnly( reusableBlock ),
devOnly( search ),
search,
devOnly( embed ),
].forEach( registerBlock );

Expand Down
108 changes: 92 additions & 16 deletions packages/block-library/src/search/edit.native.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { View } from 'react-native';
import { View, AccessibilityInfo } from 'react-native';
import classnames from 'classnames';

/**
Expand Down Expand Up @@ -57,6 +57,9 @@ export default function SearchEdit( {
);
const [ isLongButton, setIsLongButton ] = useState( false );
const [ buttonWidth, setButtonWidth ] = useState( MIN_BUTTON_WIDTH );
const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
false
);

const textInputRef = useRef( null );

Expand All @@ -69,6 +72,34 @@ export default function SearchEdit( {
buttonText,
} = attributes;

/*
* Check if screenreader is enabled and save to state. This is important for
* properly creating accessibilityLabel text.
*/
useEffect( () => {
AccessibilityInfo.addEventListener(
'screenReaderChanged',
handleScreenReaderToggled
);

AccessibilityInfo.isScreenReaderEnabled().then(
( screenReaderEnabled ) => {
setIsScreenReaderEnabled( screenReaderEnabled );
}
);

return () => {
AccessibilityInfo.removeEventListener(
'screenReaderChanged',
handleScreenReaderToggled
);
};
}, [] );

const handleScreenReaderToggled = ( screenReaderEnabled ) => {
setIsScreenReaderEnabled( screenReaderEnabled );
};

/*
* Called when the value of isSelected changes. Blurs the PlainText component
* used by the placeholder when this block loses focus.
Expand Down Expand Up @@ -204,24 +235,67 @@ export default function SearchEdit( {
isLongButton && { flexDirection: 'column' },
];

const getPlaceholderAccessibilityLabel = () => {
/**
* If a screenreader is enabled, create a descriptive label for this field. If
* not, return a label that is used during automated UI tests.
*
* @return {string} The accessibilityLabel for the Search Button
*/
const getAccessibilityLabelForButton = () => {
if ( ! isScreenReaderEnabled ) {
return 'search-block-button';
}

return `${ __(
'Search button. Current button text is'
) } ${ buttonText }`;
};

/**
* If a screenreader is enabled, create a descriptive label for this field. If
* not, return a label that is used during automated UI tests.
*
* @return {string} The accessibilityLabel for the Search Input
* placeholder field.
*/
const getAccessibilityLabelForPlaceholder = () => {
if ( ! isScreenReaderEnabled ) {
return 'search-block-input';
}

const title = __( 'Search input field.' );
const description = placeholder
? `${ __( 'Current placeholder text is' ) } ${ placeholder }`
: __( 'No custom placeholder set' );
return `${ title } ${ description }`;
};

/**
* If a screenreader is enabled, create a descriptive label for this field. If
* not, return a label that is used during automated UI tests.
*
* @return {string} The accessibilityLabel for the Search Label field
*/
const getAccessibilityLabelForLabel = () => {
if ( ! isScreenReaderEnabled ) {
return 'search-block-label';
}

return `${ __( 'Search block label. Current text is' ) } ${ label }`;
};

const renderTextField = () => {
return (
<View
style={ styles.searchInputContainer }
accessible={ true }
accessibilityRole="none"
accessibilityHint={ __(
'Double tap to edit placeholder text'
) }
accessibilityLabel={ getPlaceholderAccessibilityLabel() }
accessibilityHint={
isScreenReaderEnabled
? __( 'Double tap to edit placeholder text' )
: undefined
}
accessibilityLabel={ getAccessibilityLabelForPlaceholder() }
>
<PlainText
ref={ textInputRef }
Expand Down Expand Up @@ -278,12 +352,12 @@ export default function SearchEdit( {
<View
accessible={ true }
accessibilityRole="none"
accessibilityHint={ __(
'Double tap to edit button text'
) }
accessibilityLabel={ `${ __(
'Search button. Current button text is'
) } ${ buttonText }` }
accessibilityHint={
isScreenReaderEnabled
? __( 'Double tap to edit button text' )
: undefined
}
accessibilityLabel={ getAccessibilityLabelForButton() }
onLayout={ onLayoutButton }
>
<RichText
Expand Down Expand Up @@ -333,10 +407,12 @@ export default function SearchEdit( {
<View
accessible={ true }
accessibilityRole="none"
accessibilityHint={ __( 'Double tap to edit label text' ) }
accessibilityLabel={ `${ __(
'Search block label. Current text is'
) } ${ label }` }
accessibilityHint={
isScreenReaderEnabled
? __( 'Double tap to edit label text' )
: undefined
}
accessibilityLabel={ getAccessibilityLabelForLabel() }
>
<RichText
className="wp-block-search__label"
Expand Down
36 changes: 12 additions & 24 deletions packages/block-library/src/search/test/__snapshots__/edit.native.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ exports[`Search Block renders block with button inside option 1`] = `
importantForAccessibility="no-hide-descendants"
>
<View
accessibilityHint="Double tap to edit label text"
accessibilityLabel="Search block label. Current text is Search"
accessibilityLabel="search-block-label"
accessibilityRole="none"
accessible={true}
>
Expand Down Expand Up @@ -74,8 +73,7 @@ exports[`Search Block renders block with button inside option 1`] = `
}
>
<View
accessibilityHint="Double tap to edit placeholder text"
accessibilityLabel="Search input field. No custom placeholder set"
accessibilityLabel="search-block-input"
accessibilityRole="none"
accessible={true}
>
Expand Down Expand Up @@ -111,8 +109,7 @@ exports[`Search Block renders block with button inside option 1`] = `
}
>
<View
accessibilityHint="Double tap to edit button text"
accessibilityLabel="Search button. Current button text is Search Button"
accessibilityLabel="search-block-button"
accessibilityRole="none"
accessible={true}
onLayout={[Function]}
Expand Down Expand Up @@ -183,8 +180,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
importantForAccessibility="no-hide-descendants"
>
<View
accessibilityHint="Double tap to edit label text"
accessibilityLabel="Search block label. Current text is Search"
accessibilityLabel="search-block-label"
accessibilityRole="none"
accessible={true}
>
Expand Down Expand Up @@ -250,8 +246,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
}
>
<View
accessibilityHint="Double tap to edit placeholder text"
accessibilityLabel="Search input field. No custom placeholder set"
accessibilityLabel="search-block-input"
accessibilityRole="none"
accessible={true}
>
Expand Down Expand Up @@ -308,8 +303,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
}
>
<View
accessibilityHint="Double tap to edit placeholder text"
accessibilityLabel="Search input field. No custom placeholder set"
accessibilityLabel="search-block-input"
accessibilityRole="none"
accessible={true}
>
Expand Down Expand Up @@ -345,8 +339,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
}
>
<View
accessibilityHint="Double tap to edit button text"
accessibilityLabel="Search button. Current button text is Search Button"
accessibilityLabel="search-block-button"
accessibilityRole="none"
accessible={true}
onLayout={[Function]}
Expand Down Expand Up @@ -417,8 +410,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
importantForAccessibility="no-hide-descendants"
>
<View
accessibilityHint="Double tap to edit label text"
accessibilityLabel="Search block label. Current text is Search"
accessibilityLabel="search-block-label"
accessibilityRole="none"
accessible={true}
>
Expand Down Expand Up @@ -484,8 +476,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
}
>
<View
accessibilityHint="Double tap to edit placeholder text"
accessibilityLabel="Search input field. No custom placeholder set"
accessibilityLabel="search-block-input"
accessibilityRole="none"
accessible={true}
>
Expand Down Expand Up @@ -521,8 +512,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
}
>
<View
accessibilityHint="Double tap to edit button text"
accessibilityLabel="Search button. Current button text is Search Button"
accessibilityLabel="search-block-button"
accessibilityRole="none"
accessible={true}
onLayout={[Function]}
Expand Down Expand Up @@ -593,8 +583,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
importantForAccessibility="no-hide-descendants"
>
<View
accessibilityHint="Double tap to edit label text"
accessibilityLabel="Search block label. Current text is Search"
accessibilityLabel="search-block-label"
accessibilityRole="none"
accessible={true}
>
Expand Down Expand Up @@ -651,8 +640,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
</View>
</View>
<View
accessibilityHint="Double tap to edit placeholder text"
accessibilityLabel="Search input field. No custom placeholder set"
accessibilityLabel="search-block-input"
accessibilityRole="none"
accessible={true}
>
Expand Down
1 change: 1 addition & 0 deletions packages/react-native-editor/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label to i

## Unreleased

- [***] Search block now available on mobile! [https://github.com/WordPress/gutenberg/pull/30783]
- [*] Image block: Add a "featured" banner. (Android only) [#30806]
- [**] The media upload options of the Image, Video and Gallery block automatically opens when the respective block is inserted. [#29546]
- [**] The media upload options of the File and Audio block automatically opens when the respective block is inserted. [#31025]
Expand Down
Loading

0 comments on commit 6f93825

Please sign in to comment.