Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added additonal hint options to prevent JAWS from reading ahead. over… #431

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added additonal hint options to prevent JAWS from reading ahead. over… #431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 36 additions & 24 deletions src/ui-kit/wrappers/label-wrapper/label-wrapper.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@ export class LabelWrapper implements AfterViewChecked {
* sets the hint text
*/
@Input() public hint: string;
/**
* sets the less hint text
*/
@Input() public lessHint: string;
/**
* sets the more hint text
*/
@Input() public moreHint: string;
/**
* deprecated, toggles the required text
*/
Expand All @@ -48,6 +56,10 @@ export class LabelWrapper implements AfterViewChecked {
this._errorMessage = message;
this.setDescribedByEl();
};
/**
* Allows toggle to always to be on
*/
@Input() public toggleAlwaysOn: boolean = false;

public get errorMessage (): string {
return this._errorMessage;
Expand All @@ -67,14 +79,14 @@ export class LabelWrapper implements AfterViewChecked {
private checkMore = false; // semaphore

constructor(
private cdr: ChangeDetectorRef,
private _rend: Renderer2) { }
private cdr: ChangeDetectorRef,
private _rend: Renderer2) { }

public ngOnChanges(c) {
if (!this.checkMore
&& c.hint
&& c.hint.previousValue !== c.hint.currentValue) {
// needs to be open to recalc correctly in
// needs to be open to recalc correctly in
// ngAfterViewChecked
this.showToggle = false;
this.toggleOpen = false;
Expand All @@ -92,8 +104,8 @@ export class LabelWrapper implements AfterViewChecked {
let lookup;
try{
lookup =
this.labelDiv.nativeElement
.querySelector(selector);
this.labelDiv.nativeElement
.querySelector(selector);
} catch(exception){
console.error(selector + ' not found in label wrapper setup');
}
Expand All @@ -115,27 +127,27 @@ export class LabelWrapper implements AfterViewChecked {
public calcToggle() {
if (this.hintContainer) {
const numOfLines =
this.calculateNumberOfLines(
this.hintContainer.nativeElement
);
this.calculateNumberOfLines(
this.hintContainer.nativeElement
);
this.showToggle = numOfLines > this.lineLimit
? true
: false;
? true
: false;
}
}

public setInputLabelElement (elRefId) {
if (this.input) {
if (elRefId) {
this._rend.setAttribute(
this.input,
'aria-describedby',
elRefId
this.input,
'aria-describedby',
elRefId
);
} else {
this._rend.removeAttribute(
this.input,
'aria-describedby'
this.input,
'aria-describedby'
);
}

Expand All @@ -144,7 +156,7 @@ export class LabelWrapper implements AfterViewChecked {

@HostListener('window:resize', ['$event'])
public onResize(event) {
// needs to be open to recalc correctly in
// needs to be open to recalc correctly in
// ngAfterViewChecked
this.showToggle = false;
this.toggleOpen = false;
Expand All @@ -162,7 +174,7 @@ export class LabelWrapper implements AfterViewChecked {
other.innerHTML = 'a<br>b';
other.style.visibility = 'hidden';
const el = <HTMLElement>document
.getElementsByTagName('body')[0];
.getElementsByTagName('body')[0];
el.appendChild(other);
this.lineSize = other.offsetHeight / 2;
el.removeChild(other);
Expand All @@ -187,7 +199,7 @@ export class LabelWrapper implements AfterViewChecked {

if (errorObject.message) {
if (Object.prototype.toString.call(errorObject.message)
=== '[object String]') {
=== '[object String]') {
this.errorMessage = errorObject.message;
return;
}
Expand All @@ -211,16 +223,16 @@ export class LabelWrapper implements AfterViewChecked {

public setOverflow (): string {
return this.showToggle
&& !this.showFullHint
&& !this.toggleOpen
&& !this.showFullHint
&& !this.toggleOpen
? 'hidden'
: '';
}

public setHeight (): string {
return this.showToggle
&& !this.showFullHint
&& !this.toggleOpen
&& !this.showFullHint
&& !this.toggleOpen
? '2.88em'
: '';
}
Expand All @@ -231,8 +243,8 @@ export class LabelWrapper implements AfterViewChecked {
const actualLength = errorObject.actualLength;
const requiredLength = errorObject.requiredLength;
this.errorMessage = actualLength
+ ' characters input but max length is '
+ requiredLength;
+ ' characters input but max length is '
+ requiredLength;
return;
case 'required':
this.errorMessage = 'This field is required';
Expand Down
87 changes: 56 additions & 31 deletions src/ui-kit/wrappers/label-wrapper/label-wrapper.template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,65 @@
<div #labelDiv [class.usa-input-error]="!!errorMessage">
<label *ngIf="!!label"
[attr.for]="name"
[class.usa-input-error-label]="errorMessage">
{{ label || '' }}
<span *ngIf="required || requiredFlag"
class="usa-additional_text">

<label *ngIf="!!label"
[attr.for]="name"
[class.usa-input-error-label]="errorMessage">
{{ label || '' }}
<span *ngIf="required || requiredFlag"
class="usa-additional_text">
Required
</span>
<ng-content select="[label-right]"></ng-content>
</label>

<div *ngIf="hint" class="toggle-more">
<div #hintContainer
class="usa-form-hint"
[attr.id]="hintElId"
[innerHTML]="hint"
[style.overflow]="setOverflow()"
[style.height]="setHeight()">
<ng-content select="[label-right]"></ng-content>
</label>

<div *ngIf="hint" class="toggle-more">
<div #hintContainer
class="usa-form-hint"
[attr.id]="hintElId"
[innerHTML]="hint"
[style.overflow]="setOverflow()"
[style.height]="setHeight()">
</div>

<div *ngIf="showToggle && !showFullHint && (lessHint || moreHint)">
<a href="javascript:void(0)" [attr.aria-label]="toggleOpen ? 'Less info for ' + label + ' link': 'More info for ' + label + 'link'"
(click)="toggleHint(toggleOpen)">
{{ toggleOpen ? "less": "more" }}
</a>
</div>
</div>

<div *ngIf="showToggle && !showFullHint">
<a href="javascript:void(0)" [attr.aria-label]="toggleOpen ? 'Less info for ' + label : 'More info for ' + label "
(click)="toggleHint(toggleOpen)">
{{ toggleOpen ? "less": "more" }}
</a>

<div *ngIf="lessHint" class="toggle-more">
<div #hintContainer
class="usa-form-hint"
[attr.id]="'less' + hintElId"
[innerHTML]="lessHint"
[style.overflow]="setOverflow()"
[style.height]="setHeight()">
</div>
<div *ngIf="toggleOpen">
<div #hintContainer
class="usa-form-hint"
[attr.id]="'more' + hintElId"
[innerHTML]="moreHint"
[style.overflow]="setOverflow()"
[style.height]="setHeight()">
</div>
</div>
<div *ngIf="(showToggle || toggleAlwaysOn) && !showFullHint">
<a href="javascript:void(0)" [attr.aria-label]="toggleOpen ? 'Less info for ' + label + ' link': 'More info for ' + label + 'link'"
(click)="toggleHint(toggleOpen)">
{{ toggleOpen ? "less": "more" }}
</a>
</div>
</div>
</div>

<span *ngIf="!!errorMessage"
class="usa-input-error-message"
[attr.id]="errorElId">

<span *ngIf="!!errorMessage"
class="usa-input-error-message"
[attr.id]="errorElId">
{{errorMessage}}
</span>
<ng-content></ng-content>

<ng-content></ng-content>

</div>