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>

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 7891eaa..b75422b 100644 (file)
--- 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 77d8fd6..ffad186 100644 (file)
--- 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() {
+    }
 
 }