mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-30 00:01:15 +00:00
fix(a11y): Change the look and behavior of some file upload fields
This commit is contained in:
parent
a0857a5eb8
commit
dc43c51b0d
5 changed files with 146 additions and 137 deletions
|
@ -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;
|
||||||
|
|
|
@ -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)}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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")}
|
||||||
|
|
Loading…
Reference in a new issue