Add a11y docs

elastic · Oct 3, 2019 · 510f857 · 510f857
1 parent acf20a9
commit 510f857
Show file tree

Hide file tree

Showing 9 changed files with 802 additions and 14 deletions.
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/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -266,7 +266,7 @@ export class GuidePageChrome extends Component {
           href,
           onClick: this.onClickRoute.bind(this),
           items: this.renderSubSections(href, sections, searchTerm),
-          isSelected: name === this.props.currentRouteName,
+          isSelected: item === this.props.currentRoute,
           forceOpen: !!(searchTerm && hasMatchingSubItem),
         };
       });
@@ -330,7 +330,7 @@ export class GuidePageChrome extends Component {
 }
 
 GuidePageChrome.propTypes = {
-  currentRouteName: PropTypes.string,
+  currentRoute: PropTypes.object.isRequired,
   onToggleTheme: PropTypes.func.isRequired,
   selectedTheme: PropTypes.string.isRequired,
   onToggleLocale: PropTypes.func.isRequired,

diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
@@ -92,12 +92,14 @@ export class GuideSection extends Component {
     this.componentNames = Object.keys(props.props);
     const hasSnippet = 'snippet' in props;
 
-    this.tabs = [
-      {
+    this.tabs = [];
+
+    if (props.demo) {
+      this.tabs.push({
         name: 'demo',
         displayName: 'Demo',
-      },
-    ];
+      });
+    }
 
     if (props.source) {
       this.tabs.push(
@@ -130,7 +132,7 @@ export class GuideSection extends Component {
     }
 
     this.state = {
-      selectedTab: this.tabs[0],
+      selectedTab: this.tabs.length > 0 ? this.tabs[0] : undefined,
     };
   }
 
@@ -354,9 +356,12 @@ export class GuideSection extends Component {
           {this.renderText()}
         </div>
 
-        <EuiSpacer size="m" />
-
-        <EuiTabs>{this.renderTabs()}</EuiTabs>
+        {this.tabs.length > 0 && (
+          <>
+            <EuiSpacer size="m" />
+            <EuiTabs>{this.renderTabs()}</EuiTabs>
+          </>
+        )}
       </div>
     );
   }
@@ -389,6 +394,10 @@ export class GuideSection extends Component {
   }
 
   renderContent() {
+    if (typeof this.state.selectedTab === 'undefined') {
+      return;
+    }
+
     if (this.state.selectedTab.name === 'snippet') {
       return <EuiErrorBoundary>{this.renderSnippet()}</EuiErrorBoundary>;
     }

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,7 @@ const navigation = [
   {
     name: 'Guidelines',
     items: [
+      createExample(AccessibilityGuidelines),
       {
         name: 'Buttons',
         component: ButtonGuidelines,

diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js
@@ -64,7 +64,7 @@ export class AppView extends Component {
         <EuiPageBody>
           <EuiErrorBoundary>
             <GuidePageChrome
-              currentRouteName={currentRoute.name}
+              currentRoute={currentRoute}
               onToggleTheme={toggleTheme}
               selectedTheme={theme}
               onToggleLocale={toggleLocale}

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