ODS-Component - Bottom navigation

[B3nz01d]

Bottom Navigation

Requirement

As a developer
I want to insert a bottom navigation
So That I will get this ready to use component compatible with Orange design specifications and a11y requirements

DSM reference

General description

The page will propose to the user describe the component and allow to see the implementation in action.
The user will be able to select the switch from light to dark mode to test the component in both context.

UI specifications

Anatomy

Component

For the component description please refer to the DSM updates

App Page

• title: "Bottom Navigation"
• image: DSM_[Android-Components]_[Bottom Navigation].jpg
• Text: intro text in the DSM
• Core field:
  • if possible: a succession in the same page of the 4 variants of entries from 2 to 5 all showing at least one selected item
  • if it is not possible : a list of the possible variants that when you click will open a page where the user will click and it will open a page with the corresponding functional bottom menu where all page change will only open an empty corresponding page (choice 1 -> Page 1):

Variants

2 entries

(choice 1)* - choice 2

• is selected

3 entries

(choice 1) - choice 2 - choice 3

4 entries

Renamed to:
(choice 1) - choice 2 - choice 3 - choice 4

5 entries

(choice 1) - choice 2 - choice 3 - choice 4 - choice 5

States

Component

• Selected
• Unselected

Internationalization

---an example should be provided if possible--- (this will not be added in the first iteration of the creation of this component)

UX specifications

Interaction

• All:
  • on an unselected item the content is switched to the selected item's content page
• Touch:
  • Nothing Specific
• Keyboard:
  • Nothing specific

Animations

• NA

Accessibility

Visual Accessibility

• taken into account within the design creation process

Usage Accessibility

• (?) Focus order - from left to right / ---inverted in R2L mode--- (this will not be added in the first iteration of the creation of this component)
• (?) Focus loss expected behavior - NA
• (?) Screen Reader - read only the Label alt description and not the icon

Technical specifications

Implementation tasks

• Task 1
• Task 2

Related tasks

• Task 1
• Task 2