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"], attributeBindings: ["ariaCurrent:aria-current", "title"],
ariaCurrent: computed("router.currentRouteName", "route", function () { ariaCurrent: computed(
return this.router.currentRouteName === this.route ? "page" : null; "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;
}
),
}); });

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

@ -1,55 +1,63 @@
<section class="user-navigation user-navigation-primary"> <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}} {{#unless @user.profile_hidden}}
<li class="summary"> <DNavigationItem @route="user.summary" @class="user-nav__summary">
<LinkTo @route="user.summary">
{{d-icon "user"}} {{d-icon "user"}}
<span>{{i18n "user.summary.title"}}</span> <span>{{i18n "user.summary.title"}}</span>
</LinkTo> </DNavigationItem>
</li>
<li class="user-activity"> <DNavigationItem
<LinkTo @route="userActivity"> @route="userActivity"
@class="user-nav__activity"
@ariaCurrentContext="parentNav"
>
{{d-icon "stream"}} {{d-icon "stream"}}
<span>{{i18n "user.activity_stream"}}</span> <span>{{i18n "user.activity_stream"}}</span>
</LinkTo> </DNavigationItem>
</li>
{{/unless}} {{/unless}}
{{#if @showNotificationsTab}} {{#if @showNotificationsTab}}
<li class="user-notifications"> <DNavigationItem
<LinkTo @route="userNotifications"> @route="userNotifications"
@class="user-nav__notifications"
@ariaCurrentContext="parentNav"
>
{{d-icon "bell" class="glyph"}} {{d-icon "bell" class="glyph"}}
<span>{{i18n "user.notifications"}}</span> <span>{{i18n "user.notifications"}}</span>
</LinkTo> </DNavigationItem>
</li>
{{/if}} {{/if}}
{{#if @showPrivateMessages}} {{#if @showPrivateMessages}}
<li class="private-messages"> <DNavigationItem
<LinkTo @route="userPrivateMessages"> @route="userPrivateMessages"
@class="user-nav__personal-messages"
@ariaCurrentContext="parentNav"
>
{{d-icon "envelope"}} {{d-icon "envelope"}}
<span>{{i18n "user.private_messages"}}</span> <span>{{i18n "user.private_messages"}}</span>
</LinkTo> </DNavigationItem>
</li>
{{/if}} {{/if}}
{{#if @canInviteToForum}} {{#if @canInviteToForum}}
<li class="invited"> <DNavigationItem
<LinkTo @route="userInvited"> @route="userInvited"
@class="user-nav__invites"
@ariaCurrentContext="parentNav"
>
{{d-icon "user-plus"}} {{d-icon "user-plus"}}
<span>{{i18n "user.invited.title"}}</span> <span>{{i18n "user.invited.title"}}</span>
</LinkTo> </DNavigationItem>
</li>
{{/if}} {{/if}}
{{#if @showBadges}} {{#if @showBadges}}
<li class="badges"> <DNavigationItem @route="user.badges" @class="user-nav__badges">
<LinkTo @route="user.badges">
{{d-icon "certificate"}} {{d-icon "certificate"}}
<span>{{i18n "badges.title"}}</span> <span>{{i18n "badges.title"}}</span>
</LinkTo> </DNavigationItem>
</li>
{{/if}} {{/if}}
<PluginOutlet <PluginOutlet
@ -59,16 +67,18 @@
/> />
{{#if @user.can_edit}} {{#if @user.can_edit}}
<li class="preferences"> <DNavigationItem
<LinkTo @route="preferences"> @route="preferences"
@class="user-nav__preferences"
@ariaCurrentContext="parentNav"
>
{{d-icon "cog"}} {{d-icon "cog"}}
<span>{{i18n "user.preferences"}}</span> <span>{{i18n "user.preferences"}}</span>
</LinkTo> </DNavigationItem>
</li>
{{/if}} {{/if}}
{{#if (and this.site.mobileView this.currentUser.staff)}} {{#if (and this.site.mobileView this.currentUser.staff)}}
<li class="admin"> <li class="user-nav__admin">
<a href={{@user.adminPath}}> <a href={{@user.adminPath}}>
{{d-icon "wrench"}} {{d-icon "wrench"}}
<span>{{i18n "admin.user.manage_user"}}</span> <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"}} {{d-icon "stream"}}
<span>{{i18n "user.filters.all"}}</span> <span>{{i18n "user.filters.all"}}</span>
</DNavigationItem> </DNavigationItem>
<DNavigationItem @route="userActivity.topics"> <DNavigationItem
@route="userActivity.topics"
@class="user-nav__activity-topics"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "list-ul"}} {{d-icon "list-ul"}}
<span>{{i18n "user_action_groups.4"}}</span> <span>{{i18n "user_action_groups.4"}}</span>
</DNavigationItem> </DNavigationItem>
<DNavigationItem @route="userActivity.replies"> <DNavigationItem
@route="userActivity.replies"
@class="user-nav__activity-replies"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "reply"}} {{d-icon "reply"}}
<span>{{i18n "user_action_groups.5"}}</span> <span>{{i18n "user_action_groups.5"}}</span>
</DNavigationItem> </DNavigationItem>
{{#if @user.showRead}} {{#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"}} {{d-icon "history"}}
<span>{{i18n "user.read"}}</span> <span>{{i18n "user.read"}}</span>
</DNavigationItem> </DNavigationItem>
{{/if}} {{/if}}
{{#if @user.showDrafts}} {{#if @user.showDrafts}}
<DNavigationItem @route="userActivity.drafts"> <DNavigationItem
@route="userActivity.drafts"
@class="user-nav__activity-drafts"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "pencil-alt"}} {{d-icon "pencil-alt"}}
<span>{{@draftLabel}}</span> <span>{{@draftLabel}}</span>
</DNavigationItem> </DNavigationItem>
{{/if}} {{/if}}
{{#if (gt @model.pending_posts_count 0)}} {{#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"}} {{d-icon "clock"}}
<span>{{@pendingLabel}}</span> <span>{{@pendingLabel}}</span>
</DNavigationItem> </DNavigationItem>
{{/if}} {{/if}}
<DNavigationItem @route="userActivity.likesGiven"> <DNavigationItem
@route="userActivity.likesGiven"
@class="user-nav__activity-likes"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "heart"}} {{d-icon "heart"}}
<span>{{i18n "user_action_groups.1"}}</span> <span>{{i18n "user_action_groups.1"}}</span>
</DNavigationItem> </DNavigationItem>
{{#if @user.showBookmarks}} {{#if @user.showBookmarks}}
<DNavigationItem @route="userActivity.bookmarks"> <DNavigationItem
@route="userActivity.bookmarks"
@class="user-nav__activity-bookmarks"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "bookmark"}} {{d-icon "bookmark"}}
<span>{{i18n "user_action_groups.3"}}</span> <span>{{i18n "user_action_groups.3"}}</span>
</DNavigationItem> </DNavigationItem>

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

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

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

@ -1,68 +1,86 @@
<li class="nav-account"> <DNavigationItem
<LinkTo @route="preferences.account"> @route="preferences.account"
@class="user-nav__preferences-account"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "user"}} {{d-icon "user"}}
<span>{{i18n "user.preferences_nav.account"}}</span> <span>{{i18n "user.preferences_nav.account"}}</span>
</LinkTo> </DNavigationItem>
</li>
<li class="nav-security"> <DNavigationItem
<LinkTo @route="preferences.security"> @route="preferences.security"
@class="user-nav__preferences-security"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "lock"}} {{d-icon "lock"}}
<span>{{i18n "user.preferences_nav.security"}}</span> <span>{{i18n "user.preferences_nav.security"}}</span>
</LinkTo> </DNavigationItem>
</li>
<li class="nav-profile"> <DNavigationItem
<LinkTo @route="preferences.profile"> @route="preferences.profile"
@class="user-nav__preferences-profile"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "user"}} {{d-icon "user"}}
<span>{{i18n "user.preferences_nav.profile"}}</span> <span>{{i18n "user.preferences_nav.profile"}}</span>
</LinkTo> </DNavigationItem>
</li>
<li class="nav-emails"> <DNavigationItem
<LinkTo @route="preferences.emails"> @route="preferences.emails"
@class="user-nav__preferences-emails"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "envelope"}} {{d-icon "envelope"}}
<span>{{i18n "user.preferences_nav.emails"}}</span> <span>{{i18n "user.preferences_nav.emails"}}</span>
</LinkTo> </DNavigationItem>
</li>
<li class="nav-notifications"> <DNavigationItem
<LinkTo @route="preferences.notifications"> @route="preferences.notifications"
@class="user-nav__preferences-notifications"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "bell"}} {{d-icon "bell"}}
<span>{{i18n "user.preferences_nav.notifications"}}</span> <span>{{i18n "user.preferences_nav.notifications"}}</span>
</LinkTo> </DNavigationItem>
</li>
{{#if @model.can_change_tracking_preferences}} {{#if @model.can_change_tracking_preferences}}
<li class="nav-tracking"> <DNavigationItem
<LinkTo @route="preferences.tracking"> @route="preferences.tracking"
@class="user-nav__preferences-tracking"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "plus"}} {{d-icon "plus"}}
<span>{{i18n "user.preferences_nav.tracking"}}</span> <span>{{i18n "user.preferences_nav.tracking"}}</span>
</LinkTo> </DNavigationItem>
</li>
{{/if}} {{/if}}
<li class="indent nav-users"> <DNavigationItem
<LinkTo @route="preferences.users"> @route="preferences.users"
@class="user-nav__preferences-users"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "users"}} {{d-icon "users"}}
<span>{{i18n "user.preferences_nav.users"}}</span> <span>{{i18n "user.preferences_nav.users"}}</span>
</LinkTo> </DNavigationItem>
</li>
<li class="nav-interface"> <DNavigationItem
<LinkTo @route="preferences.interface"> @route="preferences.interface"
@class="user-nav__preferences-interface"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "desktop"}} {{d-icon "desktop"}}
<span>{{i18n "user.preferences_nav.interface"}}</span> <span>{{i18n "user.preferences_nav.interface"}}</span>
</LinkTo> </DNavigationItem>
</li>
{{#if (not (eq @siteSettings.navigation_menu "legacy"))}} {{#if (not (eq @siteSettings.navigation_menu "legacy"))}}
<li class="indent nav-sidebar"> <DNavigationItem
<LinkTo @route="preferences.sidebar"> @route="preferences.sidebar"
@class="user-nav__preferences-sidebar"
@ariaCurrentContext={{@ariaCurrentContext}}
>
{{d-icon "bars"}} {{d-icon "bars"}}
<span>{{i18n "user.preferences_nav.sidebar"}}</span> <span>{{i18n "user.preferences_nav.sidebar"}}</span>
</LinkTo> </DNavigationItem>
</li>
{{/if}} {{/if}}
<PluginOutlet <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-down-event-binding }}
{{! template-lint-disable no-invalid-interactive }} {{! 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}} {{#if this.hasScroll}}
<a <a
role="button" role="button"
@ -43,4 +46,4 @@
{{d-icon "chevron-right"}} {{d-icon "chevron-right"}}
</a> </a>
{{/if}} {{/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}} {{#if this.currentUser.redesigned_user_page_nav_enabled}}
<DSection @pageClass="user-preferences" /> <DSection @pageClass="user-preferences" />
<div class="user-navigation user-navigation-secondary"> <div class="user-navigation user-navigation-secondary">
<HorizontalOverflowNav> <HorizontalOverflowNav @ariaLabel="User secondary - preferences">
<UserNav::PreferencesNav <UserNav::PreferencesNav
@currentUser={{this.currentUser}} @currentUser={{this.currentUser}}
@model={{this.model}} @model={{this.model}}
@siteSettings={{this.siteSettings}} @siteSettings={{this.siteSettings}}
@ariaCurrentContext="subNav"
/> />
</HorizontalOverflowNav> </HorizontalOverflowNav>
</div> </div>

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

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

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

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

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

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

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

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

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

@ -14,6 +14,7 @@
<HorizontalOverflowNav <HorizontalOverflowNav
@className="messages-nav" @className="messages-nav"
@ariaLabel="User secondary - messages"
id="user-navigation-secondary__horizontal-nav" 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" /> <DSection @pageClass="user-notifications" />
<div class="user-navigation user-navigation-secondary"> <div class="user-navigation user-navigation-secondary">
<HorizontalOverflowNav> <HorizontalOverflowNav @ariaLabel="User secondary - notifications">
<UserNav::NotificationsNav <UserNav::NotificationsNav
@model={{this.model}} @model={{this.model}}
@siteSettings={{this.siteSettings}} @siteSettings={{this.siteSettings}}
@ariaCurrentContext="subNav"
/> />
</HorizontalOverflowNav> </HorizontalOverflowNav>

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

@ -346,6 +346,19 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
await publishUnreadToMessageBus({ topicId: 1 }); await publishUnreadToMessageBus({ topicId: 1 });
await publishNewToMessageBus({ topicId: 2 }); await publishNewToMessageBus({ topicId: 2 });
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(".user-nav__messages-unread").innerText.trim(),
I18n.t("user.messages.unread_with_count", { count: 1 }),
"displays the right count"
);
} else {
assert.strictEqual( assert.strictEqual(
query(".messages-nav li a.new").innerText.trim(), query(".messages-nav li a.new").innerText.trim(),
I18n.t("user.messages.new_with_count", { count: 1 }), I18n.t("user.messages.new_with_count", { count: 1 }),
@ -357,6 +370,7 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
I18n.t("user.messages.unread_with_count", { count: 1 }), I18n.t("user.messages.unread_with_count", { count: 1 }),
"displays the right count" "displays the right count"
); );
}
}); });
test("incoming new messages while viewing new", async function (assert) { test("incoming new messages while viewing new", async function (assert) {
@ -364,11 +378,19 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
await publishNewToMessageBus({ topicId: 1 }); await publishNewToMessageBus({ topicId: 1 });
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( assert.strictEqual(
query(".messages-nav li a.new").innerText.trim(), query(".messages-nav li a.new").innerText.trim(),
I18n.t("user.messages.new_with_count", { count: 1 }), I18n.t("user.messages.new_with_count", { count: 1 }),
"displays the right count" "displays the right count"
); );
}
assert.ok(exists(".show-mores"), "displays the topic incoming info"); assert.ok(exists(".show-mores"), "displays the topic incoming info");
}); });
@ -378,11 +400,19 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
await publishUnreadToMessageBus(); await publishUnreadToMessageBus();
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( assert.strictEqual(
query(".messages-nav li a.unread").innerText.trim(), query(".messages-nav li a.unread").innerText.trim(),
I18n.t("user.messages.unread_with_count", { count: 1 }), I18n.t("user.messages.unread_with_count", { count: 1 }),
"displays the right count" "displays the right count"
); );
}
assert.ok(exists(".show-mores"), "displays the topic incoming info"); assert.ok(exists(".show-mores"), "displays the topic incoming info");
}); });
@ -393,14 +423,17 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
await publishUnreadToMessageBus({ groupIds: [14], topicId: 1 }); await publishUnreadToMessageBus({ groupIds: [14], topicId: 1 });
await publishNewToMessageBus({ groupIds: [14], topicId: 2 }); await publishNewToMessageBus({ groupIds: [14], topicId: 2 });
if (customUserProps?.redesigned_user_page_nav_enabled) {
assert.strictEqual( assert.strictEqual(
query(".messages-nav li a.unread").innerText.trim(), query(
".messages-nav .user-nav__messages-group-unread"
).innerText.trim(),
I18n.t("user.messages.unread_with_count", { count: 1 }), I18n.t("user.messages.unread_with_count", { count: 1 }),
"displays the right count" "displays the right count"
); );
assert.strictEqual( assert.strictEqual(
query(".messages-nav li a.new").innerText.trim(), query(".messages-nav .user-nav__messages-group-new").innerText.trim(),
I18n.t("user.messages.new_with_count", { count: 1 }), I18n.t("user.messages.new_with_count", { count: 1 }),
"displays the right count" "displays the right count"
); );
@ -410,16 +443,45 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
await visit("/u/charlie/messages/unread"); await visit("/u/charlie/messages/unread");
assert.strictEqual( assert.strictEqual(
query(".messages-nav li a.unread").innerText.trim(), query(".messages-nav .user-nav__messages-unread").innerText.trim(),
I18n.t("user.messages.unread"), I18n.t("user.messages.unread"),
"displays the right count" "displays the right count"
); );
assert.strictEqual( assert.strictEqual(
query(".messages-nav li a.new").innerText.trim(), query(".messages-nav .user-nav__messages-new").innerText.trim(),
I18n.t("user.messages.new"), I18n.t("user.messages.new"),
"displays the right count" "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) { 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(".btn.dismiss-read");
await click("#dismiss-read-confirm"); await click("#dismiss-read-confirm");
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( assert.strictEqual(
query(".messages-nav li a.unread").innerText.trim(), query(".messages-nav li a.unread").innerText.trim(),
I18n.t("user.messages.unread"), I18n.t("user.messages.unread"),
"displays the right count" "displays the right count"
); );
}
assert.strictEqual( assert.strictEqual(
count(".topic-list-item"), count(".topic-list-item"),
@ -518,11 +588,19 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
await click(".btn.dismiss-read"); await click(".btn.dismiss-read");
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( assert.strictEqual(
query(".messages-nav li a.new").innerText.trim(), query(".messages-nav li a.new").innerText.trim(),
I18n.t("user.messages.new"), I18n.t("user.messages.new"),
"displays the right count" "displays the right count"
); );
}
assert.strictEqual( assert.strictEqual(
count(".topic-list-item"), count(".topic-list-item"),
@ -701,7 +779,11 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
"User personal inbox is selected in dropdown" "User personal inbox is selected in dropdown"
); );
if (customUserProps?.redesigned_user_page_nav_enabled) {
await click(".user-nav__messages-sent");
} else {
await click(".messages-sent"); await click(".messages-sent");
}
assert.strictEqual( assert.strictEqual(
messagesDropdown.header().name(), messagesDropdown.header().name(),
@ -724,7 +806,11 @@ function testUserPrivateMessagesWithGroupMessages(needs, customUserProps) {
"Group inbox is selected in dropdown" "Group inbox is selected in dropdown"
); );
if (customUserProps?.redesigned_user_page_nav_enabled) {
await click(".user-nav__messages-group-new");
} else {
await click(".messages-group-new"); await click(".messages-group-new");
}
assert.strictEqual( assert.strictEqual(
messagesDropdown.header().name(), 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 find(".horizontal-overflow-nav__scroll-left").click
end end
INTERFACE_LINK_CSS_SELECTOR = ".nav-tracking" INTERFACE_LINK_CSS_SELECTOR = ".user-nav__preferences-tracking"
def has_interface_link_visible? def has_interface_link_visible?
horizontal_secondary_link_visible?(INTERFACE_LINK_CSS_SELECTOR, visible: true) 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) horizontal_secondary_link_visible?(INTERFACE_LINK_CSS_SELECTOR, visible: false)
end end
ACCOUNT_LINK_CSS_SELECTOR = ".nav-account" ACCOUNT_LINK_CSS_SELECTOR = ".user-nav__preferences-account"
def has_account_link_visible? def has_account_link_visible?
horizontal_secondary_link_visible?(ACCOUNT_LINK_CSS_SELECTOR, visible: true) horizontal_secondary_link_visible?(ACCOUNT_LINK_CSS_SELECTOR, visible: true)