fix(a11y): convert empty links to buttons

flarum · Nov 10, 2023 · f53ff4e · f53ff4e
1 parent d01c0e5
commit f53ff4e
Show file tree

Hide file tree

Showing 13 changed files with 60 additions and 37 deletions.
diff --git a/extensions/tags/js/src/forum/addTagComposer.js b/extensions/tags/js/src/forum/addTagComposer.js
@@ -5,6 +5,7 @@ import classList from 'flarum/common/utils/classList';
 
 import tagsLabel from '../common/helpers/tagsLabel';
 import getSelectableTags from './utils/getSelectableTags';
+import Button from '@flarum/core/src/common/components/Button';
 
 export default function addTagComposer() {
   extend(IndexSidebar.prototype, 'newDiscussionAction', function (promise) {
@@ -47,13 +48,16 @@ export default function addTagComposer() {
 
     items.add(
       'tags',
-      <a className={classList(['DiscussionComposer-changeTags', !selectableTags.length && 'disabled'])} onclick={this.chooseTags.bind(this)}>
+      <Button
+        className={classList(['DiscussionComposer-changeTags', 'Button Button--ua-reset', !selectableTags.length && 'disabled'])}
+        onclick={this.chooseTags.bind(this)}
+      >
         {tags.length ? (
           tagsLabel(tags)
         ) : (
           <span className="TagLabel untagged">{app.translator.trans('flarum-tags.forum.composer_discussion.choose_tags_link')}</span>
         )}
-      </a>,
+      </Button>,
       10
     );
   });

diff --git a/extensions/tags/less/forum.less b/extensions/tags/less/forum.less
@@ -32,6 +32,7 @@
 }
 .DiscussionComposer-changeTags {
   margin-right: 15px;
+  line-height: inherit;
 
   &.disabled {
     opacity: 0.5;

diff --git a/framework/core/js/src/forum/components/DiscussionListItem.tsx b/framework/core/js/src/forum/components/DiscussionListItem.tsx
@@ -148,9 +148,15 @@ export default class DiscussionListItem<CustomAttrs extends IDiscussionListItemA
         text={app.translator.trans('core.forum.discussion_list.started_text', { user, ago: humanTime(discussion.createdAt()) })}
         position="right"
       >
-        <Link className="DiscussionListItem-author-avatar" href={user ? app.route.user(user) : '#'}>
-          <Avatar user={user || null} title="" />
-        </Link>
+        {user ? (
+          <Link className="DiscussionListItem-author-avatar" href={app.route.user(user)}>
+            <Avatar user={user} title="" />
+          </Link>
+        ) : (
+          <span className="DiscussionListItem-author-avatar">
+            <Avatar user={null} title="" />
+          </span>
+        )}
       </Tooltip>,
       100
     );

diff --git a/framework/core/js/src/forum/components/LogInModal.tsx b/framework/core/js/src/forum/components/LogInModal.tsx
@@ -122,10 +122,16 @@ export default class LogInModal<CustomAttrs extends ILoginModalAttrs = ILoginMod
     return (
       <>
         <p className="LogInModal-forgotPassword">
-          <a onclick={this.forgotPassword.bind(this)}>{app.translator.trans('core.forum.log_in.forgot_password_link')}</a>
+          <Button className="Button Button--text Button--link" onclick={this.forgotPassword.bind(this)}>
+            {app.translator.trans('core.forum.log_in.forgot_password_link')}
+          </Button>
         </p>
         {app.forum.attribute<boolean>('allowSignUp') && (
-          <p className="LogInModal-signUp">{app.translator.trans('core.forum.log_in.sign_up_text', { a: <a onclick={this.signUp.bind(this)} /> })}</p>
+          <p className="LogInModal-signUp">
+            {app.translator.trans('core.forum.log_in.sign_up_text', {
+              a: <Button className="Button Button--text Button--link" onclick={this.signUp.bind(this)} />,
+            })}
+          </p>
         )}
       </>
     );

diff --git a/framework/core/js/src/forum/components/PostMeta.js b/framework/core/js/src/forum/components/PostMeta.js
@@ -2,6 +2,7 @@ import app from '../../forum/app';
 import Component from '../../common/Component';
 import humanTime from '../../common/helpers/humanTime';
 import fullTime from '../../common/helpers/fullTime';
+import Button from '../../common/components/Button';
 
 /**
  * The `PostMeta` component displays the time of a post, and when clicked, shows
@@ -29,9 +30,9 @@ export default class PostMeta extends Component {
 
     return (
       <div className="Dropdown PostMeta">
-        <a className="Dropdown-toggle" onclick={selectPermalink} data-toggle="dropdown">
+        <Button className="Dropdown-toggle Button Button--text Button--link" onclick={selectPermalink} data-toggle="dropdown">
           {humanTime(time)}
-        </a>
+        </Button>
 
         <div className="Dropdown-menu dropdown-menu">
           <span className="PostMeta-number">{app.translator.trans('core.forum.post.number_tooltip', { number: post.number() })}</span>{' '}

diff --git a/framework/core/js/src/forum/components/PostStreamScrubber.js b/framework/core/js/src/forum/components/PostStreamScrubber.js
@@ -3,6 +3,7 @@ import Component from '../../common/Component';
 import formatNumber from '../../common/utils/formatNumber';
 import ScrollListener from '../../common/utils/ScrollListener';
 import Icon from '../../common/components/Icon';
+import Button from '../../common/components/Button';
 
 /**
  * The `PostStreamScrubber` component displays a scrubber which can be used to
@@ -63,9 +64,9 @@ export default class PostStreamScrubber extends Component {
 
         <div className="Dropdown-menu dropdown-menu">
           <div className="Scrubber">
-            <a className="Scrubber-first" onclick={this.goToFirst.bind(this)}>
-              <Icon name={'fas fa-angle-double-up'} /> {app.translator.trans('core.forum.post_scrubber.original_post_link')}
-            </a>
+            <Button className="Scrubber-first Button Button--link" onclick={this.goToFirst.bind(this)} icon="fas fa-angle-double-up">
+              {app.translator.trans('core.forum.post_scrubber.original_post_link')}
+            </Button>
 
             <div className="Scrubber-scrollbar">
               <div className="Scrubber-before" />
@@ -83,9 +84,9 @@ export default class PostStreamScrubber extends Component {
               </div>
             </div>
 
-            <a className="Scrubber-last" onclick={this.goToLast.bind(this)}>
-              <Icon name={'fas fa-angle-double-down'} /> {app.translator.trans('core.forum.post_scrubber.now_link')}
-            </a>
+            <Button className="Scrubber-last Button Button--link" onclick={this.goToLast.bind(this)} icon="fas fa-angle-double-down">
+              {app.translator.trans('core.forum.post_scrubber.now_link')}
+            </Button>
           </div>
         </div>
       </div>

diff --git a/framework/core/js/src/forum/components/SignUpModal.tsx b/framework/core/js/src/forum/components/SignUpModal.tsx
@@ -137,7 +137,11 @@ export default class SignUpModal<CustomAttrs extends ISignupModalAttrs = ISignup
 
   footer() {
     return [
-      <p className="SignUpModal-logIn">{app.translator.trans('core.forum.sign_up.log_in_text', { a: <a onclick={this.logIn.bind(this)} /> })}</p>,
+      <p className="SignUpModal-logIn">
+        {app.translator.trans('core.forum.sign_up.log_in_text', {
+          a: <Button className="Button Button--text Button--link" onclick={this.logIn.bind(this)} />,
+        })}
+      </p>,
     ];
   }
 

diff --git a/framework/core/less/common/Button.less b/framework/core/less/common/Button.less
@@ -146,8 +146,9 @@
 .Button--text {
   background: transparent !important;
   padding: 0;
-  color: inherit !important;
+  --button-color: inherit;
   line-height: inherit;
+  vertical-align: baseline;
 
   &:hover {
     text-decoration: underline;
@@ -158,6 +159,10 @@
     box-shadow: none;
   }
 }
+.Button--link.Button--text {
+  .text-link();
+  --button-color: currentColor;
+}
 .Button--primary {
   .Button--color-auto('button-primary');
   font-weight: bold;

diff --git a/framework/core/less/common/mixins.less b/framework/core/less/common/mixins.less
@@ -5,3 +5,4 @@
 @import "mixins/light-contents.less";
 @import "mixins/header-background.less";
 @import "mixins/vendor-prefixes.less";
+@import "mixins/typography.less";
diff --git a/framework/core/less/common/mixins/typography.less b/framework/core/less/common/mixins/typography.less
@@ -0,0 +1,9 @@
+.text-link() {
+  cursor: pointer;
+  color: var(--link-color);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
diff --git a/framework/core/less/common/scaffolding.less b/framework/core/less/common/scaffolding.less
@@ -37,13 +37,7 @@ textarea {
 }
 
 a {
-  cursor: pointer;
-  color: var(--link-color);
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
+  .text-link();
 }
 
 hr {

diff --git a/framework/core/less/forum/Post.less b/framework/core/less/forum/Post.less
@@ -18,7 +18,7 @@
 .Post-header {
   margin-bottom: 15px;
 
-  &, a {
+  &, a, .Button--text.Button--link {
     color: var(--muted-color);
   }
   > ul {

diff --git a/framework/core/less/forum/Scrubber.less b/framework/core/less/forum/Scrubber.less
@@ -1,16 +1,7 @@
 .Scrubber {
-  & a {
-    margin-left: -1px;
-    color: var(--muted-color);
-
-    & .fa {
-      font-size: 14px;
-      margin-right: 2px;
-    }
-    &:hover, &:focus {
-      text-decoration: none;
-      color: var(--link-color);
-    }
+  &-first, &-last {
+    width: auto !important;
+    padding: 0;
   }
 }
 .Scrubber-scrollbar {