Skip to content

Commit

Permalink
fix(alerts): JAWS indicates that alerts are alerts
Browse files Browse the repository at this point in the history
[Finishes #101817262]

Signed-off-by: Caroline Taymor <ctaymor@pivotal.io>
Signed-off-by: Dominick Reinhold <dreinhold@pivotal.io>
  • Loading branch information
d-reinhold authored and pivotal committed Aug 27, 2015
1 parent 35bf4a1 commit 95aca19
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 6 deletions.
16 changes: 16 additions & 0 deletions spec/pivotal-ui-react/alerts/alerts_spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,10 @@ describe('SuccessAlert', function() {
it('renders an icon in the alert', function() {
expect('i').toHaveClass('fa-check-circle');
});

it('has a "success alert" label', function() {
expect('.alert .sr-only').toContainText('success alert message,');
});
});
});

Expand All @@ -104,6 +108,10 @@ describe('InfoAlert', function() {
it('renders an icon in the alert', function() {
expect('i').toHaveClass('fa-info-circle');
});

it('has a "info alert" label', function() {
expect('.alert .sr-only').toContainText('info alert message,');
});
});
});

Expand All @@ -121,6 +129,10 @@ describe('WarningAlert', function() {
it('renders an icon in the alert', function() {
expect('i').toHaveClass('fa-exclamation-triangle');
});

it('has a "warning alert" label', function() {
expect('.alert .sr-only').toContainText('warning alert message,');
});
});
});

Expand All @@ -138,5 +150,9 @@ describe('ErrorAlert', function() {
it('renders an icon in the alert', function() {
expect('i').toHaveClass('fa-exclamation-triangle');
});

it('has an "error alert" label', function() {
expect('.alert .sr-only').toContainText('error alert message,');
});
});
});
20 changes: 14 additions & 6 deletions src/pivotal-ui-react/alerts/alerts.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,15 @@ function defAlert(props) {
withIcon: types.bool
},
render() {
return <Alert {...props} {...this.props} />;
const {children, ...others} = this.props;
return (
<Alert {...props} {...others}>
<span className="sr-only">
{(props.bsStyle === 'danger' ? 'error' : props.bsStyle) + ' alert message,'}
</span>
{children}
</Alert>
);
}
});
}
Expand Down Expand Up @@ -179,13 +187,13 @@ var SuccessAlert = require('pui-react-alerts').SuccessAlert;
```react_example_table
<SuccessAlert>success</SuccessAlert>
<SuccessAlert>Everything is wonderful</SuccessAlert>
<InfoAlert>info</InfoAlert>
<InfoAlert>Here's some information for you</InfoAlert>
<WarningAlert>warning</WarningAlert>
<WarningAlert>There is no parking on the dancefloor</WarningAlert>
<ErrorAlert>error</ErrorAlert>
<ErrorAlert>Something has gone horribly awry</ErrorAlert>
```
*/

Expand All @@ -199,7 +207,7 @@ parent: alerts_react
Add the `dismissable` property to add a close button to the alert.
```react_example_table
<SuccessAlert dismissable>success</SuccessAlert>
<SuccessAlert dismissable>Everything is wonderful</SuccessAlert>
```
If you want a callback to be called when the close button is
Expand Down

0 comments on commit 95aca19

Please sign in to comment.