Merge remote-tracking branch 'upstream/develop' into neckbeard

.node-version

@@ -1 +1 @@
-16.18.0
+16.18.1

package.json

@@ -63,7 +63,7 @@
     "autoprefixer": "10.4.12",
     "babel-loader": "8.2.5",
     "babel-plugin-lodash": "3.3.4",
-    "chai": "4.3.6",
+    "chai": "4.3.7",
     "chalk": "1.1.3",
     "chromedriver": "104.0.0",
     "connect-history-api-fallback": "2.0.0",
@@ -76,7 +76,7 @@
     "eslint-config-standard": "17.0.0",
     "eslint-formatter-friendly": "7.0.0",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-n": "15.4.0",
+    "eslint-plugin-n": "15.5.0",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-vue": "9.7.0",
     "eslint-webpack-plugin": "3.2.0",

src/App.vue

@@ -33,7 +33,7 @@
           <div id="notifs-sidebar" />
         </template>
       </div>
-      <div
+      <main
         id="main-scroller"
         class="column main"
         :class="{ '-full-height': isChats || isListEdit }"
@@ -51,7 +51,7 @@
         </div>
         <banner />
         <router-view />
-      </div>
+      </main>
       <div
         id="notifs-column"
         class="column -scrollable"

src/components/conversation/conversation.vue

@@ -60,7 +60,7 @@
           v-if="shouldShowAncestors"
           class="thread-ancestors"
         >
-          <div
+          <article
             v-for="status in ancestorsOf(diveRoot)"
             :key="status.id"
             class="thread-ancestor"
@@ -130,7 +130,7 @@
                 </i18n-t>
               </div>
             </div>
-          </div>
+          </article>
         </div>
         <thread-tree
           v-for="status in showingTopLevel"
@@ -168,34 +168,36 @@
         v-if="isLinearView"
         class="thread-body"
       >
-        <status
+        <article>
-          v-for="status in conversation"
+          <status
-          :key="status.id"
+            v-for="status in conversation"
-          ref="statusComponent"
+            :key="status.id"
-          :inline-expanded="collapsable && isExpanded"
+            ref="statusComponent"
-          :statusoid="status"
+            :inline-expanded="collapsable && isExpanded"
-          :expandable="!isExpanded"
+            :statusoid="status"
-          :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+            :expandable="!isExpanded"
-          :focused="focused(status.id)"
+            :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-          :in-conversation="isExpanded"
+            :focused="focused(status.id)"
-          :highlight="getHighlight()"
+            :in-conversation="isExpanded"
-          :replies="getReplies(status.id)"
+            :highlight="getHighlight()"
-          :in-profile="inProfile"
+            :replies="getReplies(status.id)"
-          :profile-user-id="profileUserId"
+            :in-profile="inProfile"
-          class="conversation-status status-fadein panel-body"
+            :profile-user-id="profileUserId"
+            class="conversation-status status-fadein panel-body"
 
-          :toggle-thread-display="toggleThreadDisplay"
+            :toggle-thread-display="toggleThreadDisplay"
-          :thread-display-status="threadDisplayStatus"
+            :thread-display-status="threadDisplayStatus"
-          :show-thread-recursively="showThreadRecursively"
+            :show-thread-recursively="showThreadRecursively"
-          :total-reply-count="totalReplyCount"
+            :total-reply-count="totalReplyCount"
-          :total-reply-depth="totalReplyDepth"
+            :total-reply-depth="totalReplyDepth"
-          :status-content-properties="statusContentProperties"
+            :status-content-properties="statusContentProperties"
-          :set-status-content-property="setStatusContentProperty"
+            :set-status-content-property="setStatusContentProperty"
-          :toggle-status-content-property="toggleStatusContentProperty"
+            :toggle-status-content-property="toggleStatusContentProperty"
 
-          @goto="setHighlight"
+            @goto="setHighlight"
-          @toggleExpanded="toggleExpanded"
+            @toggleExpanded="toggleExpanded"
-        />
+          />
+        </article>
       </div>
     </div>
   </div>

src/components/mobile_nav/mobile_nav.vue

@@ -10,6 +10,8 @@
       <div class="item">
         <button
           class="button-unstyled mobile-nav-button"
+          :title="$t('nav.mobile_sidebar')"
+          :aria-expanaded="this.$refs.sideDrawer && !this.$refs.sideDrawer.closed"
           @click.stop.prevent="toggleMobileSidebar()"
         >
           <FAIcon
@@ -26,6 +28,7 @@
         <button
           v-if="currentUser"
           class="button-unstyled mobile-nav-button"
+          :title="unseenNotificationsCount ? $t('nav.mobile_notifications_unread_active') : $t('nav.mobile_notifications')"
           @click.stop.prevent="openMobileNotifications()"
         >
           <FAIcon
@@ -39,7 +42,7 @@
         </button>
       </div>
     </nav>
-    <div
+    <aside
       v-if="currentUser"
       class="mobile-notifications-drawer"
       :class="{ '-closed': !notificationsOpen }"
@@ -52,6 +55,7 @@
         <button
           v-if="notificationsAtTop"
           class="button-unstyled mobile-nav-button"
+          :title="$t('general.scroll_to_top')"
           @click.stop.prevent="scrollMobileNotificationsToTop"
         >
           <FALayers class="fa-scale-110 fa-old-padding-layer">
@@ -64,6 +68,7 @@
         </button>
         <button
           class="button-unstyled mobile-nav-button"
+          :title="$t('nav.mobile_notifications_close')"
           @click.stop.prevent="closeMobileNotifications(true)"
         >
           <FAIcon
@@ -78,7 +83,7 @@
         ref="mobileNotifications"
         @scroll="onScroll"
       />
-    </div>
+    </aside>
     <SideDrawer
       ref="sideDrawer"
       :logout="logout"

src/components/mobile_post_status_button/mobile_post_status_button.vue

@@ -3,6 +3,7 @@
     v-if="isLoggedIn"
     class="MobilePostButton button-default new-status-button"
     :class="{ 'hidden': isHidden, 'always-show': isPersistent }"
+    :title="$t('post_status.new_status')"
     @click="openPostForm"
   >
     <FAIcon icon="pen" />

src/components/notification/notification.vue

@@ -1,11 +1,14 @@
 <template>
-  <Status
+  <article
     v-if="notification.type === 'mention'"
-    class="Notification"
+  >
-    :compact="true"
+    <Status
-    :statusoid="notification.status"
+      class="Notification"
-  />
+      :compact="true"
-  <div v-else>
+      :statusoid="notification.status"
+    />
+  </article>
+  <article v-else>
     <div
       v-if="needMute && !unmuted"
       class="Notification container -muted"
@@ -226,7 +229,7 @@
         </template>
       </div>
     </div>
-  </div>
+  </article>
 </template>
 
 <script src="./notification.js"></script>

src/components/notifications/notifications.vue

@@ -3,7 +3,8 @@
     :disabled="minimalMode || disableTeleport"
     :to="teleportTarget"
   >
-    <div
+    <component
+      :is="noHeading ? 'div' : 'aside'"
       ref="root"
       :class="{ minimal: minimalMode }"
       class="Notifications"
@@ -49,10 +50,14 @@
           </button>
           <NotificationFilters class="rightside-button" />
         </div>
-        <div class="panel-body">
+        <div
+          class="panel-body"
+          role="feed"
+        >
           <div
             v-for="notification in notificationsToDisplay"
             :key="notification.id"
+            role="listitem"
             class="notification"
             :class="{unseen: !minimalMode && !notification.seen}"
           >
@@ -88,7 +93,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </component>
   </teleport>
 </template>
 

src/components/popover/popover.js

@@ -43,7 +43,12 @@ const Popover = {
     overlayCentersSelector: String,
 
     // Lets hover popover stay when clicking inside of it
-    stayOnClick: Boolean
+    stayOnClick: Boolean,
+
+    triggerAttrs: {
+      type: Object,
+      default: {}
+    }
   },
   inject: ['popoversZLayer'], // override popover z layer
   data () {

src/components/popover/popover.vue

@@ -7,6 +7,7 @@
       ref="trigger"
       class="button-unstyled popover-trigger-button"
       type="button"
+      v-bind="triggerAttrs"
       @click="onClick"
     >
       <slot name="trigger" />

src/components/quick_filter_settings/quick_filter_settings.vue

@@ -3,6 +3,7 @@
     trigger="click"
     class="QuickFilterSettings"
     :bound-to="{ x: 'container' }"
+    :triggerAttrs="{ title: $t('timeline.quick_filter_settings') }"
   >
     <template #content>
       <div class="dropdown-menu">
@@ -79,9 +80,7 @@
       </div>
     </template>
     <template #trigger>
-      <button class="button-unstyled">
+      <FAIcon icon="filter" />
-        <FAIcon icon="filter" />
-      </button>
     </template>
   </Popover>
 </template>

src/components/quick_view_settings/quick_view_settings.vue

@@ -3,6 +3,7 @@
     trigger="click"
     class="QuickViewSettings"
     :bound-to="{ x: 'container' }"
+    :triggerAttrs="{ title: $t('timeline.quick_view_settings') }"
   >
     <template #content>
       <div class="dropdown-menu">
@@ -66,9 +67,7 @@
       </div>
     </template>
     <template #trigger>
-      <button class="button-unstyled">
+      <FAIcon icon="bars" />
-        <FAIcon icon="bars" />
-      </button>
     </template>
   </Popover>
 </template>

src/components/thread_tree/thread_tree.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="thread-tree">
+  <article class="thread-tree">
     <status
       :key="status.id"
       ref="statusComponent"
@@ -113,7 +113,7 @@
         </template>
       </i18n-t>
     </div>
-  </div>
+  </article>
 </template>
 
 <script src="./thread_tree.js"></script>

src/components/timeline/timeline.vue

@@ -47,6 +47,7 @@
           v-else-if="!embedded"
           class="loadmore-text faint veryfaint rightside-icon"
           :title="$t('timeline.up_to_date')"
+          :aria-disabled="true"
           @click.prevent
         >
           <FAIcon
@@ -78,10 +79,12 @@
       <div
         ref="timeline"
         class="timeline"
+        role="feed"
       >
         <conversation
           v-for="statusId in filteredPinnedStatusIds"
           :key="statusId + '-pinned'"
+          role="listitem"
           class="status-fadein"
           :status-id="statusId"
           :collapsable="true"
@@ -92,6 +95,7 @@
         <conversation
           v-for="status in filteredVisibleStatuses"
           :key="status.id"
+          role="listitem"
           class="status-fadein"
           :status-id="status.id"
           :collapsable="true"

src/components/user_panel/user_panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="user-panel">
+  <aside class="user-panel">
     <div
       v-if="signedIn"
       key="user-panel-signed"
@@ -16,7 +16,7 @@
       v-else
       key="user-panel"
     />
-  </div>
+  </aside>
 </template>
 
 <script src="./user_panel.js"></script>

src/i18n/en.json

@@ -158,7 +158,11 @@
     "lists": "Lists",
     "edit_nav_mobile": "Customize navigation bar",
     "edit_pinned": "Edit pinned items",
-    "edit_finish": "Done editing"
+    "edit_finish": "Done editing",
+    "mobile_sidebar": "Toggle mobile sidebar",
+    "mobile_notifications": "Open notifications",
+    "mobile_notifications": "Open notifications (there are unread ones)",
+    "mobile_notifications_close": "Close notifications"
   },
   "notifications": {
     "broken_favorite": "Unknown status, searching for it…",
@@ -807,7 +811,9 @@
     "no_more_statuses": "No more statuses",
     "no_statuses": "No statuses",
     "socket_reconnected": "Realtime connection established",
-    "socket_broke": "Realtime connection lost: CloseEvent code {0}"
+    "socket_broke": "Realtime connection lost: CloseEvent code {0}",
+    "quick_view_settings": "Quick view settings",
+    "quick_filter_settings": "Quick filter settings"
   },
   "status": {
     "favorites": "Favorites",

yarn.lock

@@ -2890,14 +2890,14 @@ chai-nightwatch@0.5.3:
   dependencies:
     assertion-error "1.1.0"
 
-chai@4.3.6:
+chai@4.3.7:
-  version "4.3.6"
+  version "4.3.7"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.6.tgz#ffe4ba2d9fa9d6680cc0b370adae709ec9011e9c"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.7.tgz#ec63f6df01829088e8bf55fca839bcd464a8ec51"
-  integrity sha512-bbcp3YfHCUzMOvKqsztczerVgBKSsEijCySNlHHbX3VG1nskvqjz5Rfso1gGwD6w6oOV3eI60pKuMOV5MV7p3Q==
+  integrity sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==
   dependencies:
     assertion-error "^1.1.0"
     check-error "^1.0.2"
-    deep-eql "^3.0.1"
+    deep-eql "^4.1.2"
     get-func-name "^2.0.0"
     loupe "^2.3.1"
     pathval "^1.1.1"
@@ -3474,10 +3474,10 @@ deep-eql@4.0.1:
   dependencies:
     type-detect "^4.0.0"
 
-deep-eql@^3.0.1:
+deep-eql@^4.1.2:
-  version "3.0.1"
+  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
+  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-4.1.2.tgz#270ceb902f87724077e6f6449aed81463f42fc1c"
-  integrity sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==
+  integrity sha512-gT18+YW4CcW/DBNTwAmqTtkJh7f9qqScu2qFVlx7kCoeY9tlBu9cUcr7+I+Z/noG8INehS3xQgLpTtd/QUTn4w==
   dependencies:
     type-detect "^4.0.0"
 
@@ -3914,10 +3914,10 @@ eslint-plugin-import@2.26.0:
     resolve "^1.22.0"
     tsconfig-paths "^3.14.1"
 
-eslint-plugin-n@15.4.0:
+eslint-plugin-n@15.5.0:
-  version "15.4.0"
+  version "15.5.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-n/-/eslint-plugin-n-15.4.0.tgz#1cfe9faff1b914ecc8f71433d228eaa5fc65b111"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-n/-/eslint-plugin-n-15.5.0.tgz#8eb0773b019b88b145dd1eba687ccc9c50e71655"
-  integrity sha512-MkoKy9/lfd52TAXK4fkABgCp0aglk82Q3viy2UOWIEpTVE/Cem5P/UAxMBA4vSw7Gy+2egPqImE9euitLGp5aw==
+  integrity sha512-VCqQiZDpdm1Q9grnvy+XsENZoXDgTLqPHRQwgl9qFNNgTKR4YEnQOMN0pFB/9TbmrQ88jdeTnqTcNwRvjqMOtg==
   dependencies:
     builtins "^5.0.1"
     eslint-plugin-es "^4.1.0"