Merge branch 'master' of https://github.com/primefaces/primeng

src/app/showcase/doc/accessibility/formcontrolsdoc.ts

@@ -10,9 +10,9 @@ import { Code } from '../../domain/code';
                 with space key as well to trigger.
             </p>
             <app-code [code]="code1" [hideToggleCode]="true"></app-code>
-            <p class="doc-section-description">On the other hand, a fancy css based button using a div has no keyboard or screen reader support.</p>
+            <p class="doc-section-description mt-3">On the other hand, a fancy css based button using a div has no keyboard or screen reader support.</p>
             <app-code [code]="code2" [hideToggleCode]="true"></app-code>
-            <p class="doc-section-description">
+            <p class="doc-section-description mt-3">
                 <i>tabindex</i> is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form
                 controls should be preferred.
             </p>

src/app/showcase/doc/accessibility/semantichtmldoc.ts

@@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
                 <i>div</i> elements with classes are used. Consider the following example that do not mean too much for readers.
             </p>
             <app-code [code]="code1" [hideToggleCode]="true"></app-code>
-            <p class="doc-section-description">Same layout can be achieved using the semantic elements with screen reader support built-in.</p>
+            <p class="doc-section-description mt-3">Same layout can be achieved using the semantic elements with screen reader support built-in.</p>
             <app-code [code]="code2" [hideToggleCode]="true"></app-code>
         </app-docsectiontext>
     `

src/app/showcase/doc/accessibility/waiariadoc.ts

@@ -16,23 +16,23 @@ import { Code } from '../../domain/code';
             </p>
             <p>Consider the following case of a native checkbox. It has built-in keyboard and screen reader support.</p>
             <app-code [code]="code1" [hideToggleCode]="true"></app-code>
-            <p class="doc-section-description">
+            <p class="doc-section-description mt-3">
                 A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot
                 be read by a reader.
             </p>
             <app-code [code]="code2" [hideToggleCode]="true"></app-code>
-            <p class="doc-section-description">One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of <i>aria-labelledby</i> as a replacement of the <i>label</i> tag with htmlFor.</p>
+            <p class="doc-section-description mt-3">One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of <i>aria-labelledby</i> as a replacement of the <i>label</i> tag with htmlFor.</p>
             <app-code [code]="code3" [hideToggleCode]="true"></app-code>
-            <p class="doc-section-description">
+            <p class="doc-section-description mt-3">
                 However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the
                 usage of
                 <i>p-sr-only</i>
                 that hides the elements from the user but not from the screen reader.
             </p>
             <app-code [code]="code4" [hideToggleCode]="true"></app-code>
-            <p class="doc-section-description">A working sample is the PrimeNG checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.</p>
+            <p class="doc-section-description mt-3">A working sample is the PrimeNG checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.</p>
             <div class="card flex align-items-center">
-                <label htmlFor="binary" class="mr-2">Remember Me</label>
+                <label for="binary" class="mr-2">Remember Me</label>
                 <p-checkbox inputId="binary" [binary]="true"></p-checkbox>
             </div>
         </app-docsectiontext>

src/app/showcase/layout/doc/app.docsectiontext.component.ts

@@ -1,6 +1,5 @@
 import { Location } from '@angular/common';
-import { ChangeDetectorRef, Component, ElementRef, Input } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, ElementRef, Input } from '@angular/core';
 
 @Component({
     selector: 'app-docsectiontext',
@@ -32,9 +31,9 @@ export class AppDocSectionTextComponent {
 
     @Input() description: string;
 
-    constructor(public location: Location, private router: Router, public el: ElementRef, public cd: ChangeDetectorRef) {}
+    constructor(public location: Location, public el: ElementRef) {}
 
-    navigate(event, parentClick = false) {
+    navigate(event) {
         if (typeof window !== undefined) {
             const hash = window.location.hash.substring(1);
             const parentElement = event.currentTarget.parentElement;

src/app/showcase/layout/menu/app.menuitem.component.ts

@@ -1,9 +1,8 @@
+import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
-import { MenuItem } from './app.menu.component';
-import { CommonModule } from '@angular/common';
-import { AutoCompleteModule } from 'primeng/autocomplete';
 import { StyleClassModule } from 'primeng/styleclass';
+import { MenuItem } from './app.menu.component';
 
 @Component({
     selector: '[app-menuitem]',
@@ -28,7 +27,7 @@ import { StyleClassModule } from 'primeng/styleclass';
             {{ item.name }}
         </a>
         <span *ngIf="!root && item.children" class="menu-child-category">{{ item.name }}</span>
-        <div class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out" [ngClass]="{ hidden: item.children && root && isActiveRootMenuItem(item) }">
+        <div *ngIf="item.children" class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out" [ngClass]="{ hidden: item.children && root && isActiveRootMenuItem(item) }">
             <ol>
                 <li *ngFor="let child of item.children" app-menuitem [root]="false" [item]="child"></li>
             </ol>

src/app/showcase/pages/accessibility/accessibilitydemo.component.html

@@ -1 +1,3 @@
-<app-doc docTitle="Accessibility - PrimeNG" header="Accessibility" description="An introduction to accessibility and how it translates to Angular UI Components." [docs]="docs"></app-doc>
+<app-doc docTitle="Accessibility - PrimeNG" header="Accessibility"
+    description="PrimeNG has WCAG 2.1 AA level compliance, refer to the accessibility documentation of each component for detailed information."
+    [docs]="docs"></app-doc>

src/app/showcase/pages/landing/themesection.component.ts

@@ -37,14 +37,9 @@ import { CustomerService } from '../../service/customerservice';
                         [rowHover]="true"
                         [rows]="5"
                         [showCurrentPageReport]="true"
-                        [rowsPerPageOptions]="[5, 10, 15]"
                         [loading]="loading"
-                        responsiveLayout="scroll"
                         [paginator]="true"
-                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                         [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
-                        paginatorDropdownAppendTo="body"
-                        [totalRecords]="5"
                     >
                         <ng-template pTemplate="caption">
                             <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">

src/assets/showcase/data/menu.json

@@ -15,10 +15,6 @@
                 {
                     "name": "Playground",
                     "routerLink": "/playground"
-                },
-                {
-                    "name": "Accessibility",
-                    "routerLink": "/accessibility"
                 }
             ]
         },
@@ -523,6 +519,11 @@
             "icon": "pi pi-table",
             "href": "https://primeflex.org"
         },
+        {
+            "name": "Accessibility",
+            "icon": "pi pi-users",
+            "routerLink": "/accessibility"
+        },
         {
             "name": "Support",
             "icon": "pi pi-question",