feat: replace divs with semantic ul/li on Topics page for improved accessibility

src/discussions/in-context-topics/TopicPostsView.jsx

@@ -75,7 +75,7 @@
         />
       )}
       <div className="border-bottom border-light-400" />
-      <div className="list-group list-group-flush flex-fill" role="list" onKeyDown={e => handleKeyDown(e)}>
+      <ul className="list-group list-group-flush flex-fill" data-testid="list" onKeyDown={e => handleKeyDown(e)}>
         {topicId ? (
           <PostsList
             postsIds={postsIds}
@@ -94,11 +94,11 @@
           <NoResults />
         )}
         {(category && topicsInProgress) && (
-          <div className="d-flex justify-content-center p-4">
+          <li className="d-flex justify-content-center p-4">
             <Spinner animation="border" variant="primary" size="lg" />
-          </div>
+          </li>
         )}
-      </div>
+      </ul>
     </div>
   );
 };

src/discussions/in-context-topics/TopicsView.jsx

@@ -109,11 +109,11 @@ const TopicsView = () => {
           {filteredTopics.length === 0 && loadingStatus === RequestStatus.SUCCESSFUL && <NoResults />}
         </>
       )}
-      <div
+      <ul
         className={classNames('list-group list-group-flush flex-fill', {
           'justify-content-center': loadingStatus === RequestStatus.IN_PROGRESS && isEmpty(topics),
         })}
-        role="list"
+        data-testid="list"
         onKeyDown={e => handleKeyDown(e)}
       >
         {topicFilter ? (
@@ -126,7 +126,7 @@ const TopicsView = () => {
         ) : (
           <TopicsList />
         )}
-      </div>
+      </ul>
     </div>
   );
 };

src/discussions/in-context-topics/TopicsView.test.jsx

@@ -138,12 +138,12 @@ describe('InContext Topics View', () => {
   it('Section groups should be listed in the middle of the topics list.', async () => {
     await setupMockResponse();
     renderComponent();
-    const topicsList = await screen.getByRole('list');
+    const topicsList = await screen.getByTestId('list');
     const sectionGroups = await screen.getAllByTestId('section-group');
 
-    expect(topicsList.children[1]).toStrictEqual(topicsList.querySelector('.divider'));
+    expect(topicsList.children[1].querySelector('.divider')).toStrictEqual(topicsList.querySelector('.divider'));
     expect(sectionGroups.length).toBe(2);
-    expect(topicsList.children[5]).toStrictEqual(topicsList.querySelector('.divider'));
+    expect(topicsList.children[3].querySelector('.divider')).toStrictEqual(topicsList.querySelector('.divider'));
   });
 
   it('A section group should have only a title and required subsections.', async () => {
@@ -187,7 +187,7 @@ describe('InContext Topics View', () => {
     await userEvent.click(subSection);
     await waitFor(async () => {
       const backButton = await screen.getByLabelText('Back to topics list');
-      const topicsList = await screen.getByRole('list');
+      const topicsList = await screen.getByTestId('list');
       const subSectionHeading = await screen.findByText(subsectionObject.displayName);
       const units = await topicsList.querySelectorAll('.discussion-topic');
 

src/discussions/in-context-topics/topic/ArchivedBaseGroup.jsx

@@ -23,7 +23,7 @@ const ArchivedBaseGroup = ({
   ), [archivedTopics]);
 
   return (
-    <>
+    <li>
       {showDivider && (
         <>
           <div className="divider border-top border-light-500" />
@@ -37,7 +37,7 @@ const ArchivedBaseGroup = ({
         <div className="pt-3 px-4 font-weight-bold">{intl.formatMessage(messages.archivedTopics)}</div>
         {renderArchivedTopics}
       </div>
-    </>
+    </li>
   );
 };
 

src/discussions/in-context-topics/topic/SectionBaseGroup.jsx

@@ -60,7 +60,7 @@ const SectionBaseGroup = ({
   ), [section, sectionUrl, isSelected]);
 
   return (
-    <div
+    <li
       className="discussion-topic-group d-flex flex-column text-primary-500"
       data-section-id={sectionId}
       data-testid="section-group"
@@ -75,7 +75,7 @@ const SectionBaseGroup = ({
           <div className="divider pt-1 bg-light-300" />
         </>
       )}
-    </div>
+    </li>
   );
 };
 

src/discussions/in-context-topics/topic/Topic.jsx

@@ -25,7 +25,7 @@ const Topic = ({
   });
 
   return (
-    <>
+    <li>
       <Link
         className={classNames('discussion-topic p-0 text-decoration-none text-primary-500', {
           'border-light-400 border-bottom': showDivider,
@@ -54,7 +54,7 @@ const Topic = ({
           <div className="divider pt-1 bg-light-300" />
         </>
       )}
-    </>
+    </li>
   );
 };
 

src/discussions/learners/LearnersView.jsx

@@ -76,7 +76,7 @@ const LearnersView = () => {
           onClear={handleOnClear}
         />
       )}
-      <div className="list-group list-group-flush learner" role="list">
+      <ul className="list-group list-group-flush learner" data-testid="list">
         {renderLearnersList}
         {loadingStatus === RequestStatus.IN_PROGRESS ? (
           <div className="d-flex justify-content-center p-4">
@@ -90,7 +90,7 @@ const LearnersView = () => {
           )
         )}
         { usernameSearch !== '' && learners.length === 0 && loadingStatus === RequestStatus.SUCCESSFUL && <NoResults />}
-      </div>
+      </ul>
     </div>
   );
 };

src/discussions/learners/learner/LearnerCard.jsx

@@ -21,41 +21,43 @@ const LearnerCard = ({ learner }) => {
   })();
 
   return (
-    <Link
-      className="discussion-post p-0 text-decoration-none text-gray-900 border-bottom border-light-400"
-      to={linkUrl}
-    >
-      <div
-        className="d-flex flex-row flex-fill mw-100 py-3 px-4 border-primary-500"
-        style={username === learnerUsername ? {
-          borderRightWidth: '4px',
-          borderRightStyle: 'solid',
-        } : null}
+    <li>
+      <Link
+        className="discussion-post p-0 text-decoration-none text-gray-900 border-bottom border-light-400"
+        to={linkUrl}
       >
-        <LearnerAvatar username={username} />
-        <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
-          <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
-            <div className="d-flex align-items-center flex-fill">
-              <div
-                className="text-truncate font-weight-500 text-primary-500 font-style"
-              >
-                {username}
+        <div
+          className="d-flex flex-row flex-fill mw-100 py-3 px-4 border-primary-500"
+          style={username === learnerUsername ? {
+            borderRightWidth: '4px',
+            borderRightStyle: 'solid',
+          } : null}
+        >
+          <LearnerAvatar username={username} />
+          <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
+            <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
+              <div className="d-flex align-items-center flex-fill">
+                <div
+                  className="text-truncate font-weight-500 text-primary-500 font-style"
+                >
+                  {username}
+                </div>
               </div>
+              {threads !== null && (
+                <LearnerFooter
+                  inactiveFlags={inactiveFlags}
+                  activeFlags={activeFlags}
+                  threads={threads}
+                  responses={responses}
+                  replies={replies}
+                  username={username}
+                />
+              )}
             </div>
-            {threads !== null && (
-              <LearnerFooter
-                inactiveFlags={inactiveFlags}
-                activeFlags={activeFlags}
-                threads={threads}
-                responses={responses}
-                replies={replies}
-                username={username}
-              />
-            )}
           </div>
         </div>
-      </div>
-    </Link>
+      </Link>
+    </li>
   );
 };
 

src/discussions/posts/PostsView.jsx

@@ -100,9 +100,9 @@
       )}
       <PostFilterBar />
       <div className="border-bottom border-light-400" />
-      <div className="list-group list-group-flush flex-fill" role="list" onKeyDown={e => handleKeyDown(e)}>
+      <ul className="list-group list-group-flush flex-fill" data-testid="list" onKeyDown={e => handleKeyDown(e)}>
         {postsListComponent}
-      </div>
+      </ul>
     </div>
   );
 };