add a11y docs

elastic · Sep 20, 2019 · dcee01c · dcee01c
1 parent 29650ee
commit dcee01c
Show file tree

Hide file tree

Showing 4 changed files with 615 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Adds guidelines on accessibility ([#2357](https://github.com/elastic/eui/pull/2357))
+
 **Bug fixes**
 
 - Fixed default z-index of `EuiPopover` ([#2341](https://github.com/elastic/eui/pull/2341))

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
@@ -9,6 +9,8 @@ import { EuiErrorBoundary } from '../../src/components';
 
 // Guidelines
 
+import AccessibilityGuidelines from './views/guidelines/accessibility';
+
 import ButtonGuidelines from './views/guidelines/button';
 
 import ColorGuidelines from './views/guidelines/colors';
@@ -248,6 +250,10 @@ const navigation = [
   {
     name: 'Guidelines',
     items: [
+      {
+        name: 'Accessibility',
+        component: AccessibilityGuidelines,
+      },
       {
         name: 'Buttons',
         component: ButtonGuidelines,

diff --git a/src-docs/src/views/form_compressed/form_compressed_example.js b/src-docs/src/views/form_compressed/form_compressed_example.js
@@ -198,7 +198,7 @@ export const FormCompressedExample = {
             This is an example of how to combine compressed form controls with
             from rows, labels, prepend and appends in a column layout.
           </p>
-          <EuiCallOut color="warning" title="Accessiblity in compressed forms">
+          <EuiCallOut color="warning" title="Accessibility in compressed forms">
             <p>
               Pay close attention to the patterns of using{' '}
               <EuiCode>htmlFor</EuiCode> and <EuiCode>aria-label</EuiCode>. For