ODS > Component > Navigation Bar Default

[B3nz01d]

Default Navigation Bar

Requirement

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

DSM reference

General description

Component

For the component description please refer to the DSM updates

App Page

the page will propose to the user to describe the component and allow to see both implementation in action.
Between the task #57 & #58 only one component page is created allowing to display both variants.

UI specifications

Anatomy

Component

For the component description please refer to the DSM updates

App Page

or ideally:

• title: "Navigation Bar"
• image: xxx.jpg
• Text: intro text in the DSM
• Core field:
  • The Navigation bar of the page should show the implementation.
    • "Components": Back to the component list
    • Title
    • Action icon: light/dark mode icon switch
  • In the content page or in a modal, the user should be able to select from the following:
    • Radio button: (o) Standard - ( ) Large <-the toogle would have for effect to change the current Navigation bar size
    • Check box: action icon

Variants

• Standard
• Large

States

• NA

Internationalization

• NA

UX specifications

Interaction

• All:
  • The user is able to select how to display the header standard / large and show/hide the action icon
  • The user is able to select the action icon when available
• Touch:
  • Nothing Specific
• Keyboard:
  • Nothing specific

Animations

• NA

Accessibility

Visual Accessibility

• taken into account within the design creation process

Usage Accessibility

• (?) Focus order - NA
• (?) Focus loss expected behavior - NA
• (?) Screen Reader - default OS behavior
• (?) Switch Control

Technical specifications

Related tasks

• ODS > Component > Navigation Bar Large/Extended #58

[Tayebsed93]

Voice Over : correct the vocalization of the header image