p5.js-web-editor/client/modules/IDE/components/EditorAccessibility.jsx
Dhruvdutt Jadhav e7abb55ee7 Fixes #515 Update React to 16 and other dependencies (#519)
* Update to react, react-dom 16.2.0

* Update react-redux

* Update react-tabs

* Update redux-devtools

* Update redux-devtools-dock-monitor

* Update redux-devtools-log-monitor

* Add prop-types package

* Update gitignore

* Update all files to use prop-types package

* Update react-router

* Update react-inlinesvg
2018-02-07 13:06:07 -05:00

47 lines
1.2 KiB
JavaScript

import PropTypes from 'prop-types';
import React from 'react';
class EditorAccessibility extends React.Component {
componentDidMount() {
}
render() {
const messages = [];
if (this.props.lintMessages.length > 0) {
this.props.lintMessages.forEach((lintMessage, i) => {
messages.push(
<li key={lintMessage.id}>
{lintMessage.severity} in line
{lintMessage.line} :
{lintMessage.message}
</li>
);
});
} else {
messages.push(
<li tabIndex="0" key={0}> There are no lint messages </li>
);
}
return (
<div className="editor-accessibility">
<ul className="editor-lintmessages" title="lint messages">
{messages}
</ul>
<p> Current line
<span className="editor-linenumber" aria-live="polite" aria-atomic="true" id="current-line"> </span>
</p>
</div>
);
}
}
EditorAccessibility.propTypes = {
lintMessages: PropTypes.arrayOf(PropTypes.shape({
severity: PropTypes.string.isRequired,
line: PropTypes.number.isRequired,
message: PropTypes.string.isRequired,
id: PropTypes.number.isRequired
})).isRequired,
};
export default EditorAccessibility;