Revise Content for New Experimental Example of Scrollable Listbox with Actions on Options

[mcking65]

Why this branch?

In December, the TF discussed changing the content design for the new example that is being developed in #3372. Because the content of the preview of #3372 is being referenced by active discussion in w3c/aria#2691, it is desirable to keep the content of the 3372 branch reasonably stable. So, we will use this PR to revise the content and then merge it to the 3372 branch at a time when the references in w3c/aria2691 can also be revised.

Preview

Preview the experimental example in the PR 3400 compare branch

New content design

Revise the content of the example so it has a list that has the following characteristics:

1. Names of items are short and easily understood.
2. Supporting "selection" to display a related details panel is relevant.
3. Ordering, flagging, an deleting are appropriate functions.
4. Very minimal content would be sufficient, e.g., 5 or 6 options with no need to draft significant content for the details panel.

Suggestion to riff on ...

Your bucket list: Select an item to view its details. Flag it if you want to do more research. You can also rank or delete items.

Name of listbox: "Bucket List"

Some potential option names:

• Complete Iron Man
• Climb Everest
• Learn archery
• Train a guide dog
• Build an airplane

Selecting an item would update the content of a read-only textbox to the right of the listbox. The textbox would contain content something like, "LISTBOX_OPTION_NAME details panel placeholder", e.g., "Complete an Iron Man details panel placeholder".

---

WAI Preview Link (Last built on Thu, 19 Feb 2026 22:31:17 GMT).

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 3372: listbox example with aria-actions.

The full IRC log of that discussion

<jugglinmike> Topic: PR 3372: listbox example with aria-actions
<jugglinmike> github: https://github.com//pull/3372
<jugglinmike> Matt_King: I just made changes today
<jugglinmike> Matt_King: The first and most important thing is that I opened a new pull request, https://github.com//pull/3400
<jugglinmike> Matt_King: 3400 is a branch off of 3372
<jugglinmike> Matt_King: Because 3372 is being referenced by an active discussion in the ARIA working group, but we had also talked about making a whole bunch of changes to 3372, I wanted to keep 3372 stable but allow us to simultaneously progress the discussion we've been having. Hence, the branch
<jugglinmike> Matt_King: Just this morning, I pushed some changes
<jugglinmike> Matt_King: An older version of Claude wrote most of the changes, and I was in a little bit of a hurry this morning, so I corrected most of the mistakes, but I don't know if I got them all
<jugglinmike> Matt_King: The preview in 3400 has the basic content of the proposal I made in the top comment of 3400
<jugglinmike> Matt_King: In December, we talked about
<jugglinmike> Matt_King: ...the difference between selection and "flagging" or "favoriting"
<jugglinmike> Matt_King: We talked about different design content ideas. I put a list of four characteristics that I extracted from that discussion into the top of 3400 under the heading, "New Content Design"
<jugglinmike> Matt_King: 1: Names of items are short and easily understood.
<jugglinmike> Matt_King: 2: Supporting "selection" to display a related details panel is relevant.
<jugglinmike> Matt_King: 3: Ordering, flagging, an deleting are appropriate functions.
<jugglinmike> Matt_King: 4: Very minimal content would be sufficient, e.g., 5 or 6 options with no need to draft significant content for the details panel.
<jugglinmike> Matt_King: That's what I wrote there. I'm just throwing it out as a suggestion (or a kind of "bucket list" if you will) to inspire discussion
<jugglinmike> Adam_Page: I love it
<jugglinmike> CurtBellew: I'm glad to see that the "favorite" is kind of gone
<jugglinmike> Matt_King: Well we still have that option because someone said it was important to be able to show a "toggling thing" that doesn't move the focus. James Craig, in particular
<jugglinmike> CurtBellew: I like the idea of having something that changes state--the only problem was visually representing it. That part, for me, got a little bit weird
<jugglinmike> CurtBellew: I'd hoped to share it today, to describe it and gather impressions
<jugglinmike> CurtBellew: [shares screen to demonstrate]
<jugglinmike> CurtBellew: I added a list where every item initially includes both an empty checkbox and an outline of a star
<jugglinmike> CurtBellew: The star gets filled in when it is "favorited"
<jugglinmike> Adam_Page: I do think the hollow star invites a click
<jugglinmike> Matt_King: What's the reason for having the hollow star in the default state?
<jugglinmike> CurtBellew: To limit ambiguity
<jugglinmike> Matt_King: You could have a hover for "flag" that would make the flag appear
<jugglinmike> CurtBellew: For me, it felt a little jarring to have the star suddenly appear. I don't know why
<jugglinmike> CurtBellew: But I do agree with Adam_Page about how the hollow star invites the click
<jugglinmike> CurtBellew: Gmail reveals the button on focus, and it also reveals the indicator on focus
<jugglinmike> Adam_Page: I think Gmail displays a persistent filled-in star after favoriting
<jugglinmike> Adam_Page: Gmail's star icon is persistent, actually--even if not "favorited", it is rendered--just as an outline (or "hollow" as we've been saying)
<jugglinmike> Matt_King: Should we make it so that the text box is empty unless you press enter or click the actual item? And then it stays the same until you enter or click on a different one? So that selection is not following focus?
<jugglinmike> Matt_King: Or should we make it so that selection DOES follow focus?
<jugglinmike> Adam_Page: In Gmail, it doesn't do anything except show that you are focused on the item to do things. But it doesn't perform any operation
<jugglinmike> Matt_King: So selection does NOT follow focus in Gmail
<jugglinmike> Matt_King: I don't know if we want that or not. I could go either way.
<jugglinmike> Adam_Page: What does selection achieve in our example?
<jugglinmike> Matt_King: We don't have this feature, yet, but there would be a read-only textbox that would just have some text that would be relevant to the current option. A details panel placeholder
<jugglinmike> Adam_Page: So now, I'm wondering... The revealing of that details IS an indication that the item has been "selected", so I wonder if the checkbox is redundant or confusion. We still need aria-selected state, but I wonder if visually, it is sufficient to have the panel open
<jugglinmike> CurtBellew: There was a checkmark that showed up. I added the checkbox because I added the star. It felt strange without it.
<jugglinmike> CurtBellew: I'll say that I'm not married to it.
<jugglinmike> Adam_Page: The checkbox, as a visual, so strongly suggests that you are checking the item to do something later
<jugglinmike> Matt_King: It would be nice if people looked at this and automatically made the connection to something like Gmail. So they would see, "ah, this is how you use aria-actions to do that kind of thing."
<jugglinmike> CurtBellew: The big difference, visually, between these checkboxes and stars with what's in Gmail is that the elements are somewhat diminished until you interact with them
<jugglinmike> Adam_Page: They appear kind of halfway between active and disabled
<jugglinmike> CurtBellew: Would it be helpful for me to update the example in the way that you suggested, Matt? We still have the "favorite" flag...
<jugglinmike> Adam_Page: I think it would help to get the "details" mechanism in there--to kind of see the big picture of the interactions
<jugglinmike> Matt_King: I was thinking that it would be generated content in there--just a placeholder.
<jugglinmike> Matt_King: I put a suggestion in the comment of my pull request, under the heading "Suggestion to riff on ..."
<jugglinmike> Matt_King: I just think that "Lorem ipsum" text is disorienting for screen reader users
<jugglinmike> Adam_Page: I like the "bucket list" idea. The transuranium elements are cute, but they're also kind of intimidating
<Jem_> https://deploy-preview-438--aria-practices.netlify.app/aria/apg/patterns/listbox/examples/listbox-scrollable-actions/
<jugglinmike> Matt_King: Ah, it seems that the preview is out-of-date. It doesn't reflect my latest changes
<Jem_> https://deploy-preview-448--aria-practices.netlify.app/aria/apg/patterns/listbox/examples/listbox-scrollable-actions/
<Jem_> above is supposed to show the preview and it does not.
<jugglinmike> [the group attempts to troubleshoot an apparent issue with the automated process that generates pull request previews]
<jugglinmike> Matt_King: We may have to merge the main development branch into this pull request... Perhaps you can pull it down and preview it locally, CurtBellew
<jugglinmike> CurtBellew: Sure--I'm just not equipped to do that live on this call. I should be able to do it tomorrow or Friday
<jugglinmike> Matt_King: Okay, it's sounds like we're mostly aligned here. We just need to figure out what to do with the checkbox and whether selection should follow focus
<jugglinmike> Matt_King: This is about finding something that people will relate to
<jugglinmike> github: https://github.com//pull/3400

[daniel-montalvo]

@mcking65 and all.

There were indeed some cache issues in Netlify that that prevented us from deploying the site.

Retriggering the deploys without cache seems to have fixed the problem. As per this PR,see the scrollable listbox with actions example.