Skip to content

Conversation

@susnux
Copy link
Contributor

@susnux susnux commented Sep 15, 2022

Summary

The focus-visible outline was unintentionally introduced by using a NodeView, but the outline is quite distracting when editing text.

This fixes #2921 by simply removing the outline, but if the outline is now considered to stay, it could be fixed by changing the added rule to look like this:

		/* Fix anchor beeing part of focus ring, #2921 */
		&:focus-visible {
			outline: none;
			[data-node-view-content] {
				outline: 2px auto Highlight;
				outline: 2px auto -webkit-focus-ring-color;
				outline-offset: 4px;
			}
		}

Currently with outline:
heading with outline

With this change and similar to NC24:
Without outline

@susnux susnux added design Experience, interaction, interface, … 3. to review labels Sep 15, 2022
@susnux
Copy link
Contributor Author

susnux commented Sep 20, 2022

/compile

susnux and others added 2 commits September 20, 2022 08:35
This was introduced by using NodeViews.

Signed-off-by: Ferdinand Thiessen <[email protected]>
Signed-off-by: nextcloud-command <[email protected]>
@juliusknorr juliusknorr merged commit ce72980 into master Sep 20, 2022
@juliusknorr juliusknorr deleted the fix/focus-outline branch September 20, 2022 06:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review design Experience, interaction, interface, …

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Focus visible looks funny on headings

5 participants