Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

A11Y: add aria tags to the new user nav (#19774)

This commit is contained in:
Kris 2023-01-17 12:18:16 -05:00 committed by GitHub
parent 86b4f4d664
commit 145d2baa14
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 473 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/assets/javascripts/discourse/app/components/d-navigation-item.js
View File

@ -11,7 +11,31 @@ export default Component.extend({
attributeBindings: ["ariaCurrent:aria-current", "title"],
ariaCurrent: computed("router.currentRouteName", "route", function () {
return this.router.currentRouteName === this.route ? "page" : null;
}),
ariaCurrent: computed(
"router.currentRouteName",
"router.currentRoute.parent.name",
"route",
"ariaCurrentContext",
function () {
let ariaCurrentValue = "page";
// when there are multiple levels of navigation
// we want the active parent to get `aria-current="page"`
// and the active child to get `aria-current="location"`
if (this.ariaCurrentContext === "subNav") {
ariaCurrentValue = "location";
} else if (this.ariaCurrentContext === "parentNav") {
if (
this.router.currentRouteName !== this.route && // not the current route
this.router.currentRoute.parent.name.includes(this.route) // but is the current parent route
) {
return "page";
}
}
return this.router.currentRouteName === this.route
? ariaCurrentValue
: null;
}
),
});

98
app/assets/javascripts/discourse/app/components/user-nav.hbs
View File

@ -1,55 +1,63 @@
<section class="user-navigation user-navigation-primary">
<HorizontalOverflowNav @className="main-nav nav user-nav">
<HorizontalOverflowNav
@className="main-nav nav user-nav"
@ariaLabel="User primary"
>
{{#unless @user.profile_hidden}}
<li class="summary">
<LinkTo @route="user.summary">
{{d-icon "user"}}
<span>{{i18n "user.summary.title"}}</span>
</LinkTo>
</li>
<DNavigationItem @route="user.summary" @class="user-nav__summary">
{{d-icon "user"}}
<span>{{i18n "user.summary.title"}}</span>
</DNavigationItem>
<DNavigationItem
@route="userActivity"
@class="user-nav__activity"
@ariaCurrentContext="parentNav"
>
{{d-icon "stream"}}
<span>{{i18n "user.activity_stream"}}</span>
</DNavigationItem>
<li class="user-activity">
<LinkTo @route="userActivity">
{{d-icon "stream"}}
<span>{{i18n "user.activity_stream"}}</span>
</LinkTo>
</li>
{{/unless}}
{{#if @showNotificationsTab}}
<li class="user-notifications">
<LinkTo @route="userNotifications">
{{d-icon "bell" class="glyph"}}
<span>{{i18n "user.notifications"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userNotifications"
@class="user-nav__notifications"
@ariaCurrentContext="parentNav"
>
{{d-icon "bell" class="glyph"}}
<span>{{i18n "user.notifications"}}</span>
</DNavigationItem>
{{/if}}
{{#if @showPrivateMessages}}
<li class="private-messages">
<LinkTo @route="userPrivateMessages">
{{d-icon "envelope"}}
<span>{{i18n "user.private_messages"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userPrivateMessages"
@class="user-nav__personal-messages"
@ariaCurrentContext="parentNav"
>
{{d-icon "envelope"}}
<span>{{i18n "user.private_messages"}}</span>
</DNavigationItem>
{{/if}}
{{#if @canInviteToForum}}
<li class="invited">
<LinkTo @route="userInvited">
{{d-icon "user-plus"}}
<span>{{i18n "user.invited.title"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userInvited"
@class="user-nav__invites"
@ariaCurrentContext="parentNav"
>
{{d-icon "user-plus"}}
<span>{{i18n "user.invited.title"}}</span>
</DNavigationItem>
{{/if}}
{{#if @showBadges}}
<li class="badges">
<LinkTo @route="user.badges">
{{d-icon "certificate"}}
<span>{{i18n "badges.title"}}</span>
</LinkTo>
</li>
<DNavigationItem @route="user.badges" @class="user-nav__badges">
{{d-icon "certificate"}}
<span>{{i18n "badges.title"}}</span>
</DNavigationItem>
{{/if}}
<PluginOutlet
@ -59,16 +67,18 @@
/>
{{#if @user.can_edit}}
<li class="preferences">
<LinkTo @route="preferences">
{{d-icon "cog"}}
<span>{{i18n "user.preferences"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="preferences"
@class="user-nav__preferences"
@ariaCurrentContext="parentNav"
>
{{d-icon "cog"}}
<span>{{i18n "user.preferences"}}</span>
</DNavigationItem>
{{/if}}
{{#if (and this.site.mobileView this.currentUser.staff)}}
<li class="admin">
<li class="user-nav__admin">
<a href={{@user.adminPath}}>
{{d-icon "wrench"}}
<span>{{i18n "admin.user.manage_user"}}</span>

49
app/assets/javascripts/discourse/app/components/user-nav/activity-nav.hbs
View File

@ -1,44 +1,77 @@
<DNavigationItem @route="userActivity.index">
<DNavigationItem
@route="userActivity.index"
@class="user-nav__activity-all"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "stream"}}
<span>{{i18n "user.filters.all"}}</span>
</DNavigationItem>
<DNavigationItem @route="userActivity.topics">
<DNavigationItem
@route="userActivity.topics"
@class="user-nav__activity-topics"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "list-ul"}}
<span>{{i18n "user_action_groups.4"}}</span>
</DNavigationItem>
<DNavigationItem @route="userActivity.replies">
<DNavigationItem
@route="userActivity.replies"
@class="user-nav__activity-replies"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "reply"}}
<span>{{i18n "user_action_groups.5"}}</span>
</DNavigationItem>
{{#if @user.showRead}}
<DNavigationItem @route="userActivity.read" @title={{i18n "user.read_help"}}>
<DNavigationItem
@route="userActivity.read"
@class="user-nav__activity-read"
@title={{i18n "user.read_help"}}
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "history"}}
<span>{{i18n "user.read"}}</span>
</DNavigationItem>
{{/if}}
{{#if @user.showDrafts}}
<DNavigationItem @route="userActivity.drafts">
<DNavigationItem
@route="userActivity.drafts"
@class="user-nav__activity-drafts"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "pencil-alt"}}
<span>{{@draftLabel}}</span>
</DNavigationItem>
{{/if}}
{{#if (gt @model.pending_posts_count 0)}}
<DNavigationItem @route="userActivity.pending">
<DNavigationItem
@route="userActivity.pending"
@class="user-nav__activity-pending"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "clock"}}
<span>{{@pendingLabel}}</span>
</DNavigationItem>
{{/if}}
<DNavigationItem @route="userActivity.likesGiven">
<DNavigationItem
@route="userActivity.likesGiven"
@class="user-nav__activity-likes"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "heart"}}
<span>{{i18n "user_action_groups.1"}}</span>
</DNavigationItem>
{{#if @user.showBookmarks}}
<DNavigationItem @route="userActivity.bookmarks">
<DNavigationItem
@route="userActivity.bookmarks"
@class="user-nav__activity-bookmarks"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "bookmark"}}
<span>{{i18n "user_action_groups.3"}}</span>
</DNavigationItem>

70
app/assets/javascripts/discourse/app/components/user-nav/notifications-nav.hbs
View File

@ -1,39 +1,49 @@
<li>
<LinkTo @route="userNotifications.index">
{{d-icon "bell"}}
<span>{{i18n "user.filters.all"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userNotifications.index"
@class="user-nav__notifications-all"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "bell"}}
<span>{{i18n "user.filters.all"}}</span>
</DNavigationItem>
<li>
<LinkTo @route="userNotifications.responses">
{{d-icon "reply"}}
<span>{{i18n "user_action_groups.6"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userNotifications.responses"
@class="user-nav__notifications-responses"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "reply"}}
<span>{{i18n "user_action_groups.6"}}</span>
</DNavigationItem>
<li>
<LinkTo @route="userNotifications.likesReceived">
{{d-icon "heart"}}
<span>{{i18n "user_action_groups.2"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userNotifications.likesReceived"
@class="user-nav__notifications-likes"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "heart"}}
<span>{{i18n "user_action_groups.2"}}</span>
</DNavigationItem>
{{#if @siteSettings.enable_mentions}}
<li>
<LinkTo @route="userNotifications.mentions">
{{d-icon "at"}}
<span>{{i18n "user_action_groups.7"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userNotifications.mentions"
@class="user-nav__notifications-mentions"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "at"}}
<span>{{i18n "user_action_groups.7"}}</span>
</DNavigationItem>
{{/if}}
<li>
<LinkTo @route="userNotifications.edits">
{{d-icon "pencil-alt"}}
<span>{{i18n "user_action_groups.11"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userNotifications.edits"
@class="user-nav__notifications-edits"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "pencil-alt"}}
<span>{{i18n "user_action_groups.11"}}</span>
</DNavigationItem>
<PluginOutlet
@name="user-notifications-bottom"

126
app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.hbs
View File

@ -1,68 +1,86 @@
<li class="nav-account">
<LinkTo @route="preferences.account">
{{d-icon "user"}}
<span>{{i18n "user.preferences_nav.account"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="preferences.account"
@class="user-nav__preferences-account"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "user"}}
<span>{{i18n "user.preferences_nav.account"}}</span>
</DNavigationItem>
<li class="nav-security">
<LinkTo @route="preferences.security">
{{d-icon "lock"}}
<span>{{i18n "user.preferences_nav.security"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="preferences.security"
@class="user-nav__preferences-security"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "lock"}}
<span>{{i18n "user.preferences_nav.security"}}</span>
</DNavigationItem>
<li class="nav-profile">
<LinkTo @route="preferences.profile">
{{d-icon "user"}}
<span>{{i18n "user.preferences_nav.profile"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="preferences.profile"
@class="user-nav__preferences-profile"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "user"}}
<span>{{i18n "user.preferences_nav.profile"}}</span>
</DNavigationItem>
<li class="nav-emails">
<LinkTo @route="preferences.emails">
{{d-icon "envelope"}}
<span>{{i18n "user.preferences_nav.emails"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="preferences.emails"
@class="user-nav__preferences-emails"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "envelope"}}
<span>{{i18n "user.preferences_nav.emails"}}</span>
</DNavigationItem>
<li class="nav-notifications">
<LinkTo @route="preferences.notifications">
{{d-icon "bell"}}
<span>{{i18n "user.preferences_nav.notifications"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="preferences.notifications"
@class="user-nav__preferences-notifications"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "bell"}}
<span>{{i18n "user.preferences_nav.notifications"}}</span>
</DNavigationItem>
{{#if @model.can_change_tracking_preferences}}
<li class="nav-tracking">
<LinkTo @route="preferences.tracking">
{{d-icon "plus"}}
<span>{{i18n "user.preferences_nav.tracking"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="preferences.tracking"
@class="user-nav__preferences-tracking"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "plus"}}
<span>{{i18n "user.preferences_nav.tracking"}}</span>
</DNavigationItem>
{{/if}}
<li class="indent nav-users">
<LinkTo @route="preferences.users">
{{d-icon "users"}}
<span>{{i18n "user.preferences_nav.users"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="preferences.users"
@class="user-nav__preferences-users"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "users"}}
<span>{{i18n "user.preferences_nav.users"}}</span>
</DNavigationItem>
<li class="nav-interface">
<LinkTo @route="preferences.interface">
{{d-icon "desktop"}}
<span>{{i18n "user.preferences_nav.interface"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="preferences.interface"
@class="user-nav__preferences-interface"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "desktop"}}
<span>{{i18n "user.preferences_nav.interface"}}</span>
</DNavigationItem>
{{#if (not (eq @siteSettings.navigation_menu "legacy"))}}
<li class="indent nav-sidebar">
<LinkTo @route="preferences.sidebar">
{{d-icon "bars"}}
<span>{{i18n "user.preferences_nav.sidebar"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="preferences.sidebar"
@class="user-nav__preferences-sidebar"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "bars"}}
<span>{{i18n "user.preferences_nav.sidebar"}}</span>
</DNavigationItem>
{{/if}}
<PluginOutlet

7
app/assets/javascripts/discourse/app/templates/components/horizontal-overflow-nav.hbs
View File

@ -1,7 +1,10 @@
{{! template-lint-disable no-down-event-binding }}
{{! template-lint-disable no-invalid-interactive }}
<div class="horizontal-overflow-nav {{if this.hasScroll 'has-scroll'}}">
<nav
class="horizontal-overflow-nav {{if this.hasScroll 'has-scroll'}}"
aria-label={{@ariaLabel}}
>
{{#if this.hasScroll}}
<a
role="button"
@ -43,4 +46,4 @@
{{d-icon "chevron-right"}}
</a>
{{/if}}
</div>
</nav>

3
app/assets/javascripts/discourse/app/templates/preferences.hbs
View File

@ -1,11 +1,12 @@
{{#if this.currentUser.redesigned_user_page_nav_enabled}}
<DSection @pageClass="user-preferences" />
<div class="user-navigation user-navigation-secondary">
<HorizontalOverflowNav>
<HorizontalOverflowNav @ariaLabel="User secondary - preferences">
<UserNav::PreferencesNav
@currentUser={{this.currentUser}}
@model={{this.model}}
@siteSettings={{this.siteSettings}}
@ariaCurrentContext="subNav"
/>
</HorizontalOverflowNav>
</div>

2
app/assets/javascripts/discourse/app/templates/user-invited.hbs
View File

@ -3,7 +3,7 @@
<DSection @pageClass="user-invites" />
<div class="user-navigation user-navigation-secondary">
<HorizontalOverflowNav>
<HorizontalOverflowNav @ariaLabel="User secondary - invites">
<NavItem
@route="userInvited.show"
@routeParam="pending"

72
app/assets/javascripts/discourse/app/templates/user-private-messages-group.hbs
View File

@ -1,43 +1,45 @@
<UserNav::MessagesSecondaryNav>
<li class="messages-group-latest">
<LinkTo @route="userPrivateMessages.group.index" @model={{this.groupName}}>
{{d-icon "envelope"}}
<span>{{i18n "categories.latest"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userPrivateMessages.group.index"
@class="user-nav__messages-group-latest"
@model={{this.groupName}}
@ariaCurrentContext="subNav"
>
{{d-icon "envelope"}}
<span>{{i18n "categories.latest"}}</span>
</DNavigationItem>
{{#if this.viewingSelf}}
<li class="messages-group-new">
<LinkTo
@route="userPrivateMessages.group.new"
@model={{this.groupName}}
class="new"
>
{{d-icon "exclamation-circle"}}
<span>{{this.newLinkText}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userPrivateMessages.group.new"
@model={{this.groupName}}
@class="user-nav__messages-group-new"
@ariaCurrentContext="subNav"
>
{{d-icon "exclamation-circle"}}
<span>{{this.newLinkText}}</span>
</DNavigationItem>
<li class="messages-group-unread">
<LinkTo
@route="userPrivateMessages.group.unread"
@model={{this.groupName}}
class="unread"
>
{{d-icon "plus-circle"}}
<span>{{this.unreadLinkText}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userPrivateMessages.group.unread"
@model={{this.groupName}}
@class="user-nav__messages-group-unread"
@ariaCurrentContext="subNav"
>
{{d-icon "plus-circle"}}
<span>{{this.unreadLinkText}}</span>
</DNavigationItem>
<li class="messages-group-archive">
<LinkTo
@route="userPrivateMessages.group.archive"
@model={{this.groupName}}
>
{{d-icon "archive"}}
<span>{{i18n "user.messages.archive"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userPrivateMessages.group.archive"
@class="user-nav__messages-group-archive"
@model={{this.groupName}}
@ariaCurrentContext="subNav"
>
{{d-icon "archive"}}
<span>{{i18n "user.messages.archive"}}</span>
</DNavigationItem>
{{/if}}
</UserNav::MessagesSecondaryNav>

85
app/assets/javascripts/discourse/app/templates/user-private-messages-user.hbs
View File

@ -5,50 +5,59 @@
{{/if}}
<UserNav::MessagesSecondaryNav>
<li class="messages-latest">
<LinkTo @route="userPrivateMessages.user.index" @model={{this.model}}>
{{d-icon "envelope"}}
<span>{{i18n "categories.latest"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userPrivateMessages.user.index"
@class="user-nav__messages-latest"
@model={{this.model}}
@ariaCurrentContext="subNav"
>
{{d-icon "envelope"}}
<span>{{i18n "categories.latest"}}</span>
</DNavigationItem>
<li class="messages-sent">
<LinkTo @route="userPrivateMessages.user.sent" @model={{this.model}}>
{{d-icon "reply"}}
<span>{{i18n "user.messages.sent"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userPrivateMessages.user.sent"
@class="user-nav__messages-sent"
@model={{this.model}}
@ariaCurrentContext="subNav"
>
{{d-icon "reply"}}
<span>{{i18n "user.messages.sent"}}</span>
</DNavigationItem>
{{#if this.viewingSelf}}
<li class="messages-new">
<LinkTo
@route="userPrivateMessages.user.new"
@model={{this.model}}
class="new"
>
{{d-icon "exclamation-circle"}}
<span>{{this.newLinkText}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userPrivateMessages.user.new"
@class="user-nav__messages-new"
@model={{this.model}}
@ariaCurrentContext="subNav"
>
{{d-icon "exclamation-circle"}}
<span>{{this.newLinkText}}</span>
</DNavigationItem>
<DNavigationItem
@route="userPrivateMessages.user.unread"
@class="user-nav__messages-unread"
@model={{this.model}}
@ariaCurrentContext="subNav"
>
{{d-icon "plus-circle"}}
<span>{{this.unreadLinkText}}</span>
</DNavigationItem>
<li class="messages-unread">
<LinkTo
@route="userPrivateMessages.user.unread"
@model={{this.model}}
class="unread"
>
{{d-icon "plus-circle"}}
<span>{{this.unreadLinkText}}</span>
</LinkTo>
</li>
{{/if}}
<li class="messages-archive">
<LinkTo @route="userPrivateMessages.user.archive" @model={{this.model}}>
{{d-icon "archive"}}
<span>{{i18n "user.messages.archive"}}</span>
</LinkTo>
</li>
<DNavigationItem
@route="userPrivateMessages.user.archive"
@class="user-nav__messages-archive"
@model={{this.model}}
@ariaCurrentContext="subNav"
>
{{d-icon "archive"}}
<span>{{i18n "user.messages.archive"}}</span>
</DNavigationItem>
</UserNav::MessagesSecondaryNav>
{{outlet}}

3
app/assets/javascripts/discourse/app/templates/user/activity.hbs
View File

@ -2,7 +2,7 @@
<DSection @pageClass="user-activity" />
<div class="user-navigation user-navigation-secondary">
<HorizontalOverflowNav>
<HorizontalOverflowNav @ariaLabel="User secondary - activity">
<UserNav::ActivityNav
@user={{this.user}}
@viewingSelf={{this.viewingSelf}}
@ -10,6 +10,7 @@
@siteSettings={{this.siteSettings}}
@draftLabel={{this.draftLabel}}
@pendingLabel={{this.pendingLabel}}
@ariaCurrentContext="subNav"
/>
</HorizontalOverflowNav>
</div>

1
app/assets/javascripts/discourse/app/templates/user/messages.hbs
View File

@ -14,6 +14,7 @@
<HorizontalOverflowNav
@className="messages-nav"
@ariaLabel="User secondary - messages"
id="user-navigation-secondary__horizontal-nav"
/>

3
app/assets/javascripts/discourse/app/templates/user/notifications.hbs
View File

@ -2,10 +2,11 @@
<DSection @pageClass="user-notifications" />
<div class="user-navigation user-navigation-secondary">
<HorizontalOverflowNav>
<HorizontalOverflowNav @ariaLabel="User secondary - notifications">
<UserNav::NotificationsNav
@model={{this.model}}
@siteSettings={{this.siteSettings}}
@ariaCurrentContext="subNav"
/>
</HorizontalOverflowNav>

194
app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js
View File

@ -346,17 +346,31 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
await publishUnreadToMessageBus({ topicId: 1 });
await publishNewToMessageBus({ topicId: 2 });
assert.strictEqual(
query(".messages-nav li a.new").innerText.trim(),
I18n.t("user.messages.new_with_count", { count: 1 }),
"displays the right count"
);
if (customUserProps?.redesigned_user_page_nav_enabled) {
assert.strictEqual(
query(".user-nav__messages-new").innerText.trim(),
I18n.t("user.messages.new_with_count", { count: 1 }),
"displays the right count"
);
assert.strictEqual(
query(".messages-nav li a.unread").innerText.trim(),
I18n.t("user.messages.unread_with_count", { count: 1 }),
"displays the right count"
);
assert.strictEqual(
query(".user-nav__messages-unread").innerText.trim(),
I18n.t("user.messages.unread_with_count", { count: 1 }),
"displays the right count"
);
} else {
assert.strictEqual(
query(".messages-nav li a.new").innerText.trim(),
I18n.t("user.messages.new_with_count", { count: 1 }),
"displays the right count"
);
assert.strictEqual(
query(".messages-nav li a.unread").innerText.trim(),
I18n.t("user.messages.unread_with_count", { count: 1 }),
"displays the right count"
);
}
});
test("incoming new messages while viewing new", async function (assert) {
@ -364,11 +378,19 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
await publishNewToMessageBus({ topicId: 1 });
assert.strictEqual(
query(".messages-nav li a.new").innerText.trim(),
I18n.t("user.messages.new_with_count", { count: 1 }),
"displays the right count"
);
if (customUserProps?.redesigned_user_page_nav_enabled) {
assert.strictEqual(
query(".messages-nav .user-nav__messages-new").innerText.trim(),
I18n.t("user.messages.new_with_count", { count: 1 }),
"displays the right count"
);
} else {
assert.strictEqual(
query(".messages-nav li a.new").innerText.trim(),
I18n.t("user.messages.new_with_count", { count: 1 }),
"displays the right count"
);
}
assert.ok(exists(".show-mores"), "displays the topic incoming info");
});
@ -378,11 +400,19 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
await publishUnreadToMessageBus();
assert.strictEqual(
query(".messages-nav li a.unread").innerText.trim(),
I18n.t("user.messages.unread_with_count", { count: 1 }),
"displays the right count"
);
if (customUserProps?.redesigned_user_page_nav_enabled) {
assert.strictEqual(
query(".messages-nav .user-nav__messages-unread").innerText.trim(),
I18n.t("user.messages.unread_with_count", { count: 1 }),
"displays the right count"
);
} else {
assert.strictEqual(
query(".messages-nav li a.unread").innerText.trim(),
I18n.t("user.messages.unread_with_count", { count: 1 }),
"displays the right count"
);
}
assert.ok(exists(".show-mores"), "displays the topic incoming info");
});
@ -393,33 +423,65 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
await publishUnreadToMessageBus({ groupIds: [14], topicId: 1 });
await publishNewToMessageBus({ groupIds: [14], topicId: 2 });
assert.strictEqual(
query(".messages-nav li a.unread").innerText.trim(),
I18n.t("user.messages.unread_with_count", { count: 1 }),
"displays the right count"
);
if (customUserProps?.redesigned_user_page_nav_enabled) {
assert.strictEqual(
query(
".messages-nav .user-nav__messages-group-unread"
).innerText.trim(),
I18n.t("user.messages.unread_with_count", { count: 1 }),
"displays the right count"
);
assert.strictEqual(
query(".messages-nav li a.new").innerText.trim(),
I18n.t("user.messages.new_with_count", { count: 1 }),
"displays the right count"
);
assert.strictEqual(
query(".messages-nav .user-nav__messages-group-new").innerText.trim(),
I18n.t("user.messages.new_with_count", { count: 1 }),
"displays the right count"
);
assert.ok(exists(".show-mores"), "displays the topic incoming info");
assert.ok(exists(".show-mores"), "displays the topic incoming info");
await visit("/u/charlie/messages/unread");
await visit("/u/charlie/messages/unread");
assert.strictEqual(
query(".messages-nav li a.unread").innerText.trim(),
I18n.t("user.messages.unread"),
"displays the right count"
);
assert.strictEqual(
query(".messages-nav .user-nav__messages-unread").innerText.trim(),
I18n.t("user.messages.unread"),
"displays the right count"
);
assert.strictEqual(
query(".messages-nav li a.new").innerText.trim(),
I18n.t("user.messages.new"),
"displays the right count"
);
assert.strictEqual(
query(".messages-nav .user-nav__messages-new").innerText.trim(),
I18n.t("user.messages.new"),
"displays the right count"
);
} else {
assert.strictEqual(
query(".messages-nav a.unread").innerText.trim(),
I18n.t("user.messages.unread_with_count", { count: 1 }),
"displays the right count"
);
assert.strictEqual(
query(".messages-nav a.new").innerText.trim(),
I18n.t("user.messages.new_with_count", { count: 1 }),
"displays the right count"
);
assert.ok(exists(".show-mores"), "displays the topic incoming info");
await visit("/u/charlie/messages/unread");
assert.strictEqual(
query(".messages-nav a.unread").innerText.trim(),
I18n.t("user.messages.unread"),
"displays the right count"
);
assert.strictEqual(
query(".messages-nav a.new").innerText.trim(),
I18n.t("user.messages.new"),
"displays the right count"
);
}
});
test("incoming messages is not tracked on non user messages route", async function (assert) {
@ -452,11 +514,19 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
await click(".btn.dismiss-read");
await click("#dismiss-read-confirm");
assert.strictEqual(
query(".messages-nav li a.unread").innerText.trim(),
I18n.t("user.messages.unread"),
"displays the right count"
);
if (customUserProps?.redesigned_user_page_nav_enabled) {
assert.strictEqual(
query(".user-nav__messages-unread").innerText.trim(),
I18n.t("user.messages.unread"),
"displays the right count"
);
} else {
assert.strictEqual(
query(".messages-nav li a.unread").innerText.trim(),
I18n.t("user.messages.unread"),
"displays the right count"
);
}
assert.strictEqual(
count(".topic-list-item"),
@ -518,11 +588,19 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
await click(".btn.dismiss-read");
assert.strictEqual(
query(".messages-nav li a.new").innerText.trim(),
I18n.t("user.messages.new"),
"displays the right count"
);
if (customUserProps?.redesigned_user_page_nav_enabled) {
assert.strictEqual(
query(".messages-nav .user-nav__messages-new").innerText.trim(),
I18n.t("user.messages.new"),
"displays the right count"
);
} else {
assert.strictEqual(
query(".messages-nav li a.new").innerText.trim(),
I18n.t("user.messages.new"),
"displays the right count"
);
}
assert.strictEqual(
count(".topic-list-item"),
@ -701,7 +779,11 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
"User personal inbox is selected in dropdown"
);
await click(".messages-sent");
if (customUserProps?.redesigned_user_page_nav_enabled) {
await click(".user-nav__messages-sent");
} else {
await click(".messages-sent");
}
assert.strictEqual(
messagesDropdown.header().name(),
@ -724,7 +806,11 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
"Group inbox is selected in dropdown"
);
await click(".messages-group-new");
if (customUserProps?.redesigned_user_page_nav_enabled) {
await click(".user-nav__messages-group-new");
} else {
await click(".messages-group-new");
}
assert.strictEqual(
messagesDropdown.header().name(),

4
spec/system/page_objects/pages/user_preferences.rb
View File

@ -16,7 +16,7 @@ module PageObjects
find(".horizontal-overflow-nav__scroll-left").click
end
INTERFACE_LINK_CSS_SELECTOR = ".nav-tracking"
INTERFACE_LINK_CSS_SELECTOR = ".user-nav__preferences-tracking"
def has_interface_link_visible?
horizontal_secondary_link_visible?(INTERFACE_LINK_CSS_SELECTOR, visible: true)
@ -26,7 +26,7 @@ module PageObjects
horizontal_secondary_link_visible?(INTERFACE_LINK_CSS_SELECTOR, visible: false)
end
ACCOUNT_LINK_CSS_SELECTOR = ".nav-account"
ACCOUNT_LINK_CSS_SELECTOR = ".user-nav__preferences-account"
def has_account_link_visible?
horizontal_secondary_link_visible?(ACCOUNT_LINK_CSS_SELECTOR, visible: true)