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.

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

Adding messaging for open and closed states #10900

Merged
merged 13 commits into from
Oct 29, 2018
7 changes: 5 additions & 2 deletions packages/edit-post/src/components/header/more-menu/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { _x } from '@wordpress/i18n';
import { __ } from '@wordpress/i18n';
import { IconButton, Dropdown, MenuGroup } from '@wordpress/components';
import { Fragment } from '@wordpress/element';

Expand All @@ -14,6 +14,9 @@ import ToolsMoreMenuGroup from '../tools-more-menu-group';
import OptionsMenuItem from '../options-menu-item';
import WritingMenu from '../writing-menu';

const ariaClosed = __( 'Show additional settings' );
const ariaOpen = __( 'Hide additional settings' );

const MoreMenu = () => (
<Dropdown
className="edit-post-more-menu"
Expand All @@ -22,7 +25,7 @@ const MoreMenu = () => (
renderToggle={ ( { isOpen, onToggle } ) => (
<IconButton
icon="ellipsis"
label={ _x( 'More', 'button to expand options' ) }
label={ isOpen ? ariaOpen : ariaClosed }
onClick={ onToggle }
aria-expanded={ isOpen }
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ exports[`MoreMenu should match snapshot 1`] = `
<IconButton
aria-expanded={false}
icon="ellipsis"
label="More"
label="Show additional settings"
onClick={[Function]}
>
<Tooltip
text="More"
text="Show additional settings"
>
<Button
aria-expanded={false}
aria-label="More"
aria-label="Show additional settings"
className="components-icon-button"
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -33,7 +33,7 @@ exports[`MoreMenu should match snapshot 1`] = `
>
<button
aria-expanded={false}
aria-label="More"
aria-label="Show additional settings"
className="components-button components-icon-button"
onBlur={[Function]}
onClick={[Function]}
Expand Down