diff --git a/crowdin.yml b/crowdin.yml index 5673cccea..1518ccbe0 100644 --- a/crowdin.yml +++ b/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", diff --git a/semcore/skeleton/CHANGELOG.md b/semcore/skeleton/CHANGELOG.md index e2841ca3b..39522bd76 100644 --- a/semcore/skeleton/CHANGELOG.md +++ b/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 diff --git a/semcore/skeleton/src/Skeleton.jsx b/semcore/skeleton/src/Skeleton.jsx index eb521d849..838d58ef4 100644 --- a/semcore/skeleton/src/Skeleton.jsx +++ b/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')} > + + + {getI18nText('loading')} + + , ); diff --git a/semcore/skeleton/src/index.d.ts b/semcore/skeleton/src/index.d.ts index fc5515839..398b66b3f 100644 --- a/semcore/skeleton/src/index.d.ts +++ b/semcore/skeleton/src/index.d.ts @@ -20,6 +20,8 @@ export type SkeletonProps = BoxProps & * @default invert */ theme?: 'dark' | 'invert'; + + locale?: string; }; /** @deprecated */ diff --git a/semcore/skeleton/src/translations/__intergalactic-dynamic-locales.ts b/semcore/skeleton/src/translations/__intergalactic-dynamic-locales.ts new file mode 100644 index 000000000..524be0848 --- /dev/null +++ b/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, +}; diff --git a/semcore/skeleton/src/translations/de.json b/semcore/skeleton/src/translations/de.json new file mode 100644 index 000000000..a2ea7d1f9 --- /dev/null +++ b/semcore/skeleton/src/translations/de.json @@ -0,0 +1,3 @@ +{ + "loading": "Wird geladen …" +} diff --git a/semcore/skeleton/src/translations/en.json b/semcore/skeleton/src/translations/en.json new file mode 100644 index 000000000..4ea061005 --- /dev/null +++ b/semcore/skeleton/src/translations/en.json @@ -0,0 +1,3 @@ +{ + "loading": "Loading…" +} diff --git a/semcore/skeleton/src/translations/es.json b/semcore/skeleton/src/translations/es.json new file mode 100644 index 000000000..fcf205510 --- /dev/null +++ b/semcore/skeleton/src/translations/es.json @@ -0,0 +1,3 @@ +{ + "loading": "Cargando" +} diff --git a/semcore/skeleton/src/translations/fr.json b/semcore/skeleton/src/translations/fr.json new file mode 100644 index 000000000..dcb733f3d --- /dev/null +++ b/semcore/skeleton/src/translations/fr.json @@ -0,0 +1,3 @@ +{ + "loading": "Chargement en cours" +} diff --git a/semcore/skeleton/src/translations/it.json b/semcore/skeleton/src/translations/it.json new file mode 100644 index 000000000..af1efaa55 --- /dev/null +++ b/semcore/skeleton/src/translations/it.json @@ -0,0 +1,3 @@ +{ + "loading": "Caricamento" +} diff --git a/semcore/skeleton/src/translations/ja.json b/semcore/skeleton/src/translations/ja.json new file mode 100644 index 000000000..1feaecc1a --- /dev/null +++ b/semcore/skeleton/src/translations/ja.json @@ -0,0 +1,3 @@ +{ + "loading": "読み込み中" +} diff --git a/semcore/skeleton/src/translations/ko.json b/semcore/skeleton/src/translations/ko.json new file mode 100644 index 000000000..ab67ac03e --- /dev/null +++ b/semcore/skeleton/src/translations/ko.json @@ -0,0 +1,3 @@ +{ + "loading": "로딩 중" +} diff --git a/semcore/skeleton/src/translations/nl.json b/semcore/skeleton/src/translations/nl.json new file mode 100644 index 000000000..d99917aa1 --- /dev/null +++ b/semcore/skeleton/src/translations/nl.json @@ -0,0 +1,3 @@ +{ + "loading": "Bezig met laden..." +} diff --git a/semcore/skeleton/src/translations/pl.json b/semcore/skeleton/src/translations/pl.json new file mode 100644 index 000000000..acd462e6e --- /dev/null +++ b/semcore/skeleton/src/translations/pl.json @@ -0,0 +1,3 @@ +{ + "loading": "Ładowanie…" +} diff --git a/semcore/skeleton/src/translations/pt.json b/semcore/skeleton/src/translations/pt.json new file mode 100644 index 000000000..997baa32d --- /dev/null +++ b/semcore/skeleton/src/translations/pt.json @@ -0,0 +1,3 @@ +{ + "loading": "Carregando" +} diff --git a/semcore/skeleton/src/translations/sv.json b/semcore/skeleton/src/translations/sv.json new file mode 100644 index 000000000..ab9e6a301 --- /dev/null +++ b/semcore/skeleton/src/translations/sv.json @@ -0,0 +1,3 @@ +{ + "loading": "Laddar…" +} diff --git a/semcore/skeleton/src/translations/tr.json b/semcore/skeleton/src/translations/tr.json new file mode 100644 index 000000000..5482aaee6 --- /dev/null +++ b/semcore/skeleton/src/translations/tr.json @@ -0,0 +1,3 @@ +{ + "loading": "Yükleniyor" +} diff --git a/semcore/skeleton/src/translations/vi.json b/semcore/skeleton/src/translations/vi.json new file mode 100644 index 000000000..ba3a6ed72 --- /dev/null +++ b/semcore/skeleton/src/translations/vi.json @@ -0,0 +1,3 @@ +{ + "loading": "Đang tải…" +} diff --git a/semcore/skeleton/src/translations/zh.json b/semcore/skeleton/src/translations/zh.json new file mode 100644 index 000000000..8b80d6cac --- /dev/null +++ b/semcore/skeleton/src/translations/zh.json @@ -0,0 +1,3 @@ +{ + "loading": "正在加载" +} diff --git a/semcore/spin-container/CHANGELOG.md b/semcore/spin-container/CHANGELOG.md index e8a6a5ec6..89ef52c6a 100644 --- a/semcore/spin-container/CHANGELOG.md +++ b/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 diff --git a/semcore/spin-container/src/SpinContainer.jsx b/semcore/spin-container/src/SpinContainer.jsx index c02d88aa1..0590ca4ca 100644 --- a/semcore/spin-container/src/SpinContainer.jsx +++ b/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; diff --git a/semcore/spin/CHANGELOG.md b/semcore/spin/CHANGELOG.md index 9e4a3bcb0..3ca8f95de 100644 --- a/semcore/spin/CHANGELOG.md +++ b/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 diff --git a/semcore/spin/src/Spin.jsx b/semcore/spin/src/Spin.jsx index 075b200f7..b6c823da5 100644 --- a/semcore/spin/src/Spin.jsx +++ b/semcore/spin/src/Spin.jsx @@ -2,13 +2,16 @@ 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', @@ -16,7 +19,7 @@ class RootSpin extends Component { render() { const SSpin = Root; - const { Children, styles, theme, resolveColor } = this.asProps; + const { Children, styles, theme, resolveColor, getI18nText } = this.asProps; return sstyled(styles)( , diff --git a/semcore/spin/src/index.d.ts b/semcore/spin/src/index.d.ts index bbbd775be..4c4ef54d5 100644 --- a/semcore/spin/src/index.d.ts +++ b/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>; diff --git a/semcore/spin/src/translations/__intergalactic-dynamic-locales.ts b/semcore/spin/src/translations/__intergalactic-dynamic-locales.ts new file mode 100644 index 000000000..524be0848 --- /dev/null +++ b/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, +}; diff --git a/semcore/spin/src/translations/de.json b/semcore/spin/src/translations/de.json new file mode 100644 index 000000000..a2ea7d1f9 --- /dev/null +++ b/semcore/spin/src/translations/de.json @@ -0,0 +1,3 @@ +{ + "loading": "Wird geladen …" +} diff --git a/semcore/spin/src/translations/en.json b/semcore/spin/src/translations/en.json new file mode 100644 index 000000000..4ea061005 --- /dev/null +++ b/semcore/spin/src/translations/en.json @@ -0,0 +1,3 @@ +{ + "loading": "Loading…" +} diff --git a/semcore/spin/src/translations/es.json b/semcore/spin/src/translations/es.json new file mode 100644 index 000000000..fcf205510 --- /dev/null +++ b/semcore/spin/src/translations/es.json @@ -0,0 +1,3 @@ +{ + "loading": "Cargando" +} diff --git a/semcore/spin/src/translations/fr.json b/semcore/spin/src/translations/fr.json new file mode 100644 index 000000000..dcb733f3d --- /dev/null +++ b/semcore/spin/src/translations/fr.json @@ -0,0 +1,3 @@ +{ + "loading": "Chargement en cours" +} diff --git a/semcore/spin/src/translations/it.json b/semcore/spin/src/translations/it.json new file mode 100644 index 000000000..af1efaa55 --- /dev/null +++ b/semcore/spin/src/translations/it.json @@ -0,0 +1,3 @@ +{ + "loading": "Caricamento" +} diff --git a/semcore/spin/src/translations/ja.json b/semcore/spin/src/translations/ja.json new file mode 100644 index 000000000..1feaecc1a --- /dev/null +++ b/semcore/spin/src/translations/ja.json @@ -0,0 +1,3 @@ +{ + "loading": "読み込み中" +} diff --git a/semcore/spin/src/translations/ko.json b/semcore/spin/src/translations/ko.json new file mode 100644 index 000000000..ab67ac03e --- /dev/null +++ b/semcore/spin/src/translations/ko.json @@ -0,0 +1,3 @@ +{ + "loading": "로딩 중" +} diff --git a/semcore/spin/src/translations/nl.json b/semcore/spin/src/translations/nl.json new file mode 100644 index 000000000..d99917aa1 --- /dev/null +++ b/semcore/spin/src/translations/nl.json @@ -0,0 +1,3 @@ +{ + "loading": "Bezig met laden..." +} diff --git a/semcore/spin/src/translations/pl.json b/semcore/spin/src/translations/pl.json new file mode 100644 index 000000000..acd462e6e --- /dev/null +++ b/semcore/spin/src/translations/pl.json @@ -0,0 +1,3 @@ +{ + "loading": "Ładowanie…" +} diff --git a/semcore/spin/src/translations/pt.json b/semcore/spin/src/translations/pt.json new file mode 100644 index 000000000..997baa32d --- /dev/null +++ b/semcore/spin/src/translations/pt.json @@ -0,0 +1,3 @@ +{ + "loading": "Carregando" +} diff --git a/semcore/spin/src/translations/sv.json b/semcore/spin/src/translations/sv.json new file mode 100644 index 000000000..ab9e6a301 --- /dev/null +++ b/semcore/spin/src/translations/sv.json @@ -0,0 +1,3 @@ +{ + "loading": "Laddar…" +} diff --git a/semcore/spin/src/translations/tr.json b/semcore/spin/src/translations/tr.json new file mode 100644 index 000000000..5482aaee6 --- /dev/null +++ b/semcore/spin/src/translations/tr.json @@ -0,0 +1,3 @@ +{ + "loading": "Yükleniyor" +} diff --git a/semcore/spin/src/translations/vi.json b/semcore/spin/src/translations/vi.json new file mode 100644 index 000000000..ba3a6ed72 --- /dev/null +++ b/semcore/spin/src/translations/vi.json @@ -0,0 +1,3 @@ +{ + "loading": "Đang tải…" +} diff --git a/semcore/spin/src/translations/zh.json b/semcore/spin/src/translations/zh.json new file mode 100644 index 000000000..8b80d6cac --- /dev/null +++ b/semcore/spin/src/translations/zh.json @@ -0,0 +1,3 @@ +{ + "loading": "正在加载" +} diff --git a/semcore/utils/CHANGELOG.md b/semcore/utils/CHANGELOG.md index 602c26399..4babd3281 100644 --- a/semcore/utils/CHANGELOG.md +++ b/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 diff --git a/semcore/utils/src/ScreenReaderOnly.tsx b/semcore/utils/src/ScreenReaderOnly.tsx index 0d89a1877..1348f87bb 100644 --- a/semcore/utils/src/ScreenReaderOnly.tsx +++ b/semcore/utils/src/ScreenReaderOnly.tsx @@ -1,11 +1,9 @@ import React from 'react'; -export const ScreenReaderOnly: React.FC<{ children: React.ReactNode; id?: string }> = ({ - children, - id, -}) => { +export const ScreenReaderOnly = (props: React.HTMLAttributes) => { return ( - {children} - + /> ); }; ScreenReaderOnly.displayName = 'ScreenReaderOnlyRoot'; diff --git a/website/docs/components/skeleton/skeleton-a11y.md b/website/docs/components/skeleton/skeleton-a11y.md index 80e91c334..0e7e5f338 100644 --- a/website/docs/components/skeleton/skeleton-a11y.md +++ b/website/docs/components/skeleton/skeleton-a11y.md @@ -12,12 +12,12 @@ The list below describes roles and attributes that component already has. Table: Roles & attributes -| Attribute | Element | Usage | -| -------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `aria-busy="true"` | Implicit on `svg` | The `aria-busy` state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update. When multiple parts of a live region need to be loaded before changes are announced to the user, set `aria-busy="true"` until loading is complete. Then set to `aria-busy="false"`. This prevents assistive technologies from announcing changes before updates are done. | -| `aria-hidden="true"` | Implicit on `svg` | The `aria-hidden` hides SVG image from assistive technologies. | -| `aria-atomic="true"` | | In ARIA live regions, the global `aria-atomic` attribute indicates whether assistive technologies such as a screen reader will present all, or only parts of. | -| `alt=''` | Implicit on `svg` | Empty `alt` attribute helps to avoid reading image as a text, since skeleton's SVG do not convey any meaningful information to assistive technologies. | +| Attribute | Element | Usage | +| ----------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `aria-busy="true"` | Implicit on `svg` | The `aria-busy` state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update. | +| `aria-label="Loading…"` | Implicit on `svg` | The `aria-label` attribute sets the element description that will be announced by the assistive technologies. | + +Skeleton is an `svg` element. It contains `foreignObject` with a `span` element inside. The `span` element has a `role="status"`, `aria-atomic="true"` and `aria-live="polite"` attribute. These attributes are used to inform assistive technologies about the loading state. ## Considerations for developers and designers diff --git a/website/docs/components/spin-container/spin-container-a11y.md b/website/docs/components/spin-container/spin-container-a11y.md index 957dd4aa0..983ae27c0 100644 --- a/website/docs/components/spin-container/spin-container-a11y.md +++ b/website/docs/components/spin-container/spin-container-a11y.md @@ -13,22 +13,14 @@ The list below describes roles and attributes that component already has. Table: Roles & attributes -| Attribute | Element | Usage | -| ------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `aria-busy="true"` | Implicit on `svg` | The `aria-busy` state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update. When multiple parts of a live region need to be loaded before changes are announced to the user, set `aria-busy="true"` until loading is complete. Then set to `aria-busy="false"`. This prevents assistive technologies from announcing changes before updates are done. | +| Attribute | Element | Usage | +| ------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `aria-busy="true"` | Implicit on container. | The `aria-busy` state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update. When multiple parts of a live region need to be loaded before changes are announced to the user, set `aria-busy="true"` until loading is complete. Then set to `aria-busy="false"`. This prevents assistive technologies from announcing changes before updates are done. | +| `inert` | Implicit on content. | The `inert` attribute indicated that it's content should not be available for interacting by the user. | -## Considerations for developers - -### Roles and attributes - -The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in the particular cases in your interfaces. +See attributes applied to Spin on the [Spin a11y page](/intergalactic/components/spin/spin-a11y). -Table: Roles & attributes - -| Roles | Attribute | Element | Usage | -| ----- | -------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `status` | | Implicit on `div` | After loading state completed, you may consider putting the success message inside a live-region with `role="status"`. | -| | `aria-live="polite"` | Implicit on `div` | Any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive this attribute. The screen reader will speak changes whenever the user is idle. | +## Considerations for developers ## Resources diff --git a/website/docs/components/spin/spin-a11y.md b/website/docs/components/spin/spin-a11y.md index 9af63f4b4..ed7b85384 100644 --- a/website/docs/components/spin/spin-a11y.md +++ b/website/docs/components/spin/spin-a11y.md @@ -13,22 +13,12 @@ The list below describes roles and attributes that component already has. Table: Roles & attributes -| Attribute | Element | Usage | -| ------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `aria-busy="true"` | Implicit on `svg` | The `aria-busy` state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update. When multiple parts of a live region need to be loaded before changes are announced to the user, set `aria-busy="true"` until loading is complete. Then set to `aria-busy="false"`. This prevents assistive technologies from announcing changes before updates are done. | +| Attribute | Element | Usage | +| ----------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `aria-busy="true"` | Implicit on `svg` | The `aria-busy` state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update. | +| `aria-label="Loading…"` | Implicit on `svg` | The `aria-label` attribute sets the element description that will be announced by the assistive technologies. | -## Considerations for developers - -### Roles and attributes - -The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in the particular cases in your interfaces. - -Table: Roles & attributes - -| Roles | Attribute | Element | Usage | -| ---- | -------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `status` | | Implicit on `div` | After loading state completed, you may consider putting the success message inside a live-region with `role="status"`. | -| | `aria-live="polite"` | Implicit on `div` | Any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive this attribute. The screen reader will speak changes whenever the user is idle. | +Spin is an `svg` element. It contains `foreignObject` with a `span` element inside. The `span` element has a `role="status"`, `aria-atomic="true"` and `aria-live="polite"` attribute. These attributes are used to inform assistive technologies about the loading state. ## Resources