Deck Layout

[JoanaMMoreira]

### Features
- [ ] Navigate backwards and forwards with an slide animation

### Checklist
- [ ] Density (HD, MD, LD, TD)
- [ ] Mode (Light, Dark)
- [ ] Fill (Primary, Secondary, Tertiary)
- [ ] State (Default, Hover, Selected/Active, Disabled, Read-only, Other)
- [ ] Controlled API
- [ ] UITK accessibility parity (screen reader + keyboard interactions)

### Deliverables
- [ ] Characteristics spec
- [ ] Interactions spec, where necessary
- [ ] In Code & Figma (Component + Guide)
- [ ] Supporting site documentation

[maj-stella]

Carousel example:

DeckLayout contains DeckItems. Each DeckItem is used as a slide container therefore the following aria role and attributes should be available on DeckItem:

role="group" aria-roledescription="slide" aria-labelledby if a slide has a visible label otherwise aria-label

[maj-stella]

Tabs example:

When DeckItem is used as tab panel, it should have role=“tabpanel” (please see the screenshot below). When the tabpanel does not contain a focusable element as the first element, the tabpanel should have availability to set tabindex="0" to include tabpanel in the tab sequence of the page.

Each DeckItem (tabpanel) should have available aria-labelledby attribute. (Value of aria-labelledby is id value of each tab).

Also each DeckItem (tabpanel) should have availableid attribute so it can be associated with tab by aria-controls attribute.

[JoanaMMoreira]

Hi @maj-stella please see the changes I've made here: https://deck-ada-tweaks.uitk.pages.dev/

[mark-tate]

review this earlier defect created on Labs https://github.com/jpmorganchase/salt-ds/issues/2558

[mark-tate]

Needed for carousel pattern