docs(components/atom/button): add a11y section

components/atom/button/demo/articles/ArticleA11y.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types'
+
+import {Article, Box, H2, Paragraph, ListItem, UnorderedList, Strong, Anchor} from '@s-ui/documentation-library'
+
+const ArticleA11y = ({className}) => {
+  return (
+    <Article className={className}>
+      <H2>Accessibility</H2>
+      <Box style={{backgroundColor: 'color-mix(in srgb, #00FF00 10%, transparent)'}}>
+        <Paragraph>
+          ✅ This component has been successfully tested for{' '}
+          <Strong>WCAG 2.0 levels A and AA, WCAG 2.1 levels A and AA</Strong> and for common accessibility best
+          practices.
+        </Paragraph>
+      </Box>
+      <Paragraph>
+        The accessibility label for a button comes from the visible label text on the button such as Done, Send, or
+        Reply.
+      </Paragraph>
+      <Paragraph>
+        Consider aligning the accessibility label (used for assistive technology devices like screen readers) with the
+        visible label text.
+      </Paragraph>
+      <Paragraph>
+        If the button doesn’t have visible label text, which is the case for icon buttons, have the accessibility label
+        describe the action that the button is executing, such as Favourite, Bookmark, or Send message.
+      </Paragraph>
+      <Box style={{backgroundColor: 'color-mix(in srgb, #FFFF00 10%, transparent)'}}>
+        <Strong>Size</Strong>
+        <UnorderedList>
+          <ListItem>
+            We recommend using the size <Strong>Medium</Strong> (default)
+          </ListItem>
+          <ListItem>On Apps, the touch area is 44px height</ListItem>
+        </UnorderedList>
+      </Box>
+      <Paragraph>
+        This component adheres to the button{' '}
+        <Anchor href="https://www.w3.org/WAI/ARIA/apg/patterns/button/">role requirements</Anchor>.
+      </Paragraph>
+    </Article>
+  )
+}
+
+ArticleA11y.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleA11y

components/atom/button/demo/articles/ArticleKeyboardNavigation.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+
+import {Article, H2, ListItem, UnorderedList} from '@s-ui/documentation-library'
+
+import AtomKbd from '@s-ui/react-atom-kbd'
+
+const ArticleKeyboardNavigation = ({className}) => {
+  return (
+    <Article className={className}>
+      <H2>Keyboard Navigation</H2>
+      <UnorderedList>
+        <ListItem>
+          <AtomKbd>Space</AtomKbd>: Activates the button
+        </ListItem>
+        <ListItem>
+          <AtomKbd>Enter</AtomKbd>: Activates the button
+        </ListItem>
+      </UnorderedList>
+    </Article>
+  )
+}
+
+ArticleKeyboardNavigation.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleKeyboardNavigation

components/atom/button/demo/index.js

@@ -14,8 +14,10 @@ import ArticlePlayground from './articles/ArticlePlayground.js'
 import ArticleShape from './articles/ArticleShape.js'
 import ArticleSize from './articles/ArticleSize.js'
 import ArticleSocialColor from './articles/ArticleSocialColor.js'
-import {CLASS_SECTION} from './settings.js'
+import ArticleA11y from './articles/ArticleA11y.js'
+import ArticleKeyboardNavigation from './articles/ArticleKeyboardNavigation.js'
 import TypeDeprecatedArticle from './TypeDeprecatedArticle.js'
+import {CLASS_SECTION} from './settings.js'
 
 const Demo = () => {
   return (
@@ -48,6 +50,10 @@ const Demo = () => {
       <br />
       <ArticleIsFitted className={CLASS_SECTION} />
       <br />
+      <ArticleA11y className={CLASS_SECTION} />
+      <br />
+      <ArticleKeyboardNavigation className={CLASS_SECTION} />
+      <br />
     </div>
   )
 }

components/atom/button/demo/index.scss

@@ -1,3 +1,4 @@
 @import '~@s-ui/react-atom-icon/lib/index.scss';
+@import '~@s-ui/react-atom-kbd/lib/index.scss';
 
 @import '../src/index';

components/atom/button/demo/package.json

@@ -12,6 +12,7 @@
   "license": "ISC",
   "dependencies": {
     "@s-ui/react-atom-icon": "1",
+    "@s-ui/react-atom-kbd": "1",
     "use-prefers-color-scheme": "1.1.3"
   }
 }