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.

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

Accessibility bug fixes #2629

Merged
merged 9 commits into from
Jan 27, 2023
Merged
Prev Previous commit
Next Next commit
Fixes AB#552: Dropdown button title
Adds localization to dropdowns and bookmarks menu
  • Loading branch information
gingi committed Jan 27, 2023
commit 97978400e67271c89083a7b35c2f3f033952f67d
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed, fakeAsync, inject, tick } from "@angular/cor
import { By } from "@angular/platform-browser";
import { Router } from "@angular/router";
import { MaterialModule } from "@batch-flask/core";
import { I18nTestingModule } from "@batch-flask/core/testing";
import {
Activity,
ActivityModule,
@@ -22,7 +23,7 @@ describe("ActivityMonitorFooterComponent", () => {
};

TestBed.configureTestingModule({
imports: [MaterialModule, ActivityModule],
imports: [MaterialModule, ActivityModule, I18nTestingModule],
declarations: [
],
providers: [
48 changes: 48 additions & 0 deletions src/@batch-flask/ui/dropdown/dropdown.component.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { Component, Type } from "@angular/core";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { FormsModule } from "@angular/forms";
import { By } from "@angular/platform-browser";
import { I18nTestingModule } from "@batch-flask/core/testing";
import { ButtonsModule } from "../buttons";
import { DropdownComponent } from "./dropdown.component";

describe("DropdownComponent", () => {
let fixture: ComponentFixture<Component>;

function createComponent(comp: Type<Component>) {
TestBed.configureTestingModule({
imports: [FormsModule, ButtonsModule, I18nTestingModule],
declarations: [DropdownComponent, comp],
});
fixture = TestBed.createComponent(comp);
fixture.detectChanges();
}

function $(selector) {
return fixture.debugElement.query(By.css("bl-dropdown"))
.nativeElement.querySelector(selector);
}

it("uses a default title", () => {
createComponent(TestComponent);

expect($(".dropdown-btn-container").getAttribute("title"))
.toEqual("dropdown.button-title");
});
it("uses a host button title", () => {
createComponent(TestComponentWithButton);

expect($(".dropdown-btn-container").getAttribute("title"))
.toEqual("Host title");
});
});

@Component({ template: `<bl-dropdown [title]="title"></bl-dropdown>` })
class TestComponent { }

@Component({
template: `<bl-dropdown [title]="title">
<div bl-dropdown-btn button-title="Host title">Button</div>
</bl-dropdown>`
})
class TestComponentWithButton { }
15 changes: 13 additions & 2 deletions src/@batch-flask/ui/dropdown/dropdown.component.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output,
ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, Output,
} from "@angular/core";
import { I18nService } from "@batch-flask/core";

import "./dropdown.scss";

@@ -18,7 +19,11 @@ export class DropdownComponent {
public forcedOpen = false;
public showDropdown = false;

constructor(private changeDetector: ChangeDetectorRef) { }
constructor(
private changeDetector: ChangeDetectorRef,
private elementRef: ElementRef,
private i18n: I18nService,
) { }

public mouseEnter() {
this.showDropdown = true;
@@ -51,6 +56,12 @@ export class DropdownComponent {
}
}

public dropdownButtonTitle() {
const hostTitle = this.elementRef.nativeElement
.querySelector("[bl-dropdown-btn")?.getAttribute("button-title");
return hostTitle || this.i18n.t("dropdown.button-title");
}

public close() {
this.showDropdown = false;
this.changeDetector.markForCheck();
8 changes: 7 additions & 1 deletion src/@batch-flask/ui/dropdown/dropdown.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
<div class="dropdown" (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
<bl-clickable class="dropdown-btn-container" [class.active]="showDropdown" (do)="toggleForceOpen($event)" (dblclick)="dblClick.emit($event)">
<bl-clickable
class="dropdown-btn-container"
[class.active]="showDropdown"
(do)="toggleForceOpen($event)"
(dblclick)="dblClick.emit($event)"
[title]="dropdownButtonTitle()"
>
<ng-content select="[bl-dropdown-btn]"></ng-content>
</bl-clickable>
<div class="dropdown-content" *ngIf="showDropdown" [class.above]="footer" [class.below]="!footer" [attr.align]="align">
2 changes: 2 additions & 0 deletions src/@batch-flask/ui/dropdown/dropdown.i18n.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
dropdown:
button-title: Dropdown button
2 changes: 2 additions & 0 deletions src/@batch-flask/ui/dropdown/dropdown.module.ts
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@ import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { MaterialModule } from "@batch-flask/core";
import { ButtonsModule } from "@batch-flask/ui/buttons";
import { I18nUIModule } from "@batch-flask/ui/i18n";
import { ScrollableModule } from "../scrollable";
import { DropdownComponent } from "./dropdown.component";

@@ -19,6 +20,7 @@ import { DropdownComponent } from "./dropdown.component";
MaterialModule,
ScrollableModule,
ButtonsModule,
I18nUIModule
],
})
export class DropdownModule {
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<bl-dropdown [footer]="false" align="right">
<div bl-dropdown-btn attr.aria-label="{{references.length}}-forms in progress">
<div bl-dropdown-btn
[attr.button-title]="'sidebar-bookmarks.dropdown-button-title' | i18n">
<i class="fa fa-wpforms"></i>
<span class="count" *ngIf="references.length > 0">{{references.length}}</span>
</div>
@@ -15,7 +16,7 @@
</div>

<div *ngIf="references.length === 0" class="dropdown-item no-bookmarks">
<div> No forms in progress</div>
<div>{{'sidebar-bookmarks.no-references' | i18n }}</div>
</div>
</div>
</bl-dropdown>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
sidebar-bookmarks:
dropdown-button-title: Toggle bookmarks menu
no-references: No bookmark references
2 changes: 2 additions & 0 deletions src/@batch-flask/ui/sidebar/sidebar.module.ts
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@ import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { MaterialModule } from "@batch-flask/core";
import { DropdownModule } from "@batch-flask/ui/dropdown";
import { I18nUIModule } from "@batch-flask/ui/i18n";
import { SidebarBookmarksComponent } from "./sidebar-bookmarks";
import { SidebarContentComponent } from "./sidebar-content";
import { SidebarManager } from "./sidebar-manager";
@@ -26,6 +27,7 @@ const privateComponents = [];
FormsModule,
DropdownModule,
MaterialModule,
I18nUIModule
],
providers: [
SidebarManager, // This needs to be here otherwise entry components in lazy loaded doesn't work
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
import { By } from "@angular/platform-browser";
import { RouterTestingModule } from "@angular/router/testing";
import { NavigableRecord, PinnableEntity, PinnedEntityType } from "@batch-flask/core";
import { I18nTestingModule } from "@batch-flask/core/testing";
import { ContextMenuService } from "@batch-flask/ui";
import { DropdownModule } from "@batch-flask/ui/dropdown";
import { BatchAccountService, PinnedEntityService } from "app/services";
@@ -54,7 +55,7 @@ describe("PinnedDropDownComponent", () => {
};

TestBed.configureTestingModule({
imports: [DropdownModule, RouterTestingModule],
imports: [DropdownModule, RouterTestingModule, I18nTestingModule],
declarations: [PinnedDropDownComponent, TestComponent],
providers: [
{ provide: BatchAccountService, useValue: accountServiceSpy },
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, NO_ERRORS_SCHEMA } from "@angular/core";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { By } from "@angular/platform-browser";
import { RouterTestingModule } from "@angular/router/testing";
import { I18nTestingModule } from "@batch-flask/core/testing";
import { Workspace, WorkspaceService } from "@batch-flask/ui";
import { ButtonsModule } from "@batch-flask/ui/buttons";
import { DropdownModule } from "@batch-flask/ui/dropdown";
@@ -40,7 +41,8 @@ describe("WorkspaceDropDownComponent", () => {
};

TestBed.configureTestingModule({
imports: [ButtonsModule, DropdownModule, RouterTestingModule],
imports: [ButtonsModule, DropdownModule, RouterTestingModule,
I18nTestingModule],
declarations: [WorkspaceDropDownComponent, TestComponent],
providers: [
{ provide: ChangeDetectorRef, useValue: null },