Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactive Lists #2036

Open
MarioBatusic opened this issue Sep 11, 2023 · 7 comments · May be fixed by #2328
Open

Interactive Lists #2036

MarioBatusic opened this issue Sep 11, 2023 · 7 comments · May be fixed by #2328
Labels
feature may add new concept(s) to ARIA which will require implementations or APG changes
Milestone

Comments

@MarioBatusic
Copy link
Contributor

Description of bug or feature request

Many web apps emulate desktop-like behaviour. The most prominent example is the list with interactive objects (files, folders) that can be selected, deleted etc.
In addition the presentation can be switched between different types as details, symbols …
We propose a new container role listview.
The concept can be found here:
Interactive Lists

@smhigley
Copy link
Contributor

To add some more notes in advance of the TPAC discussion:

Interactive lists vs. grids

The basic idea would be that interactive lists are to static lists as grids are to tables -- they can still contain mixed and interactive content, but support managed focus between items. The punnett square of lists, interactive lists, grids, and tables could be visualized as follows:

- 1-dimensional 2-dimensional
Static List Table
Interactive Interactive List Grid

Interactive lists vs. listboxes

Right now, the listbox role is the closest web analog to a desktop interactive list. There are a couple reasons listboxes do not fill the need for the desktop-app-like interactive list pattern:

  1. Listboxes are primarily form selection controls, with browser-inferred default selection based on focus. It's impossible to have a listbox without selection.
  2. Listbox options do not support the same flexible content model that list items do

Interactive list examples on the web today

  1. The Teams app store, with multiple groups of "cards", where each card contains mixed content and each group of cards is a single tab stop.
Screenshot of a segment of the Microsoft Teams app store showing two headings, Popular in your org and Apps we Love. The Popular heading has 9 compact cards under it, each card has a small image, title, rating, and open button. The Apps we Love heading has 3 large cards under it, each with a large thumbnail, description, rating, and open button.
  1. Office online welcome/recent files screen, with files displayed as cards
Screenshot of a heading, Quick Access, followed by a set of filter buttons, followed by a set of four files displayed as cards showing large thumbnails above a truncated title, date opened, and a more options button
  1. A list of participants in a current meeting, where each participant has mutliple secondary actions but no single main action (or one single non-selection main action)
    A part of the Teams meeting UI, showing only the first meeting participant under a section titled In this meeting. The participant shows a small avatar, a name, and to the right are a mute button and kebab menu

@smhigley
Copy link
Contributor

Also ref: #1325

@smhigley
Copy link
Contributor

smhigley commented Sep 12, 2023

Some open questions to consider:

  • What are the platform mappings? (note: this control type exists on windows/mac/ios/android, so these should exist)
  • Would an interactive list support selection? If so, how do we differentiate from listbox?
  • What is the recommended keyboard model or models for accessing nested interactive content? (note: we don't really have this figured out for grid either)
  • Should this be a separate role, or a separate mapping when list items are focusable?

@scottaohara
Copy link
Member

fwiw, i'd submit if there is any overlap in reusing the listitem role, then there would need to be a different parent role to help differentiate current instances of listitems which are focusable for some reason but not necessarily because they represent what this proposal outlines, vs interactive list listitems which would have the potential to convey different/new behaviors and functionality.

@ZoeBijl
Copy link

ZoeBijl commented Sep 13, 2023

This is a good idea! Thank you @smhigley for supplying the examples.

Would an interactive list support selection?

If selection isn’t a part of this, how wpuld the listview role help users?

@spectranaut
Copy link
Contributor

Discussed during TPAC this week, notes here: https://www.w3.org/2023/09/12-aria-minutes#t01

@jnurthen jnurthen added this to the 2024 milestone Sep 19, 2023
@jnurthen jnurthen added the feature may add new concept(s) to ARIA which will require implementations or APG changes label Sep 19, 2023
@MarioBatusic
Copy link
Contributor Author

I summarised all the related issues, comments, and discussion results in a Wiki article. I propose that we work on the proposal directly in this article.
Proposal: Interactive Lists

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature may add new concept(s) to ARIA which will require implementations or APG changes
Projects
None yet
6 participants