ODS > Navigation > Carousel Navigation

[B3nz01d]

Carousel Navigation

Requirement

For a developer
Who is creating an Orange website
The carousel navigation
is a component
that allows to manipulate a carousel
Boosted will provide this ready to use component compatible with Orange design specifications and a11y requirements

DSM reference

General description

Carousel navigation allows users to navigate forward and backwards through content in a carousel component.

UI specifications

Anatomy

Carousel navigation is composed of:

1. an arrow
2. a rounded container

States

Carousel navigation has four possible states:

• Default
• Hover
• Pressed
• Disabled

Appearance

Carousel navigation includes a black chevron which is set within a 50% white container to allow them to remain visible when placed over different colored backgrounds or imagery.
The 20% transparency is applied to the Default & Disabled States.
The carousel navigation is not displayed anymore under the Medium Screen size break point.

Placement

The carousel navigation is positioned to the left and right edges of the carousel and centered vertically. For more examples of the carousel navigation used in hero banners, see the promotions examples in modules.

UX specifications

Interaction

• Mouse: the component must be clickable
• Keyboard: the component will inherit the button interaction (focus + press "Enter")
  • Note: the carousel can also be manipulated with "left" and "right" keys but it will handle itself this behavior
• Touch (mobile): the component will inherit the button behavior on mobile
  • Note: the carousel can be manipulated by swiping the content but it will handle itself this behavior

Animations

No animation for this component

Accessibility

A good practice on carousel accessibility

Visual Accessibility

The image won't be used by screen readers; a visually hidden text will be used to inform the purpose of the commands: "Previous" / "Next".

Question: How the visible focus will be displayed?

• Check the current implementation to see if it is possible to have a visible focus (an outline) just around the button

Usage Accessibility

N/A

Technical specifications

This component won't be considered as a component but rather as a part of the Carousel component. So it won't be provided on its own.

HTML Structure

The base HTML element will be a <button>.
The icon will be displayed within <span> (that must be hidden for screen reader) with a :before rule.
The image must be embedded by Boosted.

JavaScript

No JavaScript directly for this component. JS will be handled by the Carousel component.

Documentation in Boosted

Since this component can only be used within a carousel, it won't exist on its own and will be packaged in the Carousel component.

No need to create a specific Example page.

Implementation tasks

• Carousel Navigation Technical Study #1137

[MewenLeHo]

The 20% transparency is applied to the Default & Disabled States.

Should it be applied to the black chevron or to its container? Actually: color: $gray-700; on the chevron in disabled state. Nothing special applied to the the default state.

The carousel navigation is not displayed anymore under the Medium Screen size break point.

Navigation always visible (same as Bootstrap)

The base HTML element will be a <button>

Yes but the button is not restricted to the black chevron => button height = carousel height
We may need to replace :

.carousel-control-prev, .carousel-control-next { position: absolute; top: 0; bottom: 0; }
by :
~~.carousel-control-prev, .carousel-control-next { position: absolute; top: 50%; }~~

Check the current implementation to see if it is possible to have a visible focus (an outline) just around the button

Around the button yes but we will have to work on the shape of the button.

[MewenLeHo]

Desired focus state for carousel prev and next button will not be easy to achieve because :

• they are positionned thanks to absolute positionning so they have no height
• we are supposed to add an orange circle for the focus PLUS a white background between the element and the focus line in order to prevent accessibility issues caused by the sliding image.

=> I made a CodePen with a preliminary test and I would like to have feedbacks on it:

https://codepen.io/MewenLeHo/pen/MWrXNZg?editors=1100

@julien-deramond @louismaximepiton @isabellechanclou @Franco-Riccitelli

[louismaximepiton]

I might be wrong, but I think you tried too much to put the focus state on the button and not its descendant. I tried some few things on this Codepen and I think it is much easier this way !

[MewenLeHo]

I just updated the demo CodePen: https://codepen.io/MewenLeHo/pen/MWrXNZg?editors=1100

[MewenLeHo]

FYI approved by the Design team.

[MewenLeHo]

And approved by the a11y Team as well.