Merge pull request #52 from Vastra-Gotalandsregionen/#150998842-knapp…

…-swag #150998842 knapp swag
Vastra-Gotalandsregionen · Nov 17, 2017 · f749c5b · f749c5b
2 parents 68ab894 + 88ee512
commit f749c5b
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 11 deletions.
diff --git a/Content/partials/_components.button.scss b/Content/partials/_components.button.scss
@@ -39,7 +39,7 @@
       transition: background-color 0.5s ease, color 0.5s ease;
     }
   }
-  &:focus:not(.button--disabled) {
+  &:focus {
     box-shadow: 0 0 1px 1px $focus-color;
     border-bottom-color: $focus-color;
   }
@@ -55,9 +55,6 @@
   &.button--disabled {
     background-color: $secondary-color--default;
     cursor: default;
-    &:focus {
-      outline: 0;
-    }
     &.button--secondary {
       border-color: $secondary-color--default;
       color: $secondary-color--default;

diff --git a/component-package/controls/button/button.component.html b/component-package/controls/button/button.component.html
@@ -1,6 +1,6 @@
 <!-- mousedown event används för att säkerställa att den overridar event som onleave i formulär -->
 <div class="button noselect" role="button" (mousedown)="onMouseDown($event)" (click)="onClick($event)" (keydown)="keyPressed($event)"
-  tabindex="{{disabled ? -1 : 0}}" [ngClass]="{'button--disabled' : disabled, 'button--enabling' : reenabled, 'button--secondary': secondary}">
+  tabindex="0" [attr.aria-disabled]="disabled" [ngClass]="{'button--disabled' : disabled, 'button--enabling' : reenabled, 'button--secondary': secondary}">
   <ng-content>
   </ng-content>
   <div *ngIf="!secondary" class="button__focus-line"></div>

diff --git a/component-package/controls/button/button.component.ts b/component-package/controls/button/button.component.ts
@@ -6,7 +6,7 @@
     templateUrl: './button.component.html'
 })
 export class ButtonComponent implements OnChanges {
-    @Input() disabled: boolean;
+    @Input() disabled = false;
     @Input() secondary: boolean;
     lastDisabledStatus: boolean;
     reenabled: boolean;
@@ -31,6 +31,7 @@ export class ButtonComponent implements OnChanges {
     keyPressed(event: KeyboardEvent): void {
         if (event.keyCode === 13 || event.keyCode === 32) {
             this.onMouseDown(event);
+            event.preventDefault();
         }
     }
 }
diff --git a/component-package/controls/lockButton/lockButton.component.html b/component-package/controls/lockButton/lockButton.component.html
@@ -1,5 +1,6 @@
 <div class="lock-button noselect" role="button" (click)="onClick($event)" (keydown)="keyPressed($event)" [ngClass]="{ 'lock-button--unlocked' : unlocked,'button--disabled' : disabled}"
-  tabindex="{{disabled ? -1 : 0}}">
+  [attr.aria-disabled]="disabled" [attr.aria-label]="label" tabindex="0">
+
   <div class="lock-button__top"></div>
   <div class="lock-button__bottom"></div>
   <div class="button__focus-line"></div>

diff --git a/component-package/controls/lockButton/lockButton.component.ts b/component-package/controls/lockButton/lockButton.component.ts
@@ -6,9 +6,13 @@ import { Component, Input, EventEmitter, Output } from '@angular/core'
     templateUrl: './lockButton.component.html'
 })
 export class LockButtonComponent {
-    @Input() disabled: boolean;
+    @Input() disabled = false;
     @Input() unlocked: boolean;
     @Output() lockChanged = new EventEmitter<boolean>();
+
+    get label(): string {
+        return this.unlocked ? 'lås' : 'lås upp';
+    }
     get locked(): boolean {
         return !this.unlocked;
     }
@@ -36,6 +40,7 @@ export class LockButtonComponent {
     keyPressed(event: KeyboardEvent): void {
         if (event.keyCode === 13 || event.keyCode === 32) {
             this.onClick(event);
+            event.preventDefault();
         }
     }
 }
diff --git a/tests/controls/buttonComponent.angular.spec.ts b/tests/controls/buttonComponent.angular.spec.ts
@@ -58,6 +58,15 @@ describe('ButtonComponent', () => {
             textButtonElement = rootElement.query(By.css('.button'));
             spyOn(component.click, 'emit');
         });
+
+        it('The button has the role button', () => {
+            expect(textButtonElement.attributes['role']).toBe('button');
+        });
+
+        it('if a button is not disabled, the aria-disabled is set to false', () => {
+            expect(textButtonElement.attributes['aria-disabled']).toBe('false');
+        });
+
         it('button is enabled', () => {
             expect(textButtonElement.classes['button--disabled']).toBeFalsy();
         });
@@ -93,11 +102,14 @@ describe('ButtonComponent', () => {
                 component.disabled = true;
                 fixture.detectChanges();
             });
+            it('if a button is disabled, the aria-disabled is set to true', () => {
+                expect(textButtonElement.attributes['aria-disabled']).toBe('true');
+            });
             it('button is displayed as disabled', () => {
                 expect(textButtonElement.classes['button--disabled']).toBeTruthy();
             });
-            it('button has no tab stop', () => {
-                expect(textButtonElement.nativeElement.attributes.tabIndex.value).toBe('-1');
+            it('button has tab stop', () => {
+                expect(textButtonElement.nativeElement.attributes.tabIndex.value).toBe('0');
             });
             describe('and button is clicked', () => {
                 it('no clicked event is triggered', () => {

diff --git a/tests/controls/lockButtonComponent.angular.spec.ts b/tests/controls/lockButtonComponent.angular.spec.ts
@@ -44,12 +44,18 @@ describe('TextButtonComponent', () => {
             spyOn(component.lockChanged, 'emit');
             component.unlocked = false;
         });
+        it('if a button is not disabled, the aria-disabled is set to false', () => {
+            expect(lockButtonElement.attributes['aria-disabled']).toBe('false');
+        });
         it('button is enabled', () => {
             expect(lockButtonElement.classes['button--disabled']).toBeFalsy();
         });
         it('button has tab stop', () => {
             expect(lockButtonElement.nativeElement.attributes.tabIndex.value).toBe('0');
         });
+        it('button aria-label is set to lås', () => {
+            expect(lockButtonElement.attributes['aria-label']).toBe('lås upp');
+        });
         it('button is locked', () => {
             expect(lockButtonElement.classes['button--unlocked']).toBeFalsy();
         });
@@ -100,6 +106,11 @@ describe('TextButtonComponent', () => {
                 component.unlocked = true;
                 fixture.detectChanges();
             });
+
+            it('button aria-label is set to lås', () => {
+                expect(lockButtonElement.attributes['aria-label']).toBe('lås');
+            });
+
             describe('and button is clicked', () => {
                 it('a lockChanged event is triggered', () => {
                     lockButtonElement.triggerEventHandler('click', {});
@@ -147,11 +158,14 @@ describe('TextButtonComponent', () => {
                 component.disabled = true;
                 fixture.detectChanges();
             });
+            it('if a button is disabled, the aria-disabled is set to true', () => {
+                expect(lockButtonElement.attributes['aria-disabled']).toBeTruthy();
+            });
             it('button is displayed as disabled', () => {
                 expect(lockButtonElement.classes['button--disabled']).toBeTruthy();
             });
             it('button has no tab stop', () => {
-                expect(lockButtonElement.nativeElement.attributes.tabIndex.value).toBe('-1');
+                expect(lockButtonElement.nativeElement.attributes.tabIndex.value).toBe('0');
             });
             describe('and button is clicked', () => {
                 it('no lockChanged event is triggered', () => {