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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkwMjY2MDksIm5iZiI6MTczOTAyNjMwOSwicGF0aCI6Ii8yNDA0MjIvMjM4MDQzMTAwLWYxYmU4NWI1LTE2NGUtNDcyOC1hM2E4LWVhNDkyNDA4M2EyOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwOFQxNDUxNDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jNzg1NTVhMTU4ZTFiOTA5ZjlkM2FiZmEwY2U1ZWU3ZmE3NzU3NjI1OTcxYTliNTUxOWM2MGI5YjgxN2Y4NWJiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.lUSz_Wc9rlZknpyeBuje5XFLNX_5ygCRfF8_YciI7UM)
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
.)