diff --git a/docs/src/sections/AlertsSection.js b/docs/src/sections/AlertsSection.js
index 5c469d1373..738e69d244 100644
--- a/docs/src/sections/AlertsSection.js
+++ b/docs/src/sections/AlertsSection.js
@@ -19,11 +19,6 @@ export default function AlertsSection() {
just pass in a onDismiss
function.
-
-
Screen Reader Accessibility
-
Unlike regular Bootstrap, alerts have an sr-only dismiss button after the content.
-
-
Props
diff --git a/src/Alert.js b/src/Alert.js
index 210d9a78c7..b12c7b1577 100644
--- 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 (
-
- );
- }
-
- renderSrOnlyDismissButton(onDismiss, closeLabel) {
- return (
-
- );
- }
-
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 && (
+
+ )}
{children}
- {dismissable && this.renderSrOnlyDismissButton(onDismiss, closeLabel)}
);
}
diff --git a/src/CloseButton.js b/src/CloseButton.js
new file mode 100644
index 0000000000..a58865d8d2
--- /dev/null
+++ 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 (
+
+ );
+ }
+}
+
+CloseButton.propTypes = propTypes;
+
+export default CloseButton;
diff --git a/src/ModalHeader.js b/src/ModalHeader.js
index 174712e9e8..517293e9d0 100644
--- 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 &&
-
- }
+ />
+ )}
{children}