microblog/app
Jane 68884d9afa Use <details> element for sensitive text
The sensitive text feature was implemented with <label> and hidden
checkbox <input> elements. There were two issues with this
implementation:
1. The user couldn't navigate to the "show/hide more" button using
   keyboard.
2. The label indicates two actions at the same time ("show/hide more"),
   making it unclear what the function of the checkbox was and what the
   current show/collapse state was.

As it is generally preferrable to use built-in HTML elements for the
best semantic, this commit moves to use the <details> and <summary>
elements for the sensitive text feature. The browser will open/collapse
the content in <details> automatically when the user clicks on the
<summary>, and keyboard navigation support is built-in.

This commit also changes the button to display "show more" or "show
less" depending on the state for visual clarity. This button is hidden
from the accessibility tree using `aria-label="false"`, as the <details>
element already exposes its state to the tree and we want to avoid
duplicated information.

A few caveats:
* The "show/hide sensitive content" button for sensitive attachments
  hasn't been changed yet as I'd like to get more feedback about the new
  implementation.
* As the summary/content warning text itself is also part of the
  <summary> tag, the user can now also click on them to toggle the
  visibility of the sensitive text. This may not be desirable as the
  current interface does not make it clear that this could happen; the
  user may try to select some text from the summary and be surprised
  by the sensitive text being expanded. One way to improve this would
  be to add an event listener to the summary text and call
  `preventDefault`, but this would introduce JavaScript code.
2022-11-30 12:26:34 +01:00
..
scss Use <details> element for sensitive text 2022-11-30 12:26:34 +01:00
static Fix the delete button 2022-08-30 19:09:51 +02:00
templates Use <details> element for sensitive text 2022-11-30 12:26:34 +01:00
utils Fix formatting 2022-11-23 21:58:59 +01:00
__init__.py Initial commit for new v2 2022-06-22 20:11:22 +02:00
activitypub.py Make local actor icon optional 2022-11-19 08:12:49 +01:00
actor.py Use BASE_URL when generating {proxied,resized}_image_url 2022-11-18 20:30:29 +01:00
admin.py Fix admin session timeout 2022-11-21 20:43:51 +01:00
ap_object.py Tweak orientation hint for attachments 2022-11-11 14:56:56 +01:00
boxes.py Allow to disable certain notification type 2022-11-27 12:11:42 +01:00
config.py Allow to disable certain notification type 2022-11-27 12:11:42 +01:00
customization.py Boostrap stream customization (API may change) 2022-11-22 20:30:35 +01:00
database.py Improve debug mode 2022-08-28 11:24:46 +02:00
httpsig.py Hack in HTTP sig to drop Delete requests early on 2022-11-21 21:43:12 +01:00
incoming_activities.py Fix OG metadata scraping and improve workers 2022-11-13 13:00:22 +01:00
indieauth.py Tweak error wording 2022-09-16 18:37:09 +02:00
key.py Fix config wizard 2022-07-04 20:25:27 +02:00
ldsig.py Tweak model for access tokens 2022-07-10 12:06:16 +02:00
lookup.py Improve Announce handling 2022-09-13 07:59:35 +02:00
main.py Switch back to HTTP1 for the media proxy client 2022-11-30 12:26:31 +01:00
media.py Fix formatting 2022-11-06 16:57:04 +01:00
micropub.py Finish Question/poll support 2022-07-24 12:36:59 +02:00
models.py Start to merge IndieWeb and AP interactions 2022-11-17 09:18:06 +01:00
outgoing_activities.py Improve move support 2022-09-08 20:00:02 +02:00
prune.py Fix inbox processing for deleted actors 2022-08-19 19:36:23 +02:00
source.py Improve mention parsing 2022-11-12 10:04:37 +01:00
templates.py Fix admin session timeout 2022-11-21 20:43:51 +01:00
uploads.py Fix GIF upload handling 2022-09-14 08:38:54 +02:00
webfinger.py Webfinger strips extra space 2022-11-11 15:25:55 +01:00
webmentions.py Allow to disable certain notification type 2022-11-27 12:11:42 +01:00