Versions Compared

Version Old Version 51 New Version 52
Changes made by

Carlie Bradshaw

Carlie Bradshaw

Saved on

Key

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

:  Carlie Bradshaw

...

  • the tag field, containing:

    • applied tag pills, showing the tags already selected.

    • a text insertion pointarea, to the right of any applied tags.

  • a tag menu, containing:

    • a list of up to 20 tags.

    • a scrollbar, where needed.

    • a View All Tags link after the last tag (optional).

...

State

Browsable list tag field

Auto-complete tag field

Applied tag pill

Regular

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 Added

or

Image RemovedImage Added

Interaction

Browsable list

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

...

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

Browsable list

For the behavior of the tag menu, follow Drop-down Menu.

Keyboard

Tag field trigger button

Applied tag pillsTag 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.

Navigates to the next component.

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

Image Removed

Shift + Tab

Reverse tab

Reverse tab

Space

Selects the trigger button to open the tag menu.

N/A

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.

Delete and Backspace

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.

Esc

N/A

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.

Auto-complete tag field

KeyboardDescription

Tag field text area

Applied tag pills

Image AddedImage Added

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 fieldtag field text area.

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

Navigates to the next component

Shift + Tab

Reverse tab

Reverse tab

Space

On a pill: focuses the pill (for tooltips)

On the text area: Acts as text input.

N/A

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 N/A

In outlook it returns focus to text input?

Esc

N/A

N/A

Delete

Acts as text input. After all text has been deleted, removes the last added 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

Arrows

Left/Right: act as arrows within the text. From the left of the text area, left moves to the last pill.

Up/Down: moves focus to the auto-suggest results

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

Up/Down: N/A

a-z, A-Z

Acts as text input.

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

Auto-complete tag menu

...

the text area.

Design

Zeplin link

Screen thumbnail

<<Short Zeplin link. YouUse this >>

<<Screen with 200 width>>



...