From a1a03fa71d95bed03a5498d12c3be8c5f0ec10cf Mon Sep 17 00:00:00 2001
From: Galen Charlton <gmc@equinoxinitiative.org>
Date: Mon, 17 Jun 2019 12:32:05 -0400
Subject: [PATCH] LP#1831781: tweaks to eg-help-popover
- Wrap the image in a button; this removes the need for setting
tabindex and makes the cursor display as a pointer when it
is over the popover.
- Add aria-label attributes
- add some usage comments
Thanks to Jane Sandberg for the feedback that inspired this patch.
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
---
.../eg-help-popover/eg-help-popover.component.html | 13 ++++-----
.../eg-help-popover/eg-help-popover.component.ts | 31 +++++++++++++---------
2 files changed, 26 insertions(+), 18 deletions(-)
diff --git a/Open-ILS/src/eg2/src/app/share/eg-help-popover/eg-help-popover.component.html b/Open-ILS/src/eg2/src/app/share/eg-help-popover/eg-help-popover.component.html
index 7891eaa8e4..b75422b02f 100644
--- a/Open-ILS/src/eg2/src/app/share/eg-help-popover/eg-help-popover.component.html
+++ b/Open-ILS/src/eg2/src/app/share/eg-help-popover/eg-help-popover.component.html
@@ -1,7 +1,8 @@
-<span class="material-icons" placement="{{placement}}" *ngIf="helpLink.length < 1; else withUrl" ngbPopover="{{helpText}}" triggers="keyup.enter click" tabindex="0">live_help</span>
-<ng-template #withUrl>
- <ng-template #popContent>
- <a target="_blank" href="{{helpLink}}">{{helpText}}</a>
- </ng-template>
- <span class="material-icons" [ngbPopover]="popContent" placement="{{placement}}" triggers="keyup.enter click" tabindex="0">live_help</span>
+<ng-template #popContent>
+ <a target="_blank" href="{{helpLink}}" *ngIf="helpLink.length >= 1">{{helpText}}</a>
+ <span *ngIf="helpLink.length < 1">{{helpText}}</span>
</ng-template>
+<button class="btn btn-sm" placement="{{placement}}" [ngbPopover]="popContent" triggers="click"i
+ i18n-aria-label aria-label="Show help" aria-haspopup="true">
+ <span class="material-icons" i18n-aria-label aria-label="Show help">live_help</span>
+</button>
diff --git a/Open-ILS/src/eg2/src/app/share/eg-help-popover/eg-help-popover.component.ts b/Open-ILS/src/eg2/src/app/share/eg-help-popover/eg-help-popover.component.ts
index 77d8fd6413..ffad186aad 100644
--- a/Open-ILS/src/eg2/src/app/share/eg-help-popover/eg-help-popover.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/eg-help-popover/eg-help-popover.component.ts
@@ -2,24 +2,31 @@ import { Component, OnInit, Input } from '@angular/core';
import {NgbPopover} from '@ng-bootstrap/ng-bootstrap';
@Component({
- selector: 'eg-help-popover',
- templateUrl: './eg-help-popover.component.html',
- styleUrls: ['./eg-help-popover.component.css']
+ selector: 'eg-help-popover',
+ templateUrl: './eg-help-popover.component.html',
+ styleUrls: ['./eg-help-popover.component.css']
})
export class EgHelpPopoverComponent implements OnInit {
- @Input()
- helpText = '';
+ // The text to display in the popover
+ @Input()
+ helpText = '';
- @Input()
- helpLink = '';
+ // An optional link to include in the popover. If supplied,
+ // the entire helpText is wrapped in it
+ @Input()
+ helpLink = '';
- @Input()
- placement = '';
+ // placement value passed to ngbPopover that controls
+ // where the popover is displayed. Values include
+ // 'auto', 'right', 'left', 'top-left', 'bottom-right',
+ // 'top', and so forth.
+ @Input()
+ placement = '';
- constructor() { }
+ constructor() { }
- ngOnInit() {
- }
+ ngOnInit() {
+ }
}
--
2.11.0