From 9e05d3638cae9e3c6da8765663c414533707410b Mon Sep 17 00:00:00 2001
From: arbirali <rahat.ali@arbisoft.com>
Date: Fri, 2 May 2025 16:50:32 +0500
Subject: [PATCH] Add descriptions to the buttons on the course home page.

---
 src/course-home/outline-tab/OutlineTab.jsx              | 2 +-
 src/course-home/outline-tab/messages.ts                 | 7 ++++++-
 src/course-home/outline-tab/section-outline/Section.tsx | 5 ++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx
index db33f55fc5..de3ac8ca8d 100644
--- a/src/course-home/outline-tab/OutlineTab.jsx
+++ b/src/course-home/outline-tab/OutlineTab.jsx
@@ -156,7 +156,7 @@ const OutlineTab = () => {
             <>
               <div id="expand-button-row" className="row w-100 m-0 mb-3 justify-content-end">
                 <div className="col-12 col-md-auto p-0">
-                  <Button ref={expandButtonRef} variant="outline-primary" block onClick={() => { setExpandAll(!expandAll); }}>
+                  <Button ref={expandButtonRef} variant="outline-primary" block onClick={() => { setExpandAll(!expandAll); }} aria-label={`${expandAll ? intl.formatMessage(messages.collapseAll) : intl.formatMessage(messages.expandAll)} sections`}>
                     {expandAll ? intl.formatMessage(messages.collapseAll) : intl.formatMessage(messages.expandAll)}
                   </Button>
                 </div>
diff --git a/src/course-home/outline-tab/messages.ts b/src/course-home/outline-tab/messages.ts
index 4c660feefa..8e1af37c0f 100644
--- a/src/course-home/outline-tab/messages.ts
+++ b/src/course-home/outline-tab/messages.ts
@@ -106,9 +106,14 @@ const messages = defineMessages({
   },
   openSection: {
     id: 'learning.outline.altText.openSection',
-    defaultMessage: 'Open',
+    defaultMessage: 'Open Section',
     description: 'A button to open the given section of the course outline',
   },
+  closeSection: {
+    id: 'learning.outline.altText.closeSection',
+    defaultMessage: 'Close Section',
+    description: 'A button to close the given section of the course outline',
+  },
   proctoringInfoPanel: {
     id: 'learning.proctoringPanel.header',
     defaultMessage: 'This course contains proctored exams',
diff --git a/src/course-home/outline-tab/section-outline/Section.tsx b/src/course-home/outline-tab/section-outline/Section.tsx
index f905294055..76ae989e14 100644
--- a/src/course-home/outline-tab/section-outline/Section.tsx
+++ b/src/course-home/outline-tab/section-outline/Section.tsx
@@ -4,7 +4,6 @@ import { Collapsible, IconButton } from '@openedx/paragon';
 import { Minus, Plus } from '@openedx/paragon/icons';
 
 import { useModel } from '../../../generic/model-store';
-import genericMessages from '../../../generic/messages';
 import { useContextId } from '../../../data/hooks';
 import messages from '../messages';
 import SectionTitle from './SectionTitle';
@@ -61,7 +60,7 @@ const Section: React.FC<Props> = ({
         onToggle={() => { setOpen(!open); }}
         iconWhenClosed={(
           <IconButton
-            alt={intl.formatMessage(messages.openSection)}
+            alt={`${intl.formatMessage(messages.openSection)} ${title}`}
             iconAs={Plus}
             onClick={() => { setOpen(true); }}
             size="sm"
@@ -69,7 +68,7 @@ const Section: React.FC<Props> = ({
         )}
         iconWhenOpen={(
           <IconButton
-            alt={intl.formatMessage(genericMessages.close)}
+            alt={`${intl.formatMessage(messages.closeSection)} ${title}`}
             iconAs={Minus}
             onClick={() => { setOpen(false); }}
             size="sm"