Add basic ARIA mark-up

web/app/components/auth-panel/auth-panel.jsx

@@ -46,7 +46,7 @@ export default class AuthPanel extends Component {
               <strong className="auth-panel__username" onClick={this.toggleUserId}>{user.name}</strong>
               {isUserIdVisible && <span className="auth-panel__user-id"> ({user.id})</span>}.
               {' '}
-              <span className="auth-panel__pseudo-link" onClick={props.onSignOut}>Sign out?</span>
+              <span className="auth-panel__pseudo-link" role="link" onClick={props.onSignOut}>Sign out?</span>
             </div>
           )
         }
@@ -65,6 +65,7 @@ export default class AuthPanel extends Component {
                       {comma}
                       <span
                         className="auth-panel__pseudo-link"
+                        role="link"
                         onClick={() => props.onSignIn(provider)}
                       >{PROVIDER_NAMES[provider]}</span>
                     </span>
@@ -81,6 +82,7 @@ export default class AuthPanel extends Component {
             user.admin && (
               <span
                 className="auth-panel__pseudo-link auth-panel__admin-action"
+                role="link"
                 onClick={this.toggleBlockedVisibility}
               >{isBlockedVisible ? 'Hide' : 'Show'} blocked</span>
             )

web/app/components/comment/comment.jsx

@@ -237,7 +237,7 @@ export default class Comment extends Component {
 
     if (mods.view === 'preview') {
       return (
-        <div className={b('comment', props, defaultMods)} id={`${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`}>
+        <div className={b('comment', props, defaultMods)} id={`${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`} role="listitem article" aria-level={mods.level}>
           <div className="comment__body">
             <div className="comment__info">
               <a href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`} className="comment__username">{o.user.name}</a>
@@ -279,6 +279,7 @@ export default class Comment extends Component {
                 <a
                   className="comment__link-to-parent"
                   href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.pid}`}
+                  aria-label="Parent comment"
                   onClick={this.scrollToParent}
                 />
               )
@@ -299,6 +300,8 @@ export default class Comment extends Component {
             <span className={b('comment__score', {}, { view: o.score.view })}>
               <span
                 className={b('comment__vote', {}, { type: 'up', selected: scoreIncreased, disabled: isGuest || isCurrentUser })}
+                role="button"
+                aria-disabled={isGuest || isCurrentUser ? 'true' : 'false'}
                 onClick={isGuest || isCurrentUser ? null : this.increaseScore}
                 title={isGuest ? 'Only authorized users are allowed to vote' : (isCurrentUser ? 'You can\'t vote for your own comment' : null)}
               >Vote up</span>
@@ -310,6 +313,8 @@ export default class Comment extends Component {
 
               <span
                 className={b('comment__vote', {}, { type: 'down', selected: scoreDecreased, disabled: isGuest || isCurrentUser })}
+                role="button"
+                aria-disabled={isGuest || isCurrentUser ? 'true' : 'false'}
                 onClick={isGuest || isCurrentUser ? null : this.decreaseScore}
                 title={isGuest ? 'Only authorized users are allowed to vote' : (isCurrentUser ? 'You can\'t vote for your own comment' : null)}
               >Vote down</span>
@@ -326,6 +331,7 @@ export default class Comment extends Component {
               !mods.disabled && !isGuest && (
                 <span
                   className="comment__action"
+                  role="button"
                   tabIndex="0"
                   onClick={this.toggleInputVisibility}
                 >{isInputVisible ? 'Cancel' : 'Reply'}</span>
@@ -340,6 +346,7 @@ export default class Comment extends Component {
                     !pinned && (
                       <span
                         className="comment__control"
+                        role="button"
                         tabIndex="0"
                         onClick={this.onPinClick}
                       >Pin</span>
@@ -350,6 +357,7 @@ export default class Comment extends Component {
                     pinned && (
                       <span
                         className="comment__control"
+                        role="button"
                         tabIndex="0"
                         onClick={this.onUnpinClick}
                       >Unpin</span>
@@ -360,6 +368,7 @@ export default class Comment extends Component {
                     userBlocked && (
                       <span
                         className="comment__control"
+                        role="button"
                         tabIndex="0"
                         onClick={this.onUnblockClick}
                       >Unblock</span>
@@ -370,6 +379,7 @@ export default class Comment extends Component {
                     !userBlocked && (
                       <span
                         className="comment__control"
+                        role="button"
                         tabIndex="0"
                         onClick={this.onBlockClick}
                       >Block</span>
@@ -380,6 +390,7 @@ export default class Comment extends Component {
                     !deleted && (
                       <span
                         className="comment__control"
+                        role="button"
                         tabIndex="0"
                         onClick={this.onDeleteClick}
                       >Delete</span>

web/app/components/input/input.jsx

@@ -108,7 +108,7 @@ export default class Input extends Component {
     const charactersLeft = maxLength - commentLength;
 
     return (
-      <form className={b('input', props)} onSubmit={this.send}>
+      <form className={b('input', props)} onSubmit={this.send} role="form" aria-label="New Comment">
         <div className="input__field-wrapper">
           <textarea
             className="input__field"
@@ -129,7 +129,7 @@ export default class Input extends Component {
         </div>
 
         {
-          isErrorShown && <p className="input__error">Something went wrong. Please try again a bit later.</p>
+          isErrorShown && <p className="input__error" role="alert">Something went wrong. Please try again a bit later.</p>
         }
 
         <div className="input__buttons">

web/app/components/root/root.jsx

@@ -223,7 +223,7 @@ export default class Root extends Component {
 
                 {
                   !!pinnedComments.length && (
-                    <div className="root__pinned-comments">
+                    <div className="root__pinned-comments" role="region" aria-label="Pinned Comments">
                       {
                         pinnedComments.map(comment => (
                           <Comment
@@ -268,13 +268,13 @@ export default class Root extends Component {
 
           {
             isBlockedVisible && (
-              <div className="root__main">
+              <div className="root__main" role="region" aria-label="Blocked Users">
                 <BlockedUsers users={bannedUsers} onUnblock={this.onUnblockSomeone}/>
               </div>
             )
           }
 
-          <p className="root__copyright">
+          <p className="root__copyright" role="contentinfo">
             Powered by <a href="https://remark42.com/" className="root__copyright-link">Remark42</a>
           </p>
         </div>

web/app/components/thread/thread.jsx

@@ -7,7 +7,7 @@ export default class Thread extends Component {
     const { data: { comment, replies = [] }, mix, mods = {}, onReplyClick } = props;
 
     return (
-      <div className={b('thread', props)}>
+      <div className={b('thread', props)} role="list" >
         <Comment
           data={comment}
           mods={{ level: mods.level }}