Global focus styles

.changeset/giant-bees-talk.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": major
+---
+
+Global CSS focus styles

docs/src/stories/components/Marketing/MarketingButton.stories.jsx

@@ -7,7 +7,7 @@ export default {
     layout: 'padded'
   },
 
-  excludeStories: ['ButtonTemplate'],
+  excludeStories: ['MarketingButtonTemplate'],
   argTypes: {
     variant: {
       options: [0, 1, 2, 3], // iterator
@@ -77,7 +77,7 @@ const focusMethod = function getFocus() {
   button.focus()
 }
 
-export const ButtonTemplate = ({label, variant, disabled, size, animated, focusElement, focusAllElements}) => (
+export const MarketingButtonTemplate = ({label, variant, disabled, size, animated, focusElement, focusAllElements}) => (
   <>
     <button
       disabled={disabled}
@@ -111,7 +111,7 @@ export const ButtonTemplate = ({label, variant, disabled, size, animated, focusE
   </>
 )
 
-export const Playground = ButtonTemplate.bind({})
+export const Playground = MarketingButtonTemplate.bind({})
 Playground.args = {
   animated: false,
   focusElement: false,

docs/src/stories/components/Marketing/MarketingLink.stories.jsx

@@ -7,7 +7,7 @@ export default {
     layout: 'padded'
   },
 
-  excludeStories: ['LinkTemplate'],
+  excludeStories: ['MarketingLinkTemplate'],
   argTypes: {
     size: {
       options: [0, 1], // iterator
@@ -67,7 +67,7 @@ const focusMethod = function getFocus() {
   link.focus()
 }
 
-export const LinkTemplate = ({label, emphasis, href, size, focusElement, focusAllElements}) => (
+export const MarketingLinkTemplate = ({label, emphasis, href, size, focusElement, focusAllElements}) => (
   <>
     <a
       href={href}
@@ -98,7 +98,7 @@ export const LinkTemplate = ({label, emphasis, href, size, focusElement, focusAl
   </>
 )
 
-export const Playground = LinkTemplate.bind({})
+export const Playground = MarketingLinkTemplate.bind({})
 Playground.args = {
   label: 'Link label',
   href: '/',

docs/src/stories/patterns/FocusStyles.stories.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import clsx from 'clsx'
+import {ButtonTemplate} from '../components/Button/Button.stories.jsx'
+import {CheckboxTemplate} from '../components/Forms/Checkbox.stories.jsx'
+import {InputTemplate} from '../components/Forms/Input.stories.jsx'
+import {SelectTemplate} from '../components/Forms/Select.stories.jsx'
+import {TextareaTemplate} from '../components/Forms/Textarea.stories.jsx'
+import {LinkTemplate} from '../components/Link/Link.stories.jsx'
+import {MarketingButtonTemplate} from '../components/Marketing/MarketingButton.stories.jsx'
+import {MarketingLinkTemplate} from '../components/Marketing/MarketingLink.stories.jsx'
+import {TabNavTemplate} from '../components/Navigation/TabNav.stories.jsx'
+import {TabNavItemTemplate} from '../components/Navigation/TabNavItem.stories.jsx'
+
+export default {
+  title: 'Patterns/FocusStyles',
+  layout: 'padded'
+}
+
+export const FocusStyles = ({}) => (
+  <div style={{display: 'flex', flexDirection: 'column', gap: '2rem'}}>
+    <div style={{display: 'flex', gap: '0.5rem'}}>
+      <ButtonTemplate variant="btn-primary" label="Primary" />
+      <ButtonTemplate variant="btn-secondary" label="Secondary" />
+      <ButtonTemplate variant="btn-outline" label="Outline" />
+      <ButtonTemplate variant="btn-danger" label="Danger" />
+      <ButtonTemplate variant="btn-link" label="Link" />
+      <ButtonTemplate variant="btn-invisible" label="Invisible" />
+      <ButtonTemplate variant="btn-primary" label="Primary" disabled />
+      <ButtonTemplate variant="btn-secondary" label="Secondary" disabled />
+      <ButtonTemplate variant="btn-outline" label="Outline" disabled />
+      <ButtonTemplate variant="btn-danger" label="Danger" disabled />
+      <ButtonTemplate variant="btn-link" label="Link" disabled />
+      <ButtonTemplate variant="btn-invisible" label="Invisible" disabled />
+    </div>
+    <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+      <CheckboxTemplate label="checkbox" type="checkbox" />
+      <CheckboxTemplate label="radio" type="radio" />
+      <InputTemplate label="input" type="text" />
+      <SelectTemplate label="select" />
+      <TextareaTemplate label="textarea" />
+      <LinkTemplate label="Link" href="/" />
+      <MarketingButtonTemplate label="Marketing Button" />
+      <MarketingLinkTemplate label="Marketing Link" href="/" />
+    </div>
+    <div>
+      <TabNavTemplate>
+        <TabNavItemTemplate text="First tab" ariaCurrent="location" href="#url" />
+        <TabNavItemTemplate text="Second tab" href="#url" />
+      </TabNavTemplate>
+    </div>
+  </div>
+)

src/actionlist/action-list-item.scss

@@ -1,12 +1,5 @@
 // stylelint-disable max-nesting-depth, selector-max-specificity
 
-@mixin focusOutline {
-  position: relative;
-  z-index: 1;
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
-}
-
 @mixin activeIndicatorLine {
   position: absolute;
   top: calc(50% - 12px);
@@ -37,6 +30,12 @@
     }
   }
 
+  // li only: focus, a href: focus-within on li
+  &:focus,
+  &:focus-within {
+    @include focusOutline;
+  }
+
   // only hover li without list as children
   &:not(.ActionList-item--hasSubItem) {
     @media (hover: hover) {
@@ -399,10 +398,6 @@
     margin-right: $spacer-2;
   }
 
-  &:focus-visible {
-    @include focusOutline;
-  }
-
   // sizes
 
   &.ActionList-content--sizeMedium {

src/base/base.scss

@@ -77,10 +77,63 @@ button {
 }
 
 details {
-  summary { cursor: pointer; }
+  summary {
+    cursor: pointer;
+  }
 
   &:not([open]) {
     // Set details content hidden by default for browsers that don't do this
-    > *:not(summary) { display: none !important; }
+    > *:not(summary) {
+      display: none !important;
+    }
+  }
+}
+
+// global focus styles
+
+a,
+button,
+[role='button'],
+input,
+textarea,
+select {
+  // fallback :focus state
+  &:focus {
+    @include focusOutline;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutline;
+  }
+}
+
+input:not([type='radio'], [type='checkbox']),
+textarea,
+select {
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
+}
+
+// for handling focus conditionally
+.focus {
+  @include focusOutline;
+
+  &:is(input, textarea, select) {
+    outline-offset: 0;
+  }
+}
+
+// Windows High Contrast mode
+@media (forced-colors: active) {
+  *:focus {
+    outline: solid 1px transparent;
   }
 }

src/base/normalize.scss

@@ -39,7 +39,8 @@ header,
 main, /* 2 */
 menu,
 nav,
-section { /* 1 */
+section {
+  /* 1 */
   display: block;
 }
 
@@ -96,16 +97,6 @@ a {
   background-color: transparent; /* 1 */
 }
 
-/**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
 /* Text-level semantics
    ========================================================================== */
 
@@ -278,7 +269,8 @@ optgroup {
  */
 
 button,
-input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -288,7 +280,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 
@@ -305,29 +298,6 @@ html [type="button"], /* 1 */
   -webkit-appearance: button; /* 2 */
 }
 
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 /**
  * Change the border, margin, and padding in all browsers (opinionated).
  */
@@ -367,8 +337,8 @@ textarea {
  * 2. Remove the padding in IE 10-.
  */
 
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -377,27 +347,17 @@ textarea {
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
 /**
  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
  */
 
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 

src/buttons/button.scss

@@ -100,14 +100,6 @@
       color: var(--color-primer-fg-disabled);
     }
   }
-
-  // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
-  &:focus,
-  &.focus {
-    border-color: var(--color-btn-focus-border);
-    outline: none;
-    box-shadow: var(--color-btn-focus-shadow);
-  }
 }
 
 // Primary button
@@ -144,13 +136,6 @@
     }
   }
 
-  &:focus,
-  &.focus {
-    background-color: var(--color-btn-primary-focus-bg);
-    border-color: var(--color-btn-primary-focus-border);
-    box-shadow: var(--color-btn-primary-focus-shadow);
-  }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-primary-counter-bg);
@@ -204,11 +189,6 @@
     }
   }
 
-  &:focus {
-    border-color: var(--color-btn-outline-focus-border);
-    box-shadow: var(--color-btn-outline-focus-shadow);
-  }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-outline-counter-bg);
@@ -266,11 +246,6 @@
     }
   }
 
-  &:focus {
-    border-color: var(--color-btn-danger-focus-border);
-    box-shadow: var(--color-btn-danger-focus-shadow);
-  }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-danger-counter-bg);