Merge pull request #102 from Copyleaks/1207071850730427-accessibility…

…-fixes

1207071850730427 accessibility fixes

client/projects/plagiarism-report/src/lib/expansion-panel/expansion-panel.component.html

@@ -1,19 +1,17 @@
 <div fxLayout="row nowrap" fxLayoutAlign="start stretch" top>
-	<h3
+	<button
 		class="expension-btn"
 		mat-icon-button
 		fxFlex
 		top-title
 		(click)="toggle()"
-		aria-label="Click to see more information about scan properties."
+		[attr.aria-label]="expanded ? 'Click to collapse scan properties':'Click to expand scan properties'"
 		aria-controls="body"
 		disableRipple
-		[matTooltip]="expanded ? 'Click to Collapse' : 'Click to Expand'"
-		role="button"
-		(keyup.enter)="toggle()">
+		[matTooltip]="expanded ? 'Click to Collapse' : 'Click to Expand'">
 		<ng-container [ngTemplateOutlet]="title"></ng-container>
-		<mat-icon>{{ expanded ? 'expand_less' : 'expand_more' }}</mat-icon>
-	</h3>
+		<mat-icon [svgIcon]="expanded ? 'expand_less' : 'expand_more'"></mat-icon>
+	</button>
 	<div>
 		<ng-container [ngTemplateOutlet]="menu"></ng-container>
 	</div>
@@ -33,4 +31,4 @@
 </ng-template>
 <ng-template #body>
 	<ng-content select="cr-expansion-panel-body"></ng-content>
-</ng-template>
+</ng-template>

client/projects/plagiarism-report/src/lib/expansion-panel/expansion-panel.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 
 /** animation for expanding and collapsing an element's height */
 export const expandCollapseAnimation = trigger('expandCollapse', [
@@ -30,6 +31,9 @@ export class ExpansionPanelComponent {
 	@Input() disabled = false;
 	@Output() expandChange = new EventEmitter();
 	protected animationState = 'close';
+
+	constructor(private announcer: LiveAnnouncer) {}
+
 	/**
 	 * Flips the expansion panel `expanded` state.
 	 *
@@ -42,6 +46,8 @@ export class ExpansionPanelComponent {
 		if (this.expandChange) {
 			this.expandChange.emit(this.expanded);
 		}
+
+		this.announcer.announce(this.expanded ? 'Scan properties expended':'Scan properties collapsed','assertive')
 	}
 }
 

client/projects/plagiarism-report/src/lib/mat-pagination/mat-pagination.component.html

@@ -6,15 +6,15 @@
 		[matTooltip]="translations?.SHARED?.ACTIONS?.FIRST_PAGE || 'First page'"
 		(click)="goToPage(1)"
 		[disabled]="!hasPages || isFirstPage || disabled">
-		<mat-icon>first_page</mat-icon>
+		<mat-icon [svgIcon]="!hasPages || isFirstPage || disabled ? 'first_page_disabled':'first_page'"></mat-icon>
 	</button>
 	<button
 		aria-label="Go to the previous page."
 		mat-button
 		[matTooltip]="translations?.SHARED?.ACTIONS?.PREV_PAGE || 'Previous page'"
 		(click)="back()"
 		[disabled]="!hasPages || isFirstPage || disabled">
-		<mat-icon>chevron_left</mat-icon>
+		<mat-icon [svgIcon]="!hasPages || isFirstPage || disabled ? 'chevron_left_disabled':'chevron_left'"></mat-icon>
 	</button>
 	<mat-form-field>
 		<input
@@ -36,7 +36,7 @@
 		[matTooltip]="translations?.SHARED?.ACTIONS?.NEXT_PAGE || 'Next page'"
 		(click)="next()"
 		[disabled]="!hasPages || isLastPage || disabled">
-		<mat-icon>chevron_right</mat-icon>
+		<mat-icon [svgIcon]="!hasPages || isLastPage || disabled ? 'chevron_right_disabled':'chevron_right'"></mat-icon>
 	</button>
 	<button
 		aria-label="Go to the last page."
@@ -45,6 +45,6 @@
 		[matTooltip]="translations?.SHARED?.ACTIONS?.LAST_PAGE || 'Last page'"
 		(click)="goToPage(totalPages)"
 		[disabled]="!hasPages || isLastPage || disabled">
-		<mat-icon>last_page</mat-icon>
+		<mat-icon [svgIcon]="!hasPages || isLastPage || disabled ? 'last_page_disabled':'last_page'"></mat-icon>
 	</button>
 </div>

client/projects/plagiarism-report/src/lib/mat-pagination/mat-pagination.component.ts

@@ -4,6 +4,7 @@ import {
 	CopyleaksTranslateService,
 	CopyleaksTranslations,
 } from '../plagiarism-report/services/copyleaks-translate.service';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 
 export interface PageChangeEvent {
 	currentPage: number;
@@ -52,7 +53,7 @@ export class MatPaginationComponent implements OnInit {
 	set showFirstLastButtons(value) {
 		this._showFirstLastButtons = coerceBooleanProperty(value);
 	}
-	constructor(private translationsService: CopyleaksTranslateService) {}
+	constructor(private translationsService: CopyleaksTranslateService, private announcer: LiveAnnouncer) {}
 	/**
 	 * init translations on component init
 	 */
@@ -71,6 +72,8 @@ export class MatPaginationComponent implements OnInit {
 			totalPages: this.totalPages,
 			previousPage,
 		});
+
+		this.announcer.announce('Moved page','assertive')
 	}
 	/**
 	 * Navigate to the previous page.
@@ -84,6 +87,8 @@ export class MatPaginationComponent implements OnInit {
 			totalPages: this.totalPages,
 			previousPage,
 		});
+
+		this.announcer.announce('Moved page','assertive')
 	}
 	/**
 	 * Navigate to page.
@@ -97,6 +102,8 @@ export class MatPaginationComponent implements OnInit {
 			totalPages: this.totalPages,
 			previousPage,
 		});
+
+		this.announcer.announce('Moved page','assertive')
 	}
 
 	/**

client/projects/plagiarism-report/src/lib/plagiarism-report/components/notifications/notifications.component.html

@@ -1,5 +1,6 @@
 <ng-container *ngIf="severity">
 	<button
+		aria-label="Click to toggle alerts"
 		mat-icon-button
 		(click)="toggleView()"
 		class="btn-notifications-new"

client/projects/plagiarism-report/src/lib/plagiarism-report/components/notifications/notifications.component.ts

@@ -8,6 +8,7 @@ import { CompleteResultNotificationAlertSeverity } from '../../models';
 import { EReportViewModel, ViewModeService } from '../../services/view-mode.service';
 import { BehaviorSubject } from 'rxjs';
 import { ALERTS } from '../../utils/constants';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 @Component({
 	selector: 'cr-notifications',
 	templateUrl: './notifications.component.html',
@@ -22,7 +23,8 @@ export class NotificationsComponent implements OnInit, OnDestroy {
 	constructor(
 		private matDialog: MatDialog,
 		private viewModeService: ViewModeService,
-		private reportService: ReportService
+		private reportService: ReportService,
+		private announcer: LiveAnnouncer
 	) {}
 	/**
 	 * Life-cycle method
@@ -64,6 +66,8 @@ export class NotificationsComponent implements OnInit, OnDestroy {
 		} else {
 			this.viewModeService.changeViewMode$(EReportViewModel.ScanningResult);
 		}
+
+		this.announcer.announce('toggled','assertive')
 	}
 	/**
 	 * Life-cycle method

client/projects/plagiarism-report/src/lib/plagiarism-report/components/original/original.component.html

@@ -34,7 +34,7 @@
 		<!--  -->
 		<cr-panel-action fxHide.gt-sm *ngIf="activeMediaQueries.includes('lt-md')">
 			<button mat-button [matMenuTriggerFor]="appMenu" aria-label="More Options">
-				<mat-icon>more_vert</mat-icon>
+				<mat-icon svgIcon="more_vert"></mat-icon>
 			</button>
 		</cr-panel-action>
 	</cr-panel-actions>
@@ -148,91 +148,83 @@
 
 <!-- menu -->
 <mat-menu #appMenu>
-	<button title="Open URL in a new tab" mat-menu-item *ngIf="hasUrl" (click)="openUrl()" crClickStopPropagation>
+	<div title="Open URL in a new tab" mat-menu-item *ngIf="hasUrl" (keyup.enter)="openUrl()" (click)="openUrl()" crClickStopPropagation>
 		<!-- <ng-container *ngTemplateOutlet="menu__launch_url"></ng-container> -->
 		<mat-icon svgIcon="launch"></mat-icon>
 		{{ translations?.SHARED?.ACTIONS?.LAUNCH_URL || 'Open URL in a new tab' }}
-	</button>
-	<button
-		aria-label="Go to next match."
+	</div>
+	<div
 		mat-menu-item
 		title="Next Match"
-		tabindex="0"
-		role="button"
 		[disabled]="
 			(isHtml && (!htmlMatches || htmlMatches?.length === 0)) || (!isHtml && (!textMatches || textMatches.length === 0))
 		"
 		(click)="onJumpToNextMatchClick()"
+		(keyup.enter)="onJumpToNextMatchClick()"
 		crClickStopPropagation>
 		<ng-container *ngTemplateOutlet="menu__next_match"></ng-container>
 		{{ translations?.SHARED?.ACTIONS?.GO_TO_NEXT_MATCH || 'Next Match' }}
-	</button>
-	<button
+	</div>
+	<div
 		title="Previous Match"
-		tabindex="0"
-		role="button"
 		mat-menu-item
 		[disabled]="
 			(isHtml && (!htmlMatches || htmlMatches?.length === 0)) || (!isHtml && (!textMatches || textMatches.length === 0))
 		"
 		(click)="onJumpToNextMatchClick(false)"
+		(keyup.enter)="onJumpToNextMatchClick(false)"
 		crClickStopPropagation>
 		<ng-container *ngTemplateOutlet="menu__prev_match"></ng-container>
 		{{ translations?.SHARED?.ACTIONS?.GO_TO_PREV_MATCH || 'Previous Match' }}
-	</button>
-	<button
+	</div>
+	<div
 		title="Switch mode"
-		tabindex="0"
-		role="button"
 		mat-menu-item
 		[disabled]="!hasHtml"
 		(click)="toggleContent()"
+		(keyup.enter)="toggleContent()"
 		crClickStopPropagation>
 		<ng-container *ngTemplateOutlet="menu__toggle_content"></ng-container>
 		{{
 			isHtml
 				? translations?.SHARED?.ACTIONS?.SWITCH_TO_TEXTUAL_MODE || 'Switch to textual mode'
 				: translations?.SHARED?.ACTIONS?.SWITCH_TO_RICH_TEXT_MODE || 'Switch to rich text mode'
 		}}
-	</button>
-	<button title="Align Left" tabindex="0" role="button" mat-menu-item *ngIf="!isHtml" crClickStopPropagation>
+	</div>
+	<div title="Align Left" mat-menu-item *ngIf="!isHtml" (click)="changeTextAlign('ltr')" (keyup.enter)="changeTextAlign('ltr')" crClickStopPropagation>
 		<ng-container *ngTemplateOutlet="menu__align_left"></ng-container>
 		{{ translations?.SHARED?.ACTIONS?.ALIGN_LEFT || 'Align Left' }}
-	</button>
-	<button title="Align Right" tabindex="0" role="button" mat-menu-item *ngIf="!isHtml" crClickStopPropagation>
+	</div>
+	<div title="Align Right" mat-menu-item *ngIf="!isHtml" (click)="changeTextAlign('rtl')" (keyup.enter)="changeTextAlign('rtl')" crClickStopPropagation>
 		<ng-container *ngTemplateOutlet="menu__align_right"></ng-container>
 		{{ translations?.SHARED?.ACTIONS?.ALIGN_RIGHT || 'Align Right' }}
-	</button>
-	<button
+	</div>
+	<div
 		title="Increase Font Size"
-		tabindex="0"
-		role="button"
 		mat-menu-item
 		*ngIf="!isHtml"
 		(click)="increaseFontSize()"
+		(keyup.enter)="increaseFontSize()"
 		crClickStopPropagation>
 		<ng-container *ngTemplateOutlet="menu__font_inc"></ng-container>
 		{{ translations?.SHARED?.ACTIONS?.INCREASE_FONT_SIZE || 'Increase Font Size' }}
-	</button>
-	<button
-		tabindex="0"
-		role="button"
+	</div>
+	<div
 		title="Decrease Font Size"
 		mat-menu-item
 		*ngIf="!isHtml"
 		(click)="decreaseFontSize()"
+		(keyup.enter)="decreaseFontSize()"
 		crClickStopPropagation>
 		<ng-container *ngTemplateOutlet="menu__font_dec"></ng-container>
 		{{ translations?.SHARED?.ACTIONS?.DECREASE_FONT_SIZE || 'Decrease Font Size' }}
-	</button>
+	</div>
 </mat-menu>
 
 <ng-template #menu__launch_url>
 	<button
 		aria-label="Open URL in a new tab."
 		title="Open URL in a new tab"
-		tabindex="0"
-		role="button"
 		mat-button
 		[matTooltip]="translations?.SHARED?.ACTIONS?.LAUNCH_URL || 'Open URL in a new tab'"
 		(click)="openUrl()"
@@ -244,8 +236,6 @@
 	<button
 		aria-label="Go to next match."
 		title="Go to next match"
-		tabindex="0"
-		role="button"
 		mat-button
 		(click)="onJumpToNextMatchClick()"
 		[disabled]="
@@ -259,8 +249,6 @@
 	<button
 		aria-label="Go to previous match."
 		title="Go to previous match"
-		tabindex="0"
-		role="button"
 		mat-button
 		(click)="onJumpToNextMatchClick(false)"
 		[disabled]="
@@ -273,8 +261,6 @@
 <ng-template #menu__toggle_content>
 	<button
 		aria-label="Switch report to text mode or rich text mode."
-		tabindex="0"
-		role="button"
 		mat-button
 		*ngIf="!AlertPreviewViewMode"
 		[matTooltip]="
@@ -298,32 +284,26 @@
 	<button
 		aria-label="Align content to left."
 		title="Align left"
-		tabindex="0"
-		role="button"
 		mat-button
 		[matTooltip]="translations?.SHARED?.ACTIONS?.ALIGN_LEFT || 'Align left'"
-		(click)="direction = 'ltr'">
+		(click)="changeTextAlign('ltr')">
 		<mat-icon svgIcon="format_align_left"></mat-icon>
 	</button>
 </ng-template>
 <ng-template #menu__align_right>
 	<button
 		aria-label="Align content to right."
 		title="Align right"
-		tabindex="0"
-		role="button"
 		mat-button
 		[matTooltip]="translations?.SHARED?.ACTIONS?.ALIGN_RIGHT || 'Align right'"
-		(click)="direction = 'rtl'">
+		(click)="changeTextAlign('rtl')">
 		<mat-icon svgIcon="format_align_right"></mat-icon>
 	</button>
 </ng-template>
 <ng-template #menu__font_inc>
 	<button
 		aria-label="Increase font size."
 		title="Increase font size"
-		tabindex="0"
-		role="button"
 		mat-button
 		[matTooltip]="translations?.SHARED?.ACTIONS?.INCREASE_FONT_SIZE || 'Increase font size'"
 		(click)="increaseFontSize()">
@@ -335,8 +315,6 @@
 		aria-label="Decrease font size."
 		mat-button
 		title="Decrease font size"
-		role="button"
-		tabindex="0"
 		[matTooltip]="translations?.SHARED?.ACTIONS?.DECREASE_FONT_SIZE || 'Decrease font size'"
 		(click)="decreaseFontSize()">
 		<mat-icon svgIcon="zoom_out"></mat-icon>