Merge pull request DSpace#2447 from J4bbi/2251-accessibility-issues-o…

…n-the-community-list-page

2251 accessibility issues on the community list page

src/app/community-list-page/community-list-page.component.html

@@ -1,4 +1,4 @@
 <div class="container">
- <h2>{{ 'communityList.title' | translate }}</h2>
+ <h1>{{ 'communityList.title' | translate }}</h1>
  <ds-themed-community-list></ds-themed-community-list>
 </div>

src/app/community-list-page/community-list-service.ts

@@ -25,7 +25,7 @@ import { ShowMoreFlatNode } from './show-more-flat-node.model';
 import { FindListOptions } from '../core/data/find-list-options.model';
 import { AppConfig, APP_CONFIG } from 'src/config/app-config.interface';
 
-// Helper method to combine an flatten an array of observables of flatNode arrays
+// Helper method to combine and flatten an array of observables of flatNode arrays
 export const combineAndFlatten = (obsList: Observable<FlatNode[]>[]): Observable<FlatNode[]> =>
  observableCombineLatest([...obsList]).pipe(
  map((matrix: any[][]) => [].concat(...matrix)),
@@ -199,7 +199,7 @@ export class CommunityListService {
  * Transforms a community in a list of FlatNodes containing firstly a flatnode of the community itself,
  * followed by flatNodes of its possible subcommunities and collection
  * It gets called recursively for each subcommunity to add its subcommunities and collections to the list
- * Number of subcommunities and collections added, is dependant on the current page the parent is at for respectively subcommunities and collections.
+ * Number of subcommunities and collections added, is dependent on the current page the parent is at for respectively subcommunities and collections.
  * @param community Community being transformed
  * @param level Depth of the community in the list, subcommunities and collections go one level deeper
  * @param parent Flatnode of the parent community
@@ -275,7 +275,7 @@ export class CommunityListService {
 
  /**
  * Checks if a community has subcommunities or collections by querying the respective services with a pageSize = 0
- * Returns an observable that combines the result.payload.totalElements fo the observables that the
+ * Returns an observable that combines the result.payload.totalElements of the observables that the
  * respective services return when queried
  * @param community Community being checked whether it is expandable (if it has subcommunities or collections)
  */

src/app/community-list-page/community-list/community-list.component.html

@@ -1,5 +1,5 @@
 <ds-themed-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-themed-loading"></ds-themed-loading>
-<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
+<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl" [trackBy]="trackBy">
  <!-- This is the tree node template for show more node -->
  <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
  class="example-tree-node show-more-node">
@@ -34,13 +34,13 @@
  aria-hidden="true"></span>
  </button>
  <div class="d-flex flex-row">
- <h5 class="align-middle pt-2">
+ <span class="align-middle pt-2 lead">
  <a [routerLink]="node.route" class="lead">
  {{ dsoNameService.getName(node.payload) }}
  </a>
  <span class="pr-2">&nbsp;</span>
  <span *ngIf="node.payload.archivedItemsCount >= 0" class="badge badge-pill badge-secondary align-top archived-items-lead">{{node.payload.archivedItemsCount}}</span>
- </h5>
+ </span>
  </div>
  </div>
  <ds-truncatable [id]="node.id">

src/app/community-list-page/community-list/community-list.component.ts

@@ -28,10 +28,9 @@ export class CommunityListComponent implements OnInit, OnDestroy {
  treeControl = new FlatTreeControl<FlatNode>(
  (node: FlatNode) => node.level, (node: FlatNode) => true
  );
-
  dataSource: CommunityListDatasource;
-
  paginationConfig: FindListOptions;
+ trackBy = (index, node: FlatNode) => node.id;
 
  constructor(
  protected communityListService: CommunityListService,
@@ -58,18 +57,28 @@ export class CommunityListComponent implements OnInit, OnDestroy {
  this.communityListService.saveCommunityListStateToStore(this.expandedNodes, this.loadingNode);
  }
 
- // whether or not this node has children (subcommunities or collections)
+ /**
+ * Whether this node has children (subcommunities or collections)
+ * @param _
+ * @param node
+ */
  hasChild(_: number, node: FlatNode) {
  return node.isExpandable$;
  }
 
- // whether or not it is a show more node (contains no data, but is indication that there are more topcoms, subcoms or collections
+ /**
+ * Whether this is a show more node that contains no data, but indicates that there is
+ * one or more community or collection.
+ * @param _
+ * @param node
+ */
  isShowMore(_: number, node: FlatNode) {
  return node.isShowMoreNode;
  }
 
  /**
- * Toggles the expanded variable of a node, adds it to the expanded nodes list and reloads the tree so this node is expanded
+ * Toggles the expanded variable of a node, adds it to the expanded nodes list and reloads the tree
+ * so this node is expanded
  * @param node Node we want to expand
  */
  toggleExpanded(node: FlatNode) {
@@ -92,9 +101,12 @@ export class CommunityListComponent implements OnInit, OnDestroy {
 
  /**
  * Makes sure the next page of a node is added to the tree (top community, sub community of collection)
- * > Finds its parent (if not top community) and increases its corresponding collection/subcommunity currentPage
- * > Reloads tree with new page added to corresponding top community lis, sub community list or collection list
- * @param node The show more node indicating whether it's an increase in top communities, sub communities or collections
+ * > Finds its parent (if not top community) and increases its corresponding collection/subcommunity
+ * currentPage
+ * > Reloads tree with new page added to corresponding top community lis, sub community list or
+ * collection list
+ * @param node The show more node indicating whether it's an increase in top communities, sub communities
+ * or collections
  */
  getNextPage(node: FlatNode): void {
  this.loadingNode = node;

src/app/community-list-page/show-more-flat-node.model.ts

@@ -1,6 +1,6 @@
 /**
  * The show more links in the community tree are also represented by a flatNode so we know where in
- * the tree it should be rendered an who its parent is (needed for the action resulting in clicking this link)
+ * the tree it should be rendered and who its parent is (needed for the action resulting in clicking this link)
  */
 export class ShowMoreFlatNode {
 }