Merge branch 'from/develop/tusooa/accessibility-regression' into 'develop'

Fix accessibility regressions Closes #1217 See merge request pleroma/pleroma-fe!1679
2022-11-08 23:53:59 +00:00 · 2022-11-08 23:53:59 +00:00 · 6263ad7571
parent 23d30c8720 b718c0c77d
commit 6263ad7571
14 changed files with 85 additions and 55 deletions
--- a/src/App.vue
+++ b/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 }"
@ -50,7 +50,7 @@
          </router-link>
        </div>
        <router-view />
-      </div>
+      </main>
      <div
        id="notifs-column"
        class="column -scrollable"
--- a/src/components/conversation/conversation.vue
+++ b/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
-          v-for="status in conversation"
-          :key="status.id"
-          ref="statusComponent"
-          :inline-expanded="collapsable && isExpanded"
-          :statusoid="status"
-          :expandable="!isExpanded"
-          :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-          :focused="focused(status.id)"
-          :in-conversation="isExpanded"
-          :highlight="getHighlight()"
-          :replies="getReplies(status.id)"
-          :in-profile="inProfile"
-          :profile-user-id="profileUserId"
-          class="conversation-status status-fadein panel-body"
+        <article>
+          <status
+            v-for="status in conversation"
+            :key="status.id"
+            ref="statusComponent"
+            :inline-expanded="collapsable && isExpanded"
+            :statusoid="status"
+            :expandable="!isExpanded"
+            :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+            :focused="focused(status.id)"
+            :in-conversation="isExpanded"
+            :highlight="getHighlight()"
+            :replies="getReplies(status.id)"
+            :in-profile="inProfile"
+            :profile-user-id="profileUserId"
+            class="conversation-status status-fadein panel-body"

-          :toggle-thread-display="toggleThreadDisplay"
-          :thread-display-status="threadDisplayStatus"
-          :show-thread-recursively="showThreadRecursively"
-          :total-reply-count="totalReplyCount"
-          :total-reply-depth="totalReplyDepth"
-          :status-content-properties="statusContentProperties"
-          :set-status-content-property="setStatusContentProperty"
-          :toggle-status-content-property="toggleStatusContentProperty"
+            :toggle-thread-display="toggleThreadDisplay"
+            :thread-display-status="threadDisplayStatus"
+            :show-thread-recursively="showThreadRecursively"
+            :total-reply-count="totalReplyCount"
+            :total-reply-depth="totalReplyDepth"
+            :status-content-properties="statusContentProperties"
+            :set-status-content-property="setStatusContentProperty"
+            :toggle-status-content-property="toggleStatusContentProperty"

-          @goto="setHighlight"
-          @toggleExpanded="toggleExpanded"
-        />
+            @goto="setHighlight"
+            @toggleExpanded="toggleExpanded"
+          />
+        </article>
      </div>
    </div>
  </div>
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/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"
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/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" />
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@ -1,11 +1,14 @@
 <template>
-  <Status
+  <article
    v-if="notification.type === 'mention'"
-    class="Notification"
-    :compact="true"
-    :statusoid="notification.status"
-  />
-  <div v-else>
+  >
+    <Status
+      class="Notification"
+      :compact="true"
+      :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>
--- a/src/components/notifications/notifications.vue
+++ b/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>

--- a/src/components/popover/popover.js
+++ b/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 () {
--- a/src/components/popover/popover.vue
+++ b/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" />
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/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" />
-      </button>
+      <FAIcon icon="filter" />
    </template>
  </Popover>
 </template>
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/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" />
-      </button>
+      <FAIcon icon="bars" />
    </template>
  </Popover>
 </template>
--- a/src/components/thread_tree/thread_tree.vue
+++ b/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>
--- a/src/components/timeline/timeline.vue
+++ b/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"
--- a/src/components/user_panel/user_panel.vue
+++ b/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>
--- a/src/i18n/en.json
+++ b/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",