Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves #5146
Description
Prevents default focus styles from being removed, making the behaviour opt-in via
<Editable>
'sstyle
prop or other CSSIssue
Fixes: #5146
Example
![Screenshot 2023-05-12 at 19 43 04](https://private-user-images.githubusercontent.com/240422/238043100-f1be85b5-164e-4728-a3a8-ea4924083a29.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg0MjQwNzAsIm5iZiI6MTcxODQyMzc3MCwicGF0aCI6Ii8yNDA0MjIvMjM4MDQzMTAwLWYxYmU4NWI1LTE2NGUtNDcyOC1hM2E4LWVhNDkyNDA4M2EyOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYxNVQwMzU2MTBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lYjdiMjYxYjkzZWE1NmNhYjIyODM2NjNjYzZlMTFmZGMzMjUyNmEwZmMyNjY4YzQ1MTEzY2U1ZmU4YWZhOTY5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.zBa6J27DR6w-78xCb_cu4xsCLaHp6E1euiKxkmi2hXc)
Context
Since Slate.js does not provide any custom focus styles for the editable area, it should not remove the built-in focus style which is required per WCAG criterion Focus Visible
If a particular focus styling technique is preferred by library authors (e.g. highlighting the whole area with
:focus-within
), it should be described in the relevant documentation article (e.g. https://www.slatejs.org/examples/styling) rather than being hard-coded in the Editable component.Checks
yarn test
.yarn lint
. (Fix errors withyarn fix
.)yarn start
.)yarn changeset add
.)