Skip to content

List — Add disabled prop that takes array of disabled items #6088

@taysea

Description

@taysea

Expected Behavior

List should allow for disabled prop that takes an array of items that should be disabled from interaction (similar to DataTable disabled #6070).

TBD: Should the array contain the index of the List item to be disabled (similar to List itemProps OR the primaryValue of the list item when a primaryKey is supplied?


Desired behavior:

  • Add prop allowing array of indexes to be supplied by caller.
  • Disabled items should be included in the list length and are visually styled as disabled at the specified indices.
  • Because disabled items are in the list length and a visually perceivable, we need to replicate this behavior for screen reader users.
    • As example, consider presenting a product on a product detail page. That product may have attributes such as color and size. The color and sizes options are presented in a list so that the user knows what options are available. However, at certain points in time, a particular color or size may be out of stock and the interface will want to display that item as disabled, indicating that that item is normally carried, but currently out of stock.
    • Ensure that disabled items are included in the "item X of Y" count. Identify list items as disabled to screen readers.aria-disabled="true [is preferred](Identify list items as disabled to screen readers.) over the disabled attribute as it includes the item in the count, allows for focus, and announces "disabled" or "dimmed" depending on the browser and screen reader.
  • onClick and onEnter events should be prevented for disabled items.
  • Treatment of disabled items when List is in onOrder state:
    • Disabled items should be included in the onOrder list.
    • Disabled items should retain disabled styling and aria-disabled, however, the items may be re-ordered.
    • Disabled items should be able to be re-ordered. Disabled indices should be updated to reflect the new order.
      • As example, consider a list of rules which are to be applied in a certain order, such as a lead quality filter regulating the amount of leads being distributed to a sales team. As circumstances change, the order of the rules may want to be modified and/or certain rules may want to be temporarily disabled.

Actual Behavior

Not currently supported.

URL, screen shot, or Codepen exhibiting the issue

Steps to Reproduce

Your Environment

  • Grommet version:
  • Browser Name and version:
  • Operating System and version (desktop or mobile):

Metadata

Metadata

Assignees

Labels

enhancementA suggestion to add to or change behavior

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions