[changed] tooltips and popovers required id's for a11y

AndreasKlein · Jun 30, 2015 · d70f617 · d70f617
1 parent 389cf3f
commit d70f617
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 27 deletions.
diff --git a/docs/assets/style.css b/docs/assets/style.css
@@ -165,3 +165,10 @@ body {
 .prop-table {
   background-color: white;
 }
+
+.bs-example.tooltip-static .tooltip {
+  position: relative;
+  display: inline-block;
+  margin: 5px 10px;
+
+}
diff --git a/docs/examples/PopoverContained.js b/docs/examples/PopoverContained.js
@@ -1,13 +1,33 @@
-const positionerInstance = (
-  <ButtonToolbar>
-    <OverlayTrigger
-      container={mountNode} containerPadding={20}
-      trigger='click' placement='bottom'
-      overlay={<Popover title='Popover bottom'><strong>Holy guacamole!</strong> Check this info.</Popover>}
-    >
-      <Button bsStyle='default'>Holy guacamole!</Button>
-    </OverlayTrigger>
-  </ButtonToolbar>
-);
+class Example extends React.Component {
+  constructor(props, context){
+    super(props, context);
+    this.state = { show: false };
+  }
+  render(){
 
-React.render(positionerInstance, mountNode);
+    return (
+      <ButtonToolbar>
+        <Button
+          bsStyle='default'
+          onClick={e => this.setState({ target: e.target, show: !this.state.show })}
+        >
+          Holy guacamole!
+        </Button>
+
+        <Overlay
+          show={this.state.show}
+          target={()=> React.findDOMNode(this.state.target)}
+          placement='bottom'
+          container={mountNode}
+          containerPadding={20}
+        >
+          <Popover title='Popover bottom'>
+            <strong>Holy guacamole!</strong> Check this info.
+          </Popover>
+        </Overlay>
+      </ButtonToolbar>
+    );
+  }
+}
+
+React.render(<Example/>, mountNode);
diff --git a/docs/examples/TooltipBasic.js b/docs/examples/TooltipBasic.js
@@ -1,7 +1,18 @@
 const tooltipInstance = (
-  <div style={{ height: 50 }}>
-    <Tooltip placement="right" positionLeft={150} positionTop={50}>
-      <strong>Holy guacamole!</strong> Check this info.
+  <div>
+    <Tooltip placement="right">
+      Tooltip right
+    </Tooltip>
+    <Tooltip placement="top">
+      Tooltip top
+    </Tooltip>
+
+    <Tooltip placement="left">
+      Tooltip left
+    </Tooltip>
+
+    <Tooltip placement="bottom">
+      Tooltip bottom
     </Tooltip>
   </div>
 );

diff --git a/docs/examples/TooltipInCopy.js b/docs/examples/TooltipInCopy.js
@@ -1,9 +1,9 @@
 const LinkWithTooltip = React.createClass({
   render() {
-    let tooltip = <Tooltip>{this.props.tooltip}</Tooltip>;
+    let tooltip = <Tooltip placement='top'>{this.props.tooltip}</Tooltip>;
 
     return (
-      <OverlayTrigger placement='top' overlay={tooltip} delayShow={300} delayHide={150}>
+      <OverlayTrigger overlay={tooltip} delayShow={300} delayHide={150}>
         <a href={this.props.href}>{this.props.children}</a>
       </OverlayTrigger>
     );
@@ -12,7 +12,13 @@ const LinkWithTooltip = React.createClass({
 
 const copyInstance = (
   <p className='muted' style={{ marginBottom: 0 }}>
-    Tight pants next level keffiyeh <LinkWithTooltip tooltip='Default tooltip' href='#'>you probably</LinkWithTooltip> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <LinkWithTooltip tooltip={<span>Another <strong>tooltip</strong></span>} href='#'>have a</LinkWithTooltip> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <LinkWithTooltip tooltip='Another one here too' href='#'>whatever keytar</LinkWithTooltip>, scenester farm-to-table banksy Austin <LinkWithTooltip tooltip='The last tip!' href='#'>twitter handle</LinkWithTooltip> freegan cred raw denim single-origin coffee viral.
+    Tight pants next level keffiyeh <LinkWithTooltip tooltip='Default tooltip' href='#'>you probably</LinkWithTooltip> haven't
+    heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's
+    fixie sustainable quinoa 8-bit american apparel <LinkWithTooltip tooltip={<span>Another <strong>tooltip</strong></span>} href='#'>have a</LinkWithTooltip>
+    terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four
+    loko mcsweeney's cleanse vegan chambray. A really ironic artisan <LinkWithTooltip tooltip='Another one here too' href='#'>whatever keytar</LinkWithTooltip>,
+    scenester farm-to-table banksy Austin <LinkWithTooltip tooltip='The last tip!' href='#'>twitter handle</LinkWithTooltip> freegan
+    cred raw denim single-origin coffee viral.
   </p>
 );
 

diff --git a/docs/examples/TooltipPositioned.js b/docs/examples/TooltipPositioned.js
@@ -1,15 +1,23 @@
+
+const tooltip = (
+  <Tooltip><strong>Holy guacamole!</strong> Check this info.</Tooltip>
+);
+
 const positionerInstance = (
   <ButtonToolbar>
-    <OverlayTrigger placement='left' overlay={<Tooltip><strong>Holy guacamole!</strong> Check this info.</Tooltip>}>
+    <OverlayTrigger placement='left' overlay={tooltip}>
       <Button bsStyle='default'>Holy guacamole!</Button>
     </OverlayTrigger>
-    <OverlayTrigger placement='top' overlay={<Tooltip><strong>Holy guacamole!</strong> Check this info.</Tooltip>}>
+
+    <OverlayTrigger placement='top' overlay={tooltip}>
       <Button bsStyle='default'>Holy guacamole!</Button>
     </OverlayTrigger>
-    <OverlayTrigger placement='bottom' overlay={<Tooltip><strong>Holy guacamole!</strong> Check this info.</Tooltip>}>
+
+    <OverlayTrigger placement='bottom' overlay={tooltip}>
       <Button bsStyle='default'>Holy guacamole!</Button>
     </OverlayTrigger>
-    <OverlayTrigger placement='right' overlay={<Tooltip><strong>Holy guacamole!</strong> Check this info.</Tooltip>}>
+
+    <OverlayTrigger placement='right' overlay={tooltip}>
       <Button bsStyle='default'>Holy guacamole!</Button>
     </OverlayTrigger>
   </ButtonToolbar>

diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
@@ -36,6 +36,7 @@ import * as modPagination from '../../src/Pagination';
 import * as modPanel from '../../src/Panel';
 import * as modPanelGroup from '../../src/PanelGroup';
 import * as modPopover from '../../src/Popover';
+//import * as modPopoverTrigger from '../../src/PopoverTrigger';
 import * as modProgressBar from '../../src/ProgressBar';
 import * as modRow from '../../src/Row';
 import * as modSplitButton from '../../src/SplitButton';
@@ -44,14 +45,22 @@ import * as modTable from '../../src/Table';
 import * as modTabPane from '../../src/TabPane';
 import * as modThumbnail from '../../src/Thumbnail';
 import * as modTooltip from '../../src/Tooltip';
+//import * as modTooltipTrigger from '../../src/TooltipTrigger';
 import * as modWell from '../../src/Well';
 
+import * as modPortal from '../../src/Portal';
+import * as modOverlay from '../../src/Overlay';
+
 import babel from 'babel-core/browser';
 
 import CodeExample from './CodeExample';
 
+
+
 const classNames = modClassNames.default;
 /* eslint-disable */
+const Portal = modPortal.default;
+
 const React = modReact.default;
 const Accordion = modAccordion.default;
 const Alert = modAlert.default;
@@ -89,6 +98,7 @@ const Pager = modPager.default;
 const Panel = modPanel.default;
 const PanelGroup = modPanelGroup.default;
 const Popover = modPopover.default;
+//const PopoverTrigger = modPopoverTrigger.default;
 const ProgressBar = modProgressBar.default;
 const Row = modRow.default;
 const SplitButton = modSplitButton.default;
@@ -97,7 +107,10 @@ const Table = modTable.default;
 const TabPane = modTabPane.default;
 const Thumbnail = modThumbnail.default;
 const Tooltip = modTooltip.default;
+//const TooltipTrigger = modTooltipTrigger.default;
 const Well = modWell.default;
+const Overlay = modOverlay.default;
+
 /* eslint-enable */
 
 const IS_MOBILE = typeof navigator !== 'undefined' && (

diff --git a/docs/src/Samples.js b/docs/src/Samples.js
@@ -32,7 +32,7 @@ export default {
   CollapsibleParagraph:          require('fs').readFileSync(__dirname + '/../examples/CollapsibleParagraph.js', 'utf8'),
   ModalStatic:                   require('fs').readFileSync(__dirname + '/../examples/ModalStatic.js', 'utf8'),
   ModalTrigger:                  require('fs').readFileSync(__dirname + '/../examples/ModalTrigger.js', 'utf8'),
-  ModalOverlayMixin:             require('fs').readFileSync(__dirname + '/../examples/ModalOverlayMixin.js', 'utf8'),
+
   ModalContained:                require('fs').readFileSync(__dirname + '/../examples/ModalContained.js', 'utf8'),
   ModalDefaultSizing:            require('fs').readFileSync(__dirname + '/../examples/ModalDefaultSizing.js', 'utf8'),
   ModalCustomSizing:             require('fs').readFileSync(__dirname + '/../examples/ModalCustomSizing.js', 'utf8'),
@@ -99,5 +99,8 @@ export default {
   InputValidation:               require('fs').readFileSync(__dirname + '/../examples/InputValidation.js', 'utf8'),
   InputHorizontal:               require('fs').readFileSync(__dirname + '/../examples/InputHorizontal.js', 'utf8'),
   InputWrapper:                  require('fs').readFileSync(__dirname + '/../examples/InputWrapper.js', 'utf8'),
-  MenuItem:                      require('fs').readFileSync(__dirname + '/../examples/MenuItem.js', 'utf8')
+  MenuItem:                      require('fs').readFileSync(__dirname + '/../examples/MenuItem.js', 'utf8'),
+
+  Overlay:                       require('fs').readFileSync(__dirname + '/../examples/Overlay.js', 'utf8'),
+  OverlayTrigger:                require('fs').readFileSync(__dirname + '/../examples/OverlayTrigger.js', 'utf8')
 };
diff --git a/src/Popover.js b/src/Popover.js
@@ -1,9 +1,11 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import FadeMixin from './FadeMixin';
 
 const Popover = React.createClass({
+
   mixins: [BootstrapMixin, FadeMixin],
 
   propTypes: {
@@ -48,7 +50,7 @@ const Popover = React.createClass({
     };
 
     return (
-      <div {...this.props} className={classNames(this.props.className, classes)} style={style} title={null}>
+      <div role='tooltip' {...this.props} className={classNames(this.props.className, classes)} style={style} title={null}>
         <div className="arrow" style={arrowStyle} />
         {this.props.title ? this.renderTitle() : null}
         <div className="popover-content">

diff --git a/src/Tooltip.js b/src/Tooltip.js
@@ -1,21 +1,33 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import FadeMixin from './FadeMixin';
+import CustomPropTypes from './utils/CustomPropTypes';
 
 const Tooltip = React.createClass({
   mixins: [BootstrapMixin, FadeMixin],
 
   propTypes: {
+    /**
+     * An html id attribute, necessary for accessibility
+     * @type {string}
+     * @required
+     */
+    id: CustomPropTypes.isRequiredForA11y(React.PropTypes.string),
+
     placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
     positionLeft: React.PropTypes.number,
     positionTop: React.PropTypes.number,
+
     arrowOffsetLeft: React.PropTypes.oneOfType([
       React.PropTypes.number, React.PropTypes.string
     ]),
+
     arrowOffsetTop: React.PropTypes.oneOfType([
       React.PropTypes.number, React.PropTypes.string
     ]),
+
     animation: React.PropTypes.bool
   },
 
@@ -46,7 +58,7 @@ const Tooltip = React.createClass({
     };
 
     return (
-        <div {...this.props} className={classNames(this.props.className, classes)} style={style}>
+        <div role='tooltip' {...this.props} className={classNames(this.props.className, classes)} style={style}>
           <div className="tooltip-arrow" style={arrowStyle} />
           <div className="tooltip-inner">
             {this.props.children}

diff --git a/src/index.js b/src/index.js
@@ -53,8 +53,8 @@ import Tooltip from './Tooltip';
 import utils from './utils';
 import Well from './Well';
 import styleMaps from './styleMaps';
-
 import Portal from './Portal';
+import Position from './Position';
 
 export default {
   Accordion,
@@ -101,6 +101,7 @@ export default {
   Pagination,
   Popover,
   Portal,
+  Position,
   ProgressBar,
   Row,
   SplitButton,

diff --git a/src/utils/CustomPropTypes.js b/src/utils/CustomPropTypes.js
@@ -3,6 +3,20 @@ import React from 'react';
 const ANONYMOUS = '<<anonymous>>';
 
 const CustomPropTypes = {
+
+  isRequiredForA11y(propType){
+    return function(props, propName, componentName){
+      if (props[propName] === null) {
+        return new Error(
+          'The prop `' + propName + '` is required to make ' + componentName + ' accessible ' +
+            'for users using assistive technologies such as screen readers `'
+        );
+      }
+
+      return propType(props, propName, componentName);
+    };
+  },
+
   /**
    * Checks whether a prop provides a DOM element
    *