commit: 6263ad7571b82ed7333a831a69a59c4192455b1d
parent 23d30c8720046f84a07f8591cccf96c64bf08879
Author: tusooa <tusooa@kazv.moe>
Date: Tue, 8 Nov 2022 23:53:59 +0000
Merge branch 'from/develop/tusooa/accessibility-regression' into 'develop'
Fix accessibility regressions
Closes #1217
See merge request pleroma/pleroma-fe!1679
Diffstat:
14 files changed, 85 insertions(+), 55 deletions(-)
diff --git 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"
diff --git 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>
diff --git 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"
diff --git 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" />
diff --git 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>
diff --git 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>
diff --git 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 () {
diff --git 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" />
diff --git 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>
diff --git 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>
diff --git 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>
diff --git 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"
diff --git 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>
diff --git 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",
