Skip to content
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

docs: focus state dev research #1655

Merged
merged 3 commits into from
Nov 17, 2023
Merged

docs: focus state dev research #1655

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b97dde9
refactor: added relevant part to the node script
mfranzke Oct 6, 2023
3f6461c
Merge branch 'main' into 1654-focus-state-dev-research
mfranzke Nov 17, 2023
a51c15e
docs: finalized dev research
mfranzke Nov 17, 2023
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
2 changes: 1 addition & 1 deletion docs/research/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
If you want to do a research for a new component run this in the `docs` folder:

```shell
npm run generate:component-research
npm run generate:component-research -w=@db-ui/docs
```

1. Add the name of your component and a new `.md` file will be created.
Expand Down
27 changes: 27 additions & 0 deletions docs/research/focus-state.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!-- markdownlint-disable MD013 -->

# DEV Research focus-state

## Overview

| Design System | Component | Comment |
| --------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Atlassian Design System](https://bitbucket.org/atlassian/atlaskit/src/master/) | [focus outline visible e.g. on button](https://atlassian.design/components/button/examples) | `:focus-visible { outline: 2px solid var(--ds-border-focused, #2684FF); outline-offset: 2px; --ds-border-focused: #85B8FF; }` |
| [Bootstrap](https://github.com/twbs/bootstrap) | [focus "outline" visible e.g. on input](https://getbootstrap.com/docs/4.3/components/forms/) | `:focus { border-color: #80bdff;outline: 0;box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }` and background-colors matching box-shadows e.g. on [buttons](https://getbootstrap.com/docs/4.3/components/buttons/) |
| [GitHub Primer](https://github.com/primer/css) | [focus "outline" visible e.g. on button](https://primer.style/design/components/button/react) | `:focus-visible:not(:disabled) { box-shadow: none; outline: rgb(9, 105, 218) solid 2px; outline-offset: -2px; }`; also provide a [detailed explanation](https://primer.style/design/guides/accessibility/focus-management) |
| [GitLab Pajamas](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com) | [focus "outline" visible e.g. on button](https://design.gitlab.com/components/button) | `:focus { box-shadow: inset 0 0 0 1px #89888d, 0 0 0 1px #fff, 0 0 0 3px #428fdc; outline: none; background-color: #ececef;}` ; also provide an [explanation](https://design.gitlab.com/accessibility/keyboard-only#focus-states) |
| [HP Enterprise Grommet](https://github.com/grommet/grommet) | [focus `box-shadow` visible e.g. on button](https://storybook.grommet.io/?path=/story/controls-button-active--active) | `:focus { outline: none; box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px; }` |
| [IBM Carbon](https://github.com/carbon-design-system/carbon) | [focus `border-color` and `box-shadow` visible e.g. on button](https://carbondesignsystem.com/components/overview/) | `outline: none;` with an additional `:focus { border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe)); box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)),inset 0 0 0 2px var (--cds-background, #ffffff); }`; also provide a general [explanation](https://www.ibm.com/able/requirements/requirements/?version=7_1#2_4_7) |
| [MUI](https://github.com/mui/material-ui) | [widely used focus-state e.g. on tabs](https://mui.com/material-ui/react-tabs/) | several different, component specific stylings; also provide a general [explanation](https://mui.com/base-ui/getting-started/accessibility/#focus-ring) |
| [MongoDB.design](https://github.com/mongodb/design) | [focus `background-color` and `box-shadow` visible e.g. on button](https://www.mongodb.design/component/button/example/) | `:focus-visible { background-color: rgb(255, 255, 255); box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px, rgb(4, 152, 236) 0px 0px 0px 4px; }` |
| [Porsche Design System](https://github.com/porsche-design-system/porsche-design-system) | [focus-state by pseudo-element e.g. on button](https://designsystem.porsche.com/v3/components/button/examples) | `:focus::before { content: ""; position: fixed; border: 2px solid rgb(26, 68, 234);border-radius: 8px; inset: -6px; }` |
| [SBB Lyne](https://github.com/lyne-design-system/lyne-components) | [focus-state by pseudo-element e.g. on header elements](https://lyne-storybook.app.sbb.ch/?path=/docs/pages-home--docs) | `:host(:focus-visible:not([data-focus-origin="mouse"], [data-focus-origin="touch"])) .sbb-header-action::before { outline-offset: var(--sbb-focus-outline-offset); outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width); }` and `.sbb-header-action::before { position: absolute; content: ""; inset: var(--sbb-header-action-background-inset);border-radius: var(--sbb-border-radius-infinity);background-color: var(--sbb-header-action-background-color);transition-duration: var(--sbb-header-action-transition-duration);transition-timing-function: var(--sbb-header-action-transition-easing); transition-property: inset, background-color; border: var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color); }` |
| [Shopify Polaris](https://github.com/Shopify/polaris) | [focus-state by `outline` and `box-shadow` e.g. on button](https://polaris.shopify.com/components/actions/button) | `.Polaris-Button:focus-visible { box-shadow: var(--p-shadow-200); outline: var(--p-border-width-050) solid var(--p-color-border-focus); outline-offset: var(--p-space-025); }` |
| [SNCF Design System](https://gitlab.com/SNCF/wcs) | [focus-state by `outline` e.g. on button](https://wcs.dev.sncf/?path=/docs/components-button--documentation) | `.wcs-inner-button:focus-visible { outline: 2px dashed var(--wcs-primary); outline-offset: 4px; border-radius: var(--wcs-button-border-radius); }` |
| [Telefonica Mistica](https://github.com/Telefonica/mistica-web) | [focus-state e.g. on buttons](https://brandfactory.telefonica.com/d/iSp7b1DkYygv/n-a#/components/buttons) | regular browser defaults like e.g. `:focus-visible { outline: -webkit-focus-ring-color auto 1px; }` |
| [Telekom Scale](https://github.com/telekom/scale) | [focus-state by `outline` e.g. on button](https://telekom.github.io/scale/?path=/docs/components-button--standard) | `.button:not(.button--disabled):focus { outline: var(--telekom-line-weight-highlight) solid var(--color-focus); outline-offset: var(--telekom-spacing-composition-space-01); }` |
| [Washington Post Design System](https://build.washingtonpost.com/) | [focus-state e.g. on button](https://build.washingtonpost.com/components/button) | `@media screen and (-webkit-min-device-pixel-ratio: 0) :focus-visible { outline: 1px auto -webkit-focus-ring-color; }` overwriting another `:focus-visible { outline: 1px auto Highlight; }` |

## Conclusion

- _GitHub Primer_ has a quite interesting approach to focus states. By shifting the outline to the inside of the element (negative `outline-offset`), you get a quite universal approach if even also mixing it with having the `outline-color` defined by the `currentColor` keyword, as this needs to be accessible to the elements / components background anyhow and you wouldn't have the problem with diverse underlying contents like e.g. images behind the element / component, as you only consider the elements background itself.
Loading