fix(a11y): Change divs and links to buttons

This commit is contained in:
Jay Sitter 2023-06-25 01:35:34 -04:00
parent 7aa2860bd6
commit 0cc354b264
3 changed files with 14 additions and 13 deletions

View file

@ -585,9 +585,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
return ( return (
suggestedTitle && ( suggestedTitle && (
<div <button
className="mt-1 text-muted small fw-bold pointer" type="button"
role="button" className="mt-1 small border-0 bg-transparent p-0 d-block text-muted fw-bold pointer"
onClick={linkEvent( onClick={linkEvent(
{ i: this, suggestedTitle }, { i: this, suggestedTitle },
copySuggestedTitle copySuggestedTitle
@ -595,7 +595,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
> >
{I18NextService.i18n.t("copy_suggested_title", { title: "" })}{" "} {I18NextService.i18n.t("copy_suggested_title", { title: "" })}{" "}
{suggestedTitle} {suggestedTitle}
</div> </button>
) )
); );
} }

View file

@ -248,12 +248,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</a> </a>
</div> </div>
<div className="my-2 d-block d-sm-none"> <div className="my-2 d-block d-sm-none">
<a <button
className="d-inline-block" type="button"
className="p-0 border-0 bg-transparent d-inline-block"
onClick={linkEvent(this, this.handleImageExpandClick)} onClick={linkEvent(this, this.handleImageExpandClick)}
> >
<PictrsImage src={this.imageSrc} /> <PictrsImage src={this.imageSrc} />
</a> </button>
</div> </div>
</> </>
); );

View file

@ -109,17 +109,17 @@ export class PrivateMessage extends Component<
</span> </span>
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<div <button
role="button" type="button"
className="pointer text-monospace" className="pointer text-monospace btn p-0 d-block"
onClick={linkEvent(this, this.handleMessageCollapse)} onClick={linkEvent(this, this.handleMessageCollapse)}
> >
{this.state.collapsed ? ( {this.state.collapsed ? (
<Icon icon="plus-square" classes="icon-inline" /> <Icon icon="plus-square" />
) : ( ) : (
<Icon icon="minus-square" classes="icon-inline" /> <Icon icon="minus-square" />
)} )}
</div> </button>
</li> </li>
</ul> </ul>
{this.state.showEdit && ( {this.state.showEdit && (