Simple script to improve the usage of `https://dict.leo.org/` for the mobile version inside pc.

improve-leo-navigation.js

// cleanup
document.addEventListener('DOMContentLoaded', () => {
  // remove other tabindex elements
  document
    .querySelectorAll('[tabindex]')
    .forEach((elem) => elem.removeAttribute('tabindex'));
  document.querySelectorAll('button').forEach(x => x.remove());
});

// watcher
let lastSearch = '';
setInterval(() => {
  const elements = Array.from(
    document.querySelectorAll('[data-dz-search-term]')
  );
  const currentSearch = elements.reduce(
    (acc, curr) => acc + curr.textContent,
    ''
  );

  if (lastSearch !== currentSearch) {
    lastSearch = currentSearch;
    elements.forEach((elem) => {
      // wrap around `a` tag
      const search = elem.getAttribute('data-dz-search-term');
      const text = elem.textContent;
      elem.innerHTML = `<header><a href="${search}">${text}</a></header>`;

      // prevent default enter behaviour
      elem.addEventListener('keydown', (event) => event.stopPropagation());
    });
  }
}, 100);

Improve Leo Mobile Navigation inside Desktop

I tend to use more the mobile version of the Leo dictionary because it's cleaner than the desktop version. But my main problem with it was that there was no navigation accessibility implemented for web users.

The goal of this script is to improve the search experience with the TAB key, by creating a links for every suggestion.

Installation

Install any JS script injector, I used this one and copy the script.

Example of use