Fix #1001 Accessibility: Use semantically correct buttons (almost) everywhere
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:
old: