add aria accessibility

VilledeMontreal · Mar 22, 2022 · c124928 · c124928
1 parent 7875677
commit c124928
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 30 deletions.
diff --git a/projects/angular-ui/src/lib/radio/radio-group.component.html b/projects/angular-ui/src/lib/radio/radio-group.component.html
@@ -1,18 +1,12 @@
-<fieldset
-  role="radiogroup"
-  class="bao-radio-button-group"
-  [id]="id"
-  [attr.aria-describedby]="ariaDescribedby"
->
+<fieldset role="radiogroup" class="bao-radio-button-group" [id]="id">
+  <ng-content select="bao-label, [bao-label]"></ng-content>
+  <ng-content select="bao-guiding-text, [bao-guiding-text]"></ng-content>
+
   <ng-content></ng-content>
   <div
     class="bao-radio-button-group-description"
-    [attr.id]="ariaDescribedby"
-    #container
     (cdkObserveContent)="onContentChange()"
   >
-    <ng-content
-      select="bao-error, [bao-error], bao-guiding-text, [bao-guiding-text]"
-    ></ng-content>
+    <ng-content select="bao-error, [bao-error]"></ng-content>
   </div>
 </fieldset>
diff --git a/projects/angular-ui/src/lib/radio/radio-group.component.ts b/projects/angular-ui/src/lib/radio/radio-group.component.ts
@@ -15,9 +15,9 @@ import {
   forwardRef,
   InjectionToken,
   Input,
+  OnInit,
   Output,
   QueryList,
-  ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -51,7 +51,7 @@ let radioGroupNextUniqueId = 0;
   ]
 })
 export class BaoRadioButtonGroupComponent
-  implements AfterContentInit, ControlValueAccessor, AfterViewInit
+  implements AfterContentInit, ControlValueAccessor, AfterViewInit, OnInit
 {
   @ContentChildren(forwardRef(() => BaoRadioButtonComponent), {
     descendants: true
@@ -71,6 +71,23 @@ export class BaoRadioButtonGroupComponent
    */
   @Input() public id: string = this._uniqueId;
 
+  /**
+   * The aria-describebdy-text id for web accessibility
+   * only when we have de guidance text
+   */
+  public ariaDescribedbyGuidingText?: string;
+
+  /**
+   * The aria-labelledby id for web accessibility
+   */
+  public ariaLabelledby?: string;
+
+  /**
+   * The aria-describebdy-error id for web accessibility
+   * only when error section appears
+   */
+  public ariaDescribedbyError?: string;
+
   /**
    * Define the name property of all radio buttons. Default : null
    */
@@ -146,17 +163,25 @@ export class BaoRadioButtonGroupComponent
    */
   public ariaDescribedby: string | null = null;
 
-  @ViewChild('container', { static: false })
-  private staticContainer: ElementRef;
+  constructor(private cdr: ChangeDetectorRef, private elementRef: ElementRef) {}
+
+  ngOnInit(): void {
+    this.ariaDescribedbyError = `${this.id}-ariadescribedby-error`;
+    this.ariaDescribedbyGuidingText = `${this.id}-ariadescribedby-guiding-text`;
+    this.ariaLabelledby = `${this.id}-arialabelledby`;
+  }
 
-  constructor(private cdr: ChangeDetectorRef) {}
+  get nativeElement(): HTMLElement {
+    return this.elementRef.nativeElement;
+  }
 
   public ngAfterContentInit() {
     this._isInitialized = true;
   }
 
   public ngAfterViewInit() {
     this.setAriaDescribedByToDescription();
+    this.setAriaDescribedLgendsGuidingText();
     this.cdr.detectChanges();
   }
 
@@ -264,20 +289,67 @@ export class BaoRadioButtonGroupComponent
   public onModelChange: (value: any) => void = () => undefined;
 
   /**
-   * Set the aria-describedby property to bao-guiding-text if available
+   * Set the aria-describedby property to bao-errors if available
    */
   private setAriaDescribedByToDescription() {
-    const children = Array.from(this.staticContainer.nativeElement.children);
-    if (children.length === 0) {
-      this.showAriaDescribedBy(false);
-      return;
+    const fieldSet = this.elementNode('FIELDSET');
+
+    if (fieldSet) {
+      const baoError = this.elementNode('DIV', fieldSet);
+      this.setAriaAttribute(
+        baoError,
+        this.ariaDescribedbyError,
+        fieldSet,
+        'aria-describedby'
+      );
+    }
+  }
+
+  /**
+   * Set the aria-describedby property to bao-guiding-text and legend if available
+   */
+  private setAriaDescribedLgendsGuidingText() {
+    const fieldSet = this.elementNode('FIELDSET');
+
+    if (fieldSet) {
+      const baoLabel = this.elementNode('LEGEND', fieldSet);
+      const baoGuidingText = this.elementNode('BAO-GUIDING-TEXT', fieldSet);
+
+      this.setAriaAttribute(
+        baoLabel,
+        this.ariaLabelledby,
+        fieldSet,
+        'aria-labelledby'
+      );
+      this.setAriaAttribute(
+        baoGuidingText,
+        this.ariaDescribedbyGuidingText,
+        fieldSet,
+        'aria-describedby'
+      );
     }
+  }
 
-    this.showAriaDescribedBy(true);
+  private setAriaAttribute(
+    nodeElement: Node,
+    id: string,
+    ariaElment: Node,
+    ariaType: string
+  ): void {
+    if (nodeElement) {
+      (nodeElement as HTMLElement).setAttribute('id', id);
+      (ariaElment as HTMLElement).setAttribute(ariaType, id);
+    }
   }
 
-  private showAriaDescribedBy(value: boolean) {
-    this.ariaDescribedby = value ? `${this.id}-ariadescribedby` : null;
+  private elementNode(name: string, nativeElt?: Node): Node {
+    const childNodes = nativeElt
+      ? Array.from(nativeElt.childNodes)
+      : Array.from(this.nativeElement.childNodes);
+    const element = childNodes.find(x => x.nodeName === name);
+    console.log(name);
+    console.log(childNodes);
+    return element;
   }
 
   private onTouch: () => any = () => undefined;

diff --git a/projects/angular-ui/src/lib/radio/radio.component.ts b/projects/angular-ui/src/lib/radio/radio.component.ts
@@ -56,7 +56,7 @@ let radioNextUniqueId = 0;
     '[class.bao-radio-button-disabled]': 'disabled',
     '[class.bao-radio-button-card]': 'brandBorder',
     '[class.bao-radio-button-hidden-label]': 'hiddenLabel',
-    '[class.bao-radio-button-label-list]': 'horizontalBorder',
+    '[class.bao-radio-button-label-list]': 'horizontalStyle',
     '[class.bao-displaymode-compact]': 'displayMode === "compact"'
   }
 })
@@ -86,7 +86,7 @@ export class BaoRadioButtonComponent
   /**
    * horizontal border
    */
-  @Input() public horizontalBorder = false;
+  @Input() public horizontalStyle = false;
 
   /**
    * custom display mode compact, responsive

diff --git a/projects/storybook-angular/src/stories/Radio/Radio.stories.ts b/projects/storybook-angular/src/stories/Radio/Radio.stories.ts
@@ -157,7 +157,7 @@ export const RadioWithDescAndActionButton: Story = args => ({
   props: args,
   template: `
     <bao-radio-button-group id="RadioWithDescAndHiddenLabel" name="RadioWithDescAndHiddenLabel" >
-      <bao-radio-button id="ID200" name="name200" value="example1" horizontalBorder="true" >
+      <bao-radio-button id="ID200" name="name200" value="example1" horizontalStyle="true" >
       <bao-label>Radio button avec action button</bao-label>
       <bao-radio-action-button>
         <button
@@ -185,7 +185,7 @@ export const RadioWithDescAndActionButton: Story = args => ({
         </bao-radio-action-button>
         <bao-radio-button-description>Est est et dolores dolore sed justo ipsum et sit.</bao-radio-button-description>
         </bao-radio-button>
-        <bao-radio-button id="ID201" name="name200" value="example1" horizontalBorder="true" >
+        <bao-radio-button id="ID201" name="name200" value="example1" horizontalStyle="true" >
         <bao-label >Radio button avec action button</bao-label>
         <bao-radio-action-button>
             <button
@@ -226,7 +226,7 @@ export const RadioWithDescAndActionButtonCompact: Story = args => ({
   props: args,
   template: `
     <bao-radio-button-group id="RadioWithDescAndHiddenLabel" name="RadioWithDescAndHiddenLabel" >
-      <bao-radio-button id="ID203" name="name203" value="example1" horizontalBorder="true" displayMode="compact" >
+      <bao-radio-button id="ID203" name="name203" value="example1" horizontalStyle="true" displayMode="compact" >
       <bao-label>Radio button avec action button</bao-label>
       <bao-radio-action-button>
         <button
@@ -254,7 +254,7 @@ export const RadioWithDescAndActionButtonCompact: Story = args => ({
         </bao-radio-action-button>
         <bao-radio-button-description>Est est et dolores dolore sed justo ipsum et sit.</bao-radio-button-description>
         </bao-radio-button>
-        <bao-radio-button id="ID204" name="name203" value="example1" horizontalBorder="true"  displayMode="compact" >
+        <bao-radio-button id="ID204" name="name203" value="example1" horizontalStyle="true"  displayMode="compact" >
         <bao-label >Radio button avec action button</bao-label>
         <bao-radio-action-button>
             <button