-
Notifications
You must be signed in to change notification settings - Fork 1k
Closed
Labels
enhancementA suggestion to add to or change behaviorA suggestion to add to or change behavior
Description
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 thedisabled
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 behaviorA suggestion to add to or change behavior