element-hq / element-hq/element-web

Use HTML button element for AccessibleButton?

Open
#22,423 3 comments 0 reactions 0 assignees View on GitHub
A11y O-Frequent S-Minor T-Enhancement
Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

Per https://github.com/matrix-org/matrix-react-sdk/pull/8737#discussion_r887867501

While `AccessibleButton` has been implemented with div tag since more than 6 years from [its beginning](https://github.com/matrix-org/matrix-react-sdk/blame/86276450f64c41ffd8d71bc14a758be0c4b19e37/src/components/views/elements/AccessibleButton.js#L47) and worked, currently it requires to add `element='button'` to display the button as a `button` HTML element ([example](https://github.com/matrix-org/matrix-react-sdk/blob/7c57680b93db3afeb9f52a65a5302d66d79a56b9/src/components/views/location/ShareType.tsx#L54)), which does not look so intuitive.

However, though it should be logical to replace div with button, the button with div works without an issue, and I am not quite sure how much merit it would have over possible risk for breaking the functions.

### Outcome

#### What did you expect?

`AccessibleButton` without element value should be displayed as `button` element instead of `div`.

#### What happened instead?

It is displayed as `div` element, whether it has attributes for accessibility, etc.

### Operating system

_No response_

### Browser information

_No response_

### URL for webapp

_No response_

### Application version

develop branch

### Homeserver

_No response_

### Will you send logs?

No

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.