Merge pull request #2812 from SUI-Components/label-a11y-demo

docs(components/atom/label): add accessibility section on the docs

components/atom/actionButton/demo/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "atom-action-button-demo",
+  "name": "@s-ui/react-atom-action-button-demo",
   "version": "1.1.0",
   "description": "",
   "main": "index.js",

components/atom/label/demo/articles/ArticleA11y.tsx

@@ -0,0 +1,24 @@
+import {Article, Anchor, Box, Code, H2, Paragraph} from '@s-ui/documentation-library'
+
+const ArticleA11y = ({className}: {className?: string}) => {
+  return (
+    <Article className={className}>
+      <H2>
+        Accessibility – <Anchor>Guidelines</Anchor>
+      </H2>
+      <Box style={{backgroundColor: 'color-mix(in srgb, #00FF00 10%, transparent)'}}>
+        <Paragraph>
+          ✅ This component has been successfully tested for WCAG 2.0 levels A and AA, WCAG 2.1 levels A and AA and for
+          common accessibility best practices.
+        </Paragraph>
+      </Box>
+      <Paragraph>
+        This component is based on the native label element, it will automatically apply the correct labelling when
+        wrapping controls or using the <Code>htmlFor</Code> attribute. For your own custom controls to work correctly,
+        ensure they use native elements such as button or input as a base.
+      </Paragraph>
+    </Article>
+  )
+}
+
+export default ArticleA11y

components/atom/label/demo/index.tsx

@@ -3,6 +3,7 @@ import {H1, Paragraph} from '@s-ui/documentation-library'
 import ArticleFontSize from './articles/ArticleFontSize'
 import ArticleInline from './articles/ArticleInline'
 import ArticleType from './articles/ArticleType'
+import ArticleA11y from './articles/ArticleA11y'
 import {CLASS_SECTION} from './settings'
 
 const Demo = () => {
@@ -18,6 +19,8 @@ const Demo = () => {
       <ArticleInline className={CLASS_SECTION} />
       <br />
       <ArticleFontSize className={CLASS_SECTION} />
+      <br />
+      <ArticleA11y className={CLASS_SECTION} />
     </div>
   )
 }