Embed Notice

HTML Code

<blockquote style="position: relative; padding-left: 55px;"><section><a href="https://mastodon.ar.al/users/aral/statuses/112134711582244695">Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 22-Mar-2024 01:52:29 JST</a><a href="https://mastodon.ar.al/@aral" title="aral@mastodon.ar.al"><img src="https://gnusocial.jp/theme/gnusocialjp/default-avatar-stream.png" width="48" height="48" alt="Aral Balkan" style="position: absolute; left: 0; top: 0;">Aral Balkan</a><div><a href="https://mastodon.ar.al/@aral/112133793594320159" rel="in-reply-to">in reply to</a><ul><li></ul></div></section><article><p>Update: I forgot to make the toast message into an `aria-live` region so toast messages are read out when they arrive for people who use screen readers. </p><p>Now fixed.</p><p>Source code:  <a href="https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js" rel="nofollow noreferrer">https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js</a></p><p>Thanks to <a href="https://hachyderm.io/@hi_mayank">@hi_mayank</a> for catching that one. Appreciate it!</p><p>:kitten: 💕 </p><p><a href="https://mastodon.ar.al/tags/Kitten" rel="tag">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" rel="tag">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" rel="tag">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/web" rel="tag">#web</a> <a href="https://mastodon.ar.al/tags/dev" rel="tag">#dev</a> <a href="https://mastodon.ar.al/tags/htmx" rel="tag">#htmx</a> <a href="https://mastodon.ar.al/tags/hypermedia" rel="tag">#hypermedia</a> <a href="https://mastodon.ar.al/tags/WebSocket" rel="tag">#WebSocket</a> <a href="https://mastodon.ar.al/tags/html" rel="tag">#html</a> <a href="https://mastodon.ar.al/tags/css" rel="tag">#css</a> <a href="https://mastodon.ar.al/tags/JavaScript" rel="tag">#JavaScript</a> <a href="https://mastodon.ar.al/tags/toast" rel="tag">#toast</a> <a href="https://mastodon.ar.al/tags/accessibility" rel="tag">#accessibility</a> @a11y</p></article><footer><a rel="bookmark" href="https://gnusocial.jp/conversation/2848392#notice-5657825">In conversation</a><time datetime="2024-03-22T01:52:29+09:00" title="Friday, 22-Mar-2024 01:52:29 JST">about 11 months ago</time> <span>from <span><a href="https://mastodon.ar.al/@aral/112134711582244695" rel="external" title="Sent from mastodon.ar.al via ActivityPub">mastodon.ar.al</a></span></span><a href="https://mastodon.ar.al/@aral/112134711582244695">permalink</a><h4>Attachments</h4><ol><li><label><a rel="external" href="https://gnusocial.jp/attachment/2404279">Screenshot of source code (42 lines):The following line is highlighted:  &lt;div id='toast' morph='settle:2s' aria-live='assertive'&gt;${SLOT}&lt;/div&gt;Full source follows:const Toast = ({ SLOT }) =&gt; kitten.html`
  &lt;div id='toast' morph='settle:2s' aria-live='assertive'&gt;${SLOT}&lt;/div&gt;
`const MessageInput = () =&gt; kitten.html`
  &lt;input type='text' id='message' name='message' morph&gt;
`export default () =&gt; kitten.html`
  &lt;page css&gt;
  &lt;h1&gt;🍞 Mmm, Toast!&lt;/h1&gt;
  &lt;form name='toast'&gt;
    &lt;label for='message'&gt;Message&lt;/label&gt;
    &lt;${MessageInput} /&gt;
    &lt;button type='submit'&gt;Toast&lt;/button&gt;
  &lt;/form&gt;
  &lt;${Toast} /&gt;
  &lt;style&gt;
    #toast.settling { opacity: 1; top: 1em; }
    #toast {
      opacity: 0;
      top: -3em;
      position: fixed;
      transition: all 0.7s ease-out;
      left: 50%;
      transform: translate(-50%, 0); /* centre horizontally */
      border-radius: 1em;
      background-color: var(--background-alt);
      padding: 1em;
      font-weight: bold;
    }
    button, input { display: inline; }
    label { display: block; }
  &lt;/style&gt;
`export function onConnect ({ page }) {
  page.on('toast', data =&gt; {
    page.send(kitten.html`&lt;${Toast}&gt;${data.message}&lt;/&gt;`)
    page.send(kitten.html`&lt;${MessageInput} /&gt;`)
  })
}</a></label><br><a href="https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/112/134/695/219/718/990/original/badaa6dcfc2897ce.png" rel="external">https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/112/134/695/219/718/990/original/badaa6dcfc2897ce.png</a></li><li><label><a rel="external" href="https://gnusocial.jp/attachment/2404282">Untitled attachment</a></label><br><div>Invalid filename.</div></li></ol></footer></blockquote>

Corresponding Notice

Embed this notice
Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 22-Mar-2024 01:52:29 JSTAral Balkan
in reply to
- Mayank
Update: I forgot to make the toast message into an `aria-live` region so toast messages are read out when they arrive for people who use screen readers.
Now fixed.
Source code: https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js
Thanks to @hi_mayank for catching that one. Appreciate it!
:kitten: 💕
#Kitten #SmallWeb #StreamingHTML #web #dev #htmx #hypermedia #WebSocket #html #css #JavaScript #toast #accessibility @a11y
In conversationabout 11 months ago from mastodon.ar.alpermalink
Attachments
1. Screenshot of source code (42 lines): The following line is highlighted: <div id='toast' morph='settle:2s' aria-live='assertive'>${SLOT}</div> Full source follows: const Toast = ({ SLOT }) => kitten.html` <div id='toast' morph='settle:2s' aria-live='assertive'>${SLOT}</div> ` const MessageInput = () => kitten.html` <input type='text' id='message' name='message' morph> ` export default () => kitten.html` <page css> <h1>🍞 Mmm, Toast!</h1> <form name='toast'> <label for='message'>Message</label> <${MessageInput} /> <button type='submit'>Toast</button> </form> <${Toast} /> <style> #toast.settling { opacity: 1; top: 1em; } #toast { opacity: 0; top: -3em; position: fixed; transition: all 0.7s ease-out; left: 50%; transform: translate(-50%, 0); /* centre horizontally */ border-radius: 1em; background-color: var(--background-alt); padding: 1em; font-weight: bold; } button, input { display: inline; } label { display: block; } </style> ` export function onConnect ({ page }) { page.on('toast', data => { page.send(kitten.html`<${Toast}>${data.message}</>`) page.send(kitten.html`<${MessageInput} />`) }) }
  https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/112/134/695/219/718/990/original/badaa6dcfc2897ce.png
2. Untitled attachment
  Invalid filename.

Public

Embed Notice

HTML Code

Corresponding Notice