LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-29 15:51:14 +00:00
Code Issues 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 {
position: absolute;
top: 0;
right: 0;
padding: 2px;
display: block;
height: 1.5em;
width: 1.5em;
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 ? (
<span className="d-inline-block position-relative">
{/* TODO: Create "Current Iamge" translation for alt text */}
<img
alt=""
src={this.props.imageSrc}
height={this.props.rounded ? 60 : ""}
width={this.props.rounded ? 60 : ""}
@ -47,12 +49,14 @@ export class ImageUploadForm extends Component<
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)}
aria-label={I18NextService.i18n.t("remove")}
>
<Icon icon="x" classes="mini-overlay" />
</a>
</button>
</span>
) : (
<span className="btn btn-secondary">{this.props.uploadTitle}</span>