feat: match existing behaviour, add docs

[nedatidrc]

• This pull request has been tested by running npm run test without errors
• This pull request has been built by running npm run build without errors
• This isn't a duplicate of an existing pull request

Description

• Uses hidden attribute to show/hide content instead of CSS.
• Adds docs.

Steps to test

1. npm start
2. Open http://localhost:8080 in browser.

Expected behavior: Button shows/hides content as expected.

Additional information

Brief explanation of code removed here and added here:

static element is a CSS selector for the inner element ref (this.element), used for event delegation and direct DOM access. When omitted, Elena uses firstElementChild instead, if available.

(See relevant docs.)

The toggle for the disclosure needs to be the firstElementChild so that's preferable than a selector but we need to ensure that it's a button, hence the change. The custom console.warn with the Elena prefix is meant to match other console warnings that Elena omits for consistency.

Related issues

Not provided

[jobara]

This appears to work as expect. However, I'm just not sure I understand the benefit over using the native details/summary. For example, as you mentioned before, the details/summary supports full page search.

An additional point of consideration is around reader mode, which may prevent the JavaScript from running.

See: https://www.scottohara.me/blog/2022/09/12/details-summary.html#:~:text=An%20important%20note%20about%20rolling%20your%20own%20disclosure%20widget

I've been having trouble testing this completely as FireFox doesn't seem to want to open my localhost served content in reader mode. And the floe page I was testing with also didn't open in reader mode in Safari. So not sure if there are some issues with the page setups or other things.

Results

Visiting demo page on localhost

Using a modified version of the demo, but adding in extra markup structure such as <main>, <article>, <footer>, <aside>, extra content in <p> tags and a details/summary element.

Visit the page and enable the browser's Reader mode/view.

• Chrome (v149)
  • Stripped out both the inclusive-disclosure and details/summary widgets
• Firefox (v151.0.3)
  • wouldn't open reader mode
• Safari (v26.5)
  • Strips out inclusive-disclosure widget
  • Shows the summary and it can be clicked, but the content doesn't display

Visiting Inverted Word Clouds from Floe Project site

Visited the Inverted Word Clouds news article on the Floe site; which includes a details/summary element. No inclusive-disclosure widget to test.

Visit the page and enable the browser's Reader mode/view.

• Chrome (v149)
  • Stripped out the details/summary element
• Firefox (v151.0.3)
  • visible and fully interactive
• Safari (v26.5)
  • wouldn't open reader mode