Misuse of Details tag as popover #23

New issue

Closed

opened 2026-02-13 21:11:42 +00:00 by aniram · 1 comment

aniram commented

2026-02-13 21:11:42 +00:00

Owner

Currently to see available actions like "Ler em PDF" or "Acompanhar" on a project, one has to click on a details tag which then shows action buttons. This is not what the details tag is for. This is misleading for people who use screen-readers. I chose this option because it requires zero JavaScript but ideally in the future this has to be optimized.

Currently to see available actions like "Ler em PDF" or "Acompanhar" on a project, one has to click on a [details](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details) tag which then shows action buttons. This is not what the details tag is for. This is misleading for people who use screen-readers. I chose this option because it requires zero JavaScript but ideally in the future this has to be optimized.

aniram added the

Code/Frontend

Kind/Enhancement

Priority/Low

labels

2026-02-13 21:11:42 +00:00

aniram self-assigned this

2026-02-13 21:11:42 +00:00

aniram changed title from ~~Misuse of Details tag~~ to Misuse of Details tag as popover

2026-02-14 10:57:55 +00:00

aniram commented

2026-02-16 17:28:11 +00:00

Author

Owner

Proof-of-concept:

<!DOCTYPE>
<html>
<style>
  [popover] {
    position-area: bottom span-right;
  }
</style>
<body>
<button popovertarget="actions">Open Menu</button>
<menu id="actions" popover>
  <button>Action 1</button>
  <button>Action 2</button>
  <button>Action 3</button>
</menu>
</body>
</html>

The most important thing is setting the position-area on elements with the attribute popover or else it will default to none and be centered on the viewport.

Proof-of-concept: ```html <!DOCTYPE> <html> <style> [popover] { position-area: bottom span-right; } </style> <body> <button popovertarget="actions">Open Menu</button> <menu id="actions" popover> <button>Action 1</button> <button>Action 2</button> <button>Action 3</button> </menu> </body> </html> ``` The most important thing is setting the [position-area](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position-area) on elements with the attribute [popover](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover) or else it will default to **none** and be centered on the viewport.

aniram referenced this issue

2026-02-25 20:41:20 +00:00

Show project detail page #27

aniram closed this issue

2026-02-26 18:38:13 +00:00

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

aniram/cidadon#23

No description provided.

Rows
Columns