Text mode: title and content textarea focus style

[afercia]

In text mode, the title and content textarea elements should have a better focus style. Since text mode is supposed to be the most accessible one, and for some users will be the only mode that empowers them to enter content without barriers, I'm not sure the current behavior of the focus style is ideal.

when focus is on the title and the title is empty, the component gets an is-selected CSS class that applies a light gray outline #e2e4e7 to the h1 wrapping the textarea:

#e2e4e7 doesn't have a sufficient color contrast with the background and when users start typing, the focus style disappears completely:

The content textarea has no focus style at all:

[afercia]

Worth noting the post title is shared by visual and text mode. There are classes to target visual/text modes though.

Also, adding a focus style for the text mode content area would probably require to review a bit the textarea size/paddings. See in the screenshot below, where the red outline is just to highlight the current elements size:

[afercia]

Not sure why the transition property is set also on the state changes, as far as I know it should be set only on the initial state, see

gutenberg/editor/post-title/style.scss

Lines 13 to 29 in 46ae03c

	h1 {
	outline: 1px solid transparent;
	margin: 0;
	padding: #{ $block-padding / 2 } #{ $block-padding - 2px };
	font-size: $editor-font-size;
	transition: 0.2s outline;
	}
	&:hover h1 {
	outline: 1px solid $light-gray-500;
	transition: 0.2s outline;
	}
	&.is-selected h1 {
	outline: 2px solid $light-gray-500;
	transition: 0.2s outline;
	}

/cc @mtias

[abdul]

@afercia:

1. What do you recommend for focus style on title/content in text-mode? I think, a thinner outline (like on on hover state) will do fine?
2. I think that's mistake "transition" property being set on state changes.

Thank you

[afercia]

@abdul as long as it's a shape with a sufficient color contrast ratio with the background, it's ok for accessibility. As per the design part, I'll leave that decision to the team leads. /cc @jasmussen @mtias

[abdul]

@afercia Can you please review my PR?

[afercia]

@abdul as I said above, this needs design feedback from the design team before moving on 🙂

[abdul]

@afercia Please don't mind my restlessness. I will wait for feedback.

Thank you

[aduth]

Is this closed by #4803 ? cc @jasmussen

[jasmussen]

I would suggest yes. Closing, we can always reopen if there are edgecases that haven't been addressed.