Problem/Motivation

in #2762505: Introduce "outside in" quick edit pattern to core the designs showed this message when enabling edit mode:
Title: You are now in edit mode.
Message: Click anything to edit. Menu links are turned off. Leave edit mode to go to a different page.

We probably want to update this text or at least confirm this is still correct.

Proposed resolution

Determine a concise message that describes edit mode.

Related: We determined #2877088: When in Edit mode Inform the user when they are configuring something that changes more than the current page is not necessary.

The actual displaying of the message is being implemented here: #2773601: Display "You are now in edit mode" prompt when user enters edit mode.

This issue is just to determine the wording.

Remaining tasks

Pick the message.

User interface changes

API changes

None

Data model changes

None

Comments

tedbow created an issue. See original summary.

tedbow’s picture

Suggestion for message

"Click on any highlighted area to edit. Links and forms have been disabled. Leave edit mode to go to a different page."

tedbow’s picture

Issue summary: View changes
yoroy’s picture

Maybe for the message we can get away with just:
Click a page element to edit it.

The bit about menus and forms being disabled to me sounds like we're explaining that we thought about how this should work. Well, well done us but no need to communicate that to the user :)

Aside: I'm not sure about expressing state in the label of the Edit button though. Maybe the button should say "Exit edit" when in edit mode instead of "Editing".

jalpesh’s picture

My suggestion is

"Click on highlighted area to edit. Leave edit mode to go to a different page."

tedbow’s picture

The bit about menus and forms being disabled to me sounds like we're explaining that we thought about how this should work.

Links and forms have actually been disabled in edit mode
So

Links and forms have been disabled.

Is true for the areas on the page except the toolbar, the contextual links and the tray itself. For instance if you click on anything on the search block it is does not submit the form but open the Settings Tray for the block.
Clicking the site name in the branding block will open that forms tray in the block instead of the going to the home page.

But I agree we could leave that part out.

I am fine with "Click a page element to edit it."

tedbow’s picture

Is there a way we can make the problems mentioned in this issue #2785497: "Outside in" workflow is not clear re contextual links and pencil icon less of a problem by having a clearer message?

Maybe " "Click a page element to edit it. Click on the pencils for more options."

andrewmacpherson’s picture

Issue tags: +Accessibility

I like the suggestion from #4, which is short and simple.

A couple of suggestions I'm skeptical of, for accessibility...

#7: "Click on the pencils for more options." Can a screen reader user find these "pencils"? Think about what the accessible (text) name of the button is, because that is what a screen reader will announce when the pencil is focused.

#2 and #5: "Click on any highlighted area to edit". I'm wondering how a screen reader user identifies the highlighted areas. Maybe it comes from the accessible name of the pencil/buttons. This doesn't work so well IMO in the buttons we currently have from contextual.module, where every button/menu has the repeated phrase "open configuration options", "configure block". I think we could make these names a bit more specific without adding verbosity, e.g. a button called "edit title block".

tedbow’s picture

@andrewmacpherson is considered bad practice to have 2 different messages for what we should on the screen and what you put out with Drupal.announce() for screen readers?

andrewmacpherson’s picture

Re: 10 - that's an interesting judgement call. I'd say "last resort" rather than outright bad practice. Not very elegant - it's going down the road of alternative accommodations, rather than truly inclusive design.

Having said that, much accessibility comes down to what we can get away with. In Drupal core, the toolbar admin UI in CKEditor module has quite a lot of help in Drupal.announce(), so we've taken that approach before.

This issue is the sort of thing that would benefit from tests with real AT users, but of course we've got to build something before we can get that kind of feedback. We can refine it in future releases.

An idea: keep the "now in edit mode" message short and simple, and consider using aria-describedby for information about individual buttons and links. This would be persistent text that can be found when exploring a UI, and respect the verbosity settings of some screen readers. Drupal.announce() messages are only spoken once, so a user might miss them. (In fact, they're not guaranteed to be spoken at all.)

The forthcoming aria-roledescriptionproperty in ARIA 1.1 might turn out to be useful, but we're waiting on browser and AT support. It would supplement the name of a button, unlike aria-label which would override it.

andrewmacpherson’s picture

Another idea. Instead of saying "click on the pencils", we could have the message say "click on the edit buttons" and include the pencil icon in the message tooltip as a bonus clue for sighted users.

An admin theme in contrib could replace pencils with another icon, without having to change the message text or accessible name.

yoroy’s picture

We only need to discuss the pencils bit if we think it's useful to add it :)

An idea: keep the "now in edit mode" message short and simple, and consider using aria-describedby for information about individual buttons and links. This would be persistent text that can be found when exploring a UI, and respect the verbosity settings of some screen readers.

This sounds like the actually accessible design approach. @andrewmacpherson something to break out into it's own issue I think?

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

tedbow’s picture

Component: outside_in.module » settings_tray.module

Changing to new settings_tray.module component. @drpal thanks for script help! :)

yoroy’s picture

Are we good with "Click a page element to edit it." then?

tedbow’s picture

Status: Active » Fixed

Re #15 yes that sounds good. Closing this issue and will update #2773601: Display "You are now in edit mode" prompt when user enters edit mode

UPDATE: added this change to #2773601-62: Display "You are now in edit mode" prompt when user enters edit mode.

Let's get that one done!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.