feat(a11y): Change behavior of some file upload fields #1577
Conversation
…upload-a11y * lemmy/main: fix: Add type=button to buttons chore: Empty commit to re-trigger Woodpecker fix: Fix some Bootstrap 5 font classes fix: Fix some Bootstrap 5 font classes fix: Specify vote content type so buttons work for both comments and posts v0.18.0 Fix homepage `scrollTo(0, 0)` failing when document size changes. v0.18.0-rc.8 Moved `!isBrowser()` check to `FirstLoadServer.isFirstLoad` Fix server-side rendering after first load. fix!: Try to get Vote Buttons component working in Comments fix: Remove unused prop fix: Rework some vote buttons architecture fix: Undo some other extraneous changes fix: Undo some extraneous changes fix: Remove tippy duplicate functions fix: Revert to old mobile vote style feat: Move vote buttons to separate component
jsit
requested review from
dessalines,
SleeplessOne1917 and
alectrocute
as code owners
* Fix: missing semantic css classes and html elements. Now all pages have a main and aside element when a sidebar is present to facilitate custom theming. This does not impact the default behavior of the front. * Fix: re-added communityref on main element --------- Co-authored-by: 0xAnansi <[email protected]> Co-authored-by: Jay Sitter <[email protected]> Co-authored-by: Dessalines <[email protected]>
* feat: Reduce base font size * chore: Build themes --------- Co-authored-by: SleeplessOne1917 <[email protected]> Co-authored-by: Dessalines <[email protected]>
* rework password reset form * make self-suggested changes * cleaning * validate in handlePasswordReset as well * update submodule * partially make suggested changes * make suggested changes * resolve merge conflicts * resolve merge conflicts * resolve merge conflicts --------- Co-authored-by: Dessalines <[email protected]>
Co-authored-by: Dessalines <[email protected]>
* Use was-validated class in signup form * Update signup.tsx * Update signup.tsx --------- Co-authored-by: SleeplessOne1917 <[email protected]>
Co-authored-by: Dessalines <[email protected]>
When banning or unbanning, the API call was done, but updating the frontend failed. This caused a confusing experience for an admin, until the page was reloaded.
There was a problem hiding this comment.
Better than what it used to be, but it could use a few more touches before shipping.
For the site settings, could use a bit of margin between the images and the file inputs. I'm also not a fan of the tiny "x" on the image to remove the image.
For create post and create community, a bit of margin between the uploader and image would be good:
For edit community and user settings, same critiques as the site settings page apply:
|
I don’t know if it’s related, but the avatar/icons that have a weird aspect ratio (not a circle) has been hurting me for awhile. Could there be an opportunity to fix that here? 😌 |
10,000,000% |
|
Thanks for battle-testing this @SleeplessOne1917, I probably won't get to this today. |
|
@SleeplessOne1917 I'm gonna work on those spacing issues before merging this |
|
@SleeplessOne1917 Fixed spacing between image and file input: 
|
Several file upload fields were hiding the main
<input type="file">and relying on just the label for clicking.This made these fields inaccessible to tabbing, and possibly some other negative effects of hiding native elements.
<label>can have a tabindex, but evidently that's not a good practice.In a couple places here I've just added the
form-controlclass to the inputs, which Bootstrap styles nicely.The places I didn't touch this are the emoji upload page, where there isn't much space, and the Markdown toolbar, where there isn't any room. (I added an
eslint-disableto ignore thetabindexbeing on thelabelfor keyboard access for those.)I cleaned up the Create Post page to make image uploading a little clearer, too.
Another thing I noticed is that in some cases these upload fields were a
<form>inside of a<form>, which they don't have to be.Affected pages are:
Create Post
Before
After
User Settings
Before
After
Create Community
Before
After
Site Settings
Before
After
Custom Emoji
After
Avatar aspect ratios
This PR also fixes avatar aspect ratios
Before
After