From b0b379e167f92dcd219047d343ef7334e3a10637 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20V=C3=A9lez?= <pablovv2012@gmail.com>
Date: Wed, 19 Feb 2025 00:26:41 -0500
Subject: [PATCH] MM-61634 - adjust rhs a11y  structure (#30168)

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 webapp/channels/src/components/channel_info_rhs/header.tsx | 4 +++-
 .../channels/src/components/channel_members_rhs/header.tsx | 4 +++-
 .../__snapshots__/post_edit_history.test.tsx.snap          | 2 ++
 .../components/resizable_sidebar/resizable_rhs/index.tsx   | 7 ++++++-
 .../src/components/rhs_card_header/rhs_card_header.tsx     | 5 ++++-
 .../src/components/rhs_header_post/rhs_header_post.tsx     | 5 ++++-
 .../search_results_header/search_results_header.tsx        | 5 ++++-
 .../src/components/sidebar_right/sidebar_right.tsx         | 4 ++++
 8 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/webapp/channels/src/components/channel_info_rhs/header.tsx b/webapp/channels/src/components/channel_info_rhs/header.tsx
index 0e7cab25a8..8533a16ae0 100644
--- a/webapp/channels/src/components/channel_info_rhs/header.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/channel_members_rhs/header.tsx b/webapp/channels/src/components/channel_members_rhs/header.tsx
index 3239a53b40..47d4749b32 100644
--- a/webapp/channels/src/components/channel_members_rhs/header.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap b/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap
index 15103bdb2a..3eaf7673ca 100644
--- a/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap
+++ b/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
diff --git a/webapp/channels/src/components/resizable_sidebar/resizable_rhs/index.tsx b/webapp/channels/src/components/resizable_sidebar/resizable_rhs/index.tsx
index 94abac08d3..8bb64dd322 100644
--- a/webapp/channels/src/components/resizable_sidebar/resizable_rhs/index.tsx
+++ b/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
diff --git a/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx b/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx
index 6a93b0c042..5f943bf9fc 100644
--- a/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx b/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx
index 704b1da407..ce44134e02 100644
--- a/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/search_results_header/search_results_header.tsx b/webapp/channels/src/components/search_results_header/search_results_header.tsx
index f59cd3814a..920d178244 100644
--- a/webapp/channels/src/components/search_results_header/search_results_header.tsx
+++ b/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'
diff --git a/webapp/channels/src/components/sidebar_right/sidebar_right.tsx b/webapp/channels/src/components/sidebar_right/sidebar_right.tsx
index 47812b2c84..8323d03781 100644
--- a/webapp/channels/src/components/sidebar_right/sidebar_right.tsx
+++ b/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}