Uploaded image for project: 'Nuxeo Web UI'
  1. Nuxeo Web UI
  2. WEBUI-900

Make selection actions banner focused after using select all

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Open
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: 3.0.15
    • Fix Version/s: None
    • Component/s: A11y

      Description

      After using select all, focus should be put on the selected items banner.
      When subsequently using an action or clearing selection, focus should return to the select all (related: WEUI-486).

      _________________________

      Keyboard focus is lost or placed on the wrong element during user interaction, content refresh or update, or other reason.

      Element Name: Status that appears on selecting 'Select all' Checkbox.

      Location: In main region of the page, after
      Clicking “Search” icon in left nav. Enter a search term like “Test”. Select Search and observe that a page that comes up, i.e. Search results with “grid view”.

      Description:
      Keyboard focus is not moving on to the newly appeared popup message. Upon selecting 'Select all' checkbox, "all x items selected" popup appears with some controls in it. Keyboard focus is not moving to the appeared popup message.

      Recommendation to fix
      RULE :
      The focus MUST be purposely moved or set (via JavaScript) onto the appropriate element when the user's action requires a change of context or location for effective keyboard or touch interaction.

      HOW TO FIX:
      Fix this issue by explicitly placing focus on a logical element when content is removed, refreshed, or added, for example:
      1. For content added to the screen in reaction to a user-fired event, focus should be shifted to the new content - such as in single page applications.
      2. For content removed from the screen in reaction to a user-fired event, focus should be shifted to the next logical place in the interaction.

      REFERENCE:
      Deque University: https://dequeuniversity.com/class/input-methods2/keyboard-input/focus-management
      Deque University:https://dequeuniversity.com/class/dynamic-updates2/notify-users/move-focus
      Deque University: https://dequeuniversity.com/class/dynamic-updates2/ajax/single-page-applications

      BACKGROUND:
      One of the biggest challenges when creating rich web interfaces using JavaScript is the management of focus when new content or controls are added or removed from the page. The presentation or modification of content on the screen may require that the user interact with -or at the very least, take notice of - the new or changed content. It is important to have a clear indication of page content that has been updated. This allows the user to understand the change and also allows a keyboard user to interact with any new content.

        Attachments

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              bchauvin Bertrand Chauvin
              Participants:
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated: