MM-61634 - adjust rhs a11y structure (#30168)

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/channel_info_rhs/header.tsx

@@ -41,7 +41,9 @@ const Header = ({channel, isArchived, isMobile, onClose}: Props) => {
                         />
                     </button>
                 )}
-                <HeaderTitle>
+                <HeaderTitle
+                    id='rhsPanelTitle'
+                >
                     <FormattedMessage
                         id='channel_info_rhs.header.title'
                         defaultMessage='Info'

webapp/channels/src/components/channel_members_rhs/header.tsx

@@ -40,7 +40,9 @@ const Header = ({channel, canGoBack, onClose, goBack}: Props) => {
                     </button>
                 )}
 
-                <HeaderTitle>
+                <HeaderTitle
+                    id='rhsPanelTitle'
+                >
                     <FormattedMessage
                         id='channel_members_rhs.header.title'
                         defaultMessage='Members'

webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap

@@ -18,6 +18,7 @@ exports[`components/post_edit_history should display error screen if errors are
         >
           <span
             class="sidebar--right__title"
+            id="rhsPanelTitle"
           >
             Edit History
             <div
@@ -181,6 +182,7 @@ exports[`components/post_edit_history should match snapshot 1`] = `
         >
           <span
             class="sidebar--right__title"
+            id="rhsPanelTitle"
           >
             Edit History
             <div

webapp/channels/src/components/resizable_sidebar/resizable_rhs/index.tsx

@@ -14,6 +14,8 @@ import {shouldRhsOverlapChannelView} from '../utils';
 interface Props extends HTMLAttributes<'div'> {
     children: React.ReactNode;
     rightWidthHolderRef: React.RefObject<HTMLDivElement>;
+    ariaLabel?: string;
+    ariaLabeledby?: string;
 }
 
 function ResizableRhs({
@@ -22,6 +24,8 @@ function ResizableRhs({
     id,
     className,
     rightWidthHolderRef,
+    ariaLabel,
+    ariaLabeledby,
 }: Props) {
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -91,7 +95,8 @@ function ResizableRhs({
             className={className}
             role={role}
             ref={containerRef}
-            aria-labelledby='rhsPanelTitle'
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabeledby || 'rhsPanelTitle'}
         >
             {children}
             <ResizableDivider

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

@@ -135,7 +135,10 @@ class RhsCardHeader extends React.PureComponent<Props> {
 
         return (
             <div className='sidebar--right__header'>
-                <span className='sidebar--right__title'>
+                <span
+                    className='sidebar--right__title'
+                    id='rhsPanelTitle'
+                >
                     {back}
                     <FormattedMessage
                         id='search_header.title5'

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

@@ -167,7 +167,10 @@ class RhsHeaderPost extends React.PureComponent<Props> {
 
         return (
             <div className='sidebar--right__header'>
-                <span className='sidebar--right__title'>
+                <span
+                    className='sidebar--right__title'
+                    id='rhsPanelTitle'
+                >
                     {back}
                     <FormattedMessage
                         id='rhs_header.details'

webapp/channels/src/components/search_results_header/search_results_header.tsx

@@ -52,7 +52,10 @@ function SearchResultsHeader(props: Props) {
 
     return (
         <div className='sidebar--right__header'>
-            <span className='sidebar--right__title'>
+            <span
+                className='sidebar--right__title'
+                id='rhsPanelTitle'
+            >
                 {props.canGoBack && (
                     <button
                         className='sidebar--right__back btn btn-icon btn-sm'

webapp/channels/src/components/sidebar_right/sidebar_right.tsx

@@ -52,6 +52,8 @@ export type Props = {
     selectedPostCardId: string;
     isSavedPosts?: boolean;
     isRecentMentions?: boolean;
+    ariaLabel?: string;
+    ariaLabeledby?: string;
     actions: {
         setRhsExpanded: (expanded: boolean) => void;
         showPinnedPosts: (channelId: string) => void;
@@ -339,6 +341,8 @@ export default class SidebarRight extends React.PureComponent<Props, State> {
                     id='sidebar-right'
                     role='region'
                     rightWidthHolderRef={this.sidebarRightWidthHolder}
+                    ariaLabel={this.props.ariaLabel}
+                    ariaLabeledby={this.props.ariaLabeledby}
                 >
                     <div
                         tabIndex={-1}