Accessibility

While the script works fine under normal circumstances, there's some room for improvement when it comes to accessibility, which shouldn't be that hard to implement.

For starters, it should respond to keyboard controls such as Space and ↵ Enter to toggle visibility states. Each spoiler element should use attributes such as aria-expanded, role="button", tabindex="0", and an aria-label with some text describing the element as a spoiler. Discord simply uses the text "Spoiler" as their aria-label, and it's value is temporarily removed when showing the contents of the spoiler until the spoiler content is hidden again.

One could also add some preferences menu to toggle if the spoiler element should respond to hover events as well or to simply not hide spoiler content at all (options available in Discord's settings as well). Such menu would be accessible through the Toolbar, I suppose. But this isn't really as important as having some basic accessibility features built into the script by default.

--Polymeric (talk) 21:43, 22 October 2023 (UTC)

Great ideas here, thanks a ton for the feedback! It would be nice to be able to tab through and control the spoilers with the keyboard, and the accessibility options in general are a no-brainer. Will definitely be adding that.

I've not seen many scripts that add menus via the toolbar, but it makes a lot of sense to put it there considering there's no standard place for them otherwise. A preferences UI in general would also mean that users won't be forced to create a config in JS just to change some options, so less frustration if the defaults don't suit them. My current solution of adding a button to the side tools isn't very obvious, and I think could stand to be improved with something like that. Do you know of other scripts that do this (the toolbar) that I could refer to for ideas in terms of layout/look and feel?

Macklin (talk) 02:03, 23 October 2023 (UTC)

Usually, you add a link within a list element (<li>) into the #my-tools-menu element. In vanilla JS it'd look something like this:

function addToolbarShortcut() {
    const toolbarMenu = document.getElementById('my-tools-menu'),
          listElement = document.createElement('li'),
          shortcutLink = document.createElement('a'),
          shortcutText = 'Spoilers config.'; // i18n this.

    shortcutLink.setAttribute('href', '#');
    shortcutLink.innerText = shortcutText;

    listElement.prepend(shortcutLink);
    toolbarMenu.prepend(listElement);
 
    shortcutLink.addEventListener('click', openSpoilerSettingsModal);
}

Some references I can give you are MassRename, MassEdit, MassProtect, AjaxBatchDelete, AjaxBatchUndelete, MassCategorization, and BulkVideoUpload. Hope it helps!

--Polymeric (talk) 11:00, 23 October 2023 (UTC)

Not Working as Intended (Possible Conflict with Another JS Enhancement?)

I've imported this script to ImportJS on the NoPixel Wiki as instructed, but it doesn't seem to be functioning; the styles imported to Common.css apply just fine to anything that uses class="spoiler", but the JS doesn't seem to be functioning to allow the spoiler to be clickable.

Here's a list of all the JS enhancements that we have imported in case SpoilerTags is in conflict with the code of another one:

AddBlockUserTag
AdminDashboard_block
CategoryRedLinks
CopyText
CustomComments
DateInserter
DupImageList
EditConflictAlert
EditLeaderboard
ExploreMenuIcons
FirstEditDate
FloatingToc
ImportJS-Plus
InactiveUsers
LinkPreview
ListAdmins
MassEdit
MassProtect
MastheadGender
MisspelledPage
QuickPurge
Ripple
SpoilerTags
Stella
User Admin Tools
WhatLinksHere

And here's a Test Page we use for testing various things that currently only contains <span class="spoiler">SPOILER</span>

— Deakula (She/They) (talk) 20:23, 28 January 2024 (UTC)

Heya, thanks for the very thorough report! Seems to have just been a issue with using a dependency too early. I've just added a fix, which will be live once its reviewed. If you have any other issues with the script, feel free to shout.

Also noticed that tooltips are clipped by .page-content { overflow-x: hidden }, which is only obvious if your spoilers are at the top of the page. Don't have the time to fix that right now, so it'll just be something to keep in mind.

Macklin (talk) 01:33, 1 February 2024 (UTC)

Thanks so much for getting back to me and coming up with a fix so quickly!

I'll definitely take note of .page-content { overflow-x: hidden } having issues clipping tooltips at the top of the screen, thanks for pointing that out. It likely won't come up as it's a bit of an edge case, and the way our articles are generally formatted, there should never be a spoiler tag used that high up in the content area, but if it does for some reason come up, I'll just make sure a workaround in the styling is implemented.

I did want to follow up on this, however, because I also noticed that an unintended side effect of having this extension enabled is that all but 3 of our other JS extensions simply stopped functioning. The 3 that still worked from the above list were CategoryRedLinks, Floating ToC, and LinkPreview. Not sure if this is related to the fix you just recently implemented, but I figured I should make you aware nonetheless.

Deakula (She/They) (talk) 05:41, 1 February 2024 (UTC)

SpoilerTags Don't Properly Display Lists

Upon trying to put a <ul> into a spoiler tag (both in <span> and <div> versions), none of the styling appears for the list. The JS still functions; the list is hoverable which shows a tooltip, and clickable allowing it to be spoiled, but the the unspoiled list will appear to be a blank spot on the page. In addition, the spoilered list's <span> seems to like to take up the entire available width of its container.

Just as last time, a few examples of this behaviour can be found on the NoPixel Wiki's Test Page

The image I've included here is of a <div> spoiler that contains one <span> with a wikitext link, and another <span> with a single <li> in an <ul>. These are show unspoiled, spoiled, and with the entire content area of the second <span> containing the <ul> revealed.

Deakula (She/They) (talk) 09:38, 4 February 2024 (UTC)

Only the immediate inner text within spans that are immediate descendants of the <div class="spoiler"> will be spoilers. So while <div class="spoiler"><span>this</span></div> will work, <div class="spoiler"><span><ul><li>this</li><ul></span></div> will not because it's no longer an immediate inner text of the span. This was done to avoid the need to modify the elements on the page, which risks breaking layouts.

For now you can use a spoiler group, something like the following:

<div class="spoiler-group">
<span class="spoiler">Not a list</span>
* <span class="spoiler">First</span>
* <span class="spoiler">Second</span>
* <span class="spoiler">Third</span>
* <span class="spoiler">Fourth</span>
</div>

I understand that this adds a lot of extra steps, ideally you'd expect to be able to chuck whatever text in a div and have it ALL be marked as spoilers, so I'll look into modifying the styles so it's easier to implement such a thing, or provide some automations for the above. I'll let you know if/when I do this.

Also with your response above and it breaking other scripts, I'm fairly sure this was just due to the error preventing those other scripts from running.

Thank you so much for your patience, and for helping improve the script!

Macklin (talk) 17:09, 7 February 2024 (UTC)

Once again, thanks for getting back to me, and thanks for pointing me to a solution for my issue.

I really appreciate the work you're doing here, and I think this is a really neat and much-needed script. Development takes time, patience, trial, and error. I think back-and-forth between devs and users, especially in the beta stages, is really important, so I'll gladly continue to use SpoilerTags and update you here if I find any other bugs or notice anything that could use a QoL update.

Until then, great work, and thanks again!

Deakula (She/They) (talk) 22:15, 7 February 2024 (UTC)

Not Working

I have the same problem as the person above. I imported the script: css working, js not. Vintageidol (talk) 18:21, 20 June 2024 (UTC)

Hey, do you have a link or an example of how you're using the script? Would go a long way to solving your issue. Macklin (talk) 09:30, 3 July 2024 (UTC)

Example. Vintageidol (talk) 23:29, 3 July 2024 (UTC)

Just fixed this, was an issue with how the CSS was being detected. The tooltip on that example will be cut off because of Fandom's CSS defaults (I'll need to fix this at some point), but otherwise it should work after the JS has been reviewed. Macklin (talk) 03:02, 6 July 2024 (UTC)

Broken on multiple paragraph text

I wrapped each paragraph in <span>s like the page said to do, but SpoilerTags seems to be broken. Here's the link to the page: https://hellocharlotte.fandom.com/ru/wiki/Hello_Charlotte_EP_1 --U.ayaao.p (talk) 12:52, 29 June 2024 (UTC)

Special:Diff/203715 should be fixing that. -- Cube-shaped garbage can 16:41, 30 June 2024 (UTC)

Would have just been a colour thing, thanks for that KA!

That being said, I've reworked how multiline spoilers work to be a bit more intuitive. You can now just wrap it with a <div class="spoiler">...</div> instead of using nested spans within the div. Macklin (talk) 09:30, 3 July 2024 (UTC)

How to apply spoiler image to a gallery?

I wanted to add a spoiler image to a gallery because the image contains bright colors, but it doesn't work and the image just disappears. How can I spoiler an image in a gallery? SatuPutra796 (talk) 06:47, 2 July 2024 (UTC)

Galleries aren't supported just yet, only thumb images. I'll add it when I get a chance to. Macklin (talk) 06:03, 3 July 2024 (UTC)

EDIT: Just added very basic gallery support, lemme know if you need anything in particular in this use case. Macklin (talk) 09:30, 3 July 2024 (UTC)

Links stay hidden on Safari until you hover over them

U.ayaao.p (talk) 14:43, 9 July 2024 (UTC)

Don't have a Mac on hand so I can't test this for myself at the moment, sorry! Looks like some oddity with Safari, or potentially some interaction with User Agent styles. Macklin (talk) 12:40, 23 July 2024 (UTC)

Spoiler Tag for Individual Images in a Gallery

Would it be possible to apply spoiler tag in a gallery on individual image basis (rather than the whole gallery like now), so that only specific images are hidden away and not all? Supratim1986 (talk) 15:15, 12 February 2025 (UTC)

Mobile not supported yet?

I also see it is still in the beta phase.—Preceding unsigned comment added by WikiTriston (talk • contribs) . Please sign your posts with ~~~~!

"Because it uses click events, it requires JavaScript in addition to CSS, and does not work on mobile. If you want your spoilers to be shown on hover, or if you prefer JavaScript-less spoilers, you'll want to use Heimu or SpoilerBlur instead." - The page's introducing section --daler 00:57, 21 October 2025 (UTC)