@microbit/ui 0.3.0 → 0.3.2

package/lang/ui.ga-ie.json

@@ -40,7 +40,7 @@
     "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
   },
   "ui.toast-region": {
-    "defaultMessage": "{count, plural, one {# fógra} two {# fhógra} few {# fógraí} many {# notifications} other {# fógraí}}.",
+    "defaultMessage": "{count, plural, one {# fógra} two {# fhógra} few {# fógraí} many {# fógraí} other {# fógraí}}",
     "description": "Accessible label for the notifications area; count is the number of notifications showing"
   },
   "ui.toast-status-error": {

package/lang/ui.ja.json

@@ -16,7 +16,7 @@
     "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
   },
   "ui.loading": {
-    "defaultMessage": "読み込み中",
+    "defaultMessage": "ロード中",
     "description": "Announced by screen readers for a button showing a loading spinner"
   },
   "ui.new-tab-notice": {

package/lang/ui.nl.json

@@ -1,6 +1,6 @@
 {
   "ui.breadcrumb": {
-    "defaultMessage": "Kruimelpad",
+    "defaultMessage": "Kruimelspoor",
     "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
   },
   "ui.close-action": {
@@ -52,7 +52,7 @@
     "description": "Announced by screen readers before an informational notification"
   },
   "ui.toast-status-success": {
-    "defaultMessage": "Succes",
+    "defaultMessage": "Succesvol",
     "description": "Announced by screen readers before a success notification"
   },
   "ui.toast-status-warning": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a design language ported from Chakra UI v2. Ships as source; see README for the consumption setup.",
   "license": "MIT",
   "type": "module",

package/src/Input.recipe.ts

@@ -49,11 +49,11 @@ export const input = defineRecipe({
     "&&&:is([data-invalid], :user-invalid)": {
       borderColor: "danger.500",
     },
-    // Modality-tracked: RAC's attribute, or Input.tsx's. Native
+    // Modality-tracked: RAC's attribute, or Input/NativeSelect's. Native
     // :focus-visible is the fallback for a bare element wearing the recipe,
-    // but not text-entry ones — browsers match it there on a pointer click,
-    // which is what the tracking exists to exclude.
-    "&&&:is([data-focus-visible], :focus-visible:not([data-rac], input, textarea))":
+    // but not form controls — browsers match it there on a pointer click
+    // (Chrome includes select), which is what the tracking exists to exclude.
+    "&&&:is([data-focus-visible], :focus-visible:not([data-rac], input, textarea, select))":
       {
         focusRing: "outline",
       },

package/src/NativeSelect.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { forwardRef, SelectHTMLAttributes } from "react";
+import { mergeProps, useFocusRing } from "react-aria";
 import { css, cx } from "styled-system/css";
 import { input, InputVariantProps } from "styled-system/recipes";
 import { SystemStyleObject } from "styled-system/types";
@@ -40,9 +41,14 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
     { hideChevron = false, size, css: cssProp, wrapperCss, className, ...rest },
     ref,
   ) {
+    // Modality tracked here rather than via the recipe's native
+    // :focus-visible fallback: Chrome matches that on a clicked select (as it
+    // does on text inputs), and this ring is keyboard-only.
+    const { isFocusVisible, focusProps } = useFocusRing();
     const select = (
       <select
         ref={ref}
+        data-focus-visible={isFocusVisible || undefined}
         className={cx(
           input({ size }),
           css(
@@ -59,7 +65,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           ),
           className,
         )}
-        {...rest}
+        {...mergeProps(rest, focusProps)}
       />
     );
     if (hideChevron) {