From 54207acd6a47b743a2913e35b375d4b71dcdddec Mon Sep 17 00:00:00 2001
From: Saurabh Sharma <saurabh.sharma@brightscout.com>
Date: Fri, 24 Jan 2025 20:22:16 +0530
Subject: [PATCH] [MM-61631]: Remove focusable child descendants (#29745)

* [MA-37]: Remove focusable child descendants

* [MA-37]: Fix E2E tests

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../channels/integrations/slash_commands_spec.js    |  4 ++--
 .../channels/multi_team_and_dm/multi_team_spec.js   |  2 +-
 .../team_sidebar/components/team_button.tsx         | 13 ++++++++-----
 webapp/channels/src/sass/layout/_team-sidebar.scss  |  5 +++++
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/e2e-tests/cypress/tests/integration/channels/integrations/slash_commands_spec.js b/e2e-tests/cypress/tests/integration/channels/integrations/slash_commands_spec.js
index 45ca364c04..8a9fb2eb9f 100644
--- a/e2e-tests/cypress/tests/integration/channels/integrations/slash_commands_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/integrations/slash_commands_spec.js
@@ -152,7 +152,7 @@ describe('Integrations', () => {
         cy.uiWaitUntilMessagePostedIncludes(firstMessage);
 
         // * The user stays in the same team
-        cy.get(`#${team1.name}TeamButton`).parent().should('have.class', 'active');
+        cy.get(`#${team1.name}TeamButton`).children().should('have.class', 'active');
 
         // * The user is in the DM channel with user2
         cy.get(`#sidebarItem_${Cypress._.sortBy([user1.id, user2.id]).join('__')}`).parent().should('be.visible').and('have.class', 'active');
@@ -168,7 +168,7 @@ describe('Integrations', () => {
         cy.uiWaitUntilMessagePostedIncludes(secondMessage);
 
         // * The user stays in the same team
-        cy.get(`#${team2.name}TeamButton`).parent().should('have.class', 'active');
+        cy.get(`#${team2.name}TeamButton`).children().should('have.class', 'active');
 
         // * The user is in the DM channel with user2
         cy.get(`#sidebarItem_${Cypress._.sortBy([user1.id, user2.id]).join('__')}`).parent().should('be.visible').and('have.class', 'active');
diff --git a/e2e-tests/cypress/tests/integration/channels/multi_team_and_dm/multi_team_spec.js b/e2e-tests/cypress/tests/integration/channels/multi_team_and_dm/multi_team_spec.js
index 66a8563af0..2608de47a7 100644
--- a/e2e-tests/cypress/tests/integration/channels/multi_team_and_dm/multi_team_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/multi_team_and_dm/multi_team_spec.js
@@ -142,7 +142,7 @@ describe('Send a DM', () => {
         // * Dot appears, with no number (just unread, not a mention)
         cy.apiLogin(userA);
         cy.visit(offTopicUrlB);
-        cy.get(`#${teamA.name}TeamButton`).parent('.unread').should('be.visible');
+        cy.get(`#${teamA.name}TeamButton`).children('.unread').should('be.visible');
         cy.get(`#${teamA.name}TeamButton`).should('be.visible').within(() => {
             cy.get('.badge').should('not.exist');
         });
diff --git a/webapp/channels/src/components/team_sidebar/components/team_button.tsx b/webapp/channels/src/components/team_sidebar/components/team_button.tsx
index cbd774fc5e..a90032dce2 100644
--- a/webapp/channels/src/components/team_sidebar/components/team_button.tsx
+++ b/webapp/channels/src/components/team_sidebar/components/team_button.tsx
@@ -179,20 +179,23 @@ export default function TeamButton({
         >
             {(provided, snapshot) => {
                 return (
-                    <div
-                        className='draggable-team-container'
+                    <Link
+                        to={url}
+                        id={`${url.slice(1)}TeamButton`}
+                        aria-label={ariaLabel}
+                        onClick={handleSwitch}
+                        className='draggable-team-container inline-block'
                         ref={provided.innerRef}
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
-                        tabIndex={-1}
                     >
                         <div
                             className={classNames([`team-container ${teamClass}`, {isDragging: snapshot.isDragging}])}
                         >
-                            {teamButton}
+                            {btn}
                             {orderIndicator}
                         </div>
-                    </div>
+                    </Link>
                 );
             }}
         </Draggable>
diff --git a/webapp/channels/src/sass/layout/_team-sidebar.scss b/webapp/channels/src/sass/layout/_team-sidebar.scss
index d7dfdcb8be..fd4c8a98d0 100644
--- a/webapp/channels/src/sass/layout/_team-sidebar.scss
+++ b/webapp/channels/src/sass/layout/_team-sidebar.scss
@@ -32,9 +32,14 @@
 
         .draggable-team-container {
             position: relative;
+            display: inline-block;
             margin-right: auto;
             margin-bottom: 12px;
             margin-left: auto;
+
+            &:hover, &:focus {
+                text-decoration: none;
+            }
         }
 
         .team-container {