Merge pull request #12 from Menelion/aria-links

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" tabIndex="0" onClick={props.onSignOut}>Sign out?</span>
             </div>
           )
         }
@@ -65,6 +65,8 @@ export default class AuthPanel extends Component {
                       {comma}
                       <span
                         className="auth-panel__pseudo-link"
+                        role="link"
+                        tabIndex="0"
                         onClick={() => props.onSignIn(provider)}
                       >{PROVIDER_NAMES[provider]}</span>
                     </span>
@@ -81,6 +83,8 @@ export default class AuthPanel extends Component {
             user.admin && (
               <span
                 className="auth-panel__pseudo-link auth-panel__admin-action"
+                role="link"
+                tabIndex="0"
                 onClick={this.toggleBlockedVisibility}
               >{isBlockedVisible ? 'Hide' : 'Show'} blocked</span>
             )

web/app/components/blocked-users/blocked-users.jsx

@@ -35,7 +35,7 @@ export default class BlockedUsers extends Component {
     const { users } = props;
 
     return (
-      <div className={b('blocked-users', props)}>
+      <div className={b('blocked-users', props)} role="region" aria-label="Blocked users">
         {
           !users.length && (
             <p>There are no blocked users.</p>

web/app/components/comment/comment.jsx

@@ -245,7 +245,7 @@ export default class Comment extends Component {
 
     if (mods.view === 'preview') {
       return (
-        <div className={b('comment', props, defaultMods)}>
+        <article className={b('comment', props, defaultMods)}>
           <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>
@@ -256,12 +256,12 @@ export default class Comment extends Component {
               dangerouslySetInnerHTML={{ __html: o.text }}
             />
           </div>
-        </div>
+        </article>
       );
     }
 
     return (
-      <div className={b('comment', props, defaultMods)} id={mods.disabled ? null : `${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`}>
+      <article className={b('comment', props, defaultMods)} id={mods.disabled ? null : `${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`}>
         <div className="comment__body">
           <div className="comment__info">
             <img
@@ -287,6 +287,8 @@ export default class Comment extends Component {
                 <a
                   className="comment__link-to-parent"
                   href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.pid}`}
+                  aria-label="Go to parent comment"
+                  title="Go to parent comment"
                   onClick={this.scrollToParent}
                 />
               )
@@ -307,6 +309,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}
                 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>
@@ -318,6 +322,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>
@@ -334,6 +340,7 @@ export default class Comment extends Component {
               !deleted && !mods.disabled && !isGuest && (
                 <span
                   className="comment__action"
+                  role="button"
                   tabIndex="0"
                   onClick={this.toggleInputVisibility}
                 >{isInputVisible ? 'Cancel' : 'Reply'}</span>
@@ -356,6 +363,7 @@ export default class Comment extends Component {
                     !pinned && (
                       <span
                         className="comment__control"
+                        role="button"
                         tabIndex="0"
                         onClick={this.onPinClick}
                       >Pin</span>
@@ -366,6 +374,7 @@ export default class Comment extends Component {
                     pinned && (
                       <span
                         className="comment__control"
+                        role="button"
                         tabIndex="0"
                         onClick={this.onUnpinClick}
                       >Unpin</span>
@@ -376,6 +385,7 @@ export default class Comment extends Component {
                     userBlocked && (
                       <span
                         className="comment__control"
+                        role="button"
                         tabIndex="0"
                         onClick={this.onUnblockClick}
                       >Unblock</span>
@@ -386,6 +396,7 @@ export default class Comment extends Component {
                     !userBlocked && (
                       <span
                         className="comment__control"
+                        role="button"
                         tabIndex="0"
                         onClick={this.onBlockClick}
                       >Block</span>
@@ -396,6 +407,7 @@ export default class Comment extends Component {
                     !deleted && (
                       <span
                         className="comment__control"
+                        role="button"
                         tabIndex="0"
                         onClick={this.onDeleteClick}
                       >Delete</span>
@@ -418,7 +430,7 @@ export default class Comment extends Component {
             />
           )
         }
-      </div>
+      </article>
     );
   }
 }

web/app/components/comment/comment.scss

@@ -1,4 +1,5 @@
 .comment {
+  display: block;
   position: relative;
   overflow: hidden;
   margin-bottom: 16px;

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

@@ -214,7 +214,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
@@ -230,7 +230,7 @@ export default class Root extends Component {
 
                 {
                   !!comments.length && !isCommentsListLoading && (
-                    <div className="root__threads">
+                    <div className="root__threads" role="list">
                       {
                         comments.map(thread => (
                           <Thread
@@ -247,7 +247,7 @@ export default class Root extends Component {
 
                 {
                   isCommentsListLoading && (
-                    <div className="root__threads">
+                    <div className="root__threads" role="list">
                       <Preloader mix="root__preloader"/>
                     </div>
                   )
@@ -264,7 +264,7 @@ export default class Root extends Component {
             )
           }
 
-          <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

@@ -22,7 +22,10 @@ export default class Thread extends Component {
     const { data: { comment, replies = [] }, mix, mods = {} } = props;
 
     return (
-      <div className={b('thread', props)}>
+      <div
+      className={b('thread', props)}
+      role={['listitem'].concat(!collapsed && replies.length ? 'list' : [])}
+      aria-expanded={!collapsed}>
         <Comment
           data={comment}
           mods={{ level: mods.level, collapsed, collapsible: !!replies.length }}