Skip to content

Commit 4b40186

Browse files
amine-annanouch-extamine-annanouch-ext
committed
add aria accessibility
Signed-off-by: [email protected] <[email protected]>
1 parent 7875677 commit 4b40186

File tree

5 files changed

+103
-33
lines changed

5 files changed

+103
-33
lines changed

‎projects/angular-ui/src/lib/radio/radio-group.component.html

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
1-
<fieldset
2-
role="radiogroup"
3-
class="bao-radio-button-group"
4-
[id]="id"
5-
[attr.aria-describedby]="ariaDescribedby"
6-
>
1+
<fieldset role="radiogroup" class="bao-radio-button-group" [id]="id">
2+
<ng-content select="bao-label, [bao-label]"></ng-content>
3+
<ng-content select="bao-guiding-text, [bao-guiding-text]"></ng-content>
4+
75
<ng-content></ng-content>
86
<div
97
class="bao-radio-button-group-description"
10-
[attr.id]="ariaDescribedby"
11-
#container
128
(cdkObserveContent)="onContentChange()"
139
>
14-
<ng-content
15-
select="bao-error, [bao-error], bao-guiding-text, [bao-guiding-text]"
16-
></ng-content>
10+
<ng-content select="bao-error, [bao-error]"></ng-content>
1711
</div>
1812
</fieldset>

‎projects/angular-ui/src/lib/radio/radio-group.component.scss

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,18 @@
22
@import '../core/grid';
33

44
.bao-radio-button-group {
5-
.bao-label {
5+
legend.bao-label {
66
margin-bottom: 0.5rem;
77
}
8-
.bao-error,
9-
.bao-guiding-text {
8+
9+
.bao-error{
1010
margin-top: 0.5rem;
1111
}
1212

13+
.bao-guiding-text {
14+
margin-bottom: 0.5rem;
15+
}
16+
1317
.bao-radio-button-label-list {
1418
border-top: 1px solid $neutral-stroke;
1519
padding: 0.5rem 1em 1rem 3.5rem;

‎projects/angular-ui/src/lib/radio/radio-group.component.ts

Lines changed: 85 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ import {
1515
forwardRef,
1616
InjectionToken,
1717
Input,
18+
OnInit,
1819
Output,
1920
QueryList,
20-
ViewChild,
2121
ViewEncapsulation
2222
} from '@angular/core';
2323
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -51,7 +51,7 @@ let radioGroupNextUniqueId = 0;
5151
]
5252
})
5353
export class BaoRadioButtonGroupComponent
54-
implements AfterContentInit, ControlValueAccessor, AfterViewInit
54+
implements AfterContentInit, ControlValueAccessor, AfterViewInit, OnInit
5555
{
5656
@ContentChildren(forwardRef(() => BaoRadioButtonComponent), {
5757
descendants: true
@@ -71,6 +71,23 @@ export class BaoRadioButtonGroupComponent
7171
*/
7272
@Input() public id: string = this._uniqueId;
7373

74+
/**
75+
* The aria-describebdy-text id for web accessibility
76+
* only when we have de guidance text
77+
*/
78+
public ariaDescribedbyGuidingText?: string;
79+
80+
/**
81+
* The aria-labelledby id for web accessibility
82+
*/
83+
public ariaLabelledby?: string;
84+
85+
/**
86+
* The aria-describebdy-error id for web accessibility
87+
* only when error section appears
88+
*/
89+
public ariaDescribedbyError?: string;
90+
7491
/**
7592
* Define the name property of all radio buttons. Default : null
7693
*/
@@ -146,17 +163,25 @@ export class BaoRadioButtonGroupComponent
146163
*/
147164
public ariaDescribedby: string | null = null;
148165

149-
@ViewChild('container', { static: false })
150-
private staticContainer: ElementRef;
166+
constructor(private cdr: ChangeDetectorRef, private elementRef: ElementRef) {}
167+
168+
ngOnInit(): void {
169+
this.ariaDescribedbyError = `${this.id}-ariadescribedby-error`;
170+
this.ariaDescribedbyGuidingText = `${this.id}-ariadescribedby-guiding-text`;
171+
this.ariaLabelledby = `${this.id}-arialabelledby`;
172+
}
151173

152-
constructor(private cdr: ChangeDetectorRef) {}
174+
get nativeElement(): HTMLElement {
175+
return this.elementRef.nativeElement;
176+
}
153177

154178
public ngAfterContentInit() {
155179
this._isInitialized = true;
156180
}
157181

158182
public ngAfterViewInit() {
159183
this.setAriaDescribedByToDescription();
184+
this.setAriaDescribedLgendsGuidingText();
160185
this.cdr.detectChanges();
161186
}
162187

@@ -264,20 +289,67 @@ export class BaoRadioButtonGroupComponent
264289
public onModelChange: (value: any) => void = () => undefined;
265290

266291
/**
267-
* Set the aria-describedby property to bao-guiding-text if available
292+
* Set the aria-describedby property to bao-errors if available
268293
*/
269294
private setAriaDescribedByToDescription() {
270-
const children = Array.from(this.staticContainer.nativeElement.children);
271-
if (children.length === 0) {
272-
this.showAriaDescribedBy(false);
273-
return;
295+
const fieldSet = this.elementNode('FIELDSET');
296+
297+
if (fieldSet) {
298+
const baoError = this.elementNode('DIV', fieldSet);
299+
this.setAriaAttribute(
300+
baoError,
301+
this.ariaDescribedbyError,
302+
fieldSet,
303+
'aria-describedby'
304+
);
305+
}
306+
}
307+
308+
/**
309+
* Set the aria-describedby property to bao-guiding-text and legend if available
310+
*/
311+
private setAriaDescribedLgendsGuidingText() {
312+
const fieldSet = this.elementNode('FIELDSET');
313+
314+
if (fieldSet) {
315+
const baoLabel = this.elementNode('LEGEND', fieldSet);
316+
const baoGuidingText = this.elementNode('BAO-GUIDING-TEXT', fieldSet);
317+
318+
this.setAriaAttribute(
319+
baoLabel,
320+
this.ariaLabelledby,
321+
fieldSet,
322+
'aria-labelledby'
323+
);
324+
this.setAriaAttribute(
325+
baoGuidingText,
326+
this.ariaDescribedbyGuidingText,
327+
fieldSet,
328+
'aria-describedby'
329+
);
274330
}
331+
}
275332

276-
this.showAriaDescribedBy(true);
333+
private setAriaAttribute(
334+
nodeElement: Node,
335+
id: string,
336+
ariaElment: Node,
337+
ariaType: string
338+
): void {
339+
if (nodeElement) {
340+
(nodeElement as HTMLElement).setAttribute('id', id);
341+
(ariaElment as HTMLElement).setAttribute(ariaType, id);
342+
}
277343
}
278344

279-
private showAriaDescribedBy(value: boolean) {
280-
this.ariaDescribedby = value ? `${this.id}-ariadescribedby` : null;
345+
private elementNode(name: string, nativeElt?: Node): Node {
346+
const childNodes = nativeElt
347+
? Array.from(nativeElt.childNodes)
348+
: Array.from(this.nativeElement.childNodes);
349+
const element = childNodes.find(x => x.nodeName === name);
350+
console.log(name);
351+
console.log(childNodes);
352+
return element;
281353
}
282354

283355
private onTouch: () => any = () => undefined;

‎projects/angular-ui/src/lib/radio/radio.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ let radioNextUniqueId = 0;
5656
'[class.bao-radio-button-disabled]': 'disabled',
5757
'[class.bao-radio-button-card]': 'brandBorder',
5858
'[class.bao-radio-button-hidden-label]': 'hiddenLabel',
59-
'[class.bao-radio-button-label-list]': 'horizontalBorder',
59+
'[class.bao-radio-button-label-list]': 'horizontalStyle',
6060
'[class.bao-displaymode-compact]': 'displayMode === "compact"'
6161
}
6262
})
@@ -86,7 +86,7 @@ export class BaoRadioButtonComponent
8686
/**
8787
* horizontal border
8888
*/
89-
@Input() public horizontalBorder = false;
89+
@Input() public horizontalStyle = false;
9090

9191
/**
9292
* custom display mode compact, responsive

‎projects/storybook-angular/src/stories/Radio/Radio.stories.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export const RadioWithDescAndActionButton: Story = args => ({
157157
props: args,
158158
template: `
159159
<bao-radio-button-group id="RadioWithDescAndHiddenLabel" name="RadioWithDescAndHiddenLabel" >
160-
<bao-radio-button id="ID200" name="name200" value="example1" horizontalBorder="true" >
160+
<bao-radio-button id="ID200" name="name200" value="example1" horizontalStyle="true" >
161161
<bao-label>Radio button avec action button</bao-label>
162162
<bao-radio-action-button>
163163
<button
@@ -185,7 +185,7 @@ export const RadioWithDescAndActionButton: Story = args => ({
185185
</bao-radio-action-button>
186186
<bao-radio-button-description>Est est et dolores dolore sed justo ipsum et sit.</bao-radio-button-description>
187187
</bao-radio-button>
188-
<bao-radio-button id="ID201" name="name200" value="example1" horizontalBorder="true" >
188+
<bao-radio-button id="ID201" name="name200" value="example1" horizontalStyle="true" >
189189
<bao-label >Radio button avec action button</bao-label>
190190
<bao-radio-action-button>
191191
<button
@@ -226,7 +226,7 @@ export const RadioWithDescAndActionButtonCompact: Story = args => ({
226226
props: args,
227227
template: `
228228
<bao-radio-button-group id="RadioWithDescAndHiddenLabel" name="RadioWithDescAndHiddenLabel" >
229-
<bao-radio-button id="ID203" name="name203" value="example1" horizontalBorder="true" displayMode="compact" >
229+
<bao-radio-button id="ID203" name="name203" value="example1" horizontalStyle="true" displayMode="compact" >
230230
<bao-label>Radio button avec action button</bao-label>
231231
<bao-radio-action-button>
232232
<button
@@ -254,7 +254,7 @@ export const RadioWithDescAndActionButtonCompact: Story = args => ({
254254
</bao-radio-action-button>
255255
<bao-radio-button-description>Est est et dolores dolore sed justo ipsum et sit.</bao-radio-button-description>
256256
</bao-radio-button>
257-
<bao-radio-button id="ID204" name="name203" value="example1" horizontalBorder="true" displayMode="compact" >
257+
<bao-radio-button id="ID204" name="name203" value="example1" horizontalStyle="true" displayMode="compact" >
258258
<bao-label >Radio button avec action button</bao-label>
259259
<bao-radio-action-button>
260260
<button

0 commit comments

Comments
 (0)