Versions Compared

Version Old Version 50 New Version 51
Changes made by

Carlie Bradshaw

Carlie Bradshaw

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

:  Carlie Bradshaw

Table of Contents
minLevel1
maxLevel3

...

State

Browsable list tag field

Auto-complete tag field

Applied tag pill

Regular

Image RemovedImage Added

Hover

Image RemovedImage Added

On hover over Close icon button:

Image RemovedImage Added

Active

Image RemovedImage Added

Disabled

Image RemovedImage Added

Error

N/A

Warning

N/A

Focused

Image RemovedImage Added

Interaction

Browsable list

...

Focus management

Browsable list

When the trigger button is first selected, screen readers should state how many tags are currently applied.

Keyboard

Tag field trigger button

Applied tag pills

Tag menu Take from https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/659358568/Drop-down+Menu#Focus-management

Bits not covered in the drop-down menu page

Tab

  • From a previous component, moves focus to the trigger button.

  • From the trigger button, navigates to the next component.

When the trigger button is first selected, screen readers should state how many tags are currently applied

  • .

Navigates to the next component.

  • From the search bar, moves focus to the first tag checkbox.

  • From the first checkbox, moves focus through the list of tags.

  • From the last checkbox, navigates to the next component. The tag menu will close.

Shift + TabReverse tab

Reverse tab

Reverse tab

Space

Selects the trigger button to open the tag menu.

N/A

  • On the search bar - acts as text input.

    • On a tag checkbox - selects or deselects the checkbox.

    Enter

    Selects the trigger button to open the tag menu.

    Removes the pill, de-selecting the tag. Focus moves to the pill or trigger button immediately to its right.

  • On the search bar - moves focus to the first tag checkbox?

    • On a tag checkbox - N/A

    Delete

    N/A

    Removes the pill, de-selecting the tag. Focus moves to the pill or trigger button immediately to its right.

    • On the search bar - acts as text input.On a tag checkbox - N/A

    Esc

    N/A

    N/A

  • On the search bar - clears the search box.

    • On a tag checkbox - N/A

    Drop-down says “Closes the menu without updating the selection”, but doesn’t cover the search field.

    Arrows

    Left/Right: moves between the pills and trigger button.

    Up/Down:

    • single pill row: N/A

    • multiple pill rows: moves between rows.

    Left/Right: moves between the pills and trigger button.

    Up/Down:

    • single pill row: N/A

    • multiple pill rows: moves between rows.

    • On the search bar,

      • Down: navigates to the first tag checkbox.

      • Up: N/A

    • On a tag checkbox,

      Up/Down: moves between the tag checkboxes

      .

    Auto-complete tag field

    Keyboard

    Description

    Tab

    • From a previous component, moves focus to the first pill in the list.

    • Moves between the pills.

    • After the last pill, moves to the text field.

    • From the text field, navigates to the next component.

    Shift + Tab

    Reverse tab

    Space

    On a pill: focuses the pill (for tooltips)

    On the text area: as text input.

    Enter

    On a pill: focuses the pill (for tooltips).

    On the text area: opens the tag menu.

    Esc

    Removes the pill, de-selecting the tag.

    Delete

    On a pill: removes the pill, de-selecting the tag.

    On the text area: as text input. After all text deleted, removes the last added pill.

    Arrows

    Left/Right: move between the pills and text area.

    a-z, A-Z

    Automatically moves focus/cursor to right of the last pill and starts to search.

    ...