From 145d2baa140584213918e01b6137b553e700ba95 Mon Sep 17 00:00:00 2001 From: Kris Date: Tue, 17 Jan 2023 12:18:16 -0500 Subject: [PATCH] A11Y: add aria tags to the new user nav (#19774) --- .../app/components/d-navigation-item.js | 30 ++- .../discourse/app/components/user-nav.hbs | 98 +++++---- .../app/components/user-nav/activity-nav.hbs | 49 ++++- .../components/user-nav/notifications-nav.hbs | 70 ++++--- .../components/user-nav/preferences-nav.hbs | 126 +++++++----- .../components/horizontal-overflow-nav.hbs | 7 +- .../discourse/app/templates/preferences.hbs | 3 +- .../discourse/app/templates/user-invited.hbs | 2 +- .../templates/user-private-messages-group.hbs | 72 +++---- .../templates/user-private-messages-user.hbs | 85 ++++---- .../discourse/app/templates/user/activity.hbs | 3 +- .../discourse/app/templates/user/messages.hbs | 1 + .../app/templates/user/notifications.hbs | 3 +- .../acceptance/user-private-messages-test.js | 194 +++++++++++++----- .../page_objects/pages/user_preferences.rb | 4 +- 15 files changed, 473 insertions(+), 274 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/d-navigation-item.js b/app/assets/javascripts/discourse/app/components/d-navigation-item.js index bb32a384900..ec9e17dd22b 100644 --- a/app/assets/javascripts/discourse/app/components/d-navigation-item.js +++ b/app/assets/javascripts/discourse/app/components/d-navigation-item.js @@ -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; + } + ), }); diff --git a/app/assets/javascripts/discourse/app/components/user-nav.hbs b/app/assets/javascripts/discourse/app/components/user-nav.hbs index 96b8f220c90..4221692a4cc 100644 --- a/app/assets/javascripts/discourse/app/components/user-nav.hbs +++ b/app/assets/javascripts/discourse/app/components/user-nav.hbs @@ -1,55 +1,63 @@
- + {{#unless @user.profile_hidden}} -
  • - - {{d-icon "user"}} - {{i18n "user.summary.title"}} - -
    • + + {{d-icon "user"}} + {{i18n "user.summary.title"}} + + + + {{d-icon "stream"}} + {{i18n "user.activity_stream"}} + -
  • - - {{d-icon "stream"}} - {{i18n "user.activity_stream"}} - -
    • {{/unless}} {{#if @showNotificationsTab}} -
  • - - {{d-icon "bell" class="glyph"}} - {{i18n "user.notifications"}} - -
    • + + {{d-icon "bell" class="glyph"}} + {{i18n "user.notifications"}} + {{/if}} {{#if @showPrivateMessages}} -
  • - - {{d-icon "envelope"}} - {{i18n "user.private_messages"}} - -
    • + + {{d-icon "envelope"}} + {{i18n "user.private_messages"}} + {{/if}} {{#if @canInviteToForum}} -
  • - - {{d-icon "user-plus"}} - {{i18n "user.invited.title"}} - -
    • + + {{d-icon "user-plus"}} + {{i18n "user.invited.title"}} + {{/if}} {{#if @showBadges}} -
  • - - {{d-icon "certificate"}} - {{i18n "badges.title"}} - -
    • + + {{d-icon "certificate"}} + {{i18n "badges.title"}} + {{/if}} {{#if @user.can_edit}} -
  • - - {{d-icon "cog"}} - {{i18n "user.preferences"}} - -
    • + + {{d-icon "cog"}} + {{i18n "user.preferences"}} + {{/if}} {{#if (and this.site.mobileView this.currentUser.staff)}} -
  • +
  • {{d-icon "wrench"}} {{i18n "admin.user.manage_user"}} diff --git a/app/assets/javascripts/discourse/app/components/user-nav/activity-nav.hbs b/app/assets/javascripts/discourse/app/components/user-nav/activity-nav.hbs index b0f5ed0c484..85107fa1e98 100644 --- a/app/assets/javascripts/discourse/app/components/user-nav/activity-nav.hbs +++ b/app/assets/javascripts/discourse/app/components/user-nav/activity-nav.hbs @@ -1,44 +1,77 @@ - + {{d-icon "stream"}} {{i18n "user.filters.all"}} - + {{d-icon "list-ul"}} {{i18n "user_action_groups.4"}} - + {{d-icon "reply"}} {{i18n "user_action_groups.5"}} {{#if @user.showRead}} - + {{d-icon "history"}} {{i18n "user.read"}} {{/if}} {{#if @user.showDrafts}} - + {{d-icon "pencil-alt"}} {{@draftLabel}} {{/if}} {{#if (gt @model.pending_posts_count 0)}} - + {{d-icon "clock"}} {{@pendingLabel}} {{/if}} - + {{d-icon "heart"}} {{i18n "user_action_groups.1"}} {{#if @user.showBookmarks}} - + {{d-icon "bookmark"}} {{i18n "user_action_groups.3"}} diff --git a/app/assets/javascripts/discourse/app/components/user-nav/notifications-nav.hbs b/app/assets/javascripts/discourse/app/components/user-nav/notifications-nav.hbs index 75cd13dc923..bfda5d1e234 100644 --- a/app/assets/javascripts/discourse/app/components/user-nav/notifications-nav.hbs +++ b/app/assets/javascripts/discourse/app/components/user-nav/notifications-nav.hbs @@ -1,39 +1,49 @@ -
  • - - {{d-icon "bell"}} - {{i18n "user.filters.all"}} - -
    • + + {{d-icon "bell"}} + {{i18n "user.filters.all"}} + -
  • - - {{d-icon "reply"}} - {{i18n "user_action_groups.6"}} - -
    • + + {{d-icon "reply"}} + {{i18n "user_action_groups.6"}} + -
  • - - {{d-icon "heart"}} - {{i18n "user_action_groups.2"}} - -
    • + + {{d-icon "heart"}} + {{i18n "user_action_groups.2"}} + {{#if @siteSettings.enable_mentions}} -
  • - - {{d-icon "at"}} - {{i18n "user_action_groups.7"}} - -
    • + + {{d-icon "at"}} + {{i18n "user_action_groups.7"}} + {{/if}} -
  • - - {{d-icon "pencil-alt"}} - {{i18n "user_action_groups.11"}} - -
    • + + {{d-icon "pencil-alt"}} + {{i18n "user_action_groups.11"}} +     \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/templates/preferences.hbs b/app/assets/javascripts/discourse/app/templates/preferences.hbs index 88f978b73ac..37b0bbad137 100644 --- a/app/assets/javascripts/discourse/app/templates/preferences.hbs +++ b/app/assets/javascripts/discourse/app/templates/preferences.hbs @@ -1,11 +1,12 @@ {{#if this.currentUser.redesigned_user_page_nav_enabled}}
    - +
    diff --git a/app/assets/javascripts/discourse/app/templates/user-invited.hbs b/app/assets/javascripts/discourse/app/templates/user-invited.hbs index 1d3ebe4fe39..7997e48b743 100644 --- a/app/assets/javascripts/discourse/app/templates/user-invited.hbs +++ b/app/assets/javascripts/discourse/app/templates/user-invited.hbs @@ -3,7 +3,7 @@
    - + -
  • - - {{d-icon "envelope"}} - {{i18n "categories.latest"}} - -
    • + + + {{d-icon "envelope"}} + {{i18n "categories.latest"}} + {{#if this.viewingSelf}} -
  • - - {{d-icon "exclamation-circle"}} - {{this.newLinkText}} - -
    • + + {{d-icon "exclamation-circle"}} + {{this.newLinkText}} + -
  • - - {{d-icon "plus-circle"}} - {{this.unreadLinkText}} - -
    • + + {{d-icon "plus-circle"}} + {{this.unreadLinkText}} + -
  • - - {{d-icon "archive"}} - {{i18n "user.messages.archive"}} - -
    • + + {{d-icon "archive"}} + {{i18n "user.messages.archive"}} + {{/if}} diff --git a/app/assets/javascripts/discourse/app/templates/user-private-messages-user.hbs b/app/assets/javascripts/discourse/app/templates/user-private-messages-user.hbs index 0ddb6b1ee0d..7106d8717d3 100644 --- a/app/assets/javascripts/discourse/app/templates/user-private-messages-user.hbs +++ b/app/assets/javascripts/discourse/app/templates/user-private-messages-user.hbs @@ -5,50 +5,59 @@ {{/if}} -
  • - - {{d-icon "envelope"}} - {{i18n "categories.latest"}} - -
    • + + {{d-icon "envelope"}} + {{i18n "categories.latest"}} + -
  • - - {{d-icon "reply"}} - {{i18n "user.messages.sent"}} - -
    • + + {{d-icon "reply"}} + {{i18n "user.messages.sent"}} + {{#if this.viewingSelf}} -
  • - - {{d-icon "exclamation-circle"}} - {{this.newLinkText}} - -
    • + + {{d-icon "exclamation-circle"}} + {{this.newLinkText}} + + + + {{d-icon "plus-circle"}} + {{this.unreadLinkText}} + -
  • - - {{d-icon "plus-circle"}} - {{this.unreadLinkText}} - -
    • {{/if}} -
  • - - {{d-icon "archive"}} - {{i18n "user.messages.archive"}} - -
    • + + {{d-icon "archive"}} + {{i18n "user.messages.archive"}} + +     {{outlet}} \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/templates/user/activity.hbs b/app/assets/javascripts/discourse/app/templates/user/activity.hbs index cfbbdc52151..8277d60f62c 100644 --- a/app/assets/javascripts/discourse/app/templates/user/activity.hbs +++ b/app/assets/javascripts/discourse/app/templates/user/activity.hbs @@ -2,7 +2,7 @@
    - +
    diff --git a/app/assets/javascripts/discourse/app/templates/user/messages.hbs b/app/assets/javascripts/discourse/app/templates/user/messages.hbs index f4260d26928..86130270f3b 100644 --- a/app/assets/javascripts/discourse/app/templates/user/messages.hbs +++ b/app/assets/javascripts/discourse/app/templates/user/messages.hbs @@ -14,6 +14,7 @@ diff --git a/app/assets/javascripts/discourse/app/templates/user/notifications.hbs b/app/assets/javascripts/discourse/app/templates/user/notifications.hbs index 15ec2c67533..b0fb828997d 100644 --- a/app/assets/javascripts/discourse/app/templates/user/notifications.hbs +++ b/app/assets/javascripts/discourse/app/templates/user/notifications.hbs @@ -2,10 +2,11 @@
    - + diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js index 9ac356da93e..6875db5cf38 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js @@ -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(), diff --git a/spec/system/page_objects/pages/user_preferences.rb b/spec/system/page_objects/pages/user_preferences.rb index 42bdc016282..dda52924afe 100644 --- a/spec/system/page_objects/pages/user_preferences.rb +++ b/spec/system/page_objects/pages/user_preferences.rb @@ -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)