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 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;