From e8119119d6e45fad60c44e093db30ddd911d2fe8 Mon Sep 17 00:00:00 2001
From: arbirali <rahat.ali@arbisoft.com>
Date: Mon, 12 May 2025 19:24:00 +0500
Subject: [PATCH 1/3] fix: wrap meaningful icons with text to improve screen
 reader output

---
 src/assets/Empty.jsx                          |  2 +-
 src/discussions/common/HoverCard.jsx          | 28 +++++++++++--------
 .../posts/post-editor/PostEditor.jsx          |  4 +--
 .../posts/post-editor/PostTypeCard.jsx        |  2 +-
 src/discussions/posts/post/LikeButton.jsx     | 19 +++++++------
 src/discussions/posts/post/PostFooter.jsx     | 27 ++++++++++--------
 .../posts/post/PostSummaryFooter.jsx          | 21 ++++++++------
 7 files changed, 59 insertions(+), 44 deletions(-)

diff --git a/src/assets/Empty.jsx b/src/assets/Empty.jsx
index f9432b8fe..c6e244b9e 100644
--- a/src/assets/Empty.jsx
+++ b/src/assets/Empty.jsx
@@ -1,5 +1,5 @@
 const Empty = () => (
-  <svg width="246" height="204" viewBox="0 0 246 204" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg width="246" height="204" viewBox="0 0 246 204" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M15.966 80.706C1.93 101.534-5.315 125.86 4.558 148.18c17.989 40.665 116.015 29.236 158.702 13.267 120.227-44.976 62.415-162.99-67.596-133.809-36.401 8.17-65.661 32.239-79.698 53.068Z" fill="#D7D3D1" fillOpacity="0.3" />
     <path d="M95.6307 23.4976C101.102 13.3476 109.932 6.31365 123.036 10.536C124.191 11.0005 125.403 11.311 126.639 11.4597C127.895 11.386 129.146 11.2369 130.384 11.0131C136.292 10.5259 140.656 16.2505 143.529 21.427C148.867 31.0796 158.622 44.1833 156.724 55.7847C155.252 64.7776 146.797 71.0097 138.261 74.1562C128.636 77.7063 118.244 78.655 108.136 76.9069C103.061 76.034 97.813 74.3288 94.159 70.6443C89.084 65.5084 88.069 57.6016 88.4547 50.3443C88.9926 42.2345 91.1749 31.8104 95.6307 23.4976Z" fill="#EEEAE9" />
     <path d="M117.991 78.2569C114.66 78.2567 111.336 77.9715 108.054 77.4043C101.649 76.3081 97.0006 74.2172 93.8439 71.0098C89.4084 66.554 87.4393 59.652 87.9772 50.3952C88.5558 40.7933 91.2557 30.6534 95.2142 23.2845C99.8528 14.657 108.46 5.35964 123.137 10.0895L123.837 10.3331C124.73 10.6795 125.665 10.9015 126.618 10.9929C127.348 10.9968 128.077 10.9219 128.79 10.7696C129.278 10.6884 129.805 10.597 130.303 10.5564C135.165 10.1403 139.752 13.7334 143.894 21.2038C144.848 22.9293 145.924 24.7563 147.091 26.6949C152.278 35.3732 158.733 46.1728 157.139 55.866C155.871 63.712 148.877 70.7155 138.392 74.5928C131.864 77.0187 124.955 78.2596 117.991 78.2569ZM96.0972 23.721C92.1996 30.9782 89.5302 40.976 88.9922 50.4459C88.4543 59.3982 90.332 66.0972 94.5544 70.3602C97.5994 73.4053 102.076 75.4352 108.277 76.4502C118.3 78.1754 128.602 77.223 138.139 73.6894C148.289 69.9238 155.079 63.1842 156.307 55.6732C157.84 46.325 151.486 35.6777 146.38 27.1212C145.223 25.1826 144.127 23.3556 143.163 21.6199C139.214 14.5149 134.941 11.0741 130.465 11.4699C129.988 11.4699 129.521 11.5917 129.034 11.6729C128.218 11.8545 127.384 11.9464 126.547 11.947C125.503 11.8549 124.477 11.6122 123.502 11.2263L122.812 10.9929C108.744 6.45585 100.482 15.4284 95.9957 23.7413L96.0972 23.721Z" fill="#454545" />
diff --git a/src/discussions/common/HoverCard.jsx b/src/discussions/common/HoverCard.jsx
index a47777676..e01c2ce2b 100644
--- a/src/discussions/common/HoverCard.jsx
+++ b/src/discussions/common/HoverCard.jsx
@@ -14,6 +14,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { ThreadType } from '../../data/constants';
 import { useHasLikePermission, useUserPostingEnabled } from '../data/hooks';
 import PostCommentsContext from '../post-comments/postCommentsContext';
+import messages from '../posts/post/messages';
 import ActionsDropdown from './ActionsDropdown';
 import DiscussionContext from './context';
 
@@ -67,17 +68,20 @@ const HoverCard = ({
             )}
             trigger={['hover', 'focus']}
           >
-            <IconButton
-              src={endorseIcons.icon}
-              iconAs={Icon}
-              onClick={() => {
-                const actionFunction = actionHandlers[endorseIcons.action];
-                actionFunction();
-              }}
-              className={['endorse', 'unendorse'].includes(endorseIcons.id) ? 'text-dark-500' : 'text-success-500'}
-              size="sm"
-              alt="Endorse"
-            />
+            <div>
+              <IconButton
+                src={endorseIcons.icon}
+                iconAs={Icon}
+                onClick={() => {
+                  const actionFunction = actionHandlers[endorseIcons.action];
+                  actionFunction();
+                }}
+                className={['endorse', 'unendorse'].includes(endorseIcons.id) ? 'text-dark-500' : 'text-success-500'}
+                size="sm"
+                alt="Endorse"
+              />
+              <span className="sr-only">{intl.formatMessage(endorseIcons.label)}</span>
+            </div>
           </OverlayTrigger>
         </div>
       )}
@@ -94,6 +98,7 @@ const HoverCard = ({
             onLike();
           }}
         />
+        <span className="sr-only">{intl.formatMessage(messages.like)}</span>
       </div>
       {following !== undefined && (
         <div className="hover-button">
@@ -108,6 +113,7 @@ const HoverCard = ({
               onFollow();
             }}
           />
+          <span className="sr-only">{intl.formatMessage(messages.follow)}</span>
         </div>
       )}
       <div className="hover-button ml-auto">
diff --git a/src/discussions/posts/post-editor/PostEditor.jsx b/src/discussions/posts/post-editor/PostEditor.jsx
index a2f57959c..a58569cd9 100644
--- a/src/discussions/posts/post-editor/PostEditor.jsx
+++ b/src/discussions/posts/post-editor/PostEditor.jsx
@@ -259,13 +259,13 @@ const PostEditor = ({
             value="discussion"
             selected={values.postType === 'discussion'}
             type={intl.formatMessage(messages.discussionType)}
-            icon={<Post />}
+            icon={<Post aria-hidden />}
           />
           <PostTypeCard
             value="question"
             selected={values.postType === 'question'}
             type={intl.formatMessage(messages.questionType)}
-            icon={<Help />}
+            icon={<Help aria-hidden />}
           />
         </Form.RadioSet>
         <div className="d-flex flex-row my-4.5 justify-content-between">
diff --git a/src/discussions/posts/post-editor/PostTypeCard.jsx b/src/discussions/posts/post-editor/PostTypeCard.jsx
index b735e7b6f..f712e8ebe 100644
--- a/src/discussions/posts/post-editor/PostTypeCard.jsx
+++ b/src/discussions/posts/post-editor/PostTypeCard.jsx
@@ -26,7 +26,7 @@ const PostTypeCard = ({
       >
         <Card.Section className="px-4 py-3 d-flex flex-column align-items-center">
           <span className="text-primary-300 mb-0.5">{icon}</span>
-          <span className="text-gray-700">{type}</span>
+          <span className="text-gray-700" aria-hidden>{type}</span>
         </Card.Section>
       </Card>
     </label>
diff --git a/src/discussions/posts/post/LikeButton.jsx b/src/discussions/posts/post/LikeButton.jsx
index f54d01e76..b64652336 100644
--- a/src/discussions/posts/post/LikeButton.jsx
+++ b/src/discussions/posts/post/LikeButton.jsx
@@ -29,14 +29,17 @@ const LikeButton = ({ count, onClick, voted }) => {
           </Tooltip>
         )}
       >
-        <IconButton
-          src={voted ? ThumbUpFilled : ThumbUpOutline}
-          onClick={handleClick}
-          className="post-footer-icon-dimensions"
-          alt="Like"
-          iconAs={Icon}
-          iconClassNames="like-icon-dimensions"
-        />
+        <div>
+          <IconButton
+            src={voted ? ThumbUpFilled : ThumbUpOutline}
+            onClick={handleClick}
+            className="post-footer-icon-dimensions"
+            alt="Like"
+            iconAs={Icon}
+            iconClassNames="like-icon-dimensions"
+          />
+          <span className="sr-only">{intl.formatMessage(messages.like)}</span>
+        </div>
       </OverlayTrigger>
       <div className="font-style">
         {(count && count > 0) ? count : null}
diff --git a/src/discussions/posts/post/PostFooter.jsx b/src/discussions/posts/post/PostFooter.jsx
index e61377bd0..28d1da7a1 100644
--- a/src/discussions/posts/post/PostFooter.jsx
+++ b/src/discussions/posts/post/PostFooter.jsx
@@ -49,18 +49,21 @@ const PostFooter = ({
             </Tooltip>
           )}
         >
-          <IconButton
-            src={following ? StarFilled : StarOutline}
-            onClick={(e) => {
-              e.preventDefault();
-              dispatch(updateExistingThread(id, { following: !following }));
-              return true;
-            }}
-            iconAs={Icon}
-            iconClassNames="follow-icon-dimensions"
-            className="post-footer-icon-dimensions"
-            alt="Follow"
-          />
+          <div>
+            <IconButton
+              src={following ? StarFilled : StarOutline}
+              onClick={(e) => {
+                e.preventDefault();
+                dispatch(updateExistingThread(id, { following: !following }));
+                return true;
+              }}
+              iconAs={Icon}
+              iconClassNames="follow-icon-dimensions"
+              className="post-footer-icon-dimensions"
+              alt="Follow"
+            />
+            <span className="sr-only">{intl.formatMessage(following ? messages.unFollow : messages.follow)}</span>
+          </div>
         </OverlayTrigger>
       )}
       <div className="d-flex flex-fill justify-content-end align-items-center">
diff --git a/src/discussions/posts/post/PostSummaryFooter.jsx b/src/discussions/posts/post/PostSummaryFooter.jsx
index b41be165f..395fb9ad7 100644
--- a/src/discussions/posts/post/PostSummaryFooter.jsx
+++ b/src/discussions/posts/post/PostSummaryFooter.jsx
@@ -44,9 +44,10 @@ const PostSummaryFooter = ({
             </Tooltip>
           )}
         >
-          <Icon src={voted ? ThumbUpFilled : ThumbUpOutline} className="post-summary-like-dimensions mr-0.5">
+          <div>
+            <Icon src={voted ? ThumbUpFilled : ThumbUpOutline} className="post-summary-like-dimensions mr-0.5" />
             <span className="sr-only">{' '}{intl.formatMessage(voted ? messages.likedPost : messages.postLikes)}</span>
-          </Icon>
+          </div>
         </OverlayTrigger>
         <div className="font-style">
           {(voteCount && voteCount > 0) ? voteCount : null}
@@ -60,11 +61,12 @@ const PostSummaryFooter = ({
           </Tooltip>
         )}
       >
-        <Icon src={following ? StarFilled : StarOutline} className="post-summary-icons-dimensions mr-0.5">
+        <div>
+          <Icon src={following ? StarFilled : StarOutline} className="post-summary-icons-dimensions mr-0.5" />
           <span className="sr-only">
             {' '}{intl.formatMessage(following ? messages.srOnlyFollowDescription : messages.srOnlyUnFollowDescription)}
           </span>
-        </Icon>
+        </div>
       </OverlayTrigger>
 
       {preview && commentCount > 1 && (
@@ -76,12 +78,13 @@ const PostSummaryFooter = ({
               </Tooltip>
             )}
           >
-            <Icon
-              src={unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline}
-              className="post-summary-comment-count-dimensions mr-0.5"
-            >
+            <div>
+              <Icon
+                src={unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline}
+                className="post-summary-comment-count-dimensions mr-0.5"
+              />
               <span className="sr-only">{' '} {intl.formatMessage(messages.activity)}</span>
-            </Icon>
+            </div>
           </OverlayTrigger>
           {commentCount}
         </div>

From 9e0c0a7b2e6f4c861ba134fc290c9f9f8b85a598 Mon Sep 17 00:00:00 2001
From: arbirali <rahat.ali@arbisoft.com>
Date: Mon, 12 May 2025 21:04:18 +0500
Subject: [PATCH 2/3] fix: wrap meaningful icons with text to improve screen
 reader output

---
 src/components/TopicStats.jsx                      | 14 ++++++++++++++
 src/discussions/learners/learner/LearnerFooter.jsx |  2 ++
 2 files changed, 16 insertions(+)

diff --git a/src/components/TopicStats.jsx b/src/components/TopicStats.jsx
index 23cc02ee8..7afa5e009 100644
--- a/src/components/TopicStats.jsx
+++ b/src/components/TopicStats.jsx
@@ -41,6 +41,11 @@ const TopicStats = ({
       >
         <div className="d-flex align-items-center mr-3.5">
           <Icon src={PostOutline} className="icon-size mr-2" />
+          <span className="sr-only">
+            {intl.formatMessage(messages.discussions, {
+              count: threadCounts?.discussion || 0,
+            })}
+          </span>
           {threadCounts?.discussion || 0}
         </div>
       </OverlayTrigger>
@@ -59,6 +64,11 @@ const TopicStats = ({
       >
         <div className="d-flex align-items-center mr-3.5">
           <Icon src={HelpOutline} className="icon-size mr-2" />
+          <span className="sr-only">
+            {intl.formatMessage(messages.questions, {
+              count: threadCounts?.question || 0,
+            })}
+          </span>
           {threadCounts?.question || 0}
         </div>
       </OverlayTrigger>
@@ -85,6 +95,10 @@ const TopicStats = ({
         >
           <div className="d-flex align-items-center">
             <Icon src={Report} className="icon-size mr-2 text-danger" />
+            <span className="sr-only">
+              {intl.formatMessage(inactiveFlags ? messages.previouslyReported : messages.reported)}
+            </span>
+
             {activeFlags}{Boolean(inactiveFlags) && `/${inactiveFlags}`}
           </div>
         </OverlayTrigger>
diff --git a/src/discussions/learners/learner/LearnerFooter.jsx b/src/discussions/learners/learner/LearnerFooter.jsx
index ce4adc9e0..653f973b4 100644
--- a/src/discussions/learners/learner/LearnerFooter.jsx
+++ b/src/discussions/learners/learner/LearnerFooter.jsx
@@ -35,6 +35,7 @@ const LearnerFooter = ({
       >
         <div className="d-flex align-items-center">
           <Icon src={QuestionAnswerOutline} className="icon-size mr-2" />
+          <span className="sr-only">{intl.formatMessage(messages.allActivity)}</span>
           {threads + responses + replies}
         </div>
       </OverlayTrigger>
@@ -51,6 +52,7 @@ const LearnerFooter = ({
       >
         <div className="d-flex align-items-center">
           <Icon src={Edit} className="icon-size mr-2 ml-4" />
+          <span className="sr-only">{intl.formatMessage(messages.posts)}</span>
           {threads}
         </div>
       </OverlayTrigger>

From 10543dca31e0fb7c8efe0d441b75d35f9e127b35 Mon Sep 17 00:00:00 2001
From: arbirali <rahat.ali@arbisoft.com>
Date: Tue, 20 May 2025 19:36:00 +0500
Subject: [PATCH 3/3] fix: duplicate labels on post type selection

---
 src/discussions/posts/post-editor/PostTypeCard.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/discussions/posts/post-editor/PostTypeCard.jsx b/src/discussions/posts/post-editor/PostTypeCard.jsx
index f712e8ebe..b7afd6328 100644
--- a/src/discussions/posts/post-editor/PostTypeCard.jsx
+++ b/src/discussions/posts/post-editor/PostTypeCard.jsx
@@ -15,7 +15,7 @@ const PostTypeCard = ({
   const { enableInContextSidebar } = useContext(DiscussionContext);
   // Need to use regular label since Form.Label doesn't support overriding htmlFor
   return (
-    <label htmlFor={`post-type-${value}`} className="d-flex p-0 my-0 mr-3">
+    <div className="d-flex p-0 my-0 mr-3">
       <Form.Radio value={value} id={`post-type-${value}`} className="sr-only">{type}</Form.Radio>
       <Card
         className={classNames('shadow-none', {
@@ -29,7 +29,7 @@ const PostTypeCard = ({
           <span className="text-gray-700" aria-hidden>{type}</span>
         </Card.Section>
       </Card>
-    </label>
+    </div>
   );
 };