Skip to content
GitLab
Unverified Commit 7be76666 authored by Swayangjit Prasad Parida's avatar Swayangjit Prasad Parida Committed by GitHub
Browse files

Issue #SB-30576 merge: Merge pull request #347 from Nik720/SB-30576 

Issue #SB-30576 fix: Enter key press accessibility fix for cards
parents 94c41f58 569621d0
master release-5.1.0
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 40 additions and 15 deletions
+40 -15
projects/common-consumption/package.json
+ 1
− 1
View file @ 7be76666
{
"name": "@project-sunbird/common-consumption-v9",
"version": "4.9.1",
"version": "4.10.2",
"repository": {
"type": "git",
"url": "git+https://github.com/Sunbird-Ed/SunbirdEd-consumption-ngcomponents.git"
......
projects/common-consumption/src/lib/card/library-card-v2/library-card-v2.component.html
+ 1
− 1
View file @ 7be76666
<!-- card component -->
<div class="sb--card sb--card--theme2" role="link" tabindex="0"
[ngClass]="{'sb--card--recently-viewed': type === LibraryCardTypes.RECENTLY_VIEWED, 'offline': isOffline, 'selected': isSelected}"
(click)="onClick($event)" *ngIf="!isLoading">
(click)="onClick($event)" (keydown.enter)="onEnterKeyPress($event)" *ngIf="!isLoading">
<svg width="79px" class="sb--card-svg-tail" height="36px" viewBox="0 0 79 36" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
......
projects/common-consumption/src/lib/card/library-card-v2/library-card-v2.component.ts
+ 5
− 1
View file @ 7be76666
import { Component, OnInit, Input, Output, EventEmitter, TemplateRef, AfterViewInit } from '@angular/core';
import { IContent, LibraryCardTypes, ICardClick } from '../models';
import { IContent, LibraryCardTypes, ICardClick, IEnterKeyPress } from '../models';
@Component({
......@@ -28,6 +28,7 @@ export class LibraryCardV2Component implements OnInit, AfterViewInit {
@Output() cardClick: EventEmitter<ICardClick> = new EventEmitter();
@Output() menuClick: EventEmitter<ICardClick> = new EventEmitter();
@Output() enterKeyPress: EventEmitter<IEnterKeyPress> = new EventEmitter();
get LibraryCardTypes() { return LibraryCardTypes; }
......@@ -42,6 +43,9 @@ export class LibraryCardV2Component implements OnInit, AfterViewInit {
onClick(event: MouseEvent) {
this.cardClick.emit({ event: event, data: this.content });
}
onEnterKeyPress(event: KeyboardEvent) {
this.enterKeyPress.emit({ event: event, data: this.content });
}
splitGradeMedium() {
if(this.content && this.content.gradeLevel) {
this.content.gradeLevel = typeof this.content.gradeLevel === "string"?this.content.gradeLevel.split(","):this.content.gradeLevel;
......
projects/common-consumption/src/lib/card/library-card-v3/library-card-v3.component.html
+ 1
− 1
View file @ 7be76666
<!-- card component -->
<div class="sb--card sb--card--theme2" role="link" tabindex="0"
[ngClass]="{'sb--card--recently-viewed': type === LibraryCardTypes.RECENTLY_VIEWED, 'offline': isOffline, 'selected': isSelected}"
(click)="onClick($event)" *ngIf="!isLoading">
(click)="onClick($event)" (keydown.enter)="onEnterKeyPress($event)" *ngIf="!isLoading">
<div class="sb--card__main-area">
<!-- card img -->
<div [ngClass]="getClassForImage()">
......
projects/common-consumption/src/lib/card/library-card-v3/library-card-v3.component.ts
+ 5
− 1
View file @ 7be76666
import { Component, OnInit, Input, Output, EventEmitter, TemplateRef, AfterViewInit } from '@angular/core';
import { IContent, LibraryCardTypes, ICardClick } from '../models';
import { IContent, LibraryCardTypes, ICardClick, IEnterKeyPress } from '../models';
@Component({
......@@ -28,6 +28,7 @@ export class LibraryCardV3Component implements OnInit, AfterViewInit {
@Output() cardClick: EventEmitter<ICardClick> = new EventEmitter();
@Output() menuClick: EventEmitter<ICardClick> = new EventEmitter();
@Output() enterKeyPress: EventEmitter<IEnterKeyPress> = new EventEmitter();
get LibraryCardTypes() { return LibraryCardTypes; }
frameworkDetailsList = [];
......@@ -43,6 +44,9 @@ export class LibraryCardV3Component implements OnInit, AfterViewInit {
onClick(event: MouseEvent) {
this.cardClick.emit({ event: event, data: this.content });
}
onEnterKeyPress(event: KeyboardEvent) {
this.enterKeyPress.emit({ event: event, data: this.content });
}
arrangeFrameworkDetails() {
this.frameworkDetailsList = [];
......
projects/common-consumption/src/lib/card/library-card-v4/library-card-v4.component.html
+ 1
− 1
View file @ 7be76666
<!-- card component -->
<div class="sb--card sb--card--theme2" tabindex="0"
[ngClass]="{'sb--card--recently-viewed': type === LibraryCardTypes.RECENTLY_VIEWED, 'offline': isOffline, 'selected': isSelected}"
(click)="onClick($event)" *ngIf="!isLoading">
(click)="onClick($event)" (keydown.enter)="onEnterKeyPress($event)" *ngIf="!isLoading">
<div class="sb--card__main-area">
<!-- card img -->
<div [ngClass]="getClassForImage()">
......
projects/common-consumption/src/lib/card/library-card-v4/library-card-v4.component.ts
+ 5
− 1
View file @ 7be76666
import { Component, OnInit, Input, Output, EventEmitter, TemplateRef, AfterViewInit } from '@angular/core';
import { IContent, LibraryCardTypes, ICardClick } from '../models';
import { IContent, LibraryCardTypes, ICardClick, IEnterKeyPress } from '../models';
@Component({
......@@ -27,6 +27,7 @@ export class LibraryCardV4Component implements OnInit, AfterViewInit {
@Input() isSelected = false;
@Output() cardClick: EventEmitter<ICardClick> = new EventEmitter();
@Output() enterKeyPress: EventEmitter<IEnterKeyPress> = new EventEmitter();
get LibraryCardTypes() { return LibraryCardTypes; }
frameworkDetailsList = [];
......@@ -53,6 +54,9 @@ export class LibraryCardV4Component implements OnInit, AfterViewInit {
onClick(event: MouseEvent) {
this.cardClick.emit({ event: event, data: this.content });
}
onEnterKeyPress(event: KeyboardEvent) {
this.enterKeyPress.emit({ event: event, data: this.content });
}
arrangeFrameworkDetails() {
this.se_boards = this.getFormatedData(this.content.se_boards);
......
projects/common-consumption/src/lib/card/library-card/library-card.component.html
+ 4
− 4
View file @ 7be76666
......@@ -2,7 +2,7 @@
<span *ngIf="!layoutConfig">
<div class="sb--card"
[ngClass]="{'sb--card--recently-viewed': type === LibraryCardTypes.RECENTLY_VIEWED, 'offline': isOffline, 'selected': isSelected}"
(click)="onClick($event)" *ngIf="!isLoading" tabindex="0" role="button">
(click)="onClick($event)" (keydown.enter)="onEnterKeyPress($event)" *ngIf="!isLoading" tabindex="0" role="button">
<div class="sb--card__main-area">
<!-- card img -->
<div class="sb--card__img">
......@@ -114,7 +114,7 @@
<sb-library-card-v2 [indexToDisplay]="indexToDisplay" [isLoading]="isLoading" [content]="content" [isMobile]="isMobile"
[isOffline]="isOffline" [cardImg]="cardImg" [type]="type" [moreInfoLabel]="moreInfoLabel" [isSelected]="isSelected"
[section]="section" [btnlabel]="btnlabel" [btnicon]="btnicon"
[layoutConfig]="layoutConfig" [isMenu]="isMenu" (cardClick)="onClick($event)"
[layoutConfig]="layoutConfig" [isMenu]="isMenu" (cardClick)="onClick($event)" (enterKeyPress)="onEnterKeyPress($event)"
(menuClick)="onMenuClick($event);$event.stopPropagation()" [hover-template]="gridTemplate"
></sb-library-card-v2>
</ng-container>
......@@ -122,7 +122,7 @@
<sb-library-card-v3 [indexToDisplay]="indexToDisplay" [isLoading]="isLoading" [content]="content" [isMobile]="isMobile"
[isOffline]="isOffline" [cardImg]="cardImg" [type]="type" [moreInfoLabel]="moreInfoLabel" [isSelected]="isSelected"
[section]="section" [btnlabel]="btnlabel" [btnicon]="btnicon"
[layoutConfig]="layoutConfig" [isMenu]="isMenu" (cardClick)="onClick($event)"
[layoutConfig]="layoutConfig" [isMenu]="isMenu" (cardClick)="onClick($event)" (enterKeyPress)="onEnterKeyPress($event)"
(menuClick)="onMenuClick($event);$event.stopPropagation()" [hover-template]="gridTemplate"
></sb-library-card-v3>
</ng-container>
......@@ -130,7 +130,7 @@
<sb-library-card-v4 [indexToDisplay]="indexToDisplay" [isLoading]="isLoading" [content]="content" [isMobile]="isMobile"
[isOffline]="isOffline" [cardImg]="cardImg" [type]="type" [moreInfoLabel]="moreInfoLabel" [isSelected]="isSelected"
[section]="section" [btnlabel]="btnlabel" [btnicon]="btnicon"
[layoutConfig]="layoutConfig" [isMenu]="isMenu" (cardClick)="onClick($event)"
[layoutConfig]="layoutConfig" [isMenu]="isMenu" (cardClick)="onClick($event)" (enterKeyPress)="onEnterKeyPress($event)"
(menuClick)="onMenuClick($event);$event.stopPropagation()" [hover-template]="gridTemplate"
></sb-library-card-v4>
</ng-container>
......
projects/common-consumption/src/lib/card/library-card/library-card.component.ts
+ 5
− 1
View file @ 7be76666
import { IContent, LibraryCardTypes, ICardClick } from './../models';
import { IContent, LibraryCardTypes, ICardClick, IEnterKeyPress } from './../models';
import { Component, Input, OnInit, EventEmitter, Output, TemplateRef, AfterViewInit } from '@angular/core';
import { staticContent } from '../library-card/library-card.data';
@Component({
......@@ -26,6 +26,7 @@ export class LibraryCardComponent implements OnInit, AfterViewInit {
@Output() cardClick: EventEmitter<ICardClick> = new EventEmitter();
@Output() menuClick: EventEmitter<ICardClick> = new EventEmitter();
@Output() enterKey: EventEmitter<IEnterKeyPress> = new EventEmitter();
get LibraryCardTypes() { return LibraryCardTypes; }
......@@ -41,6 +42,9 @@ export class LibraryCardComponent implements OnInit, AfterViewInit {
onMenuClick(event: MouseEvent) {
this.menuClick.emit({ event: event, data: this.content });
}
onEnterKeyPress(event: KeyboardEvent) {
this.enterKey.emit({ event, data: this.content });
}
test() {
......
projects/common-consumption/src/lib/card/models.ts
+ 4
− 0
View file @ 7be76666
......@@ -2,6 +2,10 @@ export interface ICardClick {
event: MouseEvent;
data: any;
}
export interface IEnterKeyPress {
event: KeyboardEvent;
data: any;
}
export interface IClick {
event: MouseEvent;
......
projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.html
+ 2
− 2
View file @ 7be76666
......@@ -22,7 +22,7 @@
<div class="item" [ngClass]="maxCardCount ? 'show-' + maxCardCount: ''"
*ngFor="let content of contentList | slice:0:(maxCardCount ? maxCardCount : contentList?.length)let i=index">
<sb-library-card [indexToDisplay]="i" [layoutConfig]="layoutConfig" [content]="content" [type]="LibraryCardTypes.DESKTOP_TEXTBOOK"
(click)="onCardClick($event, content)" tabindex="0" [cardImg]="content?.cardImg">
(click)="onCardClick($event, content)" (keydown.enter)="onEnterKeyPress($event, content)" tabindex="0" [cardImg]="content?.cardImg">
</sb-library-card>
</div>
</div>
......@@ -32,7 +32,7 @@
(click)="onViewMoreClick($event)" tabindex="0">{{viewMoreButtonText}}</button>
<div class="item" [ngClass]="maxCardCount ? 'show-' + maxCardCount: ''" *ngFor="let content of contentList;let i=index">
<sb-library-card [indexToDisplay]="i" [layoutConfig]="layoutConfig" [content]="content" [type]="LibraryCardTypes.DESKTOP_TEXTBOOK"
[isMenu]="isMenu" (click)="onCardClick($event, content)" tabindex="0" [cardImg]="content?.cardImg" (menuClick)="onCardMenuClick($event)">
[isMenu]="isMenu" (click)="onCardClick($event, content)" (keydown.enter)="onEnterKeyPress($event, content)" tabindex="0" [cardImg]="content?.cardImg" (menuClick)="onCardMenuClick($event)">
</sb-library-card>
</div>
</div>
......
projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.ts
+ 6
− 1
View file @ 7be76666
import { Component, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
import { defaultLibraryCardsGrid } from '../library-cards.data';
import { IContent, LibraryCardTypes, LibraryCardGridTypes } from '../../card/models';
import { IContent, LibraryCardTypes, LibraryCardGridTypes, IEnterKeyPress } from '../../card/models';
import { IViewMoreClick, ICardClick } from '../models';
@Component({
......@@ -34,6 +34,7 @@ export class LibraryCardsGridComponent {
@Output() cardClick: EventEmitter<ICardClick> = new EventEmitter<ICardClick>();
@Output() hoverActionClick: EventEmitter<any> = new EventEmitter<any>();
@Output() menuClick: EventEmitter<ICardClick> = new EventEmitter();
@Output() enterKey: EventEmitter<IEnterKeyPress> = new EventEmitter();
get LibraryCardTypes() { return LibraryCardTypes; }
......@@ -56,6 +57,10 @@ export class LibraryCardsGridComponent {
this.cardClick.emit({ event, data });
}
onEnterKeyPress(event: KeyboardEvent, data: IContent) {
this.enterKey.emit({ event, data });
}
hoverActionClicked(event) {
this.hoverActionClick.emit(event);
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment