-
Using Lazy Builders and Auto Placeholders in Drupal 8
Introduction
I’ve been working on a site that features a lot of user-specific customization and output. The site offers workshops (courses) using the Opigno LMS for Drupal 8. The workshops are rendered in a few different ways throughout the site. For the most part, the rendered workshops appear the same for all users. Here’s an example of a “card” view mode for a workshop:
If a user has successfully completed a workshop, a special badge will appear on the card view mode. Also, the card will be highlighted:
There are two parts of the workshop card template that have to change based on the user viewing the card:
-
NightwatchJS Command to Repeat a Keystroke
Here’s a simple custom command that lets you repeat a specific key (single or combo) N number of times.
In the Drupal world you want to place this in your “Commands” directory (as defined in DRUPAL_NIGHTWATCH_SEARCH_DIRECTORY in web/core/.env).
You’d want to change “sitename” to be your site’s name (so it feels namespaced).
/tests/Nightwatch/Commands/sitenameRepeatKeystroke.js
123456789101112131415161718192021222324252627282930313233/*** Repeats a keystroke (can be multiple keys) a specific number of times.** @param {array} keys* Array of keys to send.* Example 1: [browser.Keys.TAB]* Example 2: [browser.Keys.SHIFT, browser.Keys.TAB, browser.Keys.NULL]);* (it's important to terminate modifier keys with NULL)* @param {integer} times* Number of times to repeat the key send.* @param {integer} pauseBetween* Number of milliseconds to pause between each key send (100 ms default).* @param {function} callback* A callback which will be called.* @return {object}* The 'browser' object.*/exports.command = function myCommand(keys, times, pauseBetween = 100, callback) {const self = this;for (let i = 0; i < times; i++) {this.keys(keys);if (pauseBetween) {this.pause(pauseBetween);}}if (typeof callback === 'function') {callback.call(self);}return this;};Using this in /tests/Nightwatch/Tests/misc.js with a 1000ms pause between each keystroke:
12345678910111213/* eslint-disable no-unused-expressions */module.exports = {'@tags': ['mysite', 'learn-page', 'accessibility'],'When I hit shift-tab 9 times on the Learn page my logo becomes the active element': browser => {browser.drupalRelativeURL('/learn');browser.sitenameRepeatKeystroke([browser.Keys.SHIFT, browser.Keys.TAB, browser.Keys.NULL],9,1000,);},}; -
Monitoring Which Element Has Focus in a Web Browser
While building accessibility-minded websites, it’s useful to be able to monitor which element has focus in your browser.
Using a screen reader works well, but there may be an easier solution for those who aren’t used to screen readers.
Chrome makes this pretty simple. See https://developers.google.com/web/tools/chrome-devtools/accessibility/focus.
In Firefox, Safari, Chrome, and other browsers I’m able to achieve similar functionality (maybe even better) by running a simple snippet in the web developer tools console.
New lines appear as you move through the elements with your keyboard (or mouse).
You may want to turn this into a one-liner for easier pasting.
1234567var lastElement = document.activeElement;setInterval(function() {if (lastElement != document.activeElement) {lastElement = document.activeElement;console.log(document.activeElement);}}, 100);Output in Firefox:
