| Table of Contents | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
...
Menu items will expand and collapse with a brief slide effect.
The left navigation panel will open and close with a brief slide effect.
When pinning or unpinning the left navigation, the content on the main area of the page will narrow or stretch with a transition effect.
Additional options for Left Navigation
These additional header bar features may only be used in left navigation mode.
...
Additional information can optionally be shown in the header bar, above the divider line.
New image with additional information. Can be the same as one above?
...
Content
Can be either text or icons.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
The tab index flow will follow this order. Shift + Tab will follow the reverse order.
...
Image from top nav page:
Tab order may vary slightly due to missing or additional components. The main flow is according to navigation level.
Tab order may change due to missing or added components. The main flow is according to navigation level:
Application selector
Left navigation
Instances (if exist)
...
Keyboard
...
Description
...
Instances
...
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.
...
N/A
...
Shift + Tab
...
Navigates to the previous component according to Tab Index Order.
From the first component will navigate to the last focusable element on the page.
...
N/A
...
Space
...
Depending on component.
...
Selects the Instance
...
Enter
...
Depending on component.
For left pane navigation see https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/870187254/Tree#Accessibility-compliance
For Instances (if exist), will display the selected instance
...
Selects the Instance
...
Esc
...
.
...
If focus is on “x” set focus on the Instance. Otherwise N/A
...
Arrows
...
For left pane navigation see https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/870187254/Tree#Accessibility-compliance
For Instances (if exist):
Left/Right - navigates between instances accordingly.
...
Right/Left move the focus accordingly:
Right:
If focus is on instance moves the focus to the close button of the instance
If focus is on close button moves the focus to the next instance to the right
Stops at the last instance.
Left
If focus is on instance moves the focus to the close button of the previous instance
If focus is on close button moves the focus to the instance
Stops at the first instance.
...
Home
...
Sets focus on the first element in VerinTop.
...
Set focus on the first instance
...
End
...
Sets focus on the last element in VerinTop.
...
Set focus on the last instance
...
Delete
...
For Instances only - will delete the selected instance
...
When focus is on an instance will close the instance.
Responsive Design
Verint products should support all devices down to the common tablet size (960px width).
...
When the screen width is reduced and Additional Information no longer fits onto one line, it should be truncated. This may be achieved by hiding inactive icons and/or truncating text, with the full information shown on click or hover.Example at 961 px:
Design
Zeplin link | Screen thumbnail |
|---|---|
.png?version=1&modificationDate=1690302671894&cacheVersion=1&api=v2) | |
.png?version=1&modificationDate=1691505846998&cacheVersion=1&api=v2) | |
 | |
.png?version=1&modificationDate=1691511935698&cacheVersion=1&api=v2) | |
.png?version=1&modificationDate=1691506137230&cacheVersion=1&api=v2) | |
 | |
.png?version=1&modificationDate=1691506271607&cacheVersion=1&api=v2) | |
 | |
%20-%20Pinned%20(Regular).png?version=1&modificationDate=1691506371037&cacheVersion=1&api=v2) | |
.png?version=2&modificationDate=1690379389766&cacheVersion=1&api=v2) | |
%20-%20Expanded%20(Regular).png?version=1&modificationDate=1691506573330&cacheVersion=1&api=v2) | |
.png?version=1&modificationDate=1690303111765&cacheVersion=1&api=v2) | |
%20-%20Unpinned%20(Regular).png?version=1&modificationDate=1691506656142&cacheVersion=1&api=v2) | |
.png?version=1&modificationDate=1690379405584&cacheVersion=1&api=v2) | |
 |
...