adds showOnFocus prop

src-docs/src/views/accessibility/accessibility_example.js

@@ -8,7 +8,6 @@ import {
   EuiCode,
   EuiLink,
   EuiKeyboardAccessible,
-  EuiScreenReaderOnly,
 } from '../../../../src/components';
 
 import KeyboardAccessible from './keyboard_accessible';
@@ -20,6 +19,8 @@ const keyboardAccessibleHtml = renderToHtml(KeyboardAccessible);
 const screenReaderOnlyHtml = renderToHtml(ScreenReaderOnly);
 const screenReaderOnlySource = require('!!raw-loader!./screen_reader');
 
+import { ScreenReaderOnlyDocsComponent } from './props';
+
 export const AccessibilityExample = {
   title: 'Accessibility',
   sections: [
@@ -71,13 +72,9 @@ export const AccessibilityExample = {
             }{' '}
             for more information.
           </p>
-          <p>
-            Use a screenreader to verify that there is a second paragraph in
-            this example:
-          </p>
         </div>
       ),
-      props: { EuiScreenReaderOnly },
+      props: { EuiScreenReaderOnly: ScreenReaderOnlyDocsComponent },
       demo: <ScreenReaderOnly />,
     },
   ],

src-docs/src/views/accessibility/keyboard_accessible.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { EuiKeyboardAccessible } from '../../../../src/components';
+import { EuiText } from '../../../../src/components/text';
 
 // For custom components, we just need to make sure they delegate props to their rendered root
 // element, e.g. onClick, tabIndex, and role.
@@ -10,33 +11,42 @@ const CustomComponent = ({ children, ...rest }) => (
 
 export default () => (
   <div>
-    <EuiKeyboardAccessible>
-      <div onClick={() => window.alert('Div clicked')}>Click this div</div>
-    </EuiKeyboardAccessible>
+    <EuiText>
+      <EuiKeyboardAccessible>
+        <div onClick={() => window.alert('Div clicked')}>Click this div</div>
+      </EuiKeyboardAccessible>
 
-    <EuiKeyboardAccessible>
-      <a className="euiLink" onClick={() => window.alert('Anchor tag clicked')}>
-        Click this anchor tag
-      </a>
-    </EuiKeyboardAccessible>
+      <EuiKeyboardAccessible>
+        <a
+          className="euiLink"
+          onClick={() => window.alert('Anchor tag clicked')}>
+          Click this anchor tag
+        </a>
+      </EuiKeyboardAccessible>
 
-    <EuiKeyboardAccessible>
-      <CustomComponent onClick={() => window.alert('Custom component clicked')}>
-        Click this custom component
-      </CustomComponent>
-    </EuiKeyboardAccessible>
+      <EuiKeyboardAccessible>
+        <CustomComponent
+          onClick={() => window.alert('Custom component clicked')}>
+          Click this custom component
+        </CustomComponent>
+      </EuiKeyboardAccessible>
 
-    <EuiKeyboardAccessible>
-      <div onClick={() => window.alert('Outer EuiKeyboardAccessible clicked')}>
-        This EuiKeyboardAccessible contains another EuiKeyboardAccessible&nbsp;
-        <EuiKeyboardAccessible>
-          <a
-            className="euiLink"
-            onClick={() => window.alert('Inner EuiKeyboardAccessible clicked')}>
-            Clicking this inner one should call both onClick handlers
-          </a>
-        </EuiKeyboardAccessible>
-      </div>
-    </EuiKeyboardAccessible>
+      <EuiKeyboardAccessible>
+        <div
+          onClick={() => window.alert('Outer EuiKeyboardAccessible clicked')}>
+          This EuiKeyboardAccessible contains another
+          EuiKeyboardAccessible&nbsp;
+          <EuiKeyboardAccessible>
+            <a
+              className="euiLink"
+              onClick={() =>
+                window.alert('Inner EuiKeyboardAccessible clicked')
+              }>
+              Clicking this inner one should call both onClick handlers
+            </a>
+          </EuiKeyboardAccessible>
+        </div>
+      </EuiKeyboardAccessible>
+    </EuiText>
   </div>
 );

src-docs/src/views/accessibility/props.tsx

@@ -0,0 +1,6 @@
+import React, { FunctionComponent } from 'react';
+import { EuiScreenReaderOnlyProps } from '../../../../src/components/accessibility/screen_reader';
+
+export const ScreenReaderOnlyDocsComponent: FunctionComponent<
+  EuiScreenReaderOnlyProps
+> = () => <div />;

src-docs/src/views/accessibility/screen_reader.tsx

@@ -1,16 +1,44 @@
 import React from 'react';
 
 import { EuiScreenReaderOnly } from '../../../../src/components/accessibility/screen_reader';
+import { EuiCode } from '../../../../src/components/code';
+import { EuiText } from '../../../../src/components/text';
+import { EuiTitle } from '../../../../src/components/title';
 
 export default () => (
   <div>
-    <p>This is the first paragraph. It is visible to all.</p>
-    <EuiScreenReaderOnly>
+    <EuiText>
       <p>
-        This is the second paragraph. It is hidden for sighted users but visible
-        to screen readers.
+        <em>
+          Use a screenreader to verify that there is a second paragraph in this
+          example:
+        </em>
       </p>
-    </EuiScreenReaderOnly>
-    <p>This is the third paragraph. It is visible to all.</p>
+      <p>This is the first paragraph. It is visible to all.</p>
+      <EuiScreenReaderOnly>
+        <p>
+          This is the second paragraph. It is hidden for sighted users but
+          visible to screen readers.
+        </p>
+      </EuiScreenReaderOnly>
+      <p>This is the third paragraph. It is visible to all.</p>
+      <EuiTitle size="xxs">
+        <h4>Show on focus</h4>
+      </EuiTitle>
+      <p>
+        <em>
+          In certain cases, such as a <strong>Skip to content</strong> link, you
+          can use the <EuiCode>showOnFocus</EuiCode> prop to display
+          screenreader content upon focus. For example, tabbing to this section
+          with your keyboard will display a link.
+        </em>
+      </p>
+      <p>
+        This link is visible to all on focus:{' '}
+        <EuiScreenReaderOnly showOnFocus>
+          <a href="#">Skip content</a>
+        </EuiScreenReaderOnly>
+      </p>
+    </EuiText>
   </div>
 );

src/components/accessibility/_screen_reader.scss

@@ -1,3 +1,11 @@
 .euiScreenReaderOnly {
   @include euiScreenReaderOnly;
 }
+
+.euiScreenReaderOnly--showOnFocus:focus {
+  position: static;
+  left: auto;
+  width: auto;
+  height: auto;
+  overflow: visible;
+}

src/components/accessibility/screen_reader.tsx

@@ -3,12 +3,19 @@ import classNames from 'classnames';
 
 export interface EuiScreenReaderOnlyProps {
   children: ReactElement<any>;
+
+  /**
+   * For keyboard navigaiton, force content to display visually upon focus.
+   */
+  showOnFocus?: boolean;
 }
 
 export const EuiScreenReaderOnly: FunctionComponent<
   EuiScreenReaderOnlyProps
-> = ({ children }) => {
-  const classes = classNames('euiScreenReaderOnly', children.props.className);
+> = ({ children, showOnFocus }) => {
+  const classes = classNames('euiScreenReaderOnly', children.props.className, {
+    'euiScreenReaderOnly--showOnFocus': showOnFocus,
+  });
 
   const props = {
     ...children.props,