chore: Add focus visible logic from core

src/internal/base-component/use-base-component.ts

@@ -8,12 +8,13 @@
 } from "@cloudscape-design/component-toolkit/internal";
 import { MutableRefObject } from "react";
 import { PACKAGE_SOURCE, PACKAGE_VERSION } from "../environment";
+import useFocusVisible from "../hooks/focus-visible";
 import { useTelemetry } from "./use-telemetry";
 
 initAwsUiVersions(PACKAGE_SOURCE, PACKAGE_VERSION);
 
 export interface InternalBaseComponentProps {
  __internalRootRef?: MutableRefObject<any> | null;
 }
 
 /**
@@ -21,8 +22,25 @@
  * attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this
  * root DOM node and emits the telemetry for this component.
  */
 export default function useBaseComponent<T = any>(componentName: string, config?: ComponentConfiguration) {
  useTelemetry(componentName, config);
+ useFocusVisible();
  const elementRef = useComponentMetadata<T>(componentName, PACKAGE_VERSION);
  return { __internalRootRef: elementRef };
 }
+
+// we also support data-* attributes, but they are always implicitly allowed by typescript
+// http://www.typescriptlang.org/docs/handbook/jsx.html#attribute-type-checking
+// "Note: If an attribute name is not a valid JS identifier (like a data-* attribute), it is not considered to be an error"
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface BaseComponentProps {}
+
+export function getBaseProps(props: BaseComponentProps) {
+ const baseProps: Record<string, string> = {};
+ Object.keys(props).forEach((prop) => {
+ if (prop.startsWith("data-")) {
+ baseProps[prop] = (props as Record<string, string>)[prop];
+ }
+ });
+ return baseProps;
+}

src/internal/hooks/focus-visible/index.scss

@@ -0,0 +1,13 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+// mixin to apply styles only when keyboard focus is needed
+// requires JavaScript part from useFocusVisible hook to be applied
+@mixin when-visible {
+ // stylelint-disable-next-line selector-combinator-disallowed-list
+ body[data-awsui-focus-visible='true'] &:focus {
+ @content;
+ }
+}

src/internal/hooks/focus-visible/index.ts

@@ -0,0 +1,55 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect } from "react";
+import { KeyCode } from "../../keycode";
+
+export function isModifierKey(event: KeyboardEvent) {
+ // we do not want to highlight focused element
+ // when special keys are pressed
+ return [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;
+}
+
+function setIsKeyboard(active: boolean) {
+ if (active) {
+ document.body.setAttribute("data-awsui-focus-visible", "true");
+ } else {
+ document.body.removeAttribute("data-awsui-focus-visible");
+ }
+}
+
+function handleMousedown() {
+ return setIsKeyboard(false);
+}
+
+function handleKeydown(event: KeyboardEvent) {
+ if (!isModifierKey(event)) {
+ setIsKeyboard(true);
+ }
+}
+
+let componentsCount = 0;
+
+function addListeners() {
+ document.addEventListener("mousedown", handleMousedown);
+ document.addEventListener("keydown", handleKeydown);
+}
+
+function removeListeners() {
+ document.removeEventListener("mousedown", handleMousedown);
+ document.removeEventListener("keydown", handleKeydown);
+}
+
+export default function useFocusVisible() {
+ useEffect(() => {
+ if (componentsCount === 0) {
+ addListeners();
+ }
+ componentsCount++;
+ return () => {
+ componentsCount--;
+ if (componentsCount === 0) {
+ removeListeners();
+ }
+ };
+ }, []);
+}

src/internal/hooks/use-merge-refs/index.tsx

@@ -0,0 +1,31 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useMemo } from "react";
+
+/**
+ * useMergeRefs merges multiple refs into single ref callback.
+ *
+ * For example
+ * const mergedRef = useMergeRefs(ref1, ref2, ref3)
+ * <div ref={refs}>...</div>
+ */
+export function useMergeRefs<T = any>(
+ ...refs: Array<React.RefCallback<T> | React.MutableRefObject<T> | null | undefined>
+): React.RefCallback<T> | null {
+ return useMemo(() => {
+ if (refs.every((ref) => ref === null || ref === undefined)) {
+ return null;
+ }
+ return (value: T | null) => {
+ refs.forEach((ref) => {
+ if (typeof ref === "function") {
+ ref(value);
+ } else if (ref !== null && ref !== undefined) {
+ (ref as React.MutableRefObject<any>).current = value;
+ }
+ });
+ };
+ // ESLint expects an array literal which we can not provide here
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, refs);
+}

src/internal/keycode.ts

@@ -0,0 +1,24 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+// When updating the list of key codes, don't forget
+// to modify corresponding list in test-utils
+// to avoid failing unit tests
+export enum KeyCode {
+ pageUp = 33,
+ pageDown = 34,
+ end = 35,
+ home = 36,
+ backspace = 8,
+ space = 32,
+ down = 40,
+ left = 37,
+ right = 39,
+ up = 38,
+ escape = 27,
+ enter = 13,
+ tab = 9,
+ shift = 16,
+ control = 17,
+ alt = 18,
+ meta = 91,
+}

src/internal/shared.scss

@@ -25,3 +25,20 @@
  @content;
  }
 }
+
+// the motion mixin definition is an exception from these scoping rules
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+@mixin with-motion {
+ @content;
+
+ @media (prefers-reduced-motion: reduce) {
+ animation: none;
+ transition: none;
+ }
+ :global(.awsui-motion-disabled) &,
+ :global(.awsui-mode-entering) & {
+ animation: none;
+ transition: none;
+ }
+}
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */