Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-89087

As a Marketer, I want to be able to use the criteria builder without a mouse

    Details

    • Type: Story
    • Status: Backlog
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: Segmentation
    • Labels:
      None

      Description

      We need to support keyboard navigation in the criteria builder to comply with accessibility standards.

      • Tab: Focus on next item
      • Shift + Tab: Focus on previous item
      • Space: Select/Deselect item
      • Arrow Up/Down: Move selected item
      • Enter: Add selected property to criteria builder

      Tyler Wong has created an example of how moving items in a list would work:
      https://codepen.io/ursatechie/pen/MZXezR

      Development Notes:
      Although react-beautiful-dnd has keyboard accessibility built-in, the library does not support a builder-like interface of copy and pasting items which is required for the criteria builder. It also imposes specific animations which could not follow lexicon standards. Keeping the current react-dnd implementation and adding on keyboard actions would allow for more flexibility and will most likely be a lower effort than refactoring to accommodate for a currently restrictive library.

        Attachments

          Activity

            People

            • Assignee:
              support-lep@liferay.com SE Support
              Reporter:
              kevin.tan Kevin Tan
              Recent user:
              Rubén Heras
              Participants of an Issue:
            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:

                Packages

                Version Package