Skip to content

Commit

Permalink
Merged in bugfix/a11y-issues-r4 (pull request #209)
Browse files Browse the repository at this point in the history 
SHIBUI-871 SHIBUI-869 SHIBUI-873 Fixed a11y issues
  • Loading branch information
@rmathis
rmathis committed Oct 2, 2018
2 parents 26cd713 + 4cb77c3 commit b36bb71
Show file tree
Hide file tree
Showing 43 changed files with 786 additions and 411 deletions.
559 changes: 556 additions & 3 deletions ui/package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"@angular/platform-browser": "^6.0.2",
"@angular/platform-browser-dynamic": "^6.0.2",
"@angular/router": "^6.0.2",
"@ng-bootstrap/ng-bootstrap": "^1.1.2",
"@ng-bootstrap/ng-bootstrap": "^3.2.2",
"@ngrx/effects": "^5.2.0",
"@ngrx/entity": "^5.2.0",
"@ngrx/router-store": "^5.2.0",
Expand Down
58 changes: 8 additions & 50 deletions ui/src/app/metadata/domain/component/forms/advanced-info-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,7 @@
</span>
</label>
<span class="col-sm-2 text-right">
<ng-template #tooltipServiceProviderNameDashboardDisplayOnly>
<translate-i18n key="tooltip.service-provider-name-dashboard-display-only">Service Provider Name (Dashboard Display Only) popover</translate-i18n>
</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipServiceProviderNameDashboardDisplayOnly"
[attr.aria-label]="'tooltip.instruction' | translate"></i>
<info-icon [description]="'tooltip.service-provider-name-dashboard-display-only' | translate"></info-icon>
</span>
</div>
<input type="text"
Expand All @@ -34,12 +29,7 @@
</span>
</label>
<span class="col-sm-2 text-right">
<ng-template #tooltipServiceProviderEntityID>
<translate-i18n key="tooltip.service-provider-entity-id">Service Provider Entity ID popover</translate-i18n>
</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipServiceProviderEntityID"
[attr.aria-label]="'tooltip.instruction' | translate"></i>
<info-icon [description]="'tooltip.service-provider-entity-id' | translate"></info-icon>
</span>
</div>
<input type="text"
Expand Down Expand Up @@ -67,12 +57,7 @@
</span>
</label>
<span class="col-sm-2 text-right">
<ng-template #tooltipOrganizationName>
<translate-i18n key="tooltip.organization-name">Organization Name popover</translate-i18n>
</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipOrganizationName"
[attr.aria-label]="'tooltip.instruction' | translate"></i>
<info-icon [description]="'tooltip.organization-name' | translate"></info-icon>
</span>
</div>
<input type="text"
Expand All @@ -91,12 +76,7 @@
</span>
</label>
<span class="col-sm-2 text-right">
<ng-template #tooltipOrganizationDisplayName>
<translate-i18n key="tooltip.organization-display-name">Organization Display Name popover</translate-i18n>
</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipOrganizationDisplayName"
[attr.aria-label]="'tooltip.instruction' | translate"></i>
<info-icon [description]="'tooltip.organization-display-name' | translate"></info-icon>
</span>
</div>
<input type="text"
Expand All @@ -115,12 +95,7 @@
</span>
</label>
<span class="col-sm-2 text-right">
<ng-template #tooltipOrganizationURL>
<translate-i18n key="tooltip.organization-url">Organization URL popover</translate-i18n>
</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipOrganizationURL"
[attr.aria-label]="'tooltip.instruction' | translate"></i>
<info-icon [description]="'tooltip.organization-url' | translate"></info-icon>
</span>
</div>
<input type="text"
Expand Down Expand Up @@ -175,13 +150,7 @@
<translate-i18n key="label.name">Name</translate-i18n>
</label>
<span class="col-sm-3 text-right">
<ng-template #tooltipName>
<translate-i18n key="tooltip.name">Name popover</translate-i18n>
</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipName"

[attr.aria-label]="'tooltip.instruction' | translate"></i>
<info-icon [description]="'tooltip.name' | translate"></info-icon>
</span>
</div>
<input [id]="'name' + i"
Expand All @@ -200,13 +169,7 @@
<translate-i18n key="label.type">Type</translate-i18n>
</label>
<span class="col-sm-3 text-right">
<ng-template #tooltipType>
<translate-i18n key="tooltip.type">Type popover</translate-i18n>
</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipType"

[attr.aria-label]="'tooltip.instruction' | translate"></i>
<info-icon [description]="'tooltip.type' | translate"></info-icon>
</span>
</div>
<select [id]="'type-' + i" class="form-control" formControlName="type" aria-label="Contact type dropdown" role="listbox">
Expand All @@ -225,12 +188,7 @@
<translate-i18n key="label.email-address">Email Address</translate-i18n>
</label>
<span class="col-sm-2 text-right">
<ng-template #tooltipEmailAddress>
<translate-i18n key="tooltip.email-address">Email Address popover</translate-i18n>
</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipEmailAddress"
[attr.aria-label]="'tooltip.instruction' | translate"></i>
<info-icon [description]="'tooltip.email-address' | translate"></info-icon>
</span>
</div>
<input type="email"
Expand Down
7 changes: 4 additions & 3 deletions ui/src/app/metadata/domain/component/forms/advanced-info-form.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ViewChild, Component } from '@angular/core';
import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
import { Observable, of } from 'rxjs';
import { ProviderValueEmitter, ProviderStatusEmitter } from '../../../domain/service/provider-change-emitter.service';
import { AdvancedInfoFormComponent } from './advanced-info-form.component';
import * as stubs from '../../../../../testing/resolver.stub';
import { FileBackedHttpMetadataResolver } from '../../entity';
import { MockI18nModule } from '../../../../../testing/i18n.stub';
import { MockSharedModule } from '../../../../../testing/shared.stub';

@Component({
template: `<adv-info-form [resolver]="resolver" [ids]="ids$"></adv-info-form>`
Expand Down Expand Up @@ -51,8 +52,8 @@ describe('Advanced Info Form Component', () => {
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
NgbPopoverModule,
MockI18nModule
MockI18nModule,
MockSharedModule
],
declarations: [
AdvancedInfoFormComponent,
Expand Down
21 changes: 3 additions & 18 deletions ui/src/app/metadata/domain/component/forms/assertion-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,7 @@
<translate-i18n key="label.assertion-consumer-services-location">Assertion Consumer Service Location</translate-i18n>
</label>
<span class="col-sm-2 text-right">
<ng-template #tooltipAssertionConsumerServiceLocation>
<translate-i18n key="tooltip.assertion-consumer-service-location">Assertion Consumer Service Location popover</translate-i18n>
</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipAssertionConsumerServiceLocation"
[attr.aria-label]="'tooltip.instruction' | translate"></i>
<info-icon [description]="'tooltip.assertion-consumer-service-location' | translate"></info-icon>
</span>
</div>
<input [id]="'location-' + i" type="text" class="form-control" placeholder="" formControlName="locationUrl" aria-label="Assertion consumer service endpoint location" role="textbox" />
Expand All @@ -66,12 +61,7 @@
<translate-i18n key="label.assertion-consumer-service-location-binding">Assertion Consumer Service Location Binding</translate-i18n>
</label>
<span class="col-sm-2 text-right">
<ng-template #tooltipAssertionConsumerServiceLocationBinding>
<translate-i18n key="tooltip.assertion-consumer-service-location-binding">Assertion Consumer Service Location Binding</translate-i18n>
</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipAssertionConsumerServiceLocationBinding"
[attr.aria-label]="'tooltip.instruction' | translate"></i>
<info-icon [description]="'tooltip.assertion-consumer-service-location-binding' | translate"></info-icon>
</span>
</div>
<select [id]="'binding-' + i" class="form-control" formControlName="binding" role="listbox" aria-label="Assertion consumer service location binding type">
Expand All @@ -87,12 +77,7 @@
<fieldset aria-label="Mark this assertion consumer service endpoint as the default?">
<label class="d-block">
<translate-i18n key="label.mark-as-default">Mark as Default</translate-i18n>
<ng-template #tooltipMarkAsDefault>
<translate-i18n key="tooltip.mark-as-default">Mark as Default</translate-i18n>
</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipMarkAsDefault"
[attr.aria-label]="'tooltip.instruction' | translate"></i>
<info-icon [description]="'tooltip.mark-as-default' | translate"></info-icon>
</label>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox"
Expand Down
5 changes: 3 additions & 2 deletions ui/src/app/metadata/domain/component/forms/assertion-form.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ProviderValueEmitter, ProviderStatusEmitter } from '../../../domain/service/provider-change-emitter.service';
import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
import { AssertionFormComponent } from './assertion-form.component';
import * as stubs from '../../../../../testing/resolver.stub';
import { MockI18nModule } from '../../../../../testing/i18n.stub';
import { MockSharedModule } from '../../../../../testing/shared.stub';

describe('Assertion Form Component', () => {
let fixture: ComponentFixture<AssertionFormComponent>;
Expand All @@ -21,7 +22,7 @@ describe('Assertion Form Component', () => {
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
NgbPopoverModule,
MockSharedModule,
MockI18nModule
],
declarations: [
Expand Down
5 changes: 3 additions & 2 deletions ui/src/app/metadata/domain/component/forms/attribute-release-form.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ import { ReactiveFormsModule } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { StoreModule, Store, combineReducers } from '@ngrx/store';
import { ProviderValueEmitter, ProviderStatusEmitter } from '../../../domain/service/provider-change-emitter.service';
import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
import { AttributeReleaseFormComponent } from './attribute-release-form.component';
import { ListValuesService } from '../../../domain/service/list-values.service';
import * as stubs from '../../../../../testing/resolver.stub';
import { MockI18nModule } from '../../../../../testing/i18n.stub';
import { MockListValueService } from '../../../../../testing/list-values.stub';
import { MockSharedModule } from '../../../../../testing/shared.stub';

describe('Attribute Release Form Component', () => {
let fixture: ComponentFixture<AttributeReleaseFormComponent>;
Expand All @@ -25,7 +26,7 @@ describe('Attribute Release Form Component', () => {
imports: [
NoopAnimationsModule,
ReactiveFormsModule,
NgbPopoverModule,
MockSharedModule,
MockI18nModule
],
declarations: [
Expand Down
22 changes: 7 additions & 15 deletions ui/src/app/metadata/domain/component/forms/descriptor-info-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,7 @@
<translate-i18n key="label.protocol-support-enumeration">Protocol Support Enumeration</translate-i18n>
</label>
<span class="col-sm-2 text-right">
<ng-template #tooltipProtocolSupportEnumeration>
<translate-i18n key="tooltip.protocol-support-enumeration">Protocol Support Enumeration popover</translate-i18n>
</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipProtocolSupportEnumeration"
[attr.aria-label]="'tooltip.instruction' | translate"></i>
<info-icon [description]="'tooltip.protocol-support-enumeration' | translate"></info-icon>
</span>
</div>
<select id="protocolSupportEnum" class="form-control" formControlName="protocolSupportEnum" aria-label="Protocol support enumeration dropdown" role="listbox">
Expand All @@ -27,23 +22,20 @@
<button class="btn btn-success btn-sm" (click)="addFormat()" translate="action.add-nameid-format" role="button">Add NameID Format</button>
</span>
<span class="col-sm-2 text-right">
<ng-template #tooltipNameIdFormat>
<translate-i18n key="tooltip.nameid-format">Add NameID Format Popover</translate-i18n>
</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipNameIdFormat"
[attr.aria-label]="'tooltip.instruction' | translate"></i>
<info-icon [description]="'tooltip.nameid-format' | translate"></info-icon>
</span>
</div>
</div>
<div formArrayName="nameIdFormats" class="form-group" *ngIf="nameIdFormats.length">
<div *ngFor="let format of nameIdFormats.controls; let i=index; let isLast=last" class="row">
<div class="col">
<label [for]="'nameIdFormat-' + i" class="sr-only">
<translate-i18n key="label.nameid-format">NameID Format</translate-i18n> {{ i + 1 }}
<div class="col mb-2 d-flex">
<label [for]="'nameIdFormat-' + i" class="p-2">
<translate-i18n key="label.nameid-format" class="sr-only">NameID Format</translate-i18n> {{ i + 1 }}.
</label>
<auto-complete
class="flex-grow-1"
[id]="'nameIdFormat-' + i"
[fieldId]="'nameIdFormat-' + i"
[formControlName]="i"
[matches]="nameIds$ | async"
[required]="true"
Expand Down
Loading

0 comments on commit b36bb71

Please sign in to comment.