Pr/2395 updated (#2584)

* Correct tabindex on alert modal close button * combine dismiss buttons * fix react/no-unknown-property * rm doc comment * fix modal close button * add CloseButton * wtf
react-bootstrap · Apr 24, 2017 · a781222 · a781222
1 parent 9a4895a
commit a781222
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 48 deletions.
diff --git a/docs/src/sections/AlertsSection.js b/docs/src/sections/AlertsSection.js
@@ -19,11 +19,6 @@ export default function AlertsSection() {
       <p>just pass in a <code>onDismiss</code> function.</p>
       <ReactPlayground codeText={Samples.AlertDismissable} />
 
-      <div className="bs-callout bs-callout-info">
-        <h4>Screen Reader Accessibility</h4>
-      <p>Unlike regular Bootstrap, alerts have an sr-only dismiss button after the content.</p>
-      </div>
-
       <h3><Anchor id="alert-props">Props</Anchor></h3>
       <PropTable component="Alert"/>
     </div>

diff --git a/src/Alert.js b/src/Alert.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { bsClass, bsStyles, getClassSet, prefix, splitBsProps }
   from './utils/bootstrapUtils';
 import { State } from './utils/StyleConfig';
+import CloseButton from './CloseButton';
 
 const propTypes = {
   onDismiss: PropTypes.func,
@@ -16,32 +17,6 @@ const defaultProps = {
 };
 
 class Alert extends React.Component {
-  renderDismissButton(onDismiss) {
-    return (
-      <button
-        type="button"
-        className="close"
-        onClick={onDismiss}
-        aria-hidden="true"
-        tabIndex="-1"
-      >
-        <span>&times;</span>
-      </button>
-    );
-  }
-
-  renderSrOnlyDismissButton(onDismiss, closeLabel) {
-    return (
-      <button
-        type="button"
-        className="close sr-only"
-        onClick={onDismiss}
-      >
-        {closeLabel}
-      </button>
-    );
-  }
-
   render() {
     const { onDismiss, closeLabel, className, children, ...props } =
       this.props;
@@ -59,9 +34,13 @@ class Alert extends React.Component {
         role="alert"
         className={classNames(className, classes)}
       >
-        {dismissable && this.renderDismissButton(onDismiss)}
+        {dismissable && (
+          <CloseButton
+            onClick={onDismiss}
+            label={closeLabel}
+          />
+        )}
         {children}
-        {dismissable && this.renderSrOnlyDismissButton(onDismiss, closeLabel)}
       </div>
     );
   }

diff --git a/src/CloseButton.js b/src/CloseButton.js
@@ -0,0 +1,27 @@
+import * as PropTypes from 'prop-types';
+import React from 'react';
+
+const propTypes = {
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+};
+
+class CloseButton extends React.Component {
+  render() {
+    const { label, onClick } = this.props;
+    return (
+      <button
+        type="button"
+        className="close"
+        onClick={onClick}
+      >
+        <span aria-hidden="true">&times;</span>
+        <span className="sr-only">{label}</span>
+      </button>
+    );
+  }
+}
+
+CloseButton.propTypes = propTypes;
+
+export default CloseButton;
diff --git a/src/ModalHeader.js b/src/ModalHeader.js
@@ -4,16 +4,17 @@ import PropTypes from 'prop-types';
 
 import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
 import createChainedFunction from './utils/createChainedFunction';
+import CloseButton from './CloseButton';
 
 // TODO: `aria-label` should be `closeLabel`.
 
 const propTypes = {
   /**
-   * The 'aria-label' attribute provides an accessible label for the close
+   * Provides an accessible label for the close
    * button. It is used for Assistive Technology when the label text is not
    * readable.
    */
-  'aria-label': PropTypes.string,
+  closeLabel: PropTypes.string,
 
   /**
    * Specify whether the Component should contain a close button
@@ -29,7 +30,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-  'aria-label': 'Close',
+  closeLabel: 'Close',
   closeButton: false,
 };
 
@@ -42,7 +43,7 @@ const contextTypes = {
 class ModalHeader extends React.Component {
   render() {
     const {
-      'aria-label': label,
+      closeLabel,
       closeButton,
       onHide,
       className,
@@ -61,18 +62,12 @@ class ModalHeader extends React.Component {
         {...elementProps}
         className={classNames(className, classes)}
       >
-        {closeButton &&
-          <button
-            type="button"
-            className="close"
-            aria-label={label}
+        {closeButton && (
+          <CloseButton
+            label={closeLabel}
             onClick={createChainedFunction(modal && modal.onHide, onHide)}
-          >
-            <span aria-hidden="true">
-              &times;
-            </span>
-          </button>
-        }
+          />
+        )}
 
         {children}
       </div>