Fixed #9834 - Facing accessibility-related issues with primeNg contro…

…ls and AXE tools.
primefaces · Mar 8, 2021 · bdb5914 · bdb5914
1 parent 3d8bacc
commit bdb5914
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/src/app/components/checkbox/checkbox.ts b/src/app/components/checkbox/checkbox.ts
@@ -14,10 +14,10 @@ export const CHECKBOX_VALUE_ACCESSOR: any = {
         <div [ngStyle]="style" [ngClass]="{'p-checkbox p-component': true, 'p-checkbox-checked': checked, 'p-checkbox-disabled': disabled, 'p-checkbox-focused': focused}" [class]="styleClass">
             <div class="p-hidden-accessible">
                 <input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [readonly]="readonly" [value]="value" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()"
-                (change)="handleChange($event)" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.aria-labelledby]="ariaLabelledBy" [attr.required]="required">
+                (change)="handleChange($event)" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-label]="ariaLabel" [attr.aria-checked]="checked" [attr.required]="required">
             </div>
             <div class="p-checkbox-box" (click)="onClick($event,cb,true)"
-                        [ngClass]="{'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}" role="checkbox" [attr.aria-checked]="checked">
+                        [ngClass]="{'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}">
                 <span class="p-checkbox-icon" [ngClass]="checked ? checkboxIcon : null"></span>
             </div>
         </div>
@@ -44,6 +44,8 @@ export class Checkbox implements ControlValueAccessor {
 
     @Input() ariaLabelledBy: string;
 
+    @Input() ariaLabel: string;
+
     @Input() tabindex: number;
 
     @Input() inputId: string;

diff --git a/src/app/components/radiobutton/radiobutton.ts b/src/app/components/radiobutton/radiobutton.ts
@@ -46,12 +46,10 @@ export class RadioControlRegistry {
     template: `
         <div [ngStyle]="style" [ngClass]="{'p-radiobutton p-component':true,'p-radiobutton-checked': checked, 'p-radiobutton-disabled': disabled, 'p-radiobutton-focused': focused}" [class]="styleClass">
             <div class="p-hidden-accessible">
-                <input #rb type="radio" [attr.id]="inputId" [attr.name]="name" [attr.value]="value" [attr.tabindex]="tabindex" [attr.aria-labelledby]="ariaLabelledBy"
-                    [checked]="checked" (change)="onChange($event)" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" [disabled]="disabled">
+                <input #rb type="radio" [attr.id]="inputId" [attr.name]="name" [attr.value]="value" [attr.tabindex]="tabindex" [attr.aria-checked]="checked" [attr.aria-label]="ariaLabel"
+                    [attr.aria-labelledby]="ariaLabelledBy" [checked]="checked" (change)="onChange($event)" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" [disabled]="disabled">
             </div>
-            <div (click)="handleClick($event, rb, true)" role="radio" [attr.aria-checked]="checked"
-                [ngClass]="{'p-radiobutton-box':true,
-                'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}">
+            <div (click)="handleClick($event, rb, true)" [ngClass]="{'p-radiobutton-box':true, 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}">
                 <span class="p-radiobutton-icon"></span>
             </div>
         </div>
@@ -80,6 +78,8 @@ export class RadioButton implements ControlValueAccessor, OnInit, OnDestroy {
 
     @Input() ariaLabelledBy: string;
 
+    @Input() ariaLabel: string;
+
     @Input() style: any;
 
     @Input() styleClass: string;

diff --git a/src/app/showcase/components/checkbox/checkboxdemo.html b/src/app/showcase/components/checkbox/checkboxdemo.html
@@ -167,6 +167,12 @@ <h5>Properties</h5>
                             <td>null</td>
                             <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
                         </tr>
+                        <tr>
+                            <td>ariaLabel</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Used to define a string that labels the input element.</td>
+                        </tr>
                         <tr>
                             <td>style</td>
                             <td>object</td>

diff --git a/src/app/showcase/components/radiobutton/radiobuttondemo.html b/src/app/showcase/components/radiobutton/radiobuttondemo.html
@@ -133,6 +133,12 @@ <h5>Properties</h5>
                             <td>null</td>
                             <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
                         </tr>
+                        <tr>
+                            <td>ariaLabel</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Used to define a string that labels the input element.</td>
+                        </tr>
                         <tr>
                             <td>style</td>
                             <td>object</td>