@react-ui-org/react-ui 0.49.0 → 0.50.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "keywords": [
     "react",
     "ui",

package/src/lib/components/FileInputField/FileInputField.jsx

@@ -54,7 +54,6 @@ export const FileInputField = React.forwardRef((props, ref) => {
         <div className={styles.inputContainer}>
           <input
             {...transferProps(restProps)}
-            className={styles.input}
             disabled={disabled}
             id={id}
             ref={ref}

package/src/lib/components/FileInputField/FileInputField.scss

@@ -17,10 +17,6 @@
     @include box-field-elements.input-container();
 }
 
-.input {
-    @include accessibility.focus-ring();
-}
-
 .helpText,
 .validationText {
     @include foundation.help-text();

package/src/lib/components/Modal/Modal.jsx

@@ -110,7 +110,7 @@ export const Modal = ({
         const childrenWrapperElement = childrenWrapperRef.current;
         const childrenElements = childrenWrapperElement.querySelectorAll('*');
         const formFieldEl = Array.from(childrenElements).find(
-          (element) => ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName),
+          (element) => ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName) && !element.disabled,
         );
 
         if (formFieldEl) {

package/src/lib/components/Modal/README.mdx

@@ -115,10 +115,10 @@ See [API](#api) for all available options.
 - **Modal actions** should correspond to the modal purpose, too. E.g. “Delete”
   tells better what happens rather than “OK”.
 
-- Modal **automatically focuses the first form field** by default which allows
-  users to confirm the modal by hitting the enter key. When no field is found
-  then the primary button (in the footer) is focused. To turn this feature off,
-  set the `autofocus` prop to `false`.
+- Modal **automatically focuses the first non-disabled form field** by default
+  which allows users to confirm the modal by hitting the enter key. When no
+  field is found then the primary button (in the footer) is focused. To turn
+  this feature off, set the `autofocus` prop to `false`.
 
 - **Avoid stacking** of modals. While it may technically work, the modal is just
   not designed for that.
@@ -841,8 +841,9 @@ Autofocus is implemented to enhance the user experience by automatically
 focussing an element within the modal.
 
 How does it work? It tries to find `input`, `textarea`, and `select` elements
-inside of Modal and moves focus into the first found. If none is found and the
-`primaryButtonRef` prop on Modal is set, then the primary button is focused.
+inside of Modal and moves focus onto the first non-disabled one. If none is
+found and the `primaryButtonRef` prop on Modal is set, then the primary button
+is focused.
 
 Autofocus is enabled by default, so if you want to control the focus of
 elements manually, set the `autoFocus` prop on Modal to `false`.

package/src/lib/styles/generic/_forms.scss

@@ -1,9 +1,13 @@
-// Remove focus outline as we implement custom appearance of focus state.
-button:focus,
-input:focus,
-select:focus,
-textarea:focus {
-    outline: 0;
+@use "../tools/accessibility";
+
+// Remove focus outline as we implement custom appearance of focus state. Increase specificity where necessary to
+// override normalize.css.
+:where(button, input, select, textarea):focus {
+    outline: none;
+}
+
+:is(a, button, input, select, textarea, [type="button"], [type="submit"]) {
+    @include accessibility.focus-ring();
 }
 
 // Reset Chrome and Firefox behaviour which sets a `min-width: min-content;` on fieldsets.

package/src/lib/styles/theme/_accessibility.scss

@@ -1,2 +1,4 @@
 $tap-target-size: var(--rui-tap-target-size);
+$focus-outline: var(--rui-focus-outline);
+$focus-outline-offset: var(--rui-focus-outline-offset);
 $focus-box-shadow: var(--rui-focus-box-shadow);

package/src/lib/styles/theme/_form-fields.scss

@@ -13,6 +13,7 @@ $label-font-size: var(--rui-FormField__label__font-size);
 $help-text-font-size: var(--rui-FormField__help-text__font-size);
 $help-text-font-style: var(--rui-FormField__help-text__font-style);
 $help-text-color: var(--rui-FormField__help-text__color);
+$required-label-color: var(--rui-FormField--required__label__color);
 $required-sign: var(--rui-FormField--required__sign);
 $required-sign-color: var(--rui-FormField--required__sign__color);
 

package/src/lib/styles/tools/_accessibility.scss

@@ -46,6 +46,8 @@
 
 @mixin focus-ring() {
     &:focus-visible {
+        outline: theme.$focus-outline;
+        outline-offset: theme.$focus-outline-offset;
         box-shadow: theme.$focus-box-shadow;
     }
 }

package/src/lib/styles/tools/form-fields/_foundation.scss

@@ -12,6 +12,8 @@
 }
 
 @mixin label-required() {
+    color: var(--rui-local-surrounding-text-color, #{theme.$required-label-color});
+
     &::after {
         content: theme.$required-sign;
         color: theme.$required-sign-color;

package/src/lib/theme.scss

@@ -149,7 +149,9 @@
 
     // Accessibility
     --rui-tap-target-size: 10mm;
-    --rui-focus-box-shadow: 0 0 0 0.2em var(--rui-color-active-focus);
+    --rui-focus-outline: 0.2em solid var(--rui-color-active-focus);
+    --rui-focus-outline-offset: 1px;
+    --rui-focus-box-shadow: none;
 
     // Bottom spacings
     --rui-spacing-bottom-default: var(--rui-spacing-5);
@@ -738,6 +740,7 @@
     --rui-FormField__help-text__font-size: var(--rui-typography-size-small);
     --rui-FormField__help-text__font-style: normal;
     --rui-FormField__help-text__color: var(--rui-color-gray-500);
+    --rui-FormField--required__label__color: inherit;
     --rui-FormField--required__sign: "\00a0*"; // 2.
     --rui-FormField--required__sign__color: var(--rui-color-gray-500);