Skip to content

DOC Note changes to focus states #862

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GuySartorelli wants to merge 1 commit into
base: 6
Choose a base branch
from
+16 −3
Open

DOC Note changes to focus states #862

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions en/08_Changelogs/6.2.0.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,11 +90,24 @@ If you are using the `Modal` component from `react-strap` inside the CMS, the cl

Functionality has also been added to allow swapping icons in an accessible way for alternating buttons (e.g. the save and publish buttons). See [how to implement an alternating button](/developer_guides/customising_the_admin_interface/how_tos/cms_alternating_button/) (which has been updated) for details.

#### Improved contrast
#### Improved contrast and focus states

Contrast has been improved in various areas, including in the TinyMCE HTML editor.
Contrast has been improved in various areas, including in the TinyMCE HTML editor. In some cases the contrast improvement has also included a change in the colour used.

In some cases the contrast improvement has also included a change in the colour used.
Focus states across the CMS have also been standardised, using a blue outline for most elements. Where the blue outline was too dark, a white outline is now used.

These changes, especially the change to focus state styling, may result in styles in your custom components no longer matching the CMS styles. We recommend checking if your styles match the CMS styles after upgrading.

The new focus styling uses CSS variables, so you can easily change the values and use them to style your own components. The CSS variables in use are:

|CSS variable name|usage|
|---|---|
|`--focus-outline-width`|Used with the first argument to the `outline` CSS property, or as the value for the `outline-width` CSS property.|
|`--focus-outline-style`|Used with the second argument to the `outline` CSS property, or as the value for the `outline-style` CSS property.|
|`--focus-outline-color`|Used with the third argument to the `outline` CSS property, or as the value for the `outline-color` CSS property.|
|`--focus-outline-color-inverted`|Used when `--focus-outline-color` is too dark. Set `--focus-outline-color: var(--focus-outline-color-inverted)` or set the `outline-color` property directly.|
|`--focus-outline-offset`|Used with the `outline-offset` CSS property.|
|`--focus-outline-offset-inset`|Places the outline inside the element - used when there isn't enough space for an outline outside the element's bounds. Set `--focus-outline-offset: var(--focus-outline-offset-inset)` or set the `outline-offset` property directly.|

### Unsaved changes indicator {#unsaved-changes-indicator}

Expand Down