mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-07 08:56:38 +02:00
Code Issues Releases Wiki Activity

a11y: use feed aria role for DiscussionList (#3359)

Browse Source 
* a11y: use `feed` aria role for DiscussionList

* a11y: add aria set info roles, move feed roles to more appropriate element
This commit is contained in:
David Wheatley
2022-03-28 21:47:20 +01:00
committed by GitHub
parent b64003cba5
commit b95b3646d3
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
framework/core/js/src/forum/components/DiscussionList.js
View File

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