feat(feedback): Add "outline focus" and "foreground hover" vars (#9462)

* **BREAKING** `inputBorderFocus` is now `inputOutlineFocus` (I wanted
to make this directly tied to the css property being used to avoid
confusion)
* added `submitOutlineFocus`, `submitForegroundHover` (as well as the
`cancel` versions)
* change to use `:focus-visible` pseudo class (instead of `:focus`)
* do not show `buttonLabel` if empty

Closes #9439

Author: billyvg

packages/feedback/README.md

@@ -126,15 +126,18 @@ Colors can be customized via the Feedback constructor or by defining CSS variabl
 | `submitBackground` | `--submit-background` | `rgba(88, 74, 192, 1)` | `rgba(88, 74, 192, 1)` | Background color for the submit button |
 | `submitBackgroundHover` | `--submit-background-hover` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Background color when hovering over the submit button |
 | `submitBorder` | `--submit-border` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border style for the submit button |
+| `submitOutlineFocus` | `--submit-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for the submit button, in the focused state |
 | `submitForeground` | `--submit-foreground` | `#ffffff` | `#ffffff` | Foreground color for the submit button |
+| `submitForegroundHover` | `--submit-foreground-hover` | `#ffffff` | `#ffffff` | Foreground color for the submit button |
 | `cancelBackground` | `--cancel-background` | `transparent` | `transparent` | Background color for the cancel button |
 | `cancelBackgroundHover` | `--cancel-background-hover` | `var(--background-hover)` | `var(--background-hover)` | Background color when hovering over the cancel button |
 | `cancelBorder` | `--cancel-border` | `var(--border)` | `var(--border)` | Border style for the cancel button | 
+| `cancelOutlineFocus` | `--cancel-outline-focus` | `var(--input-outline-focus)` | `var(--input-outline-focus)` | Outline color for the cancel button, in the focused state |
 | `cancelForeground` | `--cancel-foreground` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button |
 | `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs |
 | `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs |
 | `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs |
-| `inputBorderFocus` | `--input-border-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border styles for form inputs when focused |
+| `inputOutlineFocus` | `--input-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for form inputs when focused |
 
 Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration.
 ```javascript

packages/feedback/src/constants.ts

@@ -1,5 +1,6 @@
 const LIGHT_BACKGROUND = '#ffffff';
 const INHERIT = 'inherit';
+const SUBMIT_COLOR = 'rgba(108, 95, 199, 1)';
 const LIGHT_THEME = {
   fontFamily: "'Helvetica Neue', Arial, sans-serif",
   fontSize: '14px',
@@ -14,19 +15,23 @@ const LIGHT_THEME = {
   error: '#df3338',
 
   submitBackground: 'rgba(88, 74, 192, 1)',
-  submitBackgroundHover: 'rgba(108, 95, 199, 1)',
-  submitBorder: 'rgba(108, 95, 199, 1)',
+  submitBackgroundHover: SUBMIT_COLOR,
+  submitBorder: SUBMIT_COLOR,
+  submitOutlineFocus: '#29232f',
   submitForeground: LIGHT_BACKGROUND,
+  submitForegroundHover: LIGHT_BACKGROUND,
 
   cancelBackground: 'transparent',
   cancelBackgroundHover: 'var(--background-hover)',
   cancelBorder: 'var(--border)',
+  cancelOutlineFocus: 'var(--input-outline-focus)',
   cancelForeground: 'var(--foreground)',
+  cancelForegroundHover: 'var(--foreground)',
 
   inputBackground: INHERIT,
   inputForeground: INHERIT,
   inputBorder: 'var(--border)',
-  inputBorderFocus: 'rgba(108, 95, 199, 1)',
+  inputOutlineFocus: SUBMIT_COLOR,
 };
 
 export const DEFAULT_THEME = {

packages/feedback/src/types/index.ts

@@ -269,11 +269,20 @@ export interface FeedbackTheme {
    * Border style for the submit button
    */
   submitBorder: string;
+  /**
+   * Border style for the submit button, in the focued state
+   */
+  submitOutlineFocus: string;
   /**
    * Foreground color for the submit button
    */
   submitForeground: string;
 
+  /**
+   * Foreground color for the submit button, in the hover state
+   */
+  submitForegroundHover: string;
+
   /**
    * Background color for the cancel button
    */
@@ -286,10 +295,18 @@ export interface FeedbackTheme {
    * Border style for the cancel button
    */
   cancelBorder: string;
+  /**
+   * Border style for the cancel button, in the focued state
+   */
+  cancelOutlineFocus: string;
   /**
    * Foreground color for the cancel button
    */
   cancelForeground: string;
+  /**
+   * Foreground color for the cancel button, in the hover state
+   */
+  cancelForegroundHover: string;
 
   /**
    * Background color for form inputs
@@ -306,7 +323,7 @@ export interface FeedbackTheme {
   /**
    * Border styles for form inputs when focused
    */
-  inputBorderFocus: string;
+  inputOutlineFocus: string;
 }
 
 export interface FeedbackThemes {

packages/feedback/src/widget/Actor.ts

@@ -34,13 +34,15 @@ export function Actor({ buttonLabel, onClick }: ActorProps): ActorComponent {
       ['aria-hidden']: 'false',
     },
     Icon().el,
-    createElement(
-      'span',
-      {
-        className: 'widget__actor__text',
-      },
-      buttonLabel,
-    ),
+    buttonLabel
+      ? createElement(
+          'span',
+          {
+            className: 'widget__actor__text',
+          },
+          buttonLabel,
+        )
+      : null,
   );
 
   el.addEventListener('click', _handleClick);

packages/feedback/src/widget/Dialog.css.ts

@@ -122,9 +122,8 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
   padding: 6px 12px;
 }
 
-.form__input:focus {
-  outline: 1px solid transparent;
-  outline-color: var(--input-border-focus);
+.form__input:focus-visible {
+  outline: 1px auto var(--input-outline-focus);
 }
 
 .form__input--textarea {
@@ -159,6 +158,10 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
 }
 .btn--primary:hover {
   background-color: var(--submit-background-hover);
+  color: var(--submit-foreground-hover);
+}
+.btn--primary:focus-visible {
+  outline: 1px auto var(--submit-outline-focus);
 }
 
 .btn--default {
@@ -168,6 +171,10 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
 }
 .btn--default:hover {
   background-color: var(--cancel-background-hover);
+  color: var(--cancel-foreground-hover);
+}
+.btn--default:focus-visible {
+  outline: 1px auto var(--cancel-outline-focus);
 }
 
 .success-message {

packages/feedback/src/widget/Main.css.ts

@@ -13,17 +13,21 @@ function getThemedCssVariables(theme: FeedbackTheme): string {
   --submit-background: ${theme.submitBackground};
   --submit-background-hover: ${theme.submitBackgroundHover};
   --submit-border: ${theme.submitBorder};
+  --submit-outline-focus: ${theme.submitOutlineFocus};
   --submit-foreground: ${theme.submitForeground};
+  --submit-foreground-hover: ${theme.submitForegroundHover};
 
   --cancel-background: ${theme.cancelBackground};
   --cancel-background-hover: ${theme.cancelBackgroundHover};
   --cancel-border: ${theme.cancelBorder};
+  --cancel-outline-focus: ${theme.cancelOutlineFocus};
   --cancel-foreground: ${theme.cancelForeground};
+  --cancel-foreground-hover: ${theme.cancelForegroundHover};
 
   --input-background: ${theme.inputBackground};
   --input-foreground: ${theme.inputForeground};
   --input-border: ${theme.inputBorder};
-  --input-border-focus: ${theme.inputBorderFocus};
+  --input-outline-focus: ${theme.inputOutlineFocus};
   `;
 }