fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-22 22:49:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): Change image remove button to true button element

Browse source
This commit is contained in:
Jay Sitter 2023-06-24 19:44:22 -04:00
parent d3b8943341
commit dccfc72e73
2 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/assets/css/main.css
View file

@ -275,10 +275,7 @@ hr {
} }
.mini-overlay { .mini-overlay {
position: absolute; display: block;
top: 0;
right: 0;
padding: 2px;
height: 1.5em; height: 1.5em;
width: 1.5em; width: 1.5em;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);

8
src/shared/components/common/image-upload-form.tsx
View file

@ -39,7 +39,9 @@ export class ImageUploadForm extends Component<
> >
{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 */}
<img <img
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 : ""}
@ -47,12 +49,14 @@ export class ImageUploadForm extends Component<
this.props.rounded ? "rounded-circle" : "" this.props.rounded ? "rounded-circle" : ""
}`} }`}
/> />
<a <button
className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent"
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" />
</a> </button>
</span> </span>
) : ( ) : (
<span className="btn btn-secondary">{this.props.uploadTitle}</span> <span className="btn btn-secondary">{this.props.uploadTitle}</span>