docs(Loading): add accessibility section

docs/src/documentation/03-components/10-progress-indicators/loading/03-accessibility.mdx

@@ -0,0 +1,36 @@
+---
+title: Accessibility
+redirect_from:
+  - /components/loading/accessibility/
+---
+
+# Accessibility
+
+## Loading
+
+The Loading component has been designed with accessibility in mind.
+
+The component offers flexibility in terms of the HTML element used for the root node. By default, it will render a `div` element.
+
+### Title
+
+Optional prop `title` allows you to specify a `title` value of the loading (svg) icon. This value is announced by a screen reader. This prop should ideally be translated.
+
+### AsComponent
+
+The prop `asComponent` is optional and it is set to a `div` by default.
+This can be used when the `Loading` component is wrapped by another component which requires a [phrasing element](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories) as a children.
+
+Be aware that `Loading` component is **always** rendered as a `div` element when the prop `text` is filled in.
+
+### Example
+
+```jsx
+<Button>
+  <Loading title="Title of the button is loading" asComponent="span" />
+</Button>
+```
+
+We have a `Loading` component inside a `Button` component (which requires phrasing element as a children). In this case, we can use the `asComponent` prop to specify the root node of the `Loading` component.
+
+The screen reader will announce the value title (`Title of the button is loading`).