Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Experiment: Move unselected block accessibility handling to block-holder #937

Merged
merged 42 commits into from
Jun 6, 2019
Merged

Experiment: Move unselected block accessibility handling to block-holder #937

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
433d8c8
Update gutenberg ref
pinarol Apr 25, 2019
92b55a4
Update gutenberg ref
pinarol Apr 25, 2019
acf87e8
Update gutenberg ref
pinarol Apr 25, 2019
e7a7e14
Update gutenberg ref
pinarol Apr 26, 2019
764581f
Add unselected block accessibility
pinarol Apr 26, 2019
f487087
Move block unselected state accessibility handling to block-holder
pinarol Apr 26, 2019
f8b3f2c
Update gutenberg ref
pinarol Apr 26, 2019
76fe327
Merge branch 'develop' into issue/update-unselected-accessibility
pinarol Apr 26, 2019
81450c6
Add getAccessibilityLabel to block settings
Tug Apr 26, 2019
7f3dcb3
Update gb ref and use __experimentalGetAccessibilityLabel
Tug May 15, 2019
d3294f7
Merge remote-tracking branch 'origin/develop' into issue/update-unsel…
Tug May 16, 2019
8d7ebda
Update gutenberg ref
Tug May 16, 2019
e83fde4
Update gutenberg ref
Tug May 17, 2019
f9daad9
Update gutenberg ref
Tug May 17, 2019
fbeba8c
Fix type def in BlockHolder
Tug May 17, 2019
4bbd25b
Update gutenberg ref
Tug May 23, 2019
95166be
Update gutenberg ref
Tug May 23, 2019
3199fab
Handle setting UnrecognizedBlock accessibility label in BlockHolder
Tug May 23, 2019
1d752c9
Handle setting UnrecognizedBlock accessibility label in BlockHolder
Tug May 23, 2019
d3d17f8
Merge remote-tracking branch 'origin/develop' into issue/update-unsel…
Tug May 23, 2019
cd4bb11
Merge remote-tracking branch 'origin/develop' into issue/update-unsel…
Tug May 23, 2019
1836bf6
Use order props instead of passing getBlockIndex
Tug May 27, 2019
20038ca
Merge remote-tracking branch 'origin/develop' into issue/update-unsel…
Tug May 28, 2019
4c7809c
Fix lint errors
Tug May 28, 2019
db6a23a
Make sure the block attributes have updated before searching using th…
Tug May 28, 2019
a781649
Handle case where no blockType is found
Tug May 28, 2019
4cb4ad7
Revert unnecessary changes to e2e
Tug May 28, 2019
4400544
Update e2e test descriptions
Tug May 28, 2019
a55b735
* Use deepest element when retrieving block
JavonDavis May 28, 2019
ac1efc5
Use element.sendKeys instead of element.type to avoid Keyboard not fo…
Tug May 29, 2019
ec967ea
Move accessible prop to TouchableWithoutFeedback
Tug May 29, 2019
a39aef6
Revert to using type
Tug May 29, 2019
8ba8904
Fix lint error
Tug May 29, 2019
ef0a086
Move all accessibility props to TouchableWithoutFeedback
Tug Jun 3, 2019
a036757
Update gutenberg ref
Tug Jun 3, 2019
0436928
Merge remote-tracking branch 'origin/develop' into issue/update-unsel…
Tug Jun 3, 2019
121b7d8
Merge remote-tracking branch 'origin/develop' into issue/update-unsel…
Tug Jun 3, 2019
ab3f0a3
Have accessibilityLabel prop in the View to fix e2e tests
Tug Jun 5, 2019
ab049ed
Update gutenberg ref
Tug Jun 5, 2019
01320c3
Merge remote-tracking branch 'origin/develop' into issue/update-unsel…
Tug Jun 5, 2019
47aeee4
Update gutenberg ref after merge
Tug Jun 6, 2019
2077aac
Merge remote-tracking branch 'origin/develop' into issue/update-unsel…
Tug Jun 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion gutenberg
Open in desktop
Submodule gutenberg updated 6 files
+2 −29 packages/block-library/src/heading/edit.native.js
+27 −2 packages/block-library/src/heading/index.js
+0 −8 packages/block-library/src/image/edit.native.js
+11 −1 packages/block-library/src/image/index.js
+2 −25 packages/block-library/src/paragraph/edit.native.js
+15 −1 packages/block-library/src/paragraph/index.js
32 changes: 29 additions & 3 deletions src/block-management/block-holder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,9 @@ import {
import { withDispatch, withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { addAction, removeAction, hasAction } from '@wordpress/hooks';
import { getBlockType } from '@wordpress/blocks';
import { getBlockType, getUnregisteredTypeHandlerName } from '@wordpress/blocks';
import { BlockEdit } from '@wordpress/block-editor';
import { sprintf, _x } from '@wordpress/i18n';

/**
* Internal dependencies
Expand Down Expand Up @@ -197,6 +198,28 @@ export class BlockHolder extends React.Component<PropsType, StateType> {
);
}

getAccessibilityLabel() {
const { title, attributes, name } = this.props;

if ( name === getUnregisteredTypeHandlerName() ) { // is the block unrecognized?
return title; //already localized
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could add an accessibility label to missing/index.js, in a way that VoiceOver can tell the type of block:
i.e: "Unsupported block. Gallery", "Unsupported block. Unknown"

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't mean to add accessibility labels to missing block on this PR, but just saying that it might not need an special handling.


const blockName = sprintf(
/* translators: accessibility text. %s: block name. */
_x( '%1$s block' ),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be __ instead of _x?
And since there's just one variable, %d should be enough?

title, //already localized
);

const blockType = getBlockType( name );
if ( blockType.getAccessibilityLabel ) {
const blockAccessibilityLabel = blockType.getAccessibilityLabel( attributes ) || '';
return blockName + ( blockAccessibilityLabel ? '. ' + blockAccessibilityLabel : '' );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like that this give us a good default label.
I was thinking if it's worth it to return the whole sentence from the block's blockType.getAccessibilityLabel directly (including the "{Block Name} block..." part, and construct this default just when blockType.getAccessibilityLabel is not implemented.

This could make sentences easier to localize, could give us more flexibility if it's needed, but it also could be more error prone (someone could forget to add the "{Block Name} block." at the beginning).

Do you think that this approach would be beneficial?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am aiming towards to the current approach because it brings consistency. With this, the description for all blocks starts with 'X block. '

on the other hand I think the '. ' and concatenations needs a revisit as we discussed earlier for localization issues. would it be better to do this as follows?

             sprintf(
			/* translators: accessibility text. 1: block name. 2: block content information. */
			_x( '%1$s block. %2$s', 'Accessibility text for a block' ),
			blockName,
			blockAccessibilityLabel
		);

}

return blockName;
}

render() {
const { isSelected, borderStyle, focusedBorderColor } = this.props;

Expand All @@ -206,8 +229,9 @@ export class BlockHolder extends React.Component<PropsType, StateType> {
// accessible prop needs to be false to access children
// https://facebook.github.io/react-native/docs/accessibility#accessible-ios-android
<TouchableWithoutFeedback
accessible={ false }
accessibilityLabel="block-container"
accessible={ ! isSelected }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this, it makes more sense to only make it false when it's selected and we'll only interact with the inner elements when it's selected anyway

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it doesn't seem to work on android though...

accessibilityLabel={ this.getAccessibilityLabel() }
accessibilityRole={ 'button' }
onPress={ this.onFocus } >

<View style={ [ styles.blockHolder, borderStyle, { borderColor } ] }>
Expand Down Expand Up @@ -243,6 +267,7 @@ export default compose( [
const isSelected = isBlockSelected( clientId );
const isFirstBlock = order === 0;
const isLastBlock = order === getBlocks().length - 1;
const title = getBlockType( name ) !== undefined ? getBlockType( name ).title : '';

return {
attributes,
Expand All @@ -254,6 +279,7 @@ export default compose( [
isLastBlock,
isSelected,
name,
title,
};
} ),
withDispatch( ( dispatch, { clientId, rootClientId } ) => {
Expand Down