From 2045e79ea421e6895665670ab745085441905941 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 25 Oct 2018 11:53:56 +0300
Subject: [PATCH] Fixed #6760 - Replace href="#" with tabindex="0"

---
 src/app/components/calendar/calendar.ts       | 30 +++++++++----------
 src/app/components/carousel/carousel.ts       |  2 +-
 .../components/confirmdialog/confirmdialog.ts |  2 +-
 src/app/components/dataview/dataview.ts       |  4 +--
 src/app/components/dialog/dialog.ts           |  4 +--
 src/app/components/fieldset/fieldset.ts       |  2 +-
 src/app/components/lightbox/lightbox.ts       |  2 +-
 src/app/components/messages/messages.ts       |  2 +-
 .../components/multiselect/multiselect.css    |  5 +---
 src/app/components/multiselect/multiselect.ts |  2 +-
 .../organizationchart/organizationchart.ts    |  2 +-
 .../components/overlaypanel/overlaypanel.css  |  1 +
 .../components/overlaypanel/overlaypanel.ts   |  2 +-
 src/app/components/paginator/paginator.ts     | 20 ++++++-------
 src/app/components/panel/panel.ts             |  4 +--
 src/app/components/rating/rating.ts           |  4 +--
 src/app/components/sidebar/sidebar.ts         |  2 +-
 src/app/components/table/table.ts             |  2 +-
 src/app/components/toast/toast.ts             |  2 +-
 src/app/components/treetable/treetable.ts     |  6 ++--
 .../overlaypanel/overlaypaneldemo.html        |  6 ++--
 .../components/themes/luna-amber/theme.css    |  3 --
 .../components/themes/luna-blue/theme.css     |  3 --
 .../components/themes/luna-green/theme.css    |  3 --
 .../components/themes/luna-pink/theme.css     |  3 --
 .../components/themes/nova-colored/theme.css  |  3 --
 .../components/themes/nova-dark/theme.css     |  3 --
 .../components/themes/nova-light/theme.css    |  3 --
 28 files changed, 53 insertions(+), 74 deletions(-)

diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts
index a05998360df..9203d267024 100644
--- a/src/app/components/calendar/calendar.ts
+++ b/src/app/components/calendar/calendar.ts
@@ -44,10 +44,10 @@ export interface LocaleSettings {
                     <div class="ui-datepicker-group ui-widget-content" *ngFor="let month of months; let i = index;">
                         <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
                             <ng-content select="p-header"></ng-content>
-                            <a class="ui-datepicker-prev ui-corner-all" href="#" (click)="navBackward($event)" *ngIf="i === 0">
+                            <a class="ui-datepicker-prev ui-corner-all" tabindex="0" (click)="navBackward($event)" *ngIf="i === 0">
                                 <span class="pi pi-chevron-left"></span>
                             </a>
-                            <a class="ui-datepicker-next ui-corner-all" href="#" (click)="navForward($event)" *ngIf="numberOfMonths === 1 ? true : (i === numberOfMonths -1)">
+                            <a class="ui-datepicker-next ui-corner-all" tabindex="0" (click)="navForward($event)" *ngIf="numberOfMonths === 1 ? true : (i === numberOfMonths -1)">
                                 <span class="pi pi-chevron-right"></span>
                             </a>
                             <div class="ui-datepicker-title">
@@ -91,63 +91,63 @@ export interface LocaleSettings {
                         </div>
                     </div>
                     <div class="ui-monthpicker" *ngIf="view === 'month'">
-                        <a href="#" *ngFor="let m of monthPickerValues; let i = index" (click)="onMonthSelect($event, i)" class="ui-monthpicker-month" [ngClass]="{'ui-state-active': isMonthSelected(i)}">
+                        <a tabindex="0" *ngFor="let m of monthPickerValues; let i = index" (click)="onMonthSelect($event, i)" class="ui-monthpicker-month" [ngClass]="{'ui-state-active': isMonthSelected(i)}">
                             {{m}}
                         </a>
                     </div>
                 </ng-container>
                 <div class="ui-timepicker ui-widget-header ui-corner-all" *ngIf="showTime||timeOnly">
                     <div class="ui-hour-picker">
-                        <a href="#" (click)="incrementHour($event)">
+                        <a tabindex="0" (click)="incrementHour($event)">
                             <span class="pi pi-chevron-up"></span>
                         </a>
                         <span [ngStyle]="{'display': currentHour < 10 ? 'inline': 'none'}">0</span><span>{{currentHour}}</span>
-                        <a href="#" (click)="decrementHour($event)">
+                        <a tabindex="0" (click)="decrementHour($event)">
                             <span class="pi pi-chevron-down"></span>
                         </a>
                     </div>
                     <div class="ui-separator">
-                        <a href="#">
+                        <a tabindex="0">
                             <span class="pi pi-chevron-up"></span>
                         </a>
                         <span>:</span>
-                        <a href="#">
+                        <a tabindex="0">
                             <span class="pi pi-chevron-down"></span>
                         </a>
                     </div>
                     <div class="ui-minute-picker">
-                        <a href="#" (click)="incrementMinute($event)">
+                        <a tabindex="0" (click)="incrementMinute($event)">
                             <span class="pi pi-chevron-up"></span>
                         </a>
                         <span [ngStyle]="{'display': currentMinute < 10 ? 'inline': 'none'}">0</span><span>{{currentMinute}}</span>
-                        <a href="#" (click)="decrementMinute($event)">
+                        <a tabindex="0" (click)="decrementMinute($event)">
                             <span class="pi pi-chevron-down"></span>
                         </a>
                     </div>
                     <div class="ui-separator" *ngIf="showSeconds">
-                        <a href="#">
+                        <a tabindex="0">
                             <span class="pi pi-chevron-up"></span>
                         </a>
                         <span>:</span>
-                        <a href="#">
+                        <a tabindex="0">
                             <span class="pi pi-chevron-down"></span>
                         </a>
                     </div>
                     <div class="ui-second-picker" *ngIf="showSeconds">
-                        <a href="#" (click)="incrementSecond($event)">
+                        <a tabindex="0" (click)="incrementSecond($event)">
                             <span class="pi pi-chevron-up"></span>
                         </a>
                         <span [ngStyle]="{'display': currentSecond < 10 ? 'inline': 'none'}">0</span><span>{{currentSecond}}</span>
-                        <a href="#" (click)="decrementSecond($event)">
+                        <a tabindex="0" (click)="decrementSecond($event)">
                             <span class="pi pi-chevron-down"></span>
                         </a>
                     </div>
                     <div class="ui-ampm-picker" *ngIf="hourFormat=='12'">
-                        <a href="#" (click)="toggleAMPM($event)">
+                        <a tabindex="0" (click)="toggleAMPM($event)">
                             <span class="pi pi-chevron-up"></span>
                         </a>
                         <span>{{pm ? 'PM' : 'AM'}}</span>
-                        <a href="#" (click)="toggleAMPM($event)">
+                        <a tabindex="0" (click)="toggleAMPM($event)">
                             <span class="pi pi-chevron-down"></span>
                         </a>
                     </div>
diff --git a/src/app/components/carousel/carousel.ts b/src/app/components/carousel/carousel.ts
index 5252463387c..7052ffcee01 100644
--- a/src/app/components/carousel/carousel.ts
+++ b/src/app/components/carousel/carousel.ts
@@ -14,7 +14,7 @@ import {CommonModule} from '@angular/common';
                 <span class="ui-carousel-button ui-carousel-prev-button pi pi-arrow-circle-left" (click)="onPrevNav()" 
                         [ngClass]="{'ui-state-disabled':(page === 0 && !circular)}" *ngIf="value&&value.length"></span>
                 <div *ngIf="displayPageLinks" class="ui-carousel-page-links">
-                    <a href="#" (click)="setPageWithLink($event,i)" class="ui-carousel-page-link pi" *ngFor="let links of anchorPageLinks;let i=index" [ngClass]="{'pi-circle-on': page===i, 'pi-circle-off': page !== i}"></a>
+                    <a tabindex="0" (click)="setPageWithLink($event,i)" class="ui-carousel-page-link pi" *ngFor="let links of anchorPageLinks;let i=index" [ngClass]="{'pi-circle-on': page===i, 'pi-circle-off': page !== i}"></a>
                 </div>
                 <select *ngIf="displayPageDropdown" class="ui-carousel-dropdown ui-widget ui-state-default ui-corner-left" [value]="page" (change)="onDropdownChange($event.target.value)">
                     <option *ngFor="let option of selectDropdownOptions" [value]="option" [selected]="value == option">{{option+1}}</option>
diff --git a/src/app/components/confirmdialog/confirmdialog.ts b/src/app/components/confirmdialog/confirmdialog.ts
index f66ff8cb303..ef092bfea39 100644
--- a/src/app/components/confirmdialog/confirmdialog.ts
+++ b/src/app/components/confirmdialog/confirmdialog.ts
@@ -16,7 +16,7 @@ import {Subscription}   from 'rxjs';
             [@animation]="{value: 'visible', params: {transitionParams: transitionOptions}}" (@animation.start)="onAnimationStart($event)" *ngIf="visible">
             <div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top">
                 <span class="ui-dialog-title" *ngIf="header">{{header}}</span>
-                <a *ngIf="closable" [ngClass]="{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}" href="#" role="button" (click)="close($event)">
+                <a *ngIf="closable" [ngClass]="{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}" tabindex="0" role="button" (click)="close($event)" (keydown.enter)="close($event)">
                     <span class="pi pi-fw pi-times"></span>
                 </a>
             </div>
diff --git a/src/app/components/dataview/dataview.ts b/src/app/components/dataview/dataview.ts
index 73b9a556f6b..932fdcaae95 100644
--- a/src/app/components/dataview/dataview.ts
+++ b/src/app/components/dataview/dataview.ts
@@ -296,11 +296,11 @@ export class DataView implements OnInit,AfterContentInit,BlockableUI {
     selector: 'p-dataViewLayoutOptions',
     template: `
         <div [ngClass]="'ui-dataview-layout-options ui-selectbutton ui-buttonset'" [ngStyle]="style" [class]="styleClass">
-            <a href="#" class="ui-button ui-button-icon-only ui-state-default" (click)="changeLayout($event, 'list')"
+            <a tabindex="0" class="ui-button ui-button-icon-only ui-state-default" (click)="changeLayout($event, 'list')" (keydown.enter)="changeLayout($event, 'list')"
                 [ngClass]="{'ui-state-active': dv.layout === 'list'}">
                 <i class="pi pi-bars ui-button-icon-left"></i>
                 <span class="ui-button-text ui-clickable">ui-btn</span>
-            </a><a href="#" class="ui-button ui-button-icon-only ui-state-default" (click)="changeLayout($event, 'grid')"
+            </a><a tabindex="0" class="ui-button ui-button-icon-only ui-state-default" (click)="changeLayout($event, 'grid')" (keydown.enter)="changeLayout($event, 'grid')"
                 [ngClass]="{'ui-state-active': dv.layout === 'grid'}">
                 <i class="pi pi-th-large ui-button-icon-left"></i>
                 <span class="ui-button-text ui-clickable">ui-btn</span>
diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts
index 71536d5c356..8a90d493528 100644
--- a/src/app/components/dialog/dialog.ts
+++ b/src/app/components/dialog/dialog.ts
@@ -18,10 +18,10 @@ let idx: number = 0;
                 <span [attr.id]="id + '-label'" class="ui-dialog-title" *ngIf="headerFacet && headerFacet.first">
                     <ng-content select="p-header"></ng-content>
                 </span>
-                <a *ngIf="closable" [ngClass]="{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}" href="#" role="button" (click)="close($event)" (mousedown)="onCloseMouseDown($event)">
+                <a *ngIf="closable" [ngClass]="{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}" tabindex="0" role="button" (click)="close($event)" (keydown.enter)="close($event)" (mousedown)="onCloseMouseDown($event)">
                     <span class="pi pi-times"></span>
                 </a>
-                <a *ngIf="maximizable" [ngClass]="{'ui-dialog-titlebar-icon ui-dialog-titlebar-maximize ui-corner-all':true}" href="#" role="button" (click)="toggleMaximize($event)">
+                <a *ngIf="maximizable" [ngClass]="{'ui-dialog-titlebar-icon ui-dialog-titlebar-maximize ui-corner-all':true}" tabindex="0" role="button" (click)="toggleMaximize($event)" (keydown.enter)="toggleMaximize($event)">
                     <span [ngClass]="maximized ? 'pi pi-window-minimize' : 'pi pi-window-maximize'"></span>
                 </a>
             </div>
diff --git a/src/app/components/fieldset/fieldset.ts b/src/app/components/fieldset/fieldset.ts
index 7a3e5aa9b12..2c30571a4a2 100644
--- a/src/app/components/fieldset/fieldset.ts
+++ b/src/app/components/fieldset/fieldset.ts
@@ -12,7 +12,7 @@ let idx: number = 0;
         <fieldset [attr.id]="id" [ngClass]="{'ui-fieldset ui-widget ui-widget-content ui-corner-all': true, 'ui-fieldset-toggleable': toggleable}" [ngStyle]="style" [class]="styleClass">
             <legend class="ui-fieldset-legend ui-corner-all ui-state-default ui-unselectable-text">
                 <ng-container *ngIf="toggleable; else legendContent">
-                    <a href="#" (click)="toggle($event)" [attr.aria-controls]="id + '-content'" [attr.aria-expanded]="!collapsed" [attr.tabindex]="toggleable ? null : -1">
+                    <a tabindex="0" (click)="toggle($event)" (keydown.enter)="toggle($event)" [attr.aria-controls]="id + '-content'" [attr.aria-expanded]="!collapsed">
                         <ng-container *ngTemplateOutlet="legendContent"></ng-container>
                     </a>
                 </ng-container>
diff --git a/src/app/components/lightbox/lightbox.ts b/src/app/components/lightbox/lightbox.ts
index a4ff442ddfe..e5fe8a6b9a4 100644
--- a/src/app/components/lightbox/lightbox.ts
+++ b/src/app/components/lightbox/lightbox.ts
@@ -28,7 +28,7 @@ import {DomHandler} from '../dom/domhandler';
                 [ngClass]="{'ui-helper-hidden':!rightVisible}"><span class="ui-lightbox-nav-icon pi pi-chevron-right"></span></a>
            </div>
            <div class="ui-lightbox-caption ui-widget-header" [style.display]="captionText ? 'block' : 'none'">
-              <span class="ui-lightbox-caption-text">{{captionText}}</span><a class="ui-lightbox-close ui-corner-all" href="#" (click)="hide($event)"><span class="pi pi-times"></span></a>
+              <span class="ui-lightbox-caption-text">{{captionText}}</span><a class="ui-lightbox-close ui-corner-all" tabindex="0" (click)="hide($event)" (keydown.enter)="hide($event)"><span class="pi pi-times"></span></a>
               <div style="clear:both"></div>
            </div>
         </div>
diff --git a/src/app/components/messages/messages.ts b/src/app/components/messages/messages.ts
index bb290966971..1df69bcd5e6 100644
--- a/src/app/components/messages/messages.ts
+++ b/src/app/components/messages/messages.ts
@@ -14,7 +14,7 @@ import {Subscription} from 'rxjs';
                     'ui-messages-error':(value[0].severity === 'error'),
                     'ui-messages-success':(value[0].severity === 'success')}"
                     [ngStyle]="style" [class]="styleClass" [@messageAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}">
-            <a href="#" class="ui-messages-close" (click)="clear($event)" *ngIf="closable">
+            <a tabindex="0" class="ui-messages-close" (click)="clear($event)" (keydown.enter)="clear($event)" *ngIf="closable">
                 <i class="pi pi-times"></i>
             </a>
             <span class="ui-messages-icon pi" [ngClass]="icon"></span>
diff --git a/src/app/components/multiselect/multiselect.css b/src/app/components/multiselect/multiselect.css
index 6d28525d37a..d311f1fa2bd 100644
--- a/src/app/components/multiselect/multiselect.css
+++ b/src/app/components/multiselect/multiselect.css
@@ -129,6 +129,7 @@
     top: .375em;
     display: block;
     border: 0 none;
+    cursor: pointer;
 }
 
 .ui-multiselect-header a.ui-multiselect-all,
@@ -138,10 +139,6 @@
     display: block;
 }
 
-.ui-multiselect-header .ui-multiselect-close.ui-state-hover {
-    padding:0px;
-}
-
 .ui-multiselect-footer {
     padding: .25em;
 }
diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts
index 7ccd96b3c0a..e36cc756163 100644
--- a/src/app/components/multiselect/multiselect.ts
+++ b/src/app/components/multiselect/multiselect.ts
@@ -46,7 +46,7 @@ export const MULTISELECT_VALUE_ACCESSOR: any = {
                         <input #filterInput type="text" role="textbox" [value]="filterValue||''" (input)="onFilter($event)" class="ui-inputtext ui-widget ui-state-default ui-corner-all" [attr.placeholder]="filterPlaceHolder">
                         <span class="ui-multiselect-filter-icon pi pi-search"></span>
                     </div>
-                    <a class="ui-multiselect-close ui-corner-all" href="#" (click)="close($event)">
+                    <a class="ui-multiselect-close ui-corner-all" tabindex="0" (click)="close($event)" (keydown.enter)="close($event)">
                         <span class="pi pi-times"></span>
                     </a>
                 </div>
diff --git a/src/app/components/organizationchart/organizationchart.ts b/src/app/components/organizationchart/organizationchart.ts
index 49d532490b4..ec0bba71909 100644
--- a/src/app/components/organizationchart/organizationchart.ts
+++ b/src/app/components/organizationchart/organizationchart.ts
@@ -19,7 +19,7 @@ import {PrimeTemplate} from '../common/shared';
                     <div *ngIf="chart.getTemplateForNode(node)">
                         <ng-container *ngTemplateOutlet="chart.getTemplateForNode(node); context: {$implicit: node}"></ng-container>
                     </div>
-                    <a *ngIf="!leaf" href="#" class="ui-node-toggler" (click)="toggleNode($event, node)">
+                    <a *ngIf="!leaf" tabindex="0" class="ui-node-toggler" (click)="toggleNode($event, node)" (keydown.enter)="toggleNode($event, node)">
                         <i class="ui-node-toggler-icon pi" [ngClass]="{'pi-chevron-down': node.expanded, 'pi-chevron-up': !node.expanded}"></i>
                     </a>
                 </div>
diff --git a/src/app/components/overlaypanel/overlaypanel.css b/src/app/components/overlaypanel/overlaypanel.css
index 81124a8b8ac..1004fd0c4f3 100644
--- a/src/app/components/overlaypanel/overlaypanel.css
+++ b/src/app/components/overlaypanel/overlaypanel.css
@@ -19,6 +19,7 @@
     -moz-border-radius: 100%;
     -webkit-border-radius: 100%;
     border-radius: 100%;
+    cursor: pointer;
 }
 
 .ui-overlaypanel-close-icon {
diff --git a/src/app/components/overlaypanel/overlaypanel.ts b/src/app/components/overlaypanel/overlaypanel.ts
index e7145b014f1..d3118914447 100644
--- a/src/app/components/overlaypanel/overlaypanel.ts
+++ b/src/app/components/overlaypanel/overlaypanel.ts
@@ -11,7 +11,7 @@ import {trigger,state,style,transition,animate,AnimationEvent} from '@angular/an
             <div class="ui-overlaypanel-content">
                 <ng-content></ng-content>
             </div>
-            <a href="#" *ngIf="showCloseIcon" class="ui-overlaypanel-close ui-state-default" (click)="onCloseClick($event)">
+            <a tabindex="0" *ngIf="showCloseIcon" class="ui-overlaypanel-close ui-state-default" (click)="onCloseClick($event)" (keydown.enter)="hide()">
                 <span class="ui-overlaypanel-close-icon pi pi-times"></span>
             </a>
         </div>
diff --git a/src/app/components/paginator/paginator.ts b/src/app/components/paginator/paginator.ts
index eb81674532b..d2c30fab7ed 100644
--- a/src/app/components/paginator/paginator.ts
+++ b/src/app/components/paginator/paginator.ts
@@ -13,24 +13,24 @@ import {SharedModule} from '../common/shared';
             <div class="ui-paginator-left-content" *ngIf="templateLeft">
                 <ng-container *ngTemplateOutlet="templateLeft; context: {$implicit: paginatorState}"></ng-container>
             </div>
-            <a href="#" class="ui-paginator-first ui-paginator-element ui-state-default ui-corner-all"
-                    (click)="changePageToFirst($event)" [ngClass]="{'ui-state-disabled':isFirstPage()}" [tabindex]="isFirstPage() ? -1 : null">
+            <a [attr.tabindex]="isFirstPage() ? null : '0'" class="ui-paginator-first ui-paginator-element ui-state-default ui-corner-all"
+                    (click)="changePageToFirst($event)" (keydown.enter)="changePageToFirst($event)" [ngClass]="{'ui-state-disabled':isFirstPage()}" [tabindex]="isFirstPage() ? -1 : null">
                 <span class="ui-paginator-icon pi pi-step-backward"></span>
             </a>
-            <a href="#" class="ui-paginator-prev ui-paginator-element ui-state-default ui-corner-all"
-                    (click)="changePageToPrev($event)" [ngClass]="{'ui-state-disabled':isFirstPage()}" [tabindex]="isFirstPage() ? -1 : null">
+            <a tabindex="0" [attr.tabindex]="isFirstPage() ? null : '0'" class="ui-paginator-prev ui-paginator-element ui-state-default ui-corner-all"
+                    (click)="changePageToPrev($event)" (keydown.enter)="changePageToPrev($event)" [ngClass]="{'ui-state-disabled':isFirstPage()}" [tabindex]="isFirstPage() ? -1 : null">
                 <span class="ui-paginator-icon pi pi-caret-left"></span>
             </a>
             <span class="ui-paginator-pages">
-                <a href="#" *ngFor="let pageLink of pageLinks" class="ui-paginator-page ui-paginator-element ui-state-default ui-corner-all"
-                    (click)="onPageLinkClick($event, pageLink - 1)" [ngClass]="{'ui-state-active': (pageLink-1 == getPage())}">{{pageLink}}</a>
+                <a tabindex="0" *ngFor="let pageLink of pageLinks" class="ui-paginator-page ui-paginator-element ui-state-default ui-corner-all"
+                    (click)="onPageLinkClick($event, pageLink - 1)" (keydown.enter)="onPageLinkClick($event, pageLink - 1)" [ngClass]="{'ui-state-active': (pageLink-1 == getPage())}">{{pageLink}}</a>
             </span>
-            <a href="#" class="ui-paginator-next ui-paginator-element ui-state-default ui-corner-all"
-                    (click)="changePageToNext($event)" [ngClass]="{'ui-state-disabled':isLastPage()}" [tabindex]="isLastPage() ? -1 : null">
+            <a [attr.tabindex]="isLastPage() ? null : '0'" class="ui-paginator-next ui-paginator-element ui-state-default ui-corner-all"
+                    (click)="changePageToNext($event)" (keydown.enter)="changePageToNext($event)" [ngClass]="{'ui-state-disabled':isLastPage()}" [tabindex]="isLastPage() ? -1 : null">
                 <span class="ui-paginator-icon pi pi-caret-right"></span>
             </a>
-            <a href="#" class="ui-paginator-last ui-paginator-element ui-state-default ui-corner-all"
-                    (click)="changePageToLast($event)" [ngClass]="{'ui-state-disabled':isLastPage()}" [tabindex]="isLastPage() ? -1 : null">
+            <a [attr.tabindex]="isLastPage() ? null : '0'" class="ui-paginator-last ui-paginator-element ui-state-default ui-corner-all"
+                    (click)="changePageToLast($event)" (keydown.enter)="changePageToLast($event)" [ngClass]="{'ui-state-disabled':isLastPage()}" [tabindex]="isLastPage() ? -1 : null">
                 <span class="ui-paginator-icon pi pi-step-forward"></span>
             </a>
             <p-dropdown [options]="rowsPerPageItems" [(ngModel)]="rows" *ngIf="rowsPerPageOptions" 
diff --git a/src/app/components/panel/panel.ts b/src/app/components/panel/panel.ts
index 4ccd4e9acd2..2eb171c41e1 100644
--- a/src/app/components/panel/panel.ts
+++ b/src/app/components/panel/panel.ts
@@ -14,8 +14,8 @@ let idx: number = 0;
                 *ngIf="showHeader" (click)="onHeaderClick($event)">
                 <span class="ui-panel-title" *ngIf="header">{{header}}</span>
                 <ng-content select="p-header"></ng-content>
-                <a *ngIf="toggleable" [attr.id]="id + '-label'" class="ui-panel-titlebar-icon ui-panel-titlebar-toggler ui-corner-all ui-state-default" href="#"
-                    (click)="onIconClick($event)" [attr.aria-controls]="id + '-content'" role="tab" [attr.aria-expanded]="!collapsed">
+                <a *ngIf="toggleable" [attr.id]="id + '-label'" class="ui-panel-titlebar-icon ui-panel-titlebar-toggler ui-corner-all ui-state-default" tabindex="0"
+                    (click)="onIconClick($event)" (keydown.enter)="onIconClick($event)" [attr.aria-controls]="id + '-content'" role="tab" [attr.aria-expanded]="!collapsed">
                     <span [class]="collapsed ? expandIcon : collapseIcon"></span>
                 </a>
             </div>
diff --git a/src/app/components/rating/rating.ts b/src/app/components/rating/rating.ts
index 144289aed63..dafbc2b0a39 100644
--- a/src/app/components/rating/rating.ts
+++ b/src/app/components/rating/rating.ts
@@ -12,10 +12,10 @@ export const RATING_VALUE_ACCESSOR: any = {
     selector: 'p-rating',
     template: `
         <div class="ui-rating" [ngClass]="{'ui-state-disabled': disabled}">
-            <a href="#" *ngIf="cancel" (click)="clear($event)" class="ui-rating-cancel">
+            <a [attr.tabindex]="disabled ? null : '0'" *ngIf="cancel" (click)="clear($event)" (keydown.enter)="clear($event)"  class="ui-rating-cancel">
                 <span class="ui-rating-icon" [ngClass]="iconCancelClass" [ngStyle]="iconCancelStyle"></span>
             </a>
-            <a href="#" *ngFor="let star of starsArray;let i=index" (click)="rate($event,i)">
+            <a [attr.tabindex]="disabled ? null : '0'" *ngFor="let star of starsArray;let i=index" (click)="rate($event,i)" (keydown.enter)="rate($event,i)">
                 <span class="ui-rating-icon" 
                     [ngClass]="(!value || i >= value) ? iconOffClass : iconOnClass"
                     [ngStyle]="(!value || i >= value) ? iconOffStyle : iconOnStyle"
diff --git a/src/app/components/sidebar/sidebar.ts b/src/app/components/sidebar/sidebar.ts
index c671cb8bdb1..08d379f09f7 100644
--- a/src/app/components/sidebar/sidebar.ts
+++ b/src/app/components/sidebar/sidebar.ts
@@ -11,7 +11,7 @@ import {DomHandler} from '../dom/domhandler';
             'ui-sidebar-top': (position === 'top'), 'ui-sidebar-bottom': (position === 'bottom'), 
             'ui-sidebar-full': fullScreen}"
             [@panelState]="visible ? 'visible' : 'hidden'" [ngStyle]="style" [class]="styleClass">
-            <a [ngClass]="{'ui-sidebar-close ui-corner-all':true}" *ngIf="showCloseIcon" href="#" role="button" (click)="close($event)">
+            <a [ngClass]="{'ui-sidebar-close ui-corner-all':true}" *ngIf="showCloseIcon" tabindex="0" role="button" (click)="close($event)" (keydown.enter)="close($event)">
                 <span class="pi pi-times"></span>
             </a>
             <ng-content></ng-content>
diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
index 8970e1d7cbc..1dae8d902db 100644
--- a/src/app/components/table/table.ts
+++ b/src/app/components/table/table.ts
@@ -2194,7 +2194,7 @@ export class SortableColumn implements OnInit, OnDestroy {
 @Component({
     selector: 'p-sortIcon',
     template: `
-        <a href="#" (click)="onClick($event)" [attr.aria-label]="ariaText" class="ui-table-sort-icon">
+        <a tabindex="0" (click)="onClick($event)" [attr.aria-label]="ariaText" class="ui-table-sort-icon">
             <i class="ui-sortable-column-icon pi pi-fw" [ngClass]="{'pi-sort-up': sortOrder === 1, 'pi-sort-down': sortOrder === -1, 'pi-sort': sortOrder === 0}"></i>
         </a>
     `
diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts
index 5e4b5ef7431..b1e9131421b 100644
--- a/src/app/components/toast/toast.ts
+++ b/src/app/components/toast/toast.ts
@@ -15,7 +15,7 @@ import {trigger,state,style,transition,animate,query,animateChild} from '@angula
                 'ui-toast-message-error': message.severity == 'error','ui-toast-message-success': message.severity == 'success'}"
                 (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
             <div class="ui-toast-message-content">
-                <a href="#" class="ui-toast-close-icon pi pi-times" (click)="onCloseIconClick($event)" *ngIf="message.closable !== false"></a>
+                <a tabindex="0" class="ui-toast-close-icon pi pi-times" (click)="onCloseIconClick($event)" (keydown.enter)="onCloseIconClick($event)" *ngIf="message.closable !== false"></a>
                 <ng-container *ngIf="!template">
                     <span class="ui-toast-icon pi"
                         [ngClass]="{'pi-info-circle': message.severity == 'info', 'pi-exclamation-triangle': message.severity == 'warn',
diff --git a/src/app/components/treetable/treetable.ts b/src/app/components/treetable/treetable.ts
index 2ad3497f813..91cd08bec0d 100644
--- a/src/app/components/treetable/treetable.ts
+++ b/src/app/components/treetable/treetable.ts
@@ -1531,7 +1531,7 @@ export class TTSortableColumn implements OnInit, OnDestroy {
 @Component({
     selector: 'p-treeTableSortIcon',
     template: `
-        <a href="#" (click)="onClick($event)" class="ui-treetable-sort-icon" [attr.aria-label]=" sortOrder === 1 ? ariaLabelAsc : sortOrder === -1 ? ariaLabelDesc : '' ">
+        <a tabindex="0" (click)="onClick($event)" (keydown.enter)="onClick($event)" class="ui-treetable-sort-icon" [attr.aria-label]=" sortOrder === 1 ? ariaLabelAsc : sortOrder === -1 ? ariaLabelDesc : '' ">
             <i class="ui-sortable-column-icon pi pi-fw" [ngClass]="{'pi-sort-up': sortOrder === 1, 'pi-sort-down': sortOrder === -1, 'pi-sort': sortOrder === 0}"></i>
         </a>
     `
@@ -2299,7 +2299,9 @@ export class TreeTableCellEditor implements AfterContentInit {
 @Component({
     selector: 'p-treeTableToggler',
     template: `
-        <a href="#" class="ui-treetable-toggler" *ngIf="rowNode.node.leaf === false || rowNode.level !== 0 || rowNode.node.children && rowNode.node.children.length" (click)="onClick($event)" [style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'" [style.marginLeft]="rowNode.level * 16 + 'px'">
+        <a tabindex="0" class="ui-treetable-toggler" *ngIf="rowNode.node.leaf === false || rowNode.level !== 0 || rowNode.node.children && rowNode.node.children.length" 
+            (click)="onClick($event)" (keydown.enter)="onClick($event)" 
+            [style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'" [style.marginLeft]="rowNode.level * 16 + 'px'">
             <i [ngClass]="rowNode.node.expanded ? 'pi pi-fw pi-chevron-down' : 'pi pi-fw pi-chevron-right'"></i>
         </a>
     `
diff --git a/src/app/showcase/components/overlaypanel/overlaypaneldemo.html b/src/app/showcase/components/overlaypanel/overlaypaneldemo.html
index f3c9739cfc4..8aeeadddd34 100644
--- a/src/app/showcase/components/overlaypanel/overlaypaneldemo.html
+++ b/src/app/showcase/components/overlaypanel/overlaypaneldemo.html
@@ -15,11 +15,11 @@ <h3 class="first">Basic</h3>
     </p-overlayPanel>
     
     <h3>Customized</h3>
-    <p>This OverlayPanel gets displayed on hover of the icon, is not dismissable and displays a close icon.</p>
+    <p>This OverlayPanel gets displayed on hover of the icon and displays a close icon.</p>
     <i class="pi pi-search" (mouseenter)="op2.show($event)" style="font-size:24px"></i>
     
     <p-overlayPanel #op2 [showCloseIcon]="true" [dismissable]="false">
-        <p-table [value]="cars1" [style]="{width: '500px'}">
+        <p-table [value]="cars1" [style]="{width: '500px'}" [paginator]="true" [rows]="5">
             <ng-template pTemplate="header">
                 <tr>
                     <th pSortableColumn="vin">Vin <p-sortIcon field="vin"></p-sortIcon></th>
@@ -307,7 +307,7 @@ <h3>Dependencies</h3>
 &lt;i class="pi pi-search" (mouseenter)="op2.show($event)" style="font-size:24px"&gt;&lt;/i&gt;
 
 &lt;p-overlayPanel #op2 [showCloseIcon]="true" [dismissable]="false"&gt;
-    &lt;p-table [value]="cars1" [style]="&#123;width: '500px'&#125;"&gt;
+    &lt;p-table [value]="cars1" [style]="&#123;width: '500px'&#125; [paginator]="true" [rows]="5""&gt;
         &lt;ng-template pTemplate="header"&gt;
             &lt;tr&gt;
                 &lt;th pSortableColumn="vin"&gt;Vin &lt;p-sortIcon field="vin"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css
index 7773d3be3b6..8b410a1ced6 100644
--- a/src/assets/components/themes/luna-amber/theme.css
+++ b/src/assets/components/themes/luna-amber/theme.css
@@ -475,9 +475,6 @@ body {
         transition: color 0.2s; }
         body .ui-multiselect-panel .ui-multiselect-header .ui-multiselect-close:hover {
           color: #dedede; }
-        body .ui-multiselect-panel .ui-multiselect-header .ui-multiselect-close:focus {
-          outline: 0 none;
-          color: #dedede; }
     body .ui-multiselect-panel .ui-multiselect-items {
       padding: 0; }
       body .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item {
diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css
index 6624dda839f..5cfdc36a0a5 100644
--- a/src/assets/components/themes/luna-blue/theme.css
+++ b/src/assets/components/themes/luna-blue/theme.css
@@ -475,9 +475,6 @@ body {
         transition: color 0.2s; }
         body .ui-multiselect-panel .ui-multiselect-header .ui-multiselect-close:hover {
           color: #dedede; }
-        body .ui-multiselect-panel .ui-multiselect-header .ui-multiselect-close:focus {
-          outline: 0 none;
-          color: #dedede; }
     body .ui-multiselect-panel .ui-multiselect-items {
       padding: 0; }
       body .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item {
diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css
index 4d2087b6e16..5977e720cea 100644
--- a/src/assets/components/themes/luna-green/theme.css
+++ b/src/assets/components/themes/luna-green/theme.css
@@ -475,9 +475,6 @@ body {
         transition: color 0.2s; }
         body .ui-multiselect-panel .ui-multiselect-header .ui-multiselect-close:hover {
           color: #dedede; }
-        body .ui-multiselect-panel .ui-multiselect-header .ui-multiselect-close:focus {
-          outline: 0 none;
-          color: #dedede; }
     body .ui-multiselect-panel .ui-multiselect-items {
       padding: 0; }
       body .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item {
diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css
index 2f742a2eb5f..f330b6e3563 100644
--- a/src/assets/components/themes/luna-pink/theme.css
+++ b/src/assets/components/themes/luna-pink/theme.css
@@ -475,9 +475,6 @@ body {
         transition: color 0.2s; }
         body .ui-multiselect-panel .ui-multiselect-header .ui-multiselect-close:hover {
           color: #dedede; }
-        body .ui-multiselect-panel .ui-multiselect-header .ui-multiselect-close:focus {
-          outline: 0 none;
-          color: #dedede; }
     body .ui-multiselect-panel .ui-multiselect-items {
       padding: 0; }
       body .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item {
diff --git a/src/assets/components/themes/nova-colored/theme.css b/src/assets/components/themes/nova-colored/theme.css
index 7b3533203ab..5d9a53345dc 100644
--- a/src/assets/components/themes/nova-colored/theme.css
+++ b/src/assets/components/themes/nova-colored/theme.css
@@ -475,9 +475,6 @@ body {
         transition: color 0.2s; }
         body .ui-multiselect-panel .ui-multiselect-header .ui-multiselect-close:hover {
           color: #333333; }
-        body .ui-multiselect-panel .ui-multiselect-header .ui-multiselect-close:focus {
-          outline: 0 none;
-          color: #333333; }
     body .ui-multiselect-panel .ui-multiselect-items {
       padding: 0; }
       body .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item {
diff --git a/src/assets/components/themes/nova-dark/theme.css b/src/assets/components/themes/nova-dark/theme.css
index 961c4060b38..aa9985f7d0b 100644
--- a/src/assets/components/themes/nova-dark/theme.css
+++ b/src/assets/components/themes/nova-dark/theme.css
@@ -475,9 +475,6 @@ body {
         transition: color 0.2s; }
         body .ui-multiselect-panel .ui-multiselect-header .ui-multiselect-close:hover {
           color: #333333; }
-        body .ui-multiselect-panel .ui-multiselect-header .ui-multiselect-close:focus {
-          outline: 0 none;
-          color: #333333; }
     body .ui-multiselect-panel .ui-multiselect-items {
       padding: 0; }
       body .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item {
diff --git a/src/assets/components/themes/nova-light/theme.css b/src/assets/components/themes/nova-light/theme.css
index bb94b53b89d..1f48d0ca58a 100644
--- a/src/assets/components/themes/nova-light/theme.css
+++ b/src/assets/components/themes/nova-light/theme.css
@@ -475,9 +475,6 @@ body {
         transition: color 0.2s; }
         body .ui-multiselect-panel .ui-multiselect-header .ui-multiselect-close:hover {
           color: #333333; }
-        body .ui-multiselect-panel .ui-multiselect-header .ui-multiselect-close:focus {
-          outline: 0 none;
-          color: #333333; }
     body .ui-multiselect-panel .ui-multiselect-items {
       padding: 0; }
       body .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item {