[MM-61637]: Add accessible name to the expand RHS button in RHS header (#29783)

* [MA-48]: Add aria-label

* [MA-48]: Update snapshots

* [MA-48]: Fix E2E tests

e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_buttons_spec.js

@@ -35,11 +35,7 @@ describe('Verify Accessibility Support in different Buttons', () => {
             within(() => {
                 // * Verify accessibility support in Sidebar Expand and Shrink icon
                 cy.get('button.sidebar--right__expand').
-                    should('have.attr', 'aria-label', 'Expand').
-                    within(() => {
-                        cy.get('.icon-arrow-expand').should('have.attr', 'aria-label', 'Expand Sidebar Icon');
-                        cy.get('.icon-arrow-collapse').should('have.attr', 'aria-label', 'Collapse Sidebar Icon');
-                    });
+                    should('have.attr', 'aria-label', 'Expand Sidebar Icon');
 
                 // * Verify accessibility support in Close icon
                 cy.get('#rhsCloseButton').

e2e-tests/cypress/tests/support/ui/sidebar_right.js

@@ -19,7 +19,7 @@ Cypress.Commands.add('uiCloseRHS', () => {
 });
 
 Cypress.Commands.add('uiExpandRHS', () => {
-    cy.findByLabelText('Expand').click();
+    cy.findByLabelText('Expand Sidebar Icon').click();
 });
 
 Cypress.Commands.add('isExpanded', {prevSubject: true}, (subject) => {

webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx

@@ -130,6 +130,9 @@ class RhsCardHeader extends React.PureComponent<Props> {
             );
         }
 
+        const collapseIconLabel = this.props.intl.formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'});
+        const expandIconLabel = this.props.intl.formatMessage({id: 'rhs_header.expandSidebarTooltip.icon', defaultMessage: 'Expand Sidebar Icon'});
+
         return (
             <div className='sidebar--right__header'>
                 <span className='sidebar--right__title'>
@@ -146,16 +149,14 @@ class RhsCardHeader extends React.PureComponent<Props> {
                         <button
                             type='button'
                             className='sidebar--right__expand btn btn-icon btn-sm'
-                            aria-label='Expand'
+                            aria-label={this.props.isExpanded ? collapseIconLabel : expandIconLabel}
                             onClick={this.props.actions.toggleRhsExpanded}
                         >
                             <i
                                 className='icon icon-arrow-expand'
-                                aria-label={this.props.intl.formatMessage({id: 'rhs_header.expandSidebarTooltip.icon', defaultMessage: 'Expand Sidebar Icon'})}
                             />
                             <i
                                 className='icon icon-arrow-collapse'
-                                aria-label={this.props.intl.formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'})}
                             />
                         </button>
                     </WithTooltip>

webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx

@@ -162,6 +162,9 @@ class RhsHeaderPost extends React.PureComponent<Props> {
             );
         }
 
+        const collapseIconLabel = formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'});
+        const expandIconLabel = formatMessage({id: 'rhs_header.expandSidebarTooltip.icon', defaultMessage: 'Expand Sidebar Icon'});
+
         return (
             <div className='sidebar--right__header'>
                 <span className='sidebar--right__title'>
@@ -194,16 +197,14 @@ class RhsHeaderPost extends React.PureComponent<Props> {
                         <button
                             type='button'
                             className='sidebar--right__expand btn btn-icon btn-sm'
-                            aria-label='Expand'
+                            aria-label={this.props.isExpanded ? collapseIconLabel : expandIconLabel}
                             onClick={this.props.toggleRhsExpanded}
                         >
                             <i
                                 className='icon icon-arrow-expand'
-                                aria-label={formatMessage({id: 'rhs_header.expandSidebarTooltip.icon', defaultMessage: 'Expand Sidebar Icon'})}
                             />
                             <i
                                 className='icon icon-arrow-collapse'
-                                aria-label={formatMessage({id: 'rhs_header.collapseSidebarTooltip.icon', defaultMessage: 'Collapse Sidebar Icon'})}
                             />
                         </button>
                     </WithTooltip>