UI Interest Group meeting this Thursday

[Stephanie Leary]

Good morning, everyone! This is a reminder that the UI Interest Group will meet this Thursday at 2pm Eastern. Here's a draft agenda: https://docs.google.com/document/d/1vKDHUhVQ3vTLELOYoCSu3qxM2HN0DVwCRkJNROnILbs/edit?usp=sharing

Since we have already looked at most of the new 3.13 features, I thought I could demo the revised Circulation interface and the work-in-progress dark mode. However, if there's anything else you'd like to prioritize this month, let me know!

Stephanie Leary
Front End Developer
Equinox Open Library Initiative
stephan...@equinoxOLI.org
https://www.equinoxOLI.org
phone: 877-OPEN-ILS (673-6457)

[Thomsen, Elizabeth]

Maybe not for the agenda today, but we're looking at this Launchpad bug which goes back to 2017: Keyboard shortcuts in the Web staff client not noted within menus

We agree with Michele Morgan's comment: "Displaying the function keys within the menus provides a built in cheat sheet for the function keys, as well as cluing in the user that the functionality exists." and we think it's needed now more than ever when we have two ways to access the list of access keys depending on whether you're coming from an Angular page (Control-H) or an AngularJS page (?)

Can the concept of having the shortcuts back on the navigation menus be revived, or are there usability issues with that?

To unsubscribe from this group and stop receiving emails from it, send an email to ui-group+u...@evergreen-ils.org.

--

Elizabeth B. Thomsen 

(she/her)

Member Services Manager

NOBLE: North of Boston Library Exchange 

Danvers, Mass.

978-777-8844

www.noblenet.org

[Stephanie Leary]

Elizabeth, this is a great suggestion and I'm adding it to the agenda for our next meeting at the end of June. We definitely can add the shortcuts to the menus. There is no automatic way to do so, alas, so we'll just have to key in each one as part of the menu item and style it appropriately.

For those who didn't make it to the May meeting (which I forgot to record; sorry!), we discussed this briefly. Jennifer mentioned that DIG would like to document all the keyboard shortcuts, which is more challenging than it sounds.

We have an AccessKey service that allows developers to define keyboard shortcuts and give them a name. These appear in the Help dialog when you press Control H in the Angular screens. I've included a screenshot of all those that are defined as of 3.13. "Context" here is not super clear, but it's telling you which component the shortcuts are defined in. (For extra confusing, "base" here means the AccessKey component, not the Angular base component.) It is possible to override a shortcut in a child component by assigning it the same keys as some other function in a parent component, but I don't think we have done so anywhere.

However, there are a number of keyboard shortcuts that are not defined using the AccessKey service and therefore do not appear in any help menus. These just use bare keyboard event handlers defined in the code. We really should try to migrate all of these into AccessKey. In the meantime, here are all the ones I know about. All are in Angular unless otherwise specified.

MARC Editor: see attached for the rich editor. In the Create MARC Record screen (which is still in AngularJS for now), several shortcuts were recently added:

https://bugs.launchpad.net/evergreen/+bug/2031040

https://bugs.launchpad.net/evergreen/+bug/2031043

https://bugs.launchpad.net/evergreen/+bug/2031114

https://bugs.launchpad.net/evergreen/+bug/2031162

https://bugs.launchpad.net/evergreen/+bug/2031177

Grids:

Arrow Up: select previous row

Shift Arrow Up: add previous row to multiple row selection

Arrow Down: select next row

Shift Arrow Down: add next row to multiple row selection

Arrow Left OR Page Up: go to previous page

Arrow Right OR Page Down: go to next page

(note that the column resize handles can also be moved left and right using the arrow keys when they are selected)

Control A: select all visible rows

Enter: activate the current row (depends on context)

Some ng-bootstrap components have their own built-in keyboard shortcuts:

Carousel: left and right arrow keys will move through the items

Combobox: Shift Arrow Down opens the suggestions; Escape closes them. Pressing Enter on a suggestion *should* make it the selection.

Dropdown menus: Up and down arrow keys move between menu items. Note that the arrow keys do not move focus *out* of a menu; for example, in the main navigation, you have to use Shift-Tab or Esc to move from the first submenu item back up to its main menu parent item.

Datepicker: https://ng-bootstrap.github.io/#/components/datepicker/overview#keyboard-shortcuts

Nav tabs: https://ng-bootstrap.github.io/#/components/nav/overview#keyboard-shortcuts

In addition to these, all dropdowns, tooltips, and dialogs can be closed by pressing Escape. All buttons can be pressed using either Space or Enter.

There may be more shortcuts in AngularJS that I don't know about.

Stephanie Leary
Front End Developer
Equinox Open Library Initiative
stephan...@equinoxOLI.org
https://www.equinoxOLI.org
phone: 877-OPEN-ILS (673-6457)