Consider to improve the Post Format suggestion design and accessibility

[afercia]

When Gutenberg detects a post content could benefit from applying a specific post format, a suggestion appears in the Sidebar:

Depending on the content, it can be any of the post formats, e.g. a Gallery:

Clicking the suggested format, sets the format in the post.

I think there are a couple things that could be improved:

• the placement of the suggestion could maybe be improved and be aligned to the left
• the button text could be improved for better understanding and accessibility: UI controls should make sense even when read out of context; instead, the button says just "Video" (or "Gallery", etc.), the current rendered markup is:

<div class="editor-post-format__suggestion">
	Suggestion:
	<button type="button" class="components-button is-link">Video</button>
</div>

Instead, the post format suggestion displayed in the publishing flow is clearer and makes sense even when read out of context:

I'd suggest to refactor the text used in the Sidebar to use something along the lines of the one used in the Publishing flow.

[afercia]

A very quick first attempt, before (left) and after(right):

[karmatosed]

What is the a11y reason for the left? I ask as it's making it less readable so trying to find the balance.

[afercia]

What is the a11y reason for the left?

I'm not sure I fully understand. Do you mean left alignment? To me, it's more readable left aligned. Besides subjective opinions that might differ, this text now is longer (and potentially even longer when translated) and doesn't look so nice when right-aligned.

[tofumatt]

I'm definitely for the more elaborate text. As it is it's both not accessible nor very useful to sighted users.

I honestly think it looks a bit meh left-aligned or right-aligned, but in shorter locales it should look a bit better right-aligned (and more connected with the dropdown, which adds context).

---

That said, I think the pre-publish panel suggestion is a better place for this and I'd be for removing this all-together from the document sidebar. It's a really crowded area, the space is cramped, and it's hard to make the text usable even for sighted users. I actually think adding some aria labels that added context for screenreader users would be easier than making this better for sighted users.

Now that the pre-publish panel offers it (in a much better way, with more context and better accessibility), let's just remove it.

[karmatosed]

@afercia thanks for the explanation. I wanted to make sure it was a visual not hierarchy for screen readers or other assisted devices.

As people expect to see post formats in the actual sidebar right now, it's not a mental model I think we should break today. Some themes hook into it for display.

Let's get this in but not aligned left. I think right for now. Do we need to say all of that text, fine if we do but wanted to check.

[tofumatt]

All of that text needs to be there. It's inaccessible if not, but it's also just poor usability. It should read:

Suggestion: Apply the "$FORMAT" format.

I can't think of a less-verbose way of phrasing it that doesn't lose context, but if anyone can, go for it ^_^