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

Show focus on quick search selected item when using keyboard

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Resolved
    • Priority: Critical
    • Resolution: Not A Bug
    • Affects Version/s: 3.0.14
    • Fix Version/s: None
    • Component/s: A11y

      Description

      When using quick search, focus is not shown on the selected item when using the keyboard to select an item. It is shown if you navigate to an unselected item though.

      ________________________

      Recommendation to fix
      RULE :
      All focusable elements MUST have a visual focus indicator when in focus.

      Focusable elements SHOULD have enhanced visual focus indicator styles.

      HOW TO FIX:
      Common keyboard focus indicator solutions include:
      1. A 2px box around the focused element
      2. A change in the background color of the focused element
      3. The addition of an icon, such as an arrow, next to a menu item
      4. The addition of a thick line under or next to the focused element
      5. A distinctive change to the text of the component such as making it bold and/or underlined
      6. Use the default browser focus indicator. NOTE: Since each browser has its own default focus indicator style, check each of the major browsers (Chrome, Firefox, Edge, IE, Safari) to ensure the default focus indicator is visible as you tab through the page.

      A keyboard focus indicator can take different forms; it does not have to be a boring box. But the goal is to provide a difference in contrast between a component's default and focused states of at least 3 to 1 or another distinctive visual change.

      REFERENCE:
      Deque University: https://dequeuniversity.com/class/input-methods2/keyboard-input/visual-focus-indicator

      BACKGROUND:
      When a visible keyboard focus indicator is not provided, sighted keyboard users will have no idea which link or control has focus making it extremely difficult, if not impossible, to interact with the content. Browsers provide default focus indicators for natively focusable elements, but these may be very difficult to see depending on the color of the control and the page background. In addition, custom elements often have no visible focus indicator at all. Ideal focus indicators are designed to provide good contrast with links and controls and their backgrounds. Focus indicators with good contrast make it much easier to track focus as a keyboard user navigates through the page.

        Attachments

        1. Peek 2022-09-12 16-18.mp4
          1.51 MB
          Bertrand Chauvin
        2. quick-search-SELECTED-option-focused.png
          37 kB
          Bertrand Chauvin
        3. quick-search-unselected-option-focused.png
          36 kB
          Bertrand Chauvin

          Activity

            People

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

              Dates

              • Created:
                Updated:
                Resolved: