fix(a11y): Change the look and behavior of some file upload fields

This commit is contained in:
Jay Sitter 2023-06-25 02:27:07 -04:00
parent a0857a5eb8
commit dc43c51b0d
5 changed files with 146 additions and 137 deletions

View file

@ -88,6 +88,15 @@
color: var(--bs-gray) !important; color: var(--bs-gray) !important;
} }
input[type="file"]::file-selector-button {
font: inherit;
border: 0;
padding: 0.375em 0.75em;
border-radius: var(--bs-border-radius);
background-color: var(--bs-secondary);
color: var(--bs-white);
}
.icon { .icon {
display: inline-grid; display: inline-grid;
display: inline-flex; display: inline-flex;

View file

@ -33,38 +33,34 @@ export class ImageUploadForm extends Component<
render() { render() {
return ( return (
<form className="image-upload-form d-inline"> <form className="image-upload-form d-inline">
<label htmlFor={this.id} className="pointer text-muted small fw-bold"> {this.props.imageSrc && (
{this.props.imageSrc ? ( <span className="d-inline-block position-relative">
<span className="d-inline-block position-relative"> {/* TODO: Create "Current Iamge" translation for alt text */}
{/* TODO: Create "Current Iamge" translation for alt text */} <img
<img alt=""
alt="" src={this.props.imageSrc}
src={this.props.imageSrc} height={this.props.rounded ? 60 : ""}
height={this.props.rounded ? 60 : ""} width={this.props.rounded ? 60 : ""}
width={this.props.rounded ? 60 : ""} className={`img-fluid ${
className={`img-fluid ${ this.props.rounded ? "rounded-circle" : ""
this.props.rounded ? "rounded-circle" : "" }`}
}`} />
/> <button
<button className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white" type="button"
type="button" onClick={linkEvent(this, this.handleRemoveImage)}
onClick={linkEvent(this, this.handleRemoveImage)} aria-label={I18NextService.i18n.t("remove")}
aria-label={I18NextService.i18n.t("remove")} >
> <Icon icon="x" classes="mini-overlay" />
<Icon icon="x" classes="mini-overlay" /> </button>
</button> </span>
</span> )}
) : (
<span className="btn btn-secondary">{this.props.uploadTitle}</span>
)}
</label>
<input <input
id={this.id} id={this.id}
type="file" type="file"
accept="image/*,video/*" accept="image/*,video/*"
className="small"
name={this.id} name={this.id}
className="d-none"
disabled={!UserService.Instance.myUserInfo} disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, this.handleImageUpload)} onChange={linkEvent(this, this.handleImageUpload)}
/> />

View file

@ -87,7 +87,10 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
</div> </div>
)} )}
<div className="table-responsive"> <div className="table-responsive">
<table id="emojis_table" className="table table-sm table-hover"> <table
id="emojis_table"
className="table table-sm table-hover align-middle"
>
<thead className="pointer"> <thead className="pointer">
<tr> <tr>
<th>{I18NextService.i18n.t("column_emoji")}</th> <th>{I18NextService.i18n.t("column_emoji")}</th>
@ -129,30 +132,30 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
/> />
)} )}
{cv.image_url.length === 0 && ( {cv.image_url.length === 0 && (
<form> <label
<label // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
className="btn btn-sm btn-secondary pointer" tabIndex={0}
htmlFor={`file-uploader-${index}`} className="btn btn-sm btn-secondary pointer"
data-tippy-content={I18NextService.i18n.t( htmlFor={`file-uploader-${index}`}
"upload_image" data-tippy-content={I18NextService.i18n.t(
"upload_image"
)}
>
{capitalizeFirstLetter(
I18NextService.i18n.t("upload")
)}
<input
name={`file-uploader-${index}`}
id={`file-uploader-${index}`}
type="file"
accept="image/*"
className="d-none"
onChange={linkEvent(
{ form: this, index: index },
this.handleImageUpload
)} )}
> />
{capitalizeFirstLetter( </label>
I18NextService.i18n.t("upload")
)}
<input
name={`file-uploader-${index}`}
id={`file-uploader-${index}`}
type="file"
accept="image/*"
className="d-none"
onChange={linkEvent(
{ form: this, index: index },
this.handleImageUpload
)}
/>
</label>
</form>
)} )}
</td> </td>
<td className="text-right"> <td className="text-right">

View file

@ -155,28 +155,32 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
/> />
</div> </div>
</div> </div>
<div className="input-group mb-3"> <div className="row mb-3">
<label className="me-2 col-form-label"> <label className="col-sm-2 col-form-label">
{I18NextService.i18n.t("icon")} {I18NextService.i18n.t("icon")}
</label> </label>
<ImageUploadForm <div className="col-sm-10">
uploadTitle={I18NextService.i18n.t("upload_icon")} <ImageUploadForm
imageSrc={this.state.siteForm.icon} uploadTitle={I18NextService.i18n.t("upload_icon")}
onUpload={this.handleIconUpload} imageSrc={this.state.siteForm.icon}
onRemove={this.handleIconRemove} onUpload={this.handleIconUpload}
rounded onRemove={this.handleIconRemove}
/> rounded
/>
</div>
</div> </div>
<div className="input-group mb-3"> <div className="row mb-3">
<label className="me-2 col-form-label"> <label className="col-sm-2 col-form-label">
{I18NextService.i18n.t("banner")} {I18NextService.i18n.t("banner")}
</label> </label>
<ImageUploadForm <div className="col-sm-10">
uploadTitle={I18NextService.i18n.t("upload_banner")} <ImageUploadForm
imageSrc={this.state.siteForm.banner} uploadTitle={I18NextService.i18n.t("upload_banner")}
onUpload={this.handleBannerUpload} imageSrc={this.state.siteForm.banner}
onRemove={this.handleBannerRemove} onUpload={this.handleBannerUpload}
/> onRemove={this.handleBannerRemove}
/>
</div>
</div> </div>
<div className="mb-3 row"> <div className="mb-3 row">
<label className="col-12 col-form-label" htmlFor="site-desc"> <label className="col-12 col-form-label" htmlFor="site-desc">

View file

@ -347,32 +347,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<input <input
type="url" type="url"
id="post-url" id="post-url"
className="form-control" className="form-control mb-3"
value={url} value={url}
onInput={linkEvent(this, handlePostUrlChange)} onInput={linkEvent(this, handlePostUrlChange)}
onPaste={linkEvent(this, handleImageUploadPaste)} onPaste={linkEvent(this, handleImageUploadPaste)}
/> />
{this.renderSuggestedTitleCopy()} {this.renderSuggestedTitleCopy()}
<form>
<label
htmlFor="file-upload"
className={`${
UserService.Instance.myUserInfo && "pointer"
} d-inline-block float-right text-muted fw-bold`}
data-tippy-content={I18NextService.i18n.t("upload_image")}
>
<Icon icon="image" classes="icon-inline" />
</label>
<input
id="file-upload"
type="file"
accept="image/*,video/*"
name="file"
className="d-none"
disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, handleImageUpload)}
/>
</form>
{url && validURL(url) && ( {url && validURL(url) && (
<div> <div>
<a <a
@ -402,56 +382,73 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</a> </a>
</div> </div>
)} )}
{this.state.imageLoading && <Spinner />}
{url && isImage(url) && (
<img src={url} className="img-fluid" alt="" />
)}
{this.state.imageDeleteUrl && (
<button
className="btn btn-danger btn-sm mt-2"
onClick={linkEvent(this, handleImageDelete)}
aria-label={I18NextService.i18n.t("delete")}
data-tippy-content={I18NextService.i18n.t("delete")}
>
<Icon icon="x" classes="icon-inline me-1" />
{capitalizeFirstLetter(I18NextService.i18n.t("delete"))}
</button>
)}
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
<>
<div className="my-1 text-muted small fw-bold">
{I18NextService.i18n.t("cross_posts")}
</div>
<PostListings
showCommunity
posts={this.props.crossPosts}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages}
viewOnly
// All of these are unused, since its view only
onPostEdit={() => {}}
onPostVote={() => {}}
onPostReport={() => {}}
onBlockPerson={() => {}}
onLockPost={() => {}}
onDeletePost={() => {}}
onRemovePost={() => {}}
onSavePost={() => {}}
onFeaturePost={() => {}}
onPurgePerson={() => {}}
onPurgePost={() => {}}
onBanPersonFromCommunity={() => {}}
onBanPerson={() => {}}
onAddModToCommunity={() => {}}
onAddAdmin={() => {}}
onTransferCommunity={() => {}}
/>
</>
)}
</div> </div>
</div> </div>
<div className="mb-3 row">
<label htmlFor="file-upload" className={"col-sm-2 col-form-label"}>
{capitalizeFirstLetter(I18NextService.i18n.t("image"))}
<Icon icon="image" classes="icon-inline ms-1" />
</label>
<input
id="file-upload"
type="file"
accept="image/*,video/*"
name="file"
className="small col-sm-10"
disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, handleImageUpload)}
/>
{this.state.imageLoading && <Spinner />}
{url && isImage(url) && (
<img src={url} className="img-fluid" alt="" />
)}
{this.state.imageDeleteUrl && (
<button
className="btn btn-danger btn-sm mt-2"
onClick={linkEvent(this, handleImageDelete)}
aria-label={I18NextService.i18n.t("delete")}
data-tippy-content={I18NextService.i18n.t("delete")}
>
<Icon icon="x" classes="icon-inline me-1" />
{capitalizeFirstLetter(I18NextService.i18n.t("delete"))}
</button>
)}
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
<>
<div className="my-1 text-muted small fw-bold">
{I18NextService.i18n.t("cross_posts")}
</div>
<PostListings
showCommunity
posts={this.props.crossPosts}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages}
viewOnly
// All of these are unused, since its view only
onPostEdit={() => {}}
onPostVote={() => {}}
onPostReport={() => {}}
onBlockPerson={() => {}}
onLockPost={() => {}}
onDeletePost={() => {}}
onRemovePost={() => {}}
onSavePost={() => {}}
onFeaturePost={() => {}}
onPurgePerson={() => {}}
onPurgePost={() => {}}
onBanPersonFromCommunity={() => {}}
onBanPerson={() => {}}
onAddModToCommunity={() => {}}
onAddAdmin={() => {}}
onTransferCommunity={() => {}}
/>
</>
)}
</div>
<div className="mb-3 row"> <div className="mb-3 row">
<label className="col-sm-2 col-form-label" htmlFor="post-title"> <label className="col-sm-2 col-form-label" htmlFor="post-title">
{I18NextService.i18n.t("title")} {I18NextService.i18n.t("title")}