From b95b3646d3016b5163de51c465cc33a5c2eb14c1 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 28 Mar 2022 21:47:20 +0100
Subject: [PATCH] a11y: use `feed` aria role for DiscussionList (#3359)

* a11y: use `feed` aria role for DiscussionList

* a11y: add aria set info roles, move feed roles to more appropriate element
---
 .../js/src/forum/components/DiscussionList.js | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/framework/core/js/src/forum/components/DiscussionList.js b/framework/core/js/src/forum/components/DiscussionList.js
index 3ba28f807..4a7cf6d7f 100644
--- a/framework/core/js/src/forum/components/DiscussionList.js
+++ b/framework/core/js/src/forum/components/DiscussionList.js
@@ -4,6 +4,7 @@ import DiscussionListItem from './DiscussionListItem';
 import Button from '../../common/components/Button';
 import LoadingIndicator from '../../common/components/LoadingIndicator';
 import Placeholder from '../../common/components/Placeholder';
+import classList from '../../common/utils/classList';
 
 /**
  * The `DiscussionList` component displays a list of discussions.
@@ -20,9 +21,11 @@ export default class DiscussionList extends Component {
     const state = this.attrs.state;
 
     const params = state.getParams();
+    const isLoading = state.isInitialLoading() || state.isLoadingNext();
+
     let loading;
 
-    if (state.isInitialLoading() || state.isLoadingNext()) {
+    if (isLoading) {
       loading = <LoadingIndicator />;
     } else if (state.hasNext()) {
       loading = Button.component(
@@ -39,13 +42,15 @@ export default class DiscussionList extends Component {
       return <div className="DiscussionList">{Placeholder.component({ text })}</div>;
     }
 
+    const pageSize = state.pageSize;
+
     return (
-      <div className={'DiscussionList' + (state.isSearchResults() ? ' DiscussionList--searchResults' : '')}>
-        <ul className="DiscussionList-discussions">
-          {state.getPages().map((pg) => {
-            return pg.items.map((discussion) => (
-              <li key={discussion.id()} data-id={discussion.id()}>
-                {DiscussionListItem.component({ discussion, params })}
+      <div class={classList('DiscussionList', { 'DiscussionList--searchResults': state.isSearchResults() })}>
+        <ul role="feed" aria-busy={isLoading} className="DiscussionList-discussions">
+          {state.getPages().map((pg, pageNum) => {
+            return pg.items.map((discussion, itemNum) => (
+              <li key={discussion.id()} data-id={discussion.id()} role="article" aria-setsize="-1" aria-posinset={pageNum * pageSize + itemNum}>
+                <DiscussionListItem discussion={discussion} params={params} />
               </li>
             ));
           })}