Versions Compared

Version Old Version 25 New Version 26
Changes made by

Asaf Ben-Oved

Asaf Ben-Oved

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
maxLevel1
minLevel1

...

  • on hover, a collapse icon button will appear below the product area.

    Image RemovedImage Added

  • Clicking the collapse icon button will collapse the header bar.

...

  • On hover:
    the expanded top will be shown automatically, revealing the 2nd level navigation and suite name. An expand icon button will appear below the product area.

    Image RemovedImage Added

  • On removing hover the top will collapse again automatically.

  • Clicking the expand icon button will pin the header bar open.

...

Keyboard

Description

Tab

Navigates to the next component according to the Tab Index Order.

From the last component will navigate to the next focusable element on the page.

Shift + Tab

Navigates to the previous component according to the Tab Index Order.

From the first component will navigate to the last focusable element on the page

Space

Depending on component.

Enter

Depending on component.

  • In 1st level navigation:

    • If no item is selected - selects the item.

    • If an item is selected - focus will navigate to the 2nd level navigation for the selected item.

  • In the 2nd level navigation:

    • If no item is selected - selects the item.

    • If an item is selected - focus will navigate to the first focusable element within the page content.

Esc

Depending on component.

Arrows

Within top navigation at 1st and 2nd levels:

  • Left/Right - navigates between items, left or right accordingly.

  • Up/Down - navigates between 1st and 2nd levels accordingly.

Otherwise N/A.

Home

Sets focus on the first element in VerinTop.

End

Sets focus on the last element in VerinTop.

Tab index order in responsive layout

<Update Visual image>

...

Within the navigation menu

Keyboard

Trigger area

Menu

Tab

Navigates to the next component.

N/A

Shift + Tab

Navigates to the previous component.

N/A

Space

Opens the menu and moves focus to the 1st item

  • in 1st level tab navigation - N/A

  • In the 2nd level tab navigation

    • If row is not selected - selects the row and closes the menu.

    • If row is selected - Focus will navigate to the 1st focusable element under row content.

Enter

Opens the menu.

  • In 1st level tab navigation - N/A

  • In the 2nd level tab navigation

    • If row is not selected - selects the row and closes the menu.

    • If row is selected - Focus will navigate to the 1st focusable element under row content.

Esc

N/A

Closes the menu without updating the selection. Returns focus to the Trigger area.

Arrows

N/A

Unless otherwise specified are N/A

  • Left/Right - navigates between right and left sides.

  • Up/Down

    • In 1st level tab navigation - navigates focus and selection Up/Down accordingly

    • In the 2nd level row - navigates only focus Up/Down accordingly

Responsive Design

For details on responsive design, see the main VerinTop page.

...

Zeplin link

Screen thumbnail

<<Short Zeplin link. You
Use this
>>

<<Screen with 200 width>>

Code

<<a box containing the code - when there is no code to present use the Coming Soon GIF>>