[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>

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');

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');
         });

webapp/channels/src/components/team_sidebar/components/team_button.tsx

@@ -179,20 +179,23 @@ export default function TeamButton({
         >
             {(provided, snapshot) => {
                 return (
-                    <div
+                    <Link
-                        className='draggable-team-container'
+                        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>

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 {