Adds a11y docs (#2357)

Also adds `heading` prop to `EuiCallOut` to allow for variance in the title tag Co-authored-by: [email protected] <[email protected]> Co-authored-by: Caroline Horn <[email protected]>
elastic · Nov 25, 2019 · cc1da42 · cc1da42
1 parent b842859
commit cc1da42
Show file tree

Hide file tree

Showing 13 changed files with 983 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `heading` prop to `EuiCallOut` to allow for variance in the title tag ([#2357](https://github.com/elastic/eui/pull/2357))
 - Added `badge` prop and new styles `EuiHeaderAlert` ([#2506](https://github.com/elastic/eui/pull/2506))
 - Added new keyboard shortcuts for the data grid component: `Home` (same row, first column), `End` (same row, last column), `Ctrl+Home` (first row, first column), `Ctrl+End` (last row, last column), `Page Up` (next page) and `Page Down` (previous page) ([#2519](https://github.com/elastic/eui/pull/2519))
 - Added `disabled` prop to the `EuiCheckboxGroup` definition ([#2545](https://github.com/elastic/eui/pull/2545))

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),
         };
       });
@@ -331,7 +331,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_rule/_guide_rule_example.scss b/src-docs/src/components/guide_rule/_guide_rule_example.scss
@@ -14,6 +14,11 @@
     }
   }
 
+  pre {
+    margin-bottom: 0;
+    padding: 0;
+  }
+
   .guideRule__caption {
     @include euiFontSizeS;
     max-height: $euiFontSizeS * $euiLineHeight; /* 1 */

diff --git a/src-docs/src/components/guide_rule/guide_rule_example.js b/src-docs/src/components/guide_rule/guide_rule_example.js
@@ -20,6 +20,9 @@ export const GuideRuleExample = ({
   text,
   panel,
   frame,
+  minHeight,
+  style,
+  panelStyles,
   ...rest
 }) => {
   const classes = classNames(
@@ -33,9 +36,17 @@ export const GuideRuleExample = ({
 
   const ChildrenComponent = panel ? EuiPanel : 'div';
 
+  const styles = { ...style, minHeight };
+
   return (
-    <EuiFlexItem component="figure" className={classes} {...rest}>
-      <ChildrenComponent className="guideRule__example__panel">
+    <EuiFlexItem
+      component="figure"
+      className={classes}
+      style={styles}
+      {...rest}>
+      <ChildrenComponent
+        className="guideRule__example__panel"
+        style={panelStyles}>
         {children}
       </ChildrenComponent>
       <figcaption className="guideRule__caption">
@@ -51,6 +62,7 @@ GuideRuleExample.propTypes = {
   type: PropTypes.string.isRequired,
   text: PropTypes.string,
   panel: PropTypes.bool,
+  minHeight: PropTypes.number,
 };
 
 GuideRuleExample.defaultProps = {

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,
     };
   }
 
@@ -281,7 +283,7 @@ export class GuideSection extends Component {
           <EuiText>
             <p>{markup(description)}</p>
           </EuiText>
-          <EuiSpacer size="m" key={`propsSpacer-${componentName}`} />
+          <EuiSpacer size="m" id={`propsSpacer-${componentName}`} />
         </div>
       );
     }
@@ -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';
@@ -259,6 +261,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
@@ -65,7 +65,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