1569816 - Could we accomplish what highlightSections does without JavaScript?

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: General, enhancement, P1)

Description

[Schalk Neethling [:espressive]]

Currently, we have a piece of JavaScript(see below) that is responsible for some DOM manipulation in order to get the h3 and h5 elements inside the main content area to display correctly i.e. the black background

It seems like we can accomplish this with CSS only. This bug is to explore that possibility, and implement it if possible.

// This is an effect function that runs every time the article is rendered.
// This is the React version of the code in kuma/static/js/highlight.js
// which is used on the wiki domain
function highlightSections(article) {
    let sections = article.querySelectorAll('#wikiArticle h3, #wikiArticle h5');
    for (let section of sections) {
        section.classList.add('highlight-spanned');
        section.innerHTML = `<span class="highlight-span">${
            section.innerHTML
        }</span>`;
    }
}

Comment 1

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5611

Comment 2

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub master push: https://github.com/mozilla/kuma/commit/4987e52e2835e025248bbfbbdae365fcc89db012

Commit merged into master by Peter Bengtsson (peterbe)
Authored by Schalk Neethling (schalkneethling)