usability features

This are all the commits from another PR combined into a single commit.

25 files changed, 316 insertions, 286 deletions

diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index b1da9882..eef39ccf 100644
--- a/ui/src/components/communities.tsx
+++ b/ui/src/components/communities.tsx
@@ -76,37 +76,37 @@ export class Communities extends Component<any, CommunitiesState> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <h5 class="">
+          <p class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </h5>
+          </p>
         ) : (
           <div>
             <h5>
-              <T i18nKey="list_of_communities">#</T>
+              { i18n.t('list_of_communities') }
             </h5>
             <div class="table-responsive">
               <table id="community_table" class="table table-sm table-hover">
                 <thead class="pointer">
                   <tr>
                     <th>
-                      <T i18nKey="name">#</T>
+                      { i18n.t('name') }
                     </th>
                     <th class="d-none d-lg-table-cell">
-                      <T i18nKey="title">#</T>
+                      { i18n.t('title') }
                     </th>
                     <th>
-                      <T i18nKey="category">#</T>
+                      { i18n.t('category') }
                     </th>
                     <th class="text-right">
-                      <T i18nKey="subscribers">#</T>
+                      { i18n.t('subscribers') }
                     </th>
                     <th class="text-right d-none d-lg-table-cell">
-                      <T i18nKey="posts">#</T>
+                      { i18n.t('posts') }
                     </th>
                     <th class="text-right d-none d-lg-table-cell">
-                      <T i18nKey="comments">#</T>
+                      { i18n.t('comments') }
                     </th>
                     <th></th>
                   </tr>
@@ -149,7 +149,7 @@ export class Communities extends Component<any, CommunitiesState> {
                               this.handleSubscribe
                             )}
                           >
-                            <T i18nKey="subscribe">#</T>
+                            { i18n.t('subscribe') }
                           </span>
                         )}
                       </td>
@@ -173,15 +173,16 @@ export class Communities extends Component<any, CommunitiesState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            <T i18nKey="prev">#</T>
+            { i18n.t('prev') }
           </button>
         )}
+
         {this.state.communities.length == communityLimit && (
           <button
             class="btn btn-sm btn-secondary"
             onClick={linkEvent(this, this.nextPage)}
           >
-            <T i18nKey="next">#</T>
+            { i18n.t('next') }
           </button>
         )}
       </div>
diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx
index c8d888be..46fc4185 100644
--- a/ui/src/components/community-form.tsx
+++ b/ui/src/components/community-form.tsx
@@ -108,12 +108,13 @@ export class CommunityForm extends Component<
     return (
       <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="name">#</T>
+          <label class="col-12 col-form-label" for="community-name">
+            { i18n.t('name') }
           </label>
           <div class="col-12">
             <input
               type="text"
+              id="community-name"
               class="form-control"
               value={this.state.communityForm.name}
               onInput={linkEvent(this, this.handleCommunityNameChange)}
@@ -125,13 +126,15 @@ export class CommunityForm extends Component<
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="title">#</T>
+          <label class="col-12 col-form-label" for="community-title">
+            { i18n.t('title') }
           </label>
           <div class="col-12">
             <input
               type="text"
+              id="community-title"
               value={this.state.communityForm.title}
               onInput={linkEvent(this, this.handleCommunityTitleChange)}
               class="form-control"
@@ -142,13 +145,14 @@ export class CommunityForm extends Component<
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="sidebar">#</T>
+          <label class="col-12 col-form-label" for="community-sidebar">
+            { i18n.t('sidebar') }
           </label>
           <div class="col-12">
             <textarea
               id={this.id}
               value={this.state.communityForm.description}
+              id="community-sidebar"
               onInput={linkEvent(this, this.handleCommunityDescriptionChange)}
               class="form-control"
               rows={3}
@@ -157,12 +161,13 @@ export class CommunityForm extends Component<
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="category">#</T>
+          <label class="col-12 col-form-label" for="community-category">
+            { i18n.t('category') }
           </label>
           <div class="col-12">
             <select
               class="form-control"
+              id="community-category"
               value={this.state.communityForm.category_id}
               onInput={linkEvent(this, this.handleCommunityCategoryChange)}
             >
@@ -179,12 +184,13 @@ export class CommunityForm extends Component<
               <div class="form-check">
                 <input
                   class="form-check-input"
+                  id="community-nsfw"
                   type="checkbox"
                   checked={this.state.communityForm.nsfw}
                   onChange={linkEvent(this, this.handleCommunityNsfwChange)}
                 />
-                <label class="form-check-label">
-                  <T i18nKey="nsfw">#</T>
+                <label class="form-check-label" for="community-nsfw">
+                  { i18n.t('nsfw') }
                 </label>
               </div>
             </div>
@@ -209,7 +215,7 @@ export class CommunityForm extends Component<
                 class="btn btn-secondary"
                 onClick={linkEvent(this, this.handleCancel)}
               >
-                <T i18nKey="cancel">#</T>
+                { i18n.t('cancel') }
               </button>
             )}
           </div>
diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index 3c5f6890..30756344 100644
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -128,11 +128,11 @@ export class Community extends Component<any, State> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <h5>
+          <p class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </h5>
+          </p>
         ) : (
           <div class="row">
             <div class="col-12 col-md-8">
@@ -140,12 +140,12 @@ export class Community extends Component<any, State> {
                 {this.state.community.title}
                 {this.state.community.removed && (
                   <small className="ml-2 text-muted font-italic">
-                    <T i18nKey="removed">#</T>
+                    { i18n.t('removed') }
                   </small>
                 )}
                 {this.state.community.nsfw && (
                   <small className="ml-2 text-muted font-italic">
-                    <T i18nKey="nsfw">#</T>
+                    { i18n.t('nsfw') }
                   </small>
                 )}
               </h5>
@@ -192,7 +192,7 @@ export class Community extends Component<any, State> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            <T i18nKey="prev">#</T>
+            { i18n.t('prev') }
           </button>
         )}
         {this.state.posts.length == fetchLimit && (
@@ -200,7 +200,7 @@ export class Community extends Component<any, State> {
             class="btn btn-sm btn-secondary"
             onClick={linkEvent(this, this.nextPage)}
           >
-            <T i18nKey="next">#</T>
+            { i18n.t('next') }
           </button>
         )}
       </div>
diff --git a/ui/src/components/create-community.tsx b/ui/src/components/create-community.tsx
index f16b6425..49cfb0e9 100644
--- a/ui/src/components/create-community.tsx
+++ b/ui/src/components/create-community.tsx
@@ -23,7 +23,7 @@ export class CreateCommunity extends Component<any, any> {
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>
-              <T i18nKey="create_community">#</T>
+              { i18n.t('create_community') }
             </h5>
             <CommunityForm onCreate={this.handleCommunityCreate} />
           </div>
diff --git a/ui/src/components/create-post.tsx b/ui/src/components/create-post.tsx
index ad013d09..39a5e5f0 100644
--- a/ui/src/components/create-post.tsx
+++ b/ui/src/components/create-post.tsx
@@ -23,7 +23,7 @@ export class CreatePost extends Component<any, any> {
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>
-              <T i18nKey="create_post">#</T>
+              { i18n.t('create_post') }
             </h5>
             <PostForm onCreate={this.handlePostCreate} params={this.params} />
           </div>
diff --git a/ui/src/components/footer.tsx b/ui/src/components/footer.tsx
index 5451da2c..f48120b8 100644
--- a/ui/src/components/footer.tsx
+++ b/ui/src/components/footer.tsx
@@ -2,7 +2,7 @@ import { Component } from 'inferno';
 import { Link } from 'inferno-router';
 import { repoUrl } from '../utils';
 import { version } from '../version';
-import { T } from 'inferno-i18next';
+import { i18n } from '../i18next';
 
 export class Footer extends Component<any, any> {
   constructor(props: any, context: any) {
@@ -19,22 +19,22 @@ export class Footer extends Component<any, any> {
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/modlog">
-                <T i18nKey="modlog">#</T>
+                { i18n.t('modlog') }
               </Link>
             </li>
             <li class="nav-item">
               <a class="nav-link" href={'/docs/index.html'}>
-                <T i18nKey="docs">#</T>
+                { i18n.t('docs') }
               </a>
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/sponsors">
-                <T i18nKey="donate">#</T>
+                { i18n.t('donate') }
               </Link>
             </li>
             <li class="nav-item">
               <a class="nav-link" href={repoUrl}>
-                <T i18nKey="code">#</T>
+                { i18n.t('code') }
               </a>
             </li>
           </ul>
diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx
index 41c1ce60..c89beb40 100644
--- a/ui/src/components/inbox.tsx
+++ b/ui/src/components/inbox.tsx
@@ -122,7 +122,7 @@ export class Inbox extends Component<any, InboxState> {
                 <ul class="list-inline mb-1 text-muted small font-weight-bold">
                   <li className="list-inline-item">
                     <span class="pointer" onClick={this.markAllAsRead}>
-                      <T i18nKey="mark_all_as_read">#</T>
+                      { i18n.t('mark_all_as_read') }
                     </span>
                   </li>
                 </ul>
@@ -148,13 +148,14 @@ export class Inbox extends Component<any, InboxState> {
           class="custom-select custom-select-sm w-auto mr-2"
         >
           <option disabled>
-            <T i18nKey="type">#</T>
+            { i18n.t('type') }
+            
           </option>
           <option value={UnreadOrAll.Unread}>
-            <T i18nKey="unread">#</T>
+            { i18n.t('unread') }
           </option>
           <option value={UnreadOrAll.All}>
-            <T i18nKey="all">#</T>
+            { i18n.t('all') }
           </option>
         </select>
         <select
@@ -163,19 +164,22 @@ export class Inbox extends Component<any, InboxState> {
           class="custom-select custom-select-sm w-auto mr-2"
         >
           <option disabled>
-            <T i18nKey="type">#</T>
+            { i18n.t('type') }
           </option>
           <option value={UnreadType.All}>
-            <T i18nKey="all">#</T>
+            { i18n.t('all') }
+          </option>
+          <option value={UnreadType.Both}>
+            { i18n.t('both') }
           </option>
           <option value={UnreadType.Replies}>
-            <T i18nKey="replies">#</T>
+            { i18n.t('replies') }
           </option>
           <option value={UnreadType.Mentions}>
-            <T i18nKey="mentions">#</T>
+            { i18n.t('mentions') }
           </option>
           <option value={UnreadType.Messages}>
-            <T i18nKey="messages">#</T>
+            { i18n.t('messages') }
           </option>
         </select>
         <SortSelect
@@ -248,14 +252,14 @@ export class Inbox extends Component<any, InboxState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            <T i18nKey="prev">#</T>
+            { i18n.t('prev') }
           </button>
         )}
         <button
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          <T i18nKey="next">#</T>
+          { i18n.t('next') }
         </button>
       </div>
     );
diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx
index 64687a3d..bea8564c 100644
--- a/ui/src/components/login.tsx
+++ b/ui/src/components/login.tsx
@@ -78,15 +78,16 @@ export class Login extends Component<any, State> {
     return (
       <div>
         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
-          <h5>Login</h5>
+          <h2>{ i18n.t('login') }</h2>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="email_or_username">#</T>
+            <label class="col-sm-2 col-form-label" for="login-email-or-username">
+                { i18n.t('email_or_username') }
             </label>
             <div class="col-sm-10">
               <input
                 type="text"
                 class="form-control"
+                id="login-email-or-username"
                 value={this.state.loginForm.username_or_email}
                 onInput={linkEvent(this, this.handleLoginUsernameChange)}
                 required
@@ -95,12 +96,13 @@ export class Login extends Component<any, State> {
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="password">#</T>
+            <label class="col-sm-2 col-form-label" for="login-password">
+                { i18n.t('password') }
             </label>
             <div class="col-sm-10">
               <input
                 type="password"
+                id="login-password"
                 value={this.state.loginForm.password}
                 onInput={linkEvent(this, this.handleLoginPasswordChange)}
                 class="form-control"
@@ -111,7 +113,7 @@ export class Login extends Component<any, State> {
                 onClick={linkEvent(this, this.handlePasswordReset)}
                 className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold"
               >
-                <T i18nKey="forgot_password">#</T>
+                { i18n.t('forgot_password') }
               </button>
             </div>
           </div>
@@ -135,16 +137,19 @@ export class Login extends Component<any, State> {
   registerForm() {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h5>
-          <T i18nKey="sign_up">#</T>
-        </h5>
+        <h2>
+          { i18n.t('sign_up') }
+        </h2>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="username">#</T>
+          <label class="col-sm-2 col-form-label" for="register-username">
+            { i18n.t('username') }
           </label>
+
           <div class="col-sm-10">
             <input
               type="text"
+              id="register-username"
               class="form-control"
               value={this.state.registerForm.username}
               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
@@ -155,13 +160,15 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="email">#</T>
+          <label class="col-sm-2 col-form-label" for="register-email">
+            { i18n.t('email') }
           </label>
           <div class="col-sm-10">
             <input
               type="email"
+              id="register-email"
               class="form-control"
               placeholder={i18n.t('optional')}
               value={this.state.registerForm.email}
@@ -170,13 +177,15 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="password">#</T>
+          <label class="col-sm-2 col-form-label" for="register-password">
+            { i18n.t('password') }
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="register-password"
               value={this.state.registerForm.password}
               onInput={linkEvent(this, this.handleRegisterPasswordChange)}
               class="form-control"
@@ -184,13 +193,15 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="verify_password">#</T>
+          <label class="col-sm-2 col-form-label" for="register-verify-password">
+            { i18n.t('verify_password') }
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="register-verify-password"
               value={this.state.registerForm.password_verify}
               onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
               class="form-control"
@@ -198,18 +209,20 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
-        {this.state.enable_nsfw && (
+
+        { this.state.enable_nsfw && (
           <div class="form-group row">
             <div class="col-sm-10">
               <div class="form-check">
                 <input
                   class="form-check-input"
+                  id="register-show-nsfw"
                   type="checkbox"
                   checked={this.state.registerForm.show_nsfw}
                   onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
                 />
-                <label class="form-check-label">
-                  <T i18nKey="show_nsfw">#</T>
+                <label class="form-check-label" for="register-show-nsfw">
+                    { i18n.t('show_nsfw') }
                 </label>
               </div>
             </div>
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index 6bf4164f..e578cc83 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -159,8 +159,8 @@ export class Main extends Component<any, MainState> {
     return (
       <div class="container">
         <div class="row">
-          <div class="col-12 col-md-8">{this.posts()}</div>
-          <div class="col-12 col-md-4">{this.my_sidebar()}</div>
+          <main role="main" class="col-12 col-md-8">{this.posts()}</main>
+          <aside class="col-12 col-md-4">{this.my_sidebar()}</aside>
         </div>
       </div>
     );
@@ -413,13 +413,13 @@ export class Main extends Component<any, MainState> {
 
   posts() {
     return (
-      <div>
+      <div class="main-content-wrapper">
         {this.state.loading ? (
-          <h5>
+          <p class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </h5>
+          </p>
         ) : (
           <div>
             {this.selects()}
diff --git a/ui/src/components/modlog.tsx b/ui/src/components/modlog.tsx
index e03f1ff7..6da10eec 100644
--- a/ui/src/components/modlog.tsx
+++ b/ui/src/components/modlog.tsx
@@ -343,7 +343,7 @@ export class Modlog extends Component<any, ModlogState> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <h5 class="">
+          <h5 class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
@@ -359,15 +359,15 @@ export class Modlog extends Component<any, ModlogState> {
                   /c/{this.state.communityName}{' '}
                 </Link>
               )}
-              <span>Modlog</span>
+              <span>{ i18n.t('modlog') }</span>
             </h5>
             <div class="table-responsive">
               <table id="modlog_table" class="table table-sm table-hover">
                 <thead class="pointer">
                   <tr>
-                    <th>Time</th>
-                    <th>Mod</th>
-                    <th>Action</th>
+                    <th> { i18n.t('time')}</th>
+                    <th>{ i18n.t('mod')}</th>
+                    <th>{ i18n.t('action')}</th>
                   </tr>
                 </thead>
                 {this.combined()}
@@ -388,14 +388,14 @@ export class Modlog extends Component<any, ModlogState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            Prev
+            { i18n.t('prev') }
           </button>
         )}
         <button
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          Next
+          { i18n.t('next') }
         </button>
       </div>
     );
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index 1828fce9..61ec01c1 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -102,6 +102,7 @@ export class Navbar extends Component<any, NavbarState> {
         <button
           class="navbar-toggler"
           type="button"
+          aria-label="menu"
           onClick={linkEvent(this, this.expandNavbar)}
         >
           <span class="navbar-toggler-icon"></span>
@@ -112,12 +113,12 @@ export class Navbar extends Component<any, NavbarState> {
           <ul class="navbar-nav mr-auto">
             <li class="nav-item">
               <Link class="nav-link" to="/communities">
-                <T i18nKey="communities">#</T>
+                { i18n.t('communities') }
               </Link>
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/search">
-                <T i18nKey="search">#</T>
+                { i18n.t('search') }
               </Link>
             </li>
             <li class="nav-item">
@@ -128,17 +129,17 @@ export class Navbar extends Component<any, NavbarState> {
                   state: { prevPath: this.currentLocation },
                 }}
               >
-                <T i18nKey="create_post">#</T>
+                { i18n.t('create_post') }
               </Link>
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/create_community">
-                <T i18nKey="create_community">#</T>
+                { i18n.t('create_community') }
               </Link>
             </li>
             <li className="nav-item">
               <Link
-                class="nav-link"
+                class="nav-link ml-2"
                 to="/sponsors"
                 title={i18n.t('donate_to_lemmy')}
               >
@@ -186,7 +187,7 @@ export class Navbar extends Component<any, NavbarState> {
               </>
             ) : (
               <Link class="nav-link" to="/login">
-                <T i18nKey="login_sign_up">#</T>
+                { i18n.t('login_sign_up') }
               </Link>
             )}
           </ul>
diff --git a/ui/src/components/password_change.tsx b/ui/src/components/password_change.tsx
index 10b6867c..7774b783 100644
--- a/ui/src/components/password_change.tsx
+++ b/ui/src/components/password_change.tsx
@@ -59,7 +59,7 @@ export class PasswordChange extends Component<any, State> {
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>
-              <T i18nKey="password_change">#</T>
+              { i18n.t('password_change') }
             </h5>
             {this.passwordChangeForm()}
           </div>
diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx
index 57d9a964..858b6b79 100644
--- a/ui/src/components/post-form.tsx
+++ b/ui/src/components/post-form.tsx
@@ -151,12 +151,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
       <div>
         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="url">#</T>
+            <label class="col-sm-2 col-form-label" for="post-url">
+              { i18n.t('url') }
             </label>
             <div class="col-sm-10">
               <input
                 type="url"
+                id="post-url"
                 class="form-control"
                 value={this.state.postForm.url}
                 onInput={linkEvent(this, this.handlePostUrlChange)}
@@ -181,7 +182,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   className={`${UserService.Instance.user &&
                     'pointer'} d-inline-block mr-2 float-right text-muted small font-weight-bold`}
                 >
-                  <T i18nKey="upload_image">#</T>
+                  { i18n.t('upload_image') }
                 </label>
                 <input
                   id="file-upload"
@@ -201,7 +202,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   target="_blank"
                   class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
                 >
-                  <T i18nKey="archive_link">#</T>
+                  { i18n.t('archive_link') }
                 </a>
               )}
               {this.state.imageLoading && (
@@ -215,7 +216,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               {this.state.crossPosts.length > 0 && (
                 <>
                   <div class="my-1 text-muted small font-weight-bold">
-                    <T i18nKey="cross_posts">#</T>
+                    { i18n.t('cross_posts') }
                   </div>
                   <PostListings showCommunity posts={this.state.crossPosts} />
                 </>
@@ -223,12 +224,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="title">#</T>
+            <label class="col-sm-2 col-form-label" for="post-title">
+              { i18n.t('title') }
             </label>
             <div class="col-sm-10">
               <textarea
                 value={this.state.postForm.name}
+