improve user a11y

This commit is contained in:
Guillaume Dorce 2022-11-03 12:06:53 +01:00
parent e420e01e4f
commit 83c1b5685a
2 changed files with 18 additions and 6 deletions

View File

@ -30,14 +30,26 @@ const NewMessage = () => {
return ( return (
<footer className="new-message z-10 flex justify-center w-full"> <footer className="new-message z-10 flex justify-center w-full">
<form onSubmit={handleSubmit} className="flex gap-2 bg-grey-dark rounded-xl w-full max-w-3xl p-2 mx-2 sm:p-3 md:mx-0 shadow-md shadow-grey-dark"> <form
onSubmit={handleSubmit}
className="flex gap-2 bg-grey-dark rounded-xl w-full max-w-3xl p-2 mx-2 sm:p-3 md:mx-0 shadow-md shadow-grey-dark"
>
<div className="file"> <div className="file">
<label htmlFor="image" className="cursor-pointer block p-2"> <label htmlFor="image" className="cursor-pointer block p-2">
<div className="rounded-full text-grey-dark bg-red-light text-lg p-2"> <div className="rounded-full text-grey-dark bg-red-light text-lg p-2">
<FaPlus className="" /> <FaPlus className="" />
</div> </div>
<p className="sr-only">Ajouter une image</p>
</label> </label>
<input type="file" name="image" id="image" accept="image/*" className="hidden" value={image} onChange={e => setImage(e.target.value)} /> <input
type="file"
name="image"
id="image"
accept="image/*"
className="hidden"
value={image}
onChange={(e) => setImage(e.target.value)}
/>
</div> </div>
<input <input
@ -46,8 +58,8 @@ const NewMessage = () => {
onChange={(e) => setMessage(e.target.value)} onChange={(e) => setMessage(e.target.value)}
placeholder="Message" placeholder="Message"
className="bg-grey-dark text-white rounded-xl p-2.5 w-full placeholder-red-light" className="bg-grey-dark text-white rounded-xl p-2.5 w-full placeholder-red-light"
id='content' id="content"
name='content' name="content"
/> />
<button <button
type="submit" type="submit"

View File

@ -181,7 +181,7 @@ const User = ({ author }: any) => {
</div> </div>
<div className="flex gap-4"> <div className="flex gap-4">
<div <div
className="rounded-md border py-2 px-4 text-sm max-w-[100px] font-medium text-white hover:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-transparent hover:text-red" className="rounded-md border py-2 px-4 text-sm max-w-[100px] font-medium text-white hover:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-transparent hover:text-red cursor-pointer"
onClick={(e) => setShow(false)} onClick={(e) => setShow(false)}
> >
Annuler Annuler