mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-09 18:05:09 +00:00
Merge pull request #1570 from jsit/fix/a11y-fixes-2
fix(a11y): Fixing some small a11y issues
This commit is contained in:
commit
43c9c8da3f
|
@ -276,10 +276,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);
|
||||
|
|
|
@ -50,6 +50,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
|
|||
pickerOptions={{}}
|
||||
></EmojiMart>
|
||||
</div>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||
<div
|
||||
onClick={linkEvent(this, this.togglePicker)}
|
||||
className="click-away-container"
|
||||
|
|
|
@ -36,7 +36,9 @@ export class ImageUploadForm extends Component<
|
|||
<label htmlFor={this.id} className="pointer text-muted small fw-bold">
|
||||
{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 : ""}
|
||||
|
@ -44,12 +46,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 text-white"
|
||||
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>
|
||||
|
|
|
@ -106,8 +106,12 @@ export class SearchableSelect extends Component<
|
|||
<button
|
||||
id={id}
|
||||
type="button"
|
||||
role="combobox"
|
||||
className="form-select d-inline-block text-start"
|
||||
aria-haspopup="listbox"
|
||||
aria-controls="searchable-select-input"
|
||||
aria-activedescendant={options[selectedIndex].label}
|
||||
aria-expanded={false}
|
||||
data-bs-toggle="dropdown"
|
||||
onClick={linkEvent(this, focusSearch)}
|
||||
ref={this.toggleButtonRef}
|
||||
|
@ -116,17 +120,14 @@ export class SearchableSelect extends Component<
|
|||
? `${I18NextService.i18n.t("loading")}${loadingEllipses}`
|
||||
: options[selectedIndex].label}
|
||||
</button>
|
||||
<div
|
||||
role="combobox"
|
||||
aria-activedescendant={options[selectedIndex].label}
|
||||
className="modlog-choices-font-size dropdown-menu w-100 p-2"
|
||||
>
|
||||
<div className="modlog-choices-font-size dropdown-menu w-100 p-2">
|
||||
<div className="input-group">
|
||||
<span className="input-group-text">
|
||||
{loading ? <Spinner /> : <Icon icon="search" />}
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
id="searchable-select-input"
|
||||
className="form-control"
|
||||
ref={this.searchInputRef}
|
||||
onInput={linkEvent(this, handleSearch)}
|
||||
|
|
Loading…
Reference in a new issue