Skip to content

Commit 3bc1cb5

Browse files
arbiraliarbirali
committed
feat: replace divs with semantic ul/li on Topics page for improved accessibility
1 parent ac471e2 commit 3bc1cb5

File tree

12 files changed

+147
-141
lines changed

12 files changed

+147
-141
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ const TopicPostsView = () => {
7575
/>
7676
)}
7777
<div className="border-bottom border-light-400" />
78-
<div className="list-group list-group-flush flex-fill" role="list" onKeyDown={e => handleKeyDown(e)}>
78+
<ul className="list-group list-group-flush flex-fill" data-testid="list" onKeyDown={e => handleKeyDown(e)}>
7979
{topicId ? (
8080
<PostsList
8181
postsIds={postsIds}
@@ -94,11 +94,11 @@ const TopicPostsView = () => {
9494
<NoResults />
9595
)}
9696
{(category && topicsInProgress) && (
97-
<div className="d-flex justify-content-center p-4">
97+
<li className="d-flex justify-content-center p-4">
9898
<Spinner animation="border" variant="primary" size="lg" />
99-
</div>
99+
</li>
100100
)}
101-
</div>
101+
</ul>
102102
</div>
103103
);
104104
};

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -109,11 +109,11 @@ const TopicsView = () => {
109109
{filteredTopics.length === 0 && loadingStatus === RequestStatus.SUCCESSFUL && <NoResults />}
110110
</>
111111
)}
112-
<div
112+
<ul
113113
className={classNames('list-group list-group-flush flex-fill', {
114114
'justify-content-center': loadingStatus === RequestStatus.IN_PROGRESS && isEmpty(topics),
115115
})}
116-
role="list"
116+
data-testid="list"
117117
onKeyDown={e => handleKeyDown(e)}
118118
>
119119
{topicFilter ? (
@@ -126,7 +126,7 @@ const TopicsView = () => {
126126
) : (
127127
<TopicsList />
128128
)}
129-
</div>
129+
</ul>
130130
</div>
131131
);
132132
};

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -138,12 +138,12 @@ describe('InContext Topics View', () => {
138138
it('Section groups should be listed in the middle of the topics list.', async () => {
139139
await setupMockResponse();
140140
renderComponent();
141-
const topicsList = await screen.getByRole('list');
141+
const topicsList = await screen.getByTestId('list');
142142
const sectionGroups = await screen.getAllByTestId('section-group');
143143

144-
expect(topicsList.children[1]).toStrictEqual(topicsList.querySelector('.divider'));
144+
expect(topicsList.children[1].querySelector('.divider')).toStrictEqual(topicsList.querySelector('.divider'));
145145
expect(sectionGroups.length).toBe(2);
146-
expect(topicsList.children[5]).toStrictEqual(topicsList.querySelector('.divider'));
146+
expect(topicsList.children[3].querySelector('.divider')).toStrictEqual(topicsList.querySelector('.divider'));
147147
});
148148

149149
it('A section group should have only a title and required subsections.', async () => {
@@ -187,7 +187,7 @@ describe('InContext Topics View', () => {
187187
await userEvent.click(subSection);
188188
await waitFor(async () => {
189189
const backButton = await screen.getByLabelText('Back to topics list');
190-
const topicsList = await screen.getByRole('list');
190+
const topicsList = await screen.getByTestId('list');
191191
const subSectionHeading = await screen.findByText(subsectionObject.displayName);
192192
const units = await topicsList.querySelectorAll('.discussion-topic');
193193

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const ArchivedBaseGroup = ({
2323
), [archivedTopics]);
2424

2525
return (
26-
<>
26+
<li>
2727
{showDivider && (
2828
<>
2929
<div className="divider border-top border-light-500" />
@@ -37,7 +37,7 @@ const ArchivedBaseGroup = ({
3737
<div className="pt-3 px-4 font-weight-bold">{intl.formatMessage(messages.archivedTopics)}</div>
3838
{renderArchivedTopics}
3939
</div>
40-
</>
40+
</li>
4141
);
4242
};
4343

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const SectionBaseGroup = ({
6060
), [section, sectionUrl, isSelected]);
6161

6262
return (
63-
<div
63+
<li
6464
className="discussion-topic-group d-flex flex-column text-primary-500"
6565
data-section-id={sectionId}
6666
data-testid="section-group"
@@ -75,7 +75,7 @@ const SectionBaseGroup = ({
7575
<div className="divider pt-1 bg-light-300" />
7676
</>
7777
)}
78-
</div>
78+
</li>
7979
);
8080
};
8181

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const Topic = ({
2525
});
2626

2727
return (
28-
<>
28+
<li>
2929
<Link
3030
className={classNames('discussion-topic p-0 text-decoration-none text-primary-500', {
3131
'border-light-400 border-bottom': showDivider,
@@ -54,7 +54,7 @@ const Topic = ({
5454
<div className="divider pt-1 bg-light-300" />
5555
</>
5656
)}
57-
</>
57+
</li>
5858
);
5959
};
6060

‎src/discussions/learners/LearnersView.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const LearnersView = () => {
7676
onClear={handleOnClear}
7777
/>
7878
)}
79-
<div className="list-group list-group-flush learner" role="list">
79+
<ul className="list-group list-group-flush learner" data-testid="list">
8080
{renderLearnersList}
8181
{loadingStatus === RequestStatus.IN_PROGRESS ? (
8282
<div className="d-flex justify-content-center p-4">
@@ -90,7 +90,7 @@ const LearnersView = () => {
9090
)
9191
)}
9292
{ usernameSearch !== '' && learners.length === 0 && loadingStatus === RequestStatus.SUCCESSFUL && <NoResults />}
93-
</div>
93+
</ul>
9494
</div>
9595
);
9696
};

‎src/discussions/learners/learner/LearnerCard.jsx‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -21,41 +21,43 @@ const LearnerCard = ({ learner }) => {
2121
})();
2222

2323
return (
24-
<Link
25-
className="discussion-post p-0 text-decoration-none text-gray-900 border-bottom border-light-400"
26-
to={linkUrl}
27-
>
28-
<div
29-
className="d-flex flex-row flex-fill mw-100 py-3 px-4 border-primary-500"
30-
style={username === learnerUsername ? {
31-
borderRightWidth: '4px',
32-
borderRightStyle: 'solid',
33-
} : null}
24+
<li>
25+
<Link
26+
className="discussion-post p-0 text-decoration-none text-gray-900 border-bottom border-light-400"
27+
to={linkUrl}
3428
>
35-
<LearnerAvatar username={username} />
36-
<div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
37-
<div className="d-flex flex-column justify-content-start mw-100 flex-fill">
38-
<div className="d-flex align-items-center flex-fill">
39-
<div
40-
className="text-truncate font-weight-500 text-primary-500 font-style"
41-
>
42-
{username}
29+
<div
30+
className="d-flex flex-row flex-fill mw-100 py-3 px-4 border-primary-500"
31+
style={username === learnerUsername ? {
32+
borderRightWidth: '4px',
33+
borderRightStyle: 'solid',
34+
} : null}
35+
>
36+
<LearnerAvatar username={username} />
37+
<div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
38+
<div className="d-flex flex-column justify-content-start mw-100 flex-fill">
39+
<div className="d-flex align-items-center flex-fill">
40+
<div
41+
className="text-truncate font-weight-500 text-primary-500 font-style"
42+
>
43+
{username}
44+
</div>
4345
</div>
46+
{threads !== null && (
47+
<LearnerFooter
48+
inactiveFlags={inactiveFlags}
49+
activeFlags={activeFlags}
50+
threads={threads}
51+
responses={responses}
52+
replies={replies}
53+
username={username}
54+
/>
55+
)}
4456
</div>
45-
{threads !== null && (
46-
<LearnerFooter
47-
inactiveFlags={inactiveFlags}
48-
activeFlags={activeFlags}
49-
threads={threads}
50-
responses={responses}
51-
replies={replies}
52-
username={username}
53-
/>
54-
)}
5557
</div>
5658
</div>
57-
</div>
58-
</Link>
59+
</Link>
60+
</li>
5961
);
6062
};
6163

‎src/discussions/posts/PostsView.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,9 @@ const PostsView = () => {
100100
)}
101101
<PostFilterBar />
102102
<div className="border-bottom border-light-400" />
103-
<div className="list-group list-group-flush flex-fill" role="list" onKeyDown={e => handleKeyDown(e)}>
103+
<ul className="list-group list-group-flush flex-fill" data-testid="list" onKeyDown={e => handleKeyDown(e)}>
104104
{postsListComponent}
105-
</div>
105+
</ul>
106106
</div>
107107
);
108108
};

0 commit comments

Comments
 (0)