[86by8dgn5][spin, spin-container, skeleton] aria-label and aria-live …

…a11y improvements

crowdin.yml

@@ -20,10 +20,10 @@
     "source": "/semcore/color-picker/src/translations/en.json",
     "translation": "/%original_path%/%two_letters_code%.json",
   },
-    {
-        "source": "/semcore/d3-chart/src/translations/en.json",
-        "translation": "/%original_path%/%two_letters_code%.json",
-    },
+  {
+      "source": "/semcore/d3-chart/src/translations/en.json",
+      "translation": "/%original_path%/%two_letters_code%.json",
+  },
   {
     "source": "/semcore/d3-chart/src/a11y/translations/module/en.json",
     "translation": "/%original_path%/%two_letters_code%.json",
@@ -118,6 +118,14 @@
     "source": "/semcore/select/src/translations/en.json",
     "translation": "/%original_path%/%two_letters_code%.json",
   },
+  {
+    "source": "/semcore/skeleton/src/translations/en.json",
+    "translation": "/%original_path%/%two_letters_code%.json",
+  },
+  {
+    "source": "/semcore/spin/src/translations/en.json",
+    "translation": "/%original_path%/%two_letters_code%.json",
+  },
   {
     "source": "/semcore/tag/src/translations/en.json",
     "translation": "/%original_path%/%two_letters_code%.json",

semcore/skeleton/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [5.27.0] - 2024-05-23
+
+### Added
+
+- Live region "Loading…" announcement for assistive technologies.
+- "Loading…" aria-label.
+- `locale` prop.
+
+### Changed
+
+- `aria-atomic` attribute moved to inner `foreignObject` element.
+
 ## [5.26.0] - 2024-05-22
 
 ### Changed

semcore/skeleton/src/Skeleton.jsx

@@ -2,6 +2,10 @@ import React from 'react';
 import createComponent, { Component, sstyled, Root } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
 import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
+import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
+import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
+import { ScreenReaderOnly } from '@semcore/utils/lib/ScreenReaderOnly';
+import Portal from '@semcore/portal';
 
 import style from './style/skeleton.shadow.css';
 
@@ -13,6 +17,7 @@ const MAP_COLOR_THEME = {
 class SkeletonRoot extends Component {
   static displayName = 'Skeleton';
   static style = style;
+  static enhance = [i18nEnhance(localizedMessages)];
   static defaultProps = {
     width: '100%',
     height: '100%',
@@ -21,7 +26,7 @@ class SkeletonRoot extends Component {
 
   render() {
     const SSkeleton = Root;
-    const { Children, styles, duration, hidden, style } = this.asProps;
+    const { Children, styles, duration, hidden, getI18nText } = this.asProps;
 
     if (hidden) return null;
 
@@ -30,10 +35,13 @@ class SkeletonRoot extends Component {
         render={Box}
         durationAnim={`${duration}ms`}
         aria-busy='true'
-        aria-atomic='true'
-        aria-hidden='true'
-        alt=''
+        aria-label={getI18nText('loading')}
       >
+        <foreignObject x='0' y='0' width='0' height='0'>
+          <ScreenReaderOnly aria-live='polite' role='status' aria-atomic='true'>
+            {getI18nText('loading')}
+          </ScreenReaderOnly>
+        </foreignObject>
         <Children />
       </SSkeleton>,
     );

semcore/skeleton/src/index.d.ts

@@ -20,6 +20,8 @@ export type SkeletonProps = BoxProps &
      * @default invert
      */
     theme?: 'dark' | 'invert';
+
+    locale?: string;
   };
 
 /** @deprecated */

semcore/skeleton/src/translations/__intergalactic-dynamic-locales.ts

@@ -0,0 +1,31 @@
+import de from './de.json';
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import it from './it.json';
+import ja from './ja.json';
+import ko from './ko.json';
+import nl from './nl.json';
+import pt from './pt.json';
+import tr from './tr.json';
+import vi from './vi.json';
+import zh from './zh.json';
+import pl from './pl.json';
+import sv from './sv.json';
+
+export const localizedMessages = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  pt,
+  tr,
+  vi,
+  zh,
+  pl,
+  sv,
+};

semcore/skeleton/src/translations/de.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Wird geladen …"
+}

semcore/skeleton/src/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Loading…"
+}

semcore/skeleton/src/translations/es.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Cargando"
+}

semcore/skeleton/src/translations/fr.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Chargement en cours"
+}

semcore/skeleton/src/translations/it.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Caricamento"
+}

semcore/skeleton/src/translations/ja.json

@@ -0,0 +1,3 @@
+{
+  "loading": "読み込み中"
+}

semcore/skeleton/src/translations/ko.json

@@ -0,0 +1,3 @@
+{
+  "loading": "로딩 중"
+}

semcore/skeleton/src/translations/nl.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Bezig met laden..."
+}

semcore/skeleton/src/translations/pl.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Ładowanie…"
+}

semcore/skeleton/src/translations/pt.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Carregando"
+}

semcore/skeleton/src/translations/sv.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Laddar…"
+}

semcore/skeleton/src/translations/tr.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Yükleniyor"
+}

semcore/skeleton/src/translations/vi.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Đang tải…"
+}

semcore/skeleton/src/translations/zh.json

@@ -0,0 +1,3 @@
+{
+  "loading": "正在加载"
+}

semcore/spin-container/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [7.27.0] - 2024-05-23
+
+### Changed
+
+- Content inside of loading container is unavailable for interacting now.
+
 ## [7.26.0] - 2024-05-22
 
 ### Changed

semcore/spin-container/src/SpinContainer.jsx

@@ -32,6 +32,12 @@ class SpinContainerRoot extends Component {
     };
   }
 
+  getContentProps() {
+    const { loading } = this.asProps;
+
+    return { inert: loading ? '' : undefined };
+  }
+
   render() {
     const SSpinContainer = Root;
     const { styles, Children, loading, forcedAdvancedMode } = this.asProps;

semcore/spin/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [5.26.0] - 2024-05-23
+
+### Added
+
+- Live region "Loading…" announcement for assistive technologies.
+- "Loading…" aria-label.
+- `locale` prop.
+
 ## [5.25.0] - 2024-05-22
 
 ### Changed

semcore/spin/src/Spin.jsx

@@ -2,30 +2,38 @@ import React from 'react';
 import createComponent, { Component, sstyled, Root } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
 import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
+import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
+import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
+import { ScreenReaderOnly } from '@semcore/utils/lib/ScreenReaderOnly';
 
 import style from './style/spin.shadow.css';
 
 class RootSpin extends Component {
   static displayName = 'Spin';
   static style = style;
-  static enhance = [resolveColorEnhance()];
+  static enhance = [resolveColorEnhance(), i18nEnhance(localizedMessages)];
   static defaultProps = {
     size: 'm',
     theme: 'dark',
   };
 
   render() {
     const SSpin = Root;
-    const { Children, styles, theme, resolveColor } = this.asProps;
+    const { Children, styles, theme, resolveColor, getI18nText } = this.asProps;
     return sstyled(styles)(
       <SSpin
         render={Box}
         tag='svg'
         viewBox='0 0 24 24'
         use:theme={resolveColor(theme)}
         aria-busy='true'
-        aria-hidden='true'
+        aria-label={getI18nText('loading')}
       >
+        <foreignObject x='0' y='0' width='0' height='0'>
+          <ScreenReaderOnly aria-live='polite' role='status' aria-atomic='true'>
+            {getI18nText('loading')}
+          </ScreenReaderOnly>
+        </foreignObject>
         <path d='M16.98 20.6256C17.5433 21.6013 18.8054 21.9477 19.6718 21.2274C21.567 19.6517 22.9447 17.5183 23.5911 15.1058C24.4148 12.0317 23.9836 8.75621 22.3923 6C20.801 3.24379 18.18 1.23261 15.1058 0.408891C12.6934 -0.237529 10.1569 -0.111098 7.84473 0.742337C6.78777 1.13246 6.45667 2.39867 7.02 3.37439V3.37439C7.58333 4.3501 8.83088 4.65471 9.91792 4.35856C11.2588 3.99325 12.6844 3.984 14.0498 4.34987C16.0788 4.89352 17.8087 6.2209 18.8589 8.04C19.9092 9.8591 20.1938 12.0209 19.6501 14.0498C19.2843 15.4153 18.5634 16.6453 17.5766 17.6239C16.7766 18.4172 16.4167 19.6499 16.98 20.6256V20.6256Z' />
         <Children />
       </SSpin>,

semcore/spin/src/index.d.ts

@@ -19,6 +19,8 @@ export type SpinProps = BoxProps & {
    * otherwise only horizontal alignment will occur.
    * */
   centered?: boolean;
+
+  locale?: string;
 };
 
 declare const Spin: Intergalactic.Component<'div', SpinProps>;

semcore/spin/src/translations/__intergalactic-dynamic-locales.ts

@@ -0,0 +1,31 @@
+import de from './de.json';
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import it from './it.json';
+import ja from './ja.json';
+import ko from './ko.json';
+import nl from './nl.json';
+import pt from './pt.json';
+import tr from './tr.json';
+import vi from './vi.json';
+import zh from './zh.json';
+import pl from './pl.json';
+import sv from './sv.json';
+
+export const localizedMessages = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  pt,
+  tr,
+  vi,
+  zh,
+  pl,
+  sv,
+};

semcore/spin/src/translations/de.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Wird geladen …"
+}

semcore/spin/src/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Loading…"
+}

semcore/spin/src/translations/es.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Cargando"
+}

semcore/spin/src/translations/fr.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Chargement en cours"
+}

semcore/spin/src/translations/it.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Caricamento"
+}

semcore/spin/src/translations/ja.json

@@ -0,0 +1,3 @@
+{
+  "loading": "読み込み中"
+}

semcore/spin/src/translations/ko.json

@@ -0,0 +1,3 @@
+{
+  "loading": "로딩 중"
+}

semcore/spin/src/translations/nl.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Bezig met laden..."
+}

semcore/spin/src/translations/pl.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Ładowanie…"
+}

semcore/spin/src/translations/pt.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Carregando"
+}

semcore/spin/src/translations/sv.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Laddar…"
+}

semcore/spin/src/translations/tr.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Yükleniyor"
+}

semcore/spin/src/translations/vi.json

@@ -0,0 +1,3 @@
+{
+  "loading": "Đang tải…"
+}

semcore/spin/src/translations/zh.json

@@ -0,0 +1,3 @@
+{
+  "loading": "正在加载"
+}

semcore/utils/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [4.28.0] - 2024-05-23
+
+### Changed
+
+- `ScreenReaderOnly` now passed all props to the inner `span` element as DOM attributes.
+
 ## [4.27.0] - 2024-05-16
 
 ### Added