From e6aa4111dd11a62460dfba20752d80d96be0f958 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andre=20Polykanine=20A=2EK=2EA=2E=20Menelion=20Elens=C3=BA?=
 =?UTF-8?q?l=C3=AB?= <andre@oire.org>
Date: Sun, 13 May 2018 01:49:13 +0300
Subject: [PATCH 1/2] Add basic ARIA mark-up

---
 web/app/components/auth-panel/auth-panel.jsx |  4 +++-
 web/app/components/comment/comment.jsx       | 13 ++++++++++++-
 web/app/components/input/input.jsx           |  4 ++--
 web/app/components/root/root.jsx             |  6 +++---
 web/app/components/thread/thread.jsx         |  2 +-
 5 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/web/app/components/auth-panel/auth-panel.jsx b/web/app/components/auth-panel/auth-panel.jsx
index 20859d48..f39030b2 100644
--- a/web/app/components/auth-panel/auth-panel.jsx
+++ b/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>
             )
diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx
index 180d7dd6..15e8130b 100644
--- a/web/app/components/comment/comment.jsx
+++ b/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>
diff --git a/web/app/components/input/input.jsx b/web/app/components/input/input.jsx
index 32b663dc..3d37e897 100644
--- a/web/app/components/input/input.jsx
+++ b/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">
diff --git a/web/app/components/root/root.jsx b/web/app/components/root/root.jsx
index c8b37e2e..0875d839 100644
--- a/web/app/components/root/root.jsx
+++ b/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>
diff --git a/web/app/components/thread/thread.jsx b/web/app/components/thread/thread.jsx
index 69c2cb1d..2460b197 100644
--- a/web/app/components/thread/thread.jsx
+++ b/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 }}

From 158cc3f2527bc837ee43b91d482933444a988260 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andre=20Polykanine=20A=2EK=2EA=2E=20Menelion=20Elens=C3=BA?=
 =?UTF-8?q?l=C3=AB?= <andre@oire.org>
Date: Sun, 13 May 2018 21:30:30 +0300
Subject: [PATCH 2/2] Changed according to code review by @igoradamenko

---
 web/app/components/auth-panel/auth-panel.jsx       |  4 +++-
 web/app/components/blocked-users/blocked-users.jsx |  2 +-
 web/app/components/comment/comment.jsx             | 13 +++++++------
 web/app/components/comment/comment.scss            |  1 +
 web/app/components/root/root.jsx                   |  8 ++++----
 web/app/components/thread/thread.jsx               |  5 ++++-
 6 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/web/app/components/auth-panel/auth-panel.jsx b/web/app/components/auth-panel/auth-panel.jsx
index 346d1754..651612f6 100644
--- a/web/app/components/auth-panel/auth-panel.jsx
+++ b/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" role="link" onClick={props.onSignOut}>Sign out?</span>
+              <span className="auth-panel__pseudo-link" role="link" tabIndex="0" onClick={props.onSignOut}>Sign out?</span>
             </div>
           )
         }
@@ -66,6 +66,7 @@ export default class AuthPanel extends Component {
                       <span
                         className="auth-panel__pseudo-link"
                         role="link"
+                        tabIndex="0"
                         onClick={() => props.onSignIn(provider)}
                       >{PROVIDER_NAMES[provider]}</span>
                     </span>
@@ -83,6 +84,7 @@ export default class AuthPanel extends Component {
               <span
                 className="auth-panel__pseudo-link auth-panel__admin-action"
                 role="link"
+                tabIndex="0"
                 onClick={this.toggleBlockedVisibility}
               >{isBlockedVisible ? 'Hide' : 'Show'} blocked</span>
             )
diff --git a/web/app/components/blocked-users/blocked-users.jsx b/web/app/components/blocked-users/blocked-users.jsx
index dcc55828..9ea0470d 100644
--- a/web/app/components/blocked-users/blocked-users.jsx
+++ b/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>
diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx
index 74202c4f..f813838e 100644
--- a/web/app/components/comment/comment.jsx
+++ b/web/app/components/comment/comment.jsx
@@ -244,7 +244,7 @@ export default class Comment extends Component {
 
     if (mods.view === 'preview') {
       return (
-        <div className={b('comment', props, defaultMods)} role="listitem article" aria-level={mods.level}>
+        <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>
@@ -255,12 +255,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
@@ -286,7 +286,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="Parent comment"
+                  aria-label="Go to parent comment"
+                  title="Go to parent comment"
                   onClick={this.scrollToParent}
                 />
               )
@@ -308,7 +309,7 @@ export default class Comment extends Component {
               <span
                 className={b('comment__vote', {}, { type: 'up', selected: scoreIncreased, disabled: isGuest || isCurrentUser })}
                 role="button"
-                aria-disabled={isGuest || isCurrentUser ? 'true' : 'false'}
+                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>
@@ -428,7 +429,7 @@ export default class Comment extends Component {
             />
           )
         }
-      </div>
+      </article>
     );
   }
 }
diff --git a/web/app/components/comment/comment.scss b/web/app/components/comment/comment.scss
index c725d7cc..f897b3d0 100644
--- a/web/app/components/comment/comment.scss
+++ b/web/app/components/comment/comment.scss
@@ -1,4 +1,5 @@
 .comment {
+  display: block;
   position: relative;
   overflow: hidden;
   margin-bottom: 16px;
diff --git a/web/app/components/root/root.jsx b/web/app/components/root/root.jsx
index 6398d136..c3fe7704 100644
--- a/web/app/components/root/root.jsx
+++ b/web/app/components/root/root.jsx
@@ -223,7 +223,7 @@ export default class Root extends Component {
 
                 {
                   !!pinnedComments.length && (
-                    <div className="root__pinned-comments" role="region" aria-label="Pinned Comments">
+                    <div className="root__pinned-comments" role="region" aria-label="Pinned comments">
                       {
                         pinnedComments.map(comment => (
                           <Comment
@@ -239,7 +239,7 @@ export default class Root extends Component {
 
                 {
                   !!comments.length && !isCommentsListLoading && (
-                    <div className="root__threads">
+                    <div className="root__threads" role="list">
                       {
                         comments.map(thread => (
                           <Thread
@@ -257,7 +257,7 @@ export default class Root extends Component {
 
                 {
                   isCommentsListLoading && (
-                    <div className="root__threads">
+                    <div className="root__threads" role="list">
                       <Preloader mix="root__preloader"/>
                     </div>
                   )
@@ -268,7 +268,7 @@ export default class Root extends Component {
 
           {
             isBlockedVisible && (
-              <div className="root__main" role="region" aria-label="Blocked Users">
+              <div className="root__main">
                 <BlockedUsers users={bannedUsers} onUnblock={this.onUnblockSomeone}/>
               </div>
             )
diff --git a/web/app/components/thread/thread.jsx b/web/app/components/thread/thread.jsx
index fa7d80f7..6cc5ae46 100644
--- a/web/app/components/thread/thread.jsx
+++ b/web/app/components/thread/thread.jsx
@@ -22,7 +22,10 @@ export default class Thread extends Component {
     const { data: { comment, replies = [] }, mix, mods = {}, onReplyClick } = props;
 
     return (
-      <div className={b('thread', props)} role="list" >
+      <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 }}