Adding messaging for open and closed states

[ryanwelcher]

Description

This PR adds more descriptive aria-labels for the open and closed states for the Secondary Settings button and fixes #7203

How has this been tested?

I followed the steps to reproduce in the corresponding issue.

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[adamsilverstein]

Looks good to me!

[ocean90]

There's no need for adding a context here since both strings are only used once.

[ryanwelcher]

@ocean90 I've pushed the requested changes.

[youknowriad]

e2e tests are failing (we're probably still refering to the old label in some tests).

@jasmussen Thoughts on these changes?

[jasmussen]

This is a cool PR, and I have no interface design wise issue with it, and it solves an issue.

I want to note that there was relatively great controversy when this menu was named. "More Menu" is what it's referred to in UI blueprints and documentation.

But does this name need to be surfaced in the UI? The Block Library isn't surfaced as the "Block Library" anywhere in the UI, its help text says "Add block". So in that vein, this seems okay to me.

However the phrasing seems like it could use a little tuning. That menu is not only for "Additional settings". It's for quite a few different things:

• Editor modes
• Accessing the code editor
• Plugin shortcuts
• Tools like "Copy all content"
• A link to a Keyboard Shortcuts cheatsheet
• A link to an Options modal

Screenshot:

As such, simply labelling this as "additional settings" seems imprecise. I defer to those of you better versed in aria intricacies than me, but this is a menu, and it is in part designed with Google Docs menus as its inspiration. In that vein, here's the Google Docs tools menu markup when it's opened and closed:

The label does not change on open/close — not that i mind it doing so here — but worth noting regardless, in case it can help inspire a better label.

I would prefer we do not end up with something like "Show additional settings, tools, editing modes, help and options".

[jasmussen]

Perhaps one of these could work?

• More tools & options
• Help, tools & options
• Preferences & more
• Help & more
• Help, settings & more

[ryanwelcher]

@jasmussen thanks for the feedback. Personally, I like the first option.

Just to confirm this will look like the following

Closed state: Show more tools & options
Open state: Hide more tools & options

If everyone concerned is OK with that, I'm happy to make the change ASAP.

[ryanwelcher]

e2e tests are failing (we're probably still refering to the old label in some tests).

@youknowriad I updated the snapshot and my local tests are passing - is there another step that I missed to get the tests passing?

[ryanwelcher]

As a follow-up, I believe I need to update the selectors in the test/e2e/spec directory to match the copy change we decide on here

For example the selector here - https://github.com/WordPress/gutenberg/blob/master/test/e2e/specs/nux.test.js#L139

[ryanwelcher]

I've made the copy change indicated and updated the tests instances.

[youknowriad]

LGTM 👍 Let's merge if the tests pass.

[mikedang]

Closed state: Show more tools & options
Open state: Hide more tools & options

The copy makes sense and looks good to me. I would avoid using the ampersand here — use "and" instead: "Show more tools and options" and "Hide more tools and options".