Unify and improve cancellation buttons

[gibson042]

(relating to pinned links and the references pane)

• make unpin buttons less rigid about event.target and more compatible with DOM modifications
• make the "references-pane-close" element an actual button
• add a generic "cancellation-button" class for the text content
• consistently apply border/background/color/cursor defaults with hover overrides as appropriate
• use the actual cancellation character for cancellation buttons (U+2716 HEAVY MULTIPLICATION X "" → U+1F5D9 CANCELLATION X "")

[michaelficarra]

• use the actual cancellation character for cancellation buttons (U+2716 HEAVY MULTIPLICATION X "✖" → U+1F5D9 CANCELLATION X "🗙")

GitHub renders this glyph with "Apple Color Emoji", which looks like this:

And I don't think our distribution of IBM Plex will have this glpyh. So I don't think we can make this change.

[gibson042]

• use the actual cancellation character for cancellation buttons (U+2716 HEAVY MULTIPLICATION X "" → U+1F5D9 CANCELLATION X "")

GitHub renders this glyph with "Apple Color Emoji", which looks like this:

And I don't think our distribution of IBM Plex will have this glpyh. So I don't think we can make this change.

Ugh, confirmed. I've reverted back to U+2716 HEAVY MULTIPLICATION X "✖" so we can pick up the other changes. We could also use U+274C CROSS MARK "❌", but that renders as emoji by default and not all (browser, OS) pairs allow overriding that with text presentation "❌︎" so we'd likely want more discussion before adopting it.

[michaelficarra]

We should probably improve a11y of these features at some point, too.