snapshot of https://github.com/mattermost/mattermost.git (master, 2026-09-16; blobs > 131072B omitted)

e2e-tests/playwright/specs/accessibility/channels/settings_dialog/advanced.spec.ts

@@ -0,0 +1,437 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, test} from '@mattermost/playwright-lib';
+
+/**
+ * @objective Verify keyboard navigation through interactive elements in Advanced settings
+ */
+test(
+    'navigate on keyboard tab between interactive elements',
+    {tag: ['@accessibility', '@settings', '@advanced_settings']},
+    async ({pw}) => {
+        // # Create and sign in a new user
+        const {user, adminClient} = await pw.initSetup();
+        const config = await adminClient.getConfig();
+        const wysiwygEnabled =
+            config.FeatureFlags?.WysiwygEditor === true || config.FeatureFlags?.WysiwygEditor === 'true';
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+        const advancedSettings = settingsModal.advancedSettings;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible and focus should be on the modal
+        await expect(settingsModal.container).toBeVisible();
+        await pw.toBeFocusedWithFocusVisible(settingsModal.container);
+
+        // # Press Tab and verify focus is on Close button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(settingsModal.closeButton);
+
+        // # Click on Advanced tab to open it
+        await settingsModal.advancedTab.click();
+
+        // * Advanced Settings panel should be visible
+        await expect(advancedSettings.container).toBeVisible();
+
+        // # Press Tab to move focus to Send Messages on CTRL+ENTER button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(advancedSettings.ctrlEnterEditButton);
+
+        if (wysiwygEnabled) {
+            // # Press Tab to move focus to Rich text editing button
+            await page.keyboard.press('Tab');
+            await pw.toBeFocusedWithFocusVisible(advancedSettings.wysiwygEditorEditButton);
+        }
+
+        // # Press Tab to move focus to Enable Post Formatting button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(advancedSettings.postFormattingEditButton);
+
+        // # Press Tab to move focus to Enable Join/Leave Messages button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(advancedSettings.joinLeaveEditButton);
+
+        // # Press Tab to move focus to Scroll position button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(advancedSettings.scrollPositionEditButton);
+
+        // # Press Tab to move focus to Allow message drafts to sync button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(advancedSettings.syncDraftsEditButton);
+    },
+);
+
+/**
+ * @objective Verify Advanced settings panel passes accessibility scan and matches aria-snapshot
+ */
+test(
+    'accessibility scan and aria-snapshot of Advanced settings panel',
+    {tag: ['@accessibility', '@settings', '@advanced_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user, adminClient} = await pw.initSetup();
+
+        const config = await adminClient.getConfig();
+        const wysiwygEnabled =
+            config.FeatureFlags?.WysiwygEditor === true || config.FeatureFlags?.WysiwygEditor === 'true';
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        // # Open Advanced tab
+        await settingsModal.advancedTab.click();
+
+        // * Advanced Settings panel should be visible
+        await expect(settingsModal.advancedSettings.container).toBeVisible();
+
+        const wysiwygSnapshot = wysiwygEnabled
+            ? `
+            - heading "Rich text editing (Beta)" [level=4]
+            - button "Rich text editing (Beta) Edit"
+            - text: /(Markdown editing [(]default[)]|Rich text editing.*)/`
+            : '';
+
+        // * Verify aria snapshot of Advanced settings tab
+        await expect(settingsModal.advancedSettings.container).toMatchAriaSnapshot(`
+          - tabpanel "advanced":
+            - heading "Advanced Settings" [level=3]
+            - heading /Send Messages on (CTRL|⌘)\\+ENTER/ [level=4]
+            - button /Send Messages on (CTRL|⌘)\\+ENTER Edit/
+            - text: /(On for all messages|On only for code blocks starting with \`\`\`|Off)/${wysiwygSnapshot}
+            - heading "Enable Post Formatting" [level=4]
+            - button "Enable Post Formatting Edit"
+            - text: /(On|Off)/
+            - heading "Enable Join/Leave Messages" [level=4]
+            - button "Enable Join/Leave Messages Edit"
+            - text: /(On|Off)/
+            - heading "Scroll position when viewing an unread channel" [level=4]
+            - button "Scroll position when viewing an unread channel Edit"
+            - text: /(Start me where I left off|Start me at the newest message)/
+            - heading "Allow message drafts to sync with the server" [level=4]
+            - button "Allow message drafts to sync with the server Edit"
+            - text: /(On|Off)/
+        `);
+
+        // * Analyze the Advanced settings panel for accessibility issues
+        const accessibilityScanResults = await axe
+            .builder(page, {disableColorContrast: true})
+            .include(settingsModal.advancedSettings.id)
+            .analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+/**
+ * @objective Verify Send Messages on CTRL+ENTER section passes accessibility scan and matches aria-snapshot
+ */
+test(
+    'accessibility scan and aria-snapshot of Send Messages on CTRL+ENTER section',
+    {tag: ['@accessibility', '@settings', '@advanced_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        // # Open Advanced tab
+        await settingsModal.advancedTab.click();
+
+        const advancedSettings = settingsModal.advancedSettings;
+
+        // # Click Edit on Send Messages section
+        await advancedSettings.ctrlEnterEditButton.click();
+
+        // * Verify aria snapshot of Send Messages section when expanded
+        await advancedSettings.expandedSection.waitFor();
+        await expect(advancedSettings.expandedSection).toMatchAriaSnapshot(`
+          - heading /Send Messages on (CTRL|⌘)\\+ENTER/ [level=4]
+          - group /Send Messages on (CTRL|⌘)\\+ENTER/:
+            - text: /Send Messages on (CTRL|⌘)\\+ENTER/
+            - radio "On for all messages"
+            - text: On for all messages
+            - radio /(On only for code blocks starting with \`\`\`|On only for code blocks starting with \\\`\\\`\\\`)/ [checked]
+            - text: /(On only for code blocks starting with \`\`\`|On only for code blocks starting with \\\`\\\`\\\`)/
+            - radio "Off"
+            - text: /Off When enabled, (CTRL|⌘) \\+ ENTER will send the message and ENTER inserts a new line\\./
+          - separator
+          - alert
+          - button "Save"
+          - button "Cancel"
+        `);
+
+        // # Analyze the expanded section for accessibility issues
+        const accessibilityScanResults = await axe.builder(page).include(advancedSettings.expandedSectionId).analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+/**
+ * @objective Verify Enable Post Formatting section passes accessibility scan and matches aria-snapshot
+ */
+test(
+    'accessibility scan and aria-snapshot of Enable Post Formatting section',
+    {tag: ['@accessibility', '@settings', '@advanced_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        // # Open Advanced tab
+        await settingsModal.advancedTab.click();
+
+        const advancedSettings = settingsModal.advancedSettings;
+
+        // # Click Edit on Enable Post Formatting section
+        await advancedSettings.postFormattingEditButton.click();
+
+        // * Verify aria snapshot of Enable Post Formatting section when expanded
+        await advancedSettings.expandedSection.waitFor();
+        await expect(advancedSettings.expandedSection).toMatchAriaSnapshot(`
+          - heading "Enable Post Formatting" [level=4]
+          - group "Enable Post Formatting":
+            - radio /(On|Off)/ [checked]
+            - text: /(On|Off)/
+          - separator
+          - alert
+          - button "Save"
+          - button "Cancel"
+        `);
+
+        // # Analyze the expanded section for accessibility issues
+        const accessibilityScanResults = await axe.builder(page).include(advancedSettings.expandedSectionId).analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+/**
+ * @objective Verify Enable Join/Leave Messages section passes accessibility scan and matches aria-snapshot
+ */
+test(
+    'accessibility scan and aria-snapshot of Enable Join/Leave Messages section',
+    {tag: ['@accessibility', '@settings', '@advanced_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        // # Open Advanced tab
+        await settingsModal.advancedTab.click();
+
+        const advancedSettings = settingsModal.advancedSettings;
+
+        // # Click Edit on Enable Join/Leave Messages section
+        await advancedSettings.joinLeaveEditButton.click();
+
+        // * Verify aria snapshot of Enable Join/Leave Messages section when expanded
+        await advancedSettings.expandedSection.waitFor();
+        await expect(advancedSettings.expandedSection).toMatchAriaSnapshot(`
+          - heading "Enable Join/Leave Messages" [level=4]
+          - group "Enable Join/Leave Messages":
+            - text: Enable Join/Leave Messages
+            - radio "On" [checked]
+            - text: "On"
+            - radio "Off"
+            - text: /Off When "On", System Messages saying a user has joined or left a channel will be visible\\./
+          - separator
+          - alert
+          - button "Save"
+          - button "Cancel"
+        `);
+
+        // # Analyze the expanded section for accessibility issues
+        const accessibilityScanResults = await axe.builder(page).include(advancedSettings.expandedSectionId).analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+/**
+ * @objective Verify Scroll position section passes accessibility scan and matches aria-snapshot
+ */
+test(
+    'accessibility scan and aria-snapshot of Scroll position section',
+    {tag: ['@accessibility', '@settings', '@advanced_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        // # Open Advanced tab
+        await settingsModal.advancedTab.click();
+
+        const advancedSettings = settingsModal.advancedSettings;
+
+        // # Click Edit on Scroll position section
+        await advancedSettings.scrollPositionEditButton.click();
+
+        // * Verify aria snapshot of Scroll position section when expanded
+        await advancedSettings.expandedSection.waitFor();
+        await expect(advancedSettings.expandedSection).toMatchAriaSnapshot(`
+          - heading "Scroll position when viewing an unread channel" [level=4]
+          - group "Scroll position when viewing an unread channel":
+            - text: Scroll position when viewing an unread channel
+            - radio "Start me where I left off" [checked]
+            - text: Start me where I left off
+            - radio "Start me at the newest message"
+            - text: /Start me at the newest message Choose your scroll position when you view an unread channel\\./
+          - separator
+          - alert
+          - button "Save"
+          - button "Cancel"
+        `);
+
+        // # Analyze the expanded section for accessibility issues
+        const accessibilityScanResults = await axe.builder(page).include(advancedSettings.expandedSectionId).analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+/**
+ * @objective Verify message drafts sync section passes accessibility scan and matches aria-snapshot
+ */
+test(
+    'accessibility scan and aria-snapshot of Allow message drafts to sync section',
+    {tag: ['@accessibility', '@settings', '@advanced_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        // # Open Advanced tab
+        await settingsModal.advancedTab.click();
+
+        const advancedSettings = settingsModal.advancedSettings;
+
+        // # Click Edit on Allow message drafts to sync section
+        await advancedSettings.syncDraftsEditButton.click();
+
+        // * Verify aria snapshot of Allow message drafts to sync section when expanded
+        await advancedSettings.expandedSection.waitFor();
+        await expect(advancedSettings.expandedSection).toMatchAriaSnapshot(`
+          - heading "Allow message drafts to sync with the server" [level=4]
+          - group "Allow message drafts to sync with the server":
+            - text: Allow message drafts to sync with the server
+            - radio "On" [checked]
+            - text: "On"
+            - radio "Off"
+            - text: /Off When enabled, message drafts are synced with the server/
+          - separator
+          - alert
+          - button "Save"
+          - button "Cancel"
+        `);
+
+        // # Analyze the expanded section for accessibility issues
+        const accessibilityScanResults = await axe.builder(page).include(advancedSettings.expandedSectionId).analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);

e2e-tests/playwright/specs/accessibility/channels/settings_dialog/notifications.spec.ts

@@ -0,0 +1,385 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, test} from '@mattermost/playwright-lib';
+
+test(
+    'navigate on keyboard tab between interactive elements',
+    {tag: ['@accessibility', '@settings', '@notification_settings']},
+    async ({pw}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+        const notificationsSettings = settingsModal.notificationsSettings;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible and focus should be on the modal
+        await expect(settingsModal.container).toBeVisible();
+        await pw.toBeFocusedWithFocusVisible(settingsModal.container);
+
+        // # Press Tab and verify focus is on Close button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(settingsModal.closeButton);
+
+        // # Press Tab to move focus to Notifications tab
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(settingsModal.notificationsTab);
+
+        // # Press Tab to move focus to Learn more link
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(notificationsSettings.learnMoreText);
+
+        // # Press Tab to move focus to Desktop and mobile notifications button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(notificationsSettings.desktopAndMobileEditButton);
+
+        // # Press Tab to move focus to Desktop notification sounds button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(notificationsSettings.desktopNotificationSoundEditButton);
+
+        // # Press Tab to move focus to Email notifications button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(notificationsSettings.emailEditButton);
+
+        // # Press Tab to move focus to Auto-follow threads on channel-wide mentions button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(notificationsSettings.channelMentionAutoFollowEditButton);
+
+        // # Press Tab to move focus to Keywords that trigger notifications button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(notificationsSettings.keywordsTriggerNotificationsEditButton);
+
+        // # Press Tab to move focus to Keywords that get highlighted (without notifications) button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(notificationsSettings.keywordsGetHighlightedEditButton);
+
+        // # Press Tab to move focus to Send a test notification button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(notificationsSettings.testNotificationButton);
+
+        // # Press Tab to move focus to Troubleshooting docs button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(notificationsSettings.troubleshootingDocsButton);
+    },
+);
+
+test(
+    'accessibility scan and aria-snapshot of Notifications settings panel',
+    {tag: ['@accessibility', '@settings', '@notification_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user, adminClient} = await pw.initSetup();
+        const clientConfig = await adminClient.getClientConfig();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        // * Verify aria snapshot of Notifications settings tab
+        await expect(settingsModal.notificationsSettings.container).toMatchAriaSnapshot(`
+          - tabpanel "notifications":
+            - heading "Notifications" [level=3]
+            - link "Learn more about notifications":
+              - /url: https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=user_settings_notifications&uid=${user.id}&sid=${clientConfig.DiagnosticId}&edition=enterprise&server_version=${clientConfig.Version}
+              - img
+            - heading "Desktop and mobile notifications Permission required" [level=4]:
+              - img
+            - button "Desktop and mobile notifications Permission required Edit"
+            - text: Mentions, direct messages, and group messages
+            - heading "Desktop notification sounds" [level=4]
+            - button "Desktop notification sounds Edit"
+            - text: "\\"Bing\\" for messages"
+            - heading "Email notifications" [level=4]
+            - button "Email notifications Edit"
+            - heading "Auto-follow threads on channel-wide mentions" [level=4]
+            - button "Auto-follow threads on channel-wide mentions Edit"
+            - text: "On"
+            - heading "Keywords that trigger notifications" [level=4]
+            - button "Keywords that trigger notifications Edit"
+            - text: "\\"@${user.username}\\", \\"@channel\\", \\"@all\\", \\"@here\\""
+            - heading "Keywords that get highlighted (without notifications)" [level=4]
+            - button "Keywords that get highlighted (without notifications) Edit"
+            - heading "Troubleshooting notifications" [level=4]
+            - paragraph: Not receiving notifications? Start by sending a test notification to all your devices to check if they’re working as expected. If issues persist, explore ways to solve them with troubleshooting steps.
+            - button "Send a test notification"
+            - button "Troubleshooting docs 󰏌"
+        `);
+
+        // * Analyze the Notifications settings panel for accessibility issues
+        const accessibilityScanResults = await axe
+            .builder(page, {disableColorContrast: true})
+            .include(settingsModal.notificationsSettings.id)
+            .analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+test(
+    'accessibility scan and aria-snapshot of Desktop and mobile notifications section',
+    {tag: ['@accessibility', '@settings', '@notification_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user, adminClient} = await pw.initSetup();
+
+        // # Send push notifications, without which the mobile settings in this section are replaced
+        // # by a "not enabled by your system administrator" message
+        await adminClient.patchConfig({EmailSettings: {SendPushNotifications: true}});
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        const notificationsSettings = settingsModal.notificationsSettings;
+
+        // # Click Edit on Desktop and mobile notifications section
+        await notificationsSettings.desktopAndMobileEditButton.click();
+
+        // * Verify aria snapshot of Desktop and mobile notifications section when expanded
+        await notificationsSettings.expandedSection.waitFor();
+        await expect(notificationsSettings.expandedSection).toMatchAriaSnapshot({
+            name: 'desktop_and_mobile_section.yml',
+        });
+
+        // # Analyze the expanded section for accessibility issues
+        const accessibilityScanResults = await axe
+            .builder(page)
+            .include(notificationsSettings.expandedSectionId)
+            .analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+test(
+    'accessibility scan and aria-snapshot of Desktop notification sounds section',
+    {tag: ['@accessibility', '@settings', '@notification_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        const notificationsSettings = settingsModal.notificationsSettings;
+
+        // # Click Edit on Desktop notification sounds section
+        await notificationsSettings.desktopNotificationSoundEditButton.click();
+
+        // * Verify aria snapshot of Desktop notification sounds section when expanded
+        await notificationsSettings.expandedSection.waitFor();
+        await expect(notificationsSettings.expandedSection).toMatchAriaSnapshot({
+            name: 'desktop_notification_sounds_section.yml',
+        });
+
+        // # Analyze the expanded section for accessibility issues
+        const accessibilityScanResults = await axe
+            .builder(page)
+            .include(notificationsSettings.expandedSectionId)
+            .analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+test(
+    'accessibility scan and aria-snapshot of Email notifications section',
+    {tag: ['@accessibility', '@settings', '@notification_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        const notificationsSettings = settingsModal.notificationsSettings;
+
+        // # Click Edit on Email notifications section
+        await notificationsSettings.emailEditButton.click();
+
+        // * Verify aria snapshot of Email notifications section when expanded
+        await notificationsSettings.expandedSection.waitFor();
+        await expect(notificationsSettings.expandedSection).toMatchAriaSnapshot({
+            name: 'email_notifications_section.yml',
+        });
+
+        // # Analyze the expanded section for accessibility issues
+        const accessibilityScanResults = await axe
+            .builder(page)
+            .include(notificationsSettings.expandedSectionId)
+            .analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+test(
+    'accessibility scan and aria-snapshot of Keywords that trigger notifications section',
+    {tag: ['@accessibility', '@settings', '@notification_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        const notificationsSettings = settingsModal.notificationsSettings;
+
+        // # Click Edit on Keywords that trigger notifications section
+        await notificationsSettings.keywordsTriggerNotificationsEditButton.click();
+
+        // * Verify aria snapshot of Keywords that trigger notifications section when expanded
+        await notificationsSettings.expandedSection.waitFor();
+        await expect(notificationsSettings.expandedSection).toMatchAriaSnapshot(`
+      - heading "Keywords that trigger notifications" [level=4]
+      - group "Keywords that trigger notifications":
+        - checkbox "Your case-sensitive first name \\"${user.first_name}\\""
+        - text: Your case-sensitive first name "${user.first_name}"
+        - checkbox "Your non case-sensitive username \\"${user.username}\\""
+        - text: Your non case-sensitive username "${user.username}"
+        - checkbox "Channel-wide mentions \\"@channel\\", \\"@all\\", \\"@here\\"" [checked]
+        - text: Channel-wide mentions "@channel", "@all", "@here"
+        - checkbox "Other non case-sensitive words, press Tab or use commas to separate keywords:"
+        - text: "Other non case-sensitive words, press Tab or use commas to separate keywords:"
+        - log
+        - combobox "Keywords that trigger notifications"
+      - text: Notifications are triggered when someone sends a message that includes your username ("@${user.username}") or any of the options selected above.
+      - separator
+      - alert
+      - button "Save"
+      - button "Cancel"
+    `);
+
+        // # Analyze the expanded section for accessibility issues
+        const accessibilityScanResults = await axe
+            .builder(page)
+            .include(notificationsSettings.expandedSectionId)
+            .analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+test(
+    'accessibility scan and aria-snapshot of Keywords that get highlighted (without notifications) section',
+    {tag: ['@accessibility', '@settings', '@notification_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        const notificationsSettings = settingsModal.notificationsSettings;
+
+        // # Click Edit on Keywords that get highlighted (without notifications) section
+        await notificationsSettings.keywordsGetHighlightedEditButton.click();
+
+        // * Verify aria snapshot of Keywords that get highlighted (without notifications) section when expanded
+        await notificationsSettings.expandedSection.waitFor();
+        await expect(notificationsSettings.expandedSection).toMatchAriaSnapshot({
+            name: 'keywords_that_get_highlighted_section.yml',
+        });
+
+        // # Analyze the expanded section for accessibility issues
+        const accessibilityScanResults = await axe
+            .builder(page)
+            .include(notificationsSettings.expandedSectionId)
+            .analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);

e2e-tests/playwright/specs/accessibility/channels/settings_dialog/notifications.spec.ts-snapshots-a11y/desktop-and-mobile-section.yml

@@ -0,0 +1,22 @@
+- heading "Desktop and mobile notifications" [level=4]
+- text: 󰀪
+- heading "Browser notification permission was denied" [level=4]
+- paragraph: You're missing important message and call notifications from Mattermost. To start receiving notifications, please enable notifications for Mattermost in your browser settings.
+- button "How to enable notifications"
+- group "Send notifications for:":
+  - radio "All new messages"
+  - radio "Mentions, direct messages, and group messages" [checked]
+  - text: Mentions, direct messages, and group messages
+  - radio "Nothing"
+- checkbox "Notify me about replies to threads I'm following" [checked]
+- text: Notify me about replies to threads I'm following
+- separator
+- checkbox "Use different settings for my mobile devices"
+- text: "Use different settings for my mobile devices Trigger mobile notifications when I am:"
+- log
+- text: Online, away, or offline
+- combobox "Trigger mobile notifications when I am:"
+- separator
+- alert
+- button "Save"
+- button "Cancel"

e2e-tests/playwright/specs/accessibility/channels/settings_dialog/notifications.spec.ts-snapshots-a11y/desktop-notification-sounds-section.yml

@@ -0,0 +1,10 @@
+- heading "Desktop notification sounds" [level=4]
+- checkbox "Message notification sound" [checked]
+- text: Message notification sound
+- log
+- text: Bing
+- combobox "Message notification sound"
+- separator
+- alert
+- button "Save"
+- button "Cancel"

e2e-tests/playwright/specs/accessibility/channels/settings_dialog/notifications.spec.ts-snapshots-a11y/email-notifications-section.yml

@@ -0,0 +1,16 @@
+- heading "Email notifications" [level=4]
+- group:
+  - group:
+    - radio "On" [checked]
+    - text: "On"
+    - radio "Off"
+    - text: "Off"
+  - text: When enabled, email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes.
+- separator
+- group:
+  - checkbox "Notify me about replies to threads I’m following" [checked]
+  - text: Notify me about replies to threads I’m following
+- separator
+- alert
+- button "Save"
+- button "Cancel"

e2e-tests/playwright/specs/accessibility/channels/settings_dialog/notifications.spec.ts-snapshots-a11y/keywords-that-get-highlighted-section.yml

@@ -0,0 +1,9 @@
+- heading "Keywords that get highlighted (without notifications)" [level=4]
+- text: "Enter non case-sensitive keywords, press Tab or use commas to separate them: option , selected.Select is focused ,type to refine list, press Down to open the menu, press left to focus selected values"
+- log
+- combobox
+- text: These keywords will be shown to you with a highlight when anyone sends a message that includes them.
+- separator
+- alert
+- button "Save"
+- button "Cancel"

e2e-tests/playwright/specs/accessibility/channels/settings_dialog/settings.spec.ts

@@ -0,0 +1,307 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, test} from '@mattermost/playwright-lib';
+
+/**
+ * @objective Verify that focus is properly managed when opening and closing settings modal using keyboard interactions
+ */
+test(
+    'manages focus when opening and closing settings modal with keyboard',
+    {tag: ['@accessibility', '@settings']},
+    async ({pw}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible and focus should be on the modal
+        await expect(settingsModal.container).toBeVisible();
+        await pw.toBeFocusedWithFocusVisible(settingsModal.container);
+
+        // # Press Tab and verify focus is on Close button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(settingsModal.closeButton);
+
+        // # Press Enter and verify Settings modal is closed and focus is back on Settings button
+        await page.keyboard.press('Enter');
+        await expect(settingsModal.container).not.toBeVisible();
+        await pw.toBeFocusedWithFocusVisible(globalHeader.settingsButton);
+
+        // # Open Settings modal again
+        await page.keyboard.press('Enter');
+        await expect(settingsModal.container).toBeVisible();
+
+        // # Press Escape and verify Settings modal is closed and focus is back on Settings button
+        await page.keyboard.press('Escape');
+        await expect(settingsModal.container).not.toBeVisible();
+        await pw.toBeFocusedWithFocusVisible(globalHeader.settingsButton);
+    },
+);
+
+/**
+ * @objective Verify that users can navigate between settings tabs using arrow keys
+ */
+test('navigates between settings tabs using arrow keys', {tag: ['@accessibility', '@settings']}, async ({pw}) => {
+    // # Create and sign in a new user
+    const {user} = await pw.initSetup();
+
+    // # Log in a user in new browser context
+    const {page, channelsPage} = await pw.testBrowser.login(user);
+    const settingsModal = channelsPage.settingsModal;
+
+    // # Visit a default channel page
+    await channelsPage.goto();
+    await channelsPage.toBeVisible();
+
+    // # Set focus to Settings button and press Enter
+    await channelsPage.globalHeader.settingsButton.focus();
+    await page.keyboard.press('Enter');
+
+    // * Settings modal should be visible and focus should be on the modal
+    await expect(settingsModal.container).toBeVisible();
+    await pw.toBeFocusedWithFocusVisible(settingsModal.container);
+
+    // # Press Tab twice and verify focus is on Notifications tab and Notifications Settings panel is visible
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await expect(settingsModal.notificationsTab).toBeVisible();
+    await pw.toBeFocusedWithFocusVisible(settingsModal.notificationsTab);
+    await expect(settingsModal.notificationsSettings.container).toBeVisible();
+
+    // # Press arrow down key and verify focus is on Display tab and Display Settings panel is visible
+    await page.keyboard.press('ArrowDown');
+    await pw.toBeFocusedWithFocusVisible(settingsModal.displayTab);
+    await expect(settingsModal.displaySettings.container).toBeVisible();
+
+    // # Press arrow down key and verify focus is on Sidebar tab and Sidebar Settings panel is visible
+    await page.keyboard.press('ArrowDown');
+    await expect(settingsModal.sidebarTab).toBeVisible();
+    await pw.toBeFocusedWithFocusVisible(settingsModal.sidebarTab);
+    await expect(settingsModal.sidebarSettings.container).toBeVisible();
+
+    // # Press Tab and verify focus is on Advanced tab and Advanced Settings panel is visible
+    await page.keyboard.press('ArrowDown');
+    await pw.toBeFocusedWithFocusVisible(settingsModal.advancedTab);
+    await expect(settingsModal.advancedSettings.container).toBeVisible();
+
+    // # Press arrow down through the tabs plugins add after Advanced, Calls among them
+    const builtInTabs = 4;
+    const lastTab = settingsModal.tabs.last();
+    for (let i = 0; i < (await settingsModal.tabs.count()) - builtInTabs; i++) {
+        await page.keyboard.press('ArrowDown');
+    }
+    await pw.toBeFocusedWithFocusVisible(lastTab);
+
+    // # Press arrow down key and verify focus is back on Notifications tab and Notifications Settings panel is visible
+    await page.keyboard.press('ArrowDown');
+    await expect(settingsModal.notificationsTab).toBeVisible();
+    await pw.toBeFocusedWithFocusVisible(settingsModal.notificationsTab);
+    await expect(settingsModal.notificationsSettings.container).toBeVisible();
+
+    // # Press arrow up key and verify focus wraps to the last tab
+    await page.keyboard.press('ArrowUp');
+    await pw.toBeFocusedWithFocusVisible(lastTab);
+});
+
+/**
+ * @objective Verify that notifications settings panel meets WCAG accessibility standards
+ */
+test(
+    'passes accessibility scan on notifications settings panel',
+    {tag: ['@accessibility', '@settings']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await channelsPage.globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal on notifications panel should be visible
+        await expect(settingsModal.container).toBeVisible();
+        await expect(settingsModal.notificationsSettings.container).toBeVisible();
+
+        // * Analyze the Settings modal with notifications panel
+        const accessibilityScanResults = await axe
+            .builder(page, {disableColorContrast: true})
+            .disableRules([
+                'color-contrast',
+
+                // Known issue: These fail due to the way setting tabs are grouped.
+                'aria-required-children',
+                'aria-required-parent',
+            ])
+            .include(settingsModal.getContainerId())
+            .analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+/**
+ * @objective Verify that display settings panel meets WCAG accessibility standards
+ */
+test(
+    'passes accessibility scan on display settings panel',
+    {tag: ['@accessibility', '@settings']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await channelsPage.globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings dialog should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        // # Open Display tab
+        await settingsModal.openDisplayTab();
+
+        // * Display Settings panel should be visible
+        await expect(settingsModal.displaySettings.container).toBeVisible();
+
+        // * Analyze the Settings modal with display panel
+        const accessibilityScanResults = await axe
+            .builder(page, {disableColorContrast: true})
+            .disableRules([
+                'color-contrast',
+
+                // Known issue: These fail due to the way setting tabs are grouped.
+                'aria-required-children',
+                'aria-required-parent',
+            ])
+            .include(settingsModal.getContainerId())
+            .analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+/**
+ * @objective Verify that sidebar settings panel meets WCAG accessibility standards
+ */
+test(
+    'passes accessibility scan on sidebar settings panel',
+    {tag: ['@accessibility', '@settings']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await channelsPage.globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings dialog should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        // # Open Sidebar tab
+        await settingsModal.openSidebarTab();
+
+        // * Sidebar Settings panel should be visible
+        await expect(settingsModal.sidebarSettings.container).toBeVisible();
+
+        // * Analyze the Settings modal with sidebar panel
+        const accessibilityScanResults = await axe
+            .builder(page, {disableColorContrast: true})
+            .disableRules([
+                'color-contrast',
+
+                // Known issue: These fail due to the way setting tabs are grouped.
+                'aria-required-children',
+                'aria-required-parent',
+            ])
+            .include(settingsModal.getContainerId())
+            .analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+/**
+ * @objective Verify that advanced settings panel meets WCAG accessibility standards
+ */
+test(
+    'passes accessibility scan on advanced settings panel',
+    {tag: ['@accessibility', '@settings']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await channelsPage.globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings dialog should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        // # Open Advanced tab
+        await settingsModal.openAdvancedTab();
+
+        // * Advanced Settings panel should be visible
+        await expect(settingsModal.advancedSettings.container).toBeVisible();
+
+        // * Analyze the Settings modal with advanced panel
+        const accessibilityScanResults = await axe
+            .builder(page, {disableColorContrast: true})
+            .disableRules([
+                'color-contrast',
+
+                // Known issue: These fail due to the way setting tabs are grouped.
+                'aria-required-children',
+                'aria-required-parent',
+            ])
+            .include(settingsModal.getContainerId())
+            .analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);

e2e-tests/playwright/specs/accessibility/channels/settings_dialog/sidebar.spec.ts

@@ -0,0 +1,210 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, test} from '@mattermost/playwright-lib';
+
+/**
+ * @objective Verify keyboard navigation works correctly through all interactive elements in the Sidebar settings panel
+ */
+test(
+    'navigate on keyboard tab between interactive elements',
+    {tag: ['@accessibility', '@settings', '@sidebar_settings']},
+    async ({pw}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+        const sidebarSettings = settingsModal.sidebarSettings;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible and focus should be on the modal
+        await expect(settingsModal.container).toBeVisible();
+        await pw.toBeFocusedWithFocusVisible(settingsModal.container);
+
+        // # Press Tab and verify focus is on Close button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(settingsModal.closeButton);
+
+        // # Press Tab to move focus to Notifications tab
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(settingsModal.notificationsTab);
+
+        // # Press ArrowDown to navigate to Display tab
+        await page.keyboard.press('ArrowDown');
+        await pw.toBeFocusedWithFocusVisible(settingsModal.displayTab);
+
+        // # Press ArrowDown to navigate to Sidebar tab
+        await page.keyboard.press('ArrowDown');
+        await pw.toBeFocusedWithFocusVisible(settingsModal.sidebarTab);
+
+        // # Press Tab to move focus to Group unread channels separately button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(sidebarSettings.groupUnreadEditButton);
+
+        // # Press Tab to move focus to Number of direct messages to show button
+        await page.keyboard.press('Tab');
+        await pw.toBeFocusedWithFocusVisible(sidebarSettings.limitVisibleDMsEditButton);
+    },
+);
+
+/**
+ * @objective Verify the Sidebar settings panel passes accessibility scan and matches aria snapshot
+ */
+test(
+    'accessibility scan and aria-snapshot of Sidebar settings panel',
+    {tag: ['@accessibility', '@settings', '@sidebar_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        // # Open Sidebar tab
+        await settingsModal.openSidebarTab();
+
+        // * Verify aria snapshot of Sidebar settings tab
+        await expect(settingsModal.sidebarSettings.container).toMatchAriaSnapshot(`
+          - tabpanel "sidebar":
+            - heading "Sidebar Settings" [level=3]
+            - heading "Group unread channels separately" [level=4]
+            - button "Group unread channels separately Edit": Edit
+            - text: "Off"
+            - heading "Number of direct messages to show" [level=4]
+            - button "Number of direct messages to show Edit": Edit
+            - text: "40"
+        `);
+
+        // * Analyze the Sidebar settings panel for accessibility issues
+        const accessibilityScanResults = await axe
+            .builder(page, {disableColorContrast: true})
+            .include(settingsModal.sidebarSettings.id)
+            .analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+/**
+ * @objective Verify the Group unread channels separately section passes accessibility scan when expanded
+ */
+test(
+    'accessibility scan and aria-snapshot of Group unread channels separately section',
+    {tag: ['@accessibility', '@settings', '@sidebar_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        // # Open Sidebar tab
+        await settingsModal.openSidebarTab();
+
+        const sidebarSettings = settingsModal.sidebarSettings;
+
+        // # Click Edit on Group unread channels separately section
+        await sidebarSettings.groupUnreadEditButton.click();
+
+        // * Verify aria snapshot of Group unread channels separately section when expanded
+        await sidebarSettings.expandedSection.waitFor();
+        await expect(sidebarSettings.expandedSection).toMatchAriaSnapshot({
+            name: 'group_unread_channels_section.yml',
+        });
+
+        // # Analyze the expanded section for accessibility issues
+        const accessibilityScanResults = await axe.builder(page).include(sidebarSettings.expandedSectionId).analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);
+
+/**
+ * @objective Verify the Number of direct messages to show section passes accessibility scan when expanded
+ */
+test(
+    'accessibility scan and aria-snapshot of Number of direct messages to show section',
+    {tag: ['@accessibility', '@settings', '@sidebar_settings', '@snapshots']},
+    async ({pw, axe}) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
+
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
+        const globalHeader = channelsPage.globalHeader;
+        const settingsModal = channelsPage.settingsModal;
+
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
+
+        // # Set focus to Settings button and press Enter
+        await globalHeader.settingsButton.focus();
+        await page.keyboard.press('Enter');
+
+        // * Settings modal should be visible
+        await expect(settingsModal.container).toBeVisible();
+
+        // # Open Sidebar tab
+        await settingsModal.openSidebarTab();
+
+        const sidebarSettings = settingsModal.sidebarSettings;
+
+        // # Click Edit on Number of direct messages to show section
+        await sidebarSettings.limitVisibleDMsEditButton.click();
+
+        // * Verify aria snapshot of Number of direct messages to show section when expanded
+        await sidebarSettings.expandedSection.waitFor();
+        await expect(sidebarSettings.expandedSection).toMatchAriaSnapshot({
+            name: 'number_of_direct_messages_section.yml',
+        });
+
+        // # Analyze the expanded section for accessibility issues
+        const accessibilityScanResults = await axe
+            .builder(page)
+            .include(sidebarSettings.expandedSectionId)
+            .exclude('#react-select-2-input') // Exclude react-select input that has a known accessibility issue
+            .analyze();
+
+        // * Should have no violation
+        expect(accessibilityScanResults.violations).toHaveLength(0);
+    },
+);

e2e-tests/playwright/specs/accessibility/channels/settings_dialog/sidebar.spec.ts-snapshots-a11y/group-unread-channels-section.yml

@@ -0,0 +1,9 @@
+- heading "Group unread channels separately" [level=4]
+- group "Group unread channels separately":
+  - radio "On"
+  - radio "Off" [checked]
+  - text: Off When enabled, all unread channels and direct messages will be grouped together in the sidebar.
+- separator
+- alert
+- button "Save"
+- button "Cancel"

e2e-tests/playwright/specs/accessibility/channels/settings_dialog/sidebar.spec.ts-snapshots-a11y/number-of-direct-messages-section.yml

@@ -0,0 +1,10 @@
+- heading "Number of direct messages to show" [level=4]
+- group "Number of direct messages to show":
+  - text: /Number of direct messages to show option \d+, selected\.Select is focused , press Down to open the menu,/
+  - log
+  - combobox
+  - text: You can also change these settings in the direct messages sidebar menu.
+- separator
+- alert
+- button "Save"
+- button "Cancel"