Show text labels in block toolbars when option is set. (#26135)

* Show text labels in block toolbars when option is set. * Fix tests and snapshots. * Redo block switcher labels * Update snapshot * Simplify English strings where possible * Text labels in format toolbar * Simplify transform button * Shorten labels further. * update snapshot * Update e2e selectors * Reduce font size and fix block mover border. * Change back switcher label and update e2e test selectors. * Add describedby to button and use in block switcher. * Don't break existing aria-describedby * Change select parent and add descriptions * Styling adjustments * Fix unit tests and update snapshots. * Add unit tests for new button prop. * Change alignment labels * Add toggleProps to ToolbarGroup * Change e2e test selectors and revert label change * Actually fix e2e selector this time :P * Update list e2e test selectors Co-authored-by: Haz <[email protected]>
WordPress · Jan 18, 2021 · d2bb266 · d2bb266
1 parent 01d20a2
commit d2bb266
Show file tree

Hide file tree

Showing 43 changed files with 386 additions and 143 deletions.
diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js
@@ -38,7 +38,8 @@ export function AlignmentToolbar( props ) {
 		value,
 		onChange,
 		alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
-		label = __( 'Change text alignment' ),
+		label = __( 'Align' ),
+		describedBy = __( 'Change text alignment' ),
 		isCollapsed = true,
 	} = props;
 
@@ -61,6 +62,7 @@ export function AlignmentToolbar( props ) {
 			isCollapsed={ isCollapsed }
 			icon={ setIcon() }
 			label={ label }
+			toggleProps={ { describedBy } }
 			popoverProps={ POPOVER_PROPS }
 			controls={ alignmentControls.map( ( control ) => {
 				const { align } = control;

diff --git a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
@@ -47,13 +47,18 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified
     </SVG>
   }
   isCollapsed={true}
-  label="Change text alignment"
+  label="Align"
   popoverProps={
     Object {
       "isAlternate": true,
       "position": "bottom right",
     }
   }
+  toggleProps={
+    Object {
+      "describedBy": "Change text alignment",
+    }
+  }
 />
 `;
 
@@ -119,12 +124,17 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
     </SVG>
   }
   isCollapsed={true}
-  label="Change text alignment"
+  label="Align"
   popoverProps={
     Object {
       "isAlternate": true,
       "position": "bottom right",
     }
   }
+  toggleProps={
+    Object {
+      "describedBy": "Change text alignment",
+    }
+  }
 />
 `;
diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js
@@ -96,7 +96,8 @@ export function BlockAlignmentToolbar( {
 					? activeAlignmentControl.icon
 					: defaultAlignmentControl.icon
 			}
-			label={ __( 'Change alignment' ) }
+			label={ __( 'Align' ) }
+			toggleProps={ { describedBy: __( 'Change alignment' ) } }
 			controls={ enabledControls.map( ( control ) => {
 				return {
 					...BLOCK_ALIGNMENTS_CONTROLS[ control ],

diff --git a/...ages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap b/...ages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
@@ -59,11 +59,16 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = `
     </SVG>
   }
   isCollapsed={true}
-  label="Change alignment"
+  label="Align"
   popoverProps={
     Object {
       "isAlternate": true,
     }
   }
+  toggleProps={
+    Object {
+      "describedBy": "Change alignment",
+    }
+  }
 />
 `;
diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
@@ -40,8 +40,7 @@ function BlockMover( {
 		return null;
 	}
 
-	const dragHandleLabel =
-		clientIds.length === 1 ? __( 'Drag block' ) : __( 'Drag blocks' );
+	const dragHandleLabel = __( 'Drag' );
 
 	// We emulate a disabled state because forcefully applying the `disabled`
 	// attribute on the buttons while it has focus causes the screen to change

diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -95,7 +95,7 @@ export function BlockSettingsDropdown( {
 			} ) => (
 				<DropdownMenu
 					icon={ moreVertical }
-					label={ __( 'More options' ) }
+					label={ __( 'Options' ) }
 					className="block-editor-block-settings-menu"
 					popoverProps={ POPOVER_PROPS }
 					noIcons

diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -29,7 +29,12 @@ import BlockStylesMenu from './block-styles-menu';
 export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const blockInformation = useBlockDisplayInformation( blocks[ 0 ].clientId );
-	const { possibleBlockTransformations, hasBlockStyles, icon } = useSelect(
+	const {
+		possibleBlockTransformations,
+		hasBlockStyles,
+		icon,
+		blockTitle,
+	} = useSelect(
 		( select ) => {
 			const { getBlockRootClientId, getBlockTransformItems } = select(
 				blockEditorStore
@@ -61,10 +66,12 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				),
 				hasBlockStyles: !! styles?.length,
 				icon: _icon,
+				blockTitle: getBlockType( firstBlockName ).title,
 			};
 		},
 		[ clientIds, blocks, blockInformation?.icon ]
 	);
+
 	const onTransform = ( name ) =>
 		replaceBlocks( clientIds, switchToBlockType( blocks, name ) );
 	const hasPossibleBlockTransformations = !! possibleBlockTransformations.length;
@@ -74,13 +81,16 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				<ToolbarButton
 					disabled
 					className="block-editor-block-switcher__no-switcher-icon"
-					title={ __( 'Block icon' ) }
+					title={ blockTitle }
 					icon={ <BlockIcon icon={ icon } showColors /> }
 				/>
 			</ToolbarGroup>
 		);
 	}
-	const blockSwitcherLabel =
+
+	const blockSwitcherLabel = blockTitle;
+
+	const blockSwitcherDescription =
 		1 === blocks.length
 			? __( 'Change block type or style' )
 			: sprintf(
@@ -112,7 +122,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 								showColors
 							/>
 						}
-						toggleProps={ toggleProps }
+						toggleProps={ {
+							describedBy: blockSwitcherDescription,
+							...toggleProps,
+						} }
 						menuProps={ { orientation: 'both' } }
 					>
 						{ ( { onClose } ) =>

diff --git a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap
@@ -20,7 +20,6 @@ exports[`BlockSwitcherDropdownMenu should render disabled block switcher with mu
         showColors={true}
       />
     }
-    title="Block icon"
   />
 </ToolbarGroup>
 `;

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -106,3 +106,100 @@
 		transform: translateY(-($block-toolbar-height + $grid-unit-15));
 	}
 }
+
+.show-icon-labels {
+	.block-editor-block-toolbar {
+		.components-button.has-icon {
+			width: auto;
+
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			&::after {
+				content: attr(aria-label);
+				font-size: $helptext-font-size;
+			}
+		}
+	}
+
+	// Padding overrides.
+
+	.components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
+		padding-left: 6px;
+		padding-right: 6px;
+	}
+
+	// Switcher overrides.
+	.block-editor-block-switcher {
+		border-right: 1px solid $gray-900;
+
+		.components-dropdown-menu__toggle {
+			margin-left: 0;
+		}
+	}
+
+	.block-editor-block-switcher .components-dropdown-menu__toggle,
+	.block-editor-block-switcher__no-switcher-icon {
+		.block-editor-block-icon {
+			width: 0 !important;
+			height: 0 !important;
+		}
+
+		&:focus::before {
+			right: $grid-unit-05 !important;
+		}
+	}
+
+	// Parent selector overrides
+
+	.block-editor-block-parent-selector__button {
+		.block-editor-block-icon {
+			width: 0;
+		}
+	}
+
+	// Mover overrides.
+	.block-editor-block-toolbar__block-controls .block-editor-block-mover {
+		margin-left: 0;
+		white-space: nowrap;
+	}
+
+	.block-editor-block-mover-button {
+		// The specificity can be reduced once https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L34 is also dealt with.
+		padding-left: $grid-unit !important;
+		padding-right: $grid-unit !important;
+	}
+
+	.block-editor-block-mover__drag-handle.has-icon {
+		padding-left: 6px !important;
+		padding-right: 6px !important;
+		border-right: 1px solid $gray-900;
+	}
+
+	@include break-small() {
+		// Specificity override for https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L69
+		.is-up-button.is-up-button.is-up-button {
+			border-bottom: 1px solid $gray-900;
+			margin-right: 0;
+			border-radius: 0;
+		}
+	}
+
+	.block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
+		width: auto;
+	}
+
+	// Mobile adjustments
+	.components-toolbar,
+	.components-toolbar-group {
+		flex-shrink: 1;
+	}
+
+	.block-editor-format-toolbar {
+		.components-button + .components-button {
+			margin-left: 6px;
+		}
+	}
+}
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -51,6 +51,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             className="components-circular-option-picker__option-wrapper"
           >
             <button
+              aria-describedby={null}
               aria-label="Color: red"
               aria-pressed={true}
               className="components-button components-circular-option-picker__option is-pressed"
@@ -91,6 +92,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             className="components-dropdown components-circular-option-picker__dropdown-link-action"
           >
             <button
+              aria-describedby={null}
               aria-expanded={false}
               aria-haspopup="true"
               aria-label="Custom color picker"
@@ -102,6 +104,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             </button>
           </div>
           <button
+            aria-describedby={null}
             className="components-button components-circular-option-picker__clear is-secondary is-small"
             onClick={[Function]}
             type="button"

diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
@@ -19,6 +19,7 @@ const FormatToolbarContainer = ( { inline, anchorRef } ) => {
 				focusOnMount={ false }
 				anchorRef={ anchorRef }
 				className="block-editor-rich-text__inline-format-toolbar"
+				__unstableSlotName="block-toolbar"
 			>
 				<FormatToolbar />
 			</Popover>

diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
@@ -41,9 +41,8 @@ const FormatToolbar = () => {
 								{ ( toggleProps ) => (
 									<DropdownMenu
 										icon={ chevronDown }
-										label={ __(
-											'More rich text controls'
-										) }
+										/* translators: button label text should, if possible, be under 16 characters. */
+										label={ __( 'More' ) }
 										toggleProps={ toggleProps }
 										controls={ orderBy(
 											fills.map(

diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/style.scss b/packages/block-editor/src/components/rich-text/format-toolbar/style.scss
@@ -3,3 +3,20 @@
 		justify-content: center;
 	}
 }
+
+.show-icon-labels {
+	.block-editor-format-toolbar {
+		.components-button.has-icon {
+			width: auto;
+
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			&::after {
+				content: attr(aria-label);
+			}
+		}
+	}
+}
diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
@@ -91,7 +91,8 @@ export default function ListEdit( {
 							icon: isRTL()
 								? formatListBulletsRTL
 								: formatListBullets,
-							title: __( 'Convert to unordered list' ),
+							title: __( 'Unordered' ),
+							describedBy: __( 'Convert to unordered list' ),
 							isActive: isActiveListType( value, 'ul', tagName ),
 							onClick() {
 								onChange(
@@ -108,7 +109,8 @@ export default function ListEdit( {
 							icon: isRTL()
 								? formatListNumberedRTL
 								: formatListNumbered,
-							title: __( 'Convert to ordered list' ),
+							title: __( 'Ordered' ),
+							describedBy: __( 'Convert to ordered list' ),
 							isActive: isActiveListType( value, 'ol', tagName ),
 							onClick() {
 								onChange(
@@ -123,7 +125,8 @@ export default function ListEdit( {
 						},
 						{
 							icon: isRTL() ? formatOutdentRTL : formatOutdent,
-							title: __( 'Outdent list item' ),
+							title: __( 'Outdent' ),
+							describedBy: __( 'Outdent list item' ),
 							shortcut: _x( 'Backspace', 'keyboard key' ),
 							isDisabled: ! canOutdentListItems( value ),
 							onClick() {
@@ -133,7 +136,8 @@ export default function ListEdit( {
 						},
 						{
 							icon: isRTL() ? formatIndentRTL : formatIndent,
-							title: __( 'Indent list item' ),
+							title: __( 'Indent' ),
+							describedBy: __( 'Indent list item' ),
 							shortcut: _x( 'Space', 'keyboard key' ),
 							isDisabled: ! canIndentListItems( value ),
 							onClick() {
-Original file line number
+Diff line change
@@ Expand Up @@
             showColors={true}
           />
         }
-        title="Block icon"
       />
     </ToolbarGroup>
     `;
@@ Expand Down @@