Merge pull request #2447 from J4bbi/2251-accessibility-issues-on-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
+   *      > Finds its parent (if not top community) and increases its corresponding collection/subcommunity
-   *      > Reloads tree with new page added to corresponding top community lis, sub community list or collection list
+   *      currentPage
-   * @param node  The show more node indicating whether it's an increase in top communities, sub communities or collections
+   *      > 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 {
 }