[MM-61627]: Fix focus order in sidebar (#29743)

e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_sidebar_spec.ts

@@ -85,7 +85,7 @@ describe('Verify Accessibility Support in Channel Sidebar Navigation', () => {
         cy.focused().parent().next().find('.SidebarChannel').each((el, i) => {
             if (i === 0) {
                 cy.focused().findByText('CHANNELS');
-                cy.focused().tab().tab().tab();
+                cy.focused().tab().tab();
             }
 
             // * Verify if focus changes to different channels in Channels section
@@ -120,7 +120,7 @@ describe('Verify Accessibility Support in Channel Sidebar Navigation', () => {
         cy.focused().tab().tab().parent().next().find('.SidebarChannel').each((el, i) => {
             if (i === 0) {
                 cy.focused().findByText('FAVORITES');
-                cy.focused().tab().tab().tab();
+                cy.focused().tab().tab();
             }
 
             cy.wrap(el).find('.SidebarLink').should('be.focused');

webapp/channels/src/components/sidebar/sidebar_category/sidebar_category.tsx

@@ -108,6 +108,7 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
 
     handleA11yKeyDown = (e: KeyboardEvent<HTMLButtonElement>['nativeEvent']) => {
         if (isKeyPressed(e, Constants.KeyCodes.ENTER)) {
+            e.preventDefault();
             this.handleCollapse();
         }
     };

webapp/channels/src/components/sidebar/sidebar_category_header.tsx

@@ -71,6 +71,7 @@ export const SidebarCategoryHeader = React.forwardRef((props: Props, ref?: React
                 <div
                     className='SidebarChannelGroupHeader_text'
                     {...dragHandleProps}
+                    tabIndex={-1}
                 >
                     {wrapEmojis(props.displayName)}
                 </div>