Skip to content

Fix #1001 Accessibility: Use semantically correct buttons (almost) everywhere

Shpuld Shpludson requested to merge fix/use-semantically-correct-buttons into develop

Makes use of button elements for things that should be buttons, making the use of kb-navigation and screenreaders better. Probably helps with reading templates too.

Every instance of <a href="#"> has been replaced with a <button>, a fair few <span> and <div> with onClick have been replaced as well, but some are left (most notably in emoji picker and react picker, maybe later)

There's now classes .button-default for regular looking buttons and .button-unstyled when you don't want default button styles to get in the way, it's pretty much a drop-in replacement for most places where another element is doing the job of a button. Additional modifiers -link, -padded and -fullwidth used depending on use-case.

Actual visible small changes I made as well:

  • Fix popover offset going wrong way when opening on bottom
  • Fix hitbox sizes for various icon buttons (fav/rt/etc regressed to way too small in fontawesome changes, noticed only now)
  • Change the untranslated "Hide" to an X icon for NSFW images and make it not use link color which can be near invisible depending on theme

if there's any other visible changes it's either a mistake or forgot to mention, most manual changes tested very carefully side-by-side with develop to make sure it's pixel perfect whenever possible.

Difference it makes with kb-navigation addons (red ones are things to press, I don't know what the gray means and why it doesn't appear in one tab, I don't use this stuff normally):

new:

image

old:

image

Edited by Shpuld Shpludson

Merge request reports

Loading