Set Focus on Hover in Send To Menu

Created by

Tamara Marnell, Orbis Cascade Alliance

Description

By default, the :hover and :focus styles in the Send To actions menu are identical. When a user opens the menu from a brief result, the first item retains focus unless they use the tab key to move it to other elements. If they use a mouse to hover over other actions, the two actions may appear ready to be activated simultaneously.

Brief result actions with two items highlighted: E-Mail and Permalink.
Two actions highlighted simultaneously: E-Mail by focus and Permalink by hover.

This customization sets the focus on an action on a mouse over event, so only one action will be highlighted at a time.

Brief result actions with one item highlighted: Permalink.
Focus moved to Permalink on hover.

System Components

Alma Discovery (VE), Customization Package

Skill Set Requirements

JavaScript

Accessibility

This customization does not affect keyboard navigation.

Browser Support

Chrome, Firefox, Edge

Mobile Support

This customization will not affect the behavior of Primo VE on touch screen devices.

Implementation

Overview

  • Enable Central Package in view
  • Edit custom.js file from local customization package
  • Zip package, and load to view via Alma Discovery

Steps

  1. Turn on inheritance from the Central Package.
  2. In local custom.js file, include sameTabMenuLinks in the app declaration near the top of the file:

    var app = angular.module('viewCustom', ['setFocusOnHoverSendTo']);
  3. Inside the anonymous function in your local custom.js file, add the following code:

    app.component('prmActionListAfter', {template: '<set-focus></set-focus>'});

    If you have any other customizations that utilize prm-action-list-after, like Text a Call Number or other custom actions, place the “set-focus” element within the template of the same component.

    app.component('prmActionListAfter', {template: '<sms-action></sms-action><set-focus></set-focus>'});
  4. Save your custom.js file, zip your customization package, and upload it to your Primo VE view in Alma Discovery.