Skip to content

Compare: Carousel Specification

Showing with 6,916 additions and 1,861 deletions.
  1. +123 −0 !-Specification-Template.md
  2. +300 −0 Action-Strip-Component.md
  3. +33 −8 Carousel-Specification.md
  4. +208 −0 Column-Actions.md
  5. +37 −7 Column-Moving.md
  6. +58 −18 Column-Pinning.md
  7. +142 −25 Column-Resizing.md
  8. +304 −0 Column-Selection.md
  9. +242 −179 Date-Picker-Specification.md
  10. +295 −0 Date-Range-Picker-Specification.md
  11. +239 −0 DateTime-Editor-Specification.md
  12. +164 −40 Dock-Manager-Specification.md
  13. +242 −0 Documentation-Guidelines.md
  14. +12 −0 Drag&Drop-Directives-Specification.md
  15. +6 −3 DropDown-Specification.md
  16. +24 −15 Excel-Style-Filtering.md
  17. +7 −3 Expansion-Panel-Specification.md
  18. +43 −15 Filtering-Row.md
  19. +11 −81 General-Naming-and-Coding--Guidelines-for-Ignite-UI-for-Angular.md
  20. +344 −0 Grid-Add-Row.md
  21. +149 −37 Grid-Editing.md
  22. +127 −0 Grid-Interaction-Directives.md
  23. +88 −19 Grid-Master-Detail.md
  24. +17 −0 Grid-Multi-cell-selection-Specification.md
  25. +91 −48 Grid-State-Persistence.md
  26. +224 −114 Grid-Toolbar-Specification.md
  27. +65 −0 Grid-binding-to-data-source-with-nested-properties.md
  28. +5 −0 Grid-multi-column-headers.md
  29. +283 −175 Group-By-Specification.md
  30. +17 −15 Hierarchical-Grid-Specification.md
  31. +12 −2 Home.md
  32. +23 −9 IgxCombo-(Component).md
  33. +11 −2 IgxSelect-Specification.md
  34. +26 −16 Input-Group-Specification.md
  35. +13 −3 Month-Picker-Specification.md
  36. +14 −2 Navigation-Bar-Specification.md
  37. +4 −1 Navigation-Drawer-Specification.md
  38. +21 −13 Overlay-Specification.md
  39. +0 −167 Range-Date-Picker-Specification.md
  40. +2 −2 Row-Dragging.md
  41. +245 −0 Row-Pinning.md
  42. +27 −19 Row-Selection-(Grid-feature).md
  43. +63 −6 Row-Selection-Templating-(Grid-feature).md
  44. +103 −48 Slider-Specification.md
  45. +43 −19 Snackbar-Specification.md
  46. +105 −48 Sorting-Specification.md
  47. +232 −0 Splitter-Specification.md
  48. +35 −11 Summaries-Specification.md
  49. +15 −11 Tabs-Specification.md
  50. +0 −89 Template-for-writing-a-specification.md
  51. +214 −0 Test-implementation-guidelines-for-Ignite-UI-for-Angular.md
  52. +51 −0 Testing-asynchronous-code-with-fakeAsync.-Microtasks,-Macrotasks..md
  53. +261 −132 Time-Picker.md
  54. +42 −9 Toast-Specification.md
  55. +26 −6 Transaction-specification.md
  56. +254 −0 Tree-Specification.md
  57. +76 −5 Update-Migrations.md
  58. +107 −32 Visual-Cell-Merging.md
  59. +4 −0 _Sidebar.md
  60. +235 −157 igxCalendar-Specification.md
  61. +42 −10 igxGrid-Collapsible-Column-Groups.md
  62. +180 −0 igxGrid-Column-Data-Types-and-Templates-Specification.md
  63. +262 −32 igxGrid-Specification.md
  64. +268 −208 igxTreeGrid-Specification.md
41 changes: 33 additions & 8 deletions Carousel-Specification.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@
| 0.1 | Stanka Bozalieva | Oct 5, 2018 | Initial draft |
| 0.2 | Stefan Ivanov | Oct 9, 2019 | Update - in progress |
| 1.0 | Zdravko Kolev | Nov 7, 2019 | Add Test plan |
| 2.0 | Zdravko Kolev | Feb 1, 2021 | Update Accessibility section |


A carousel component is used to browse a collection of slides like galleries of images, cards, on-boarding tutorials or page-based interfaces. It can be used as a separate full – screen element or inside another component

## <a name='objectives'>2. Objectives</a>
`igx-carousel` can be used as standalone component in order to show a set of slides. It should be highly customizable, providing capabilities like `slide transitions and animations`, `hide\show navigation buttons`, `dynamically load images`, `i18n and accessibility support`.

## ## <a name='user-stories'>3. User Stories</a>
## <a name='user-stories'>3. User Stories</a>

### End user

Expand Down Expand Up @@ -136,16 +137,40 @@ The end user interface consists of:
* `select(slide: IgxSlide, direction: Direction)` - Selects the slide and the direction to transition to. Emits `onSlideChanged` event.

## <a name='accessibility'>7. Accessibility</a>
### WAI-ARIA Roles, States, and Properties
* The Carousel base element role is [`region`](https://www.w3.org/TR/wai-aria-1.1/#region) - section containing content that is relevant to specific purpose and users will likely want to be able to navigate easily.
* Carousel indicators are with role [`tab`](https://www.w3.org/TR/wai-aria-1.1/#tab) - grouping label providing a mechanism for selecting the tab content that is to be rendered to the user
* The element that serves as the container for the set of tabs (carousel indicators) role is set to [`tablist`](https://www.w3.org/TR/wai-aria-1.1/#tab).
* Each slide element is set with role [`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel).
* The element that serves as the container for the set of igx-slides is set with [aria-live](https://www.w3.org/TR/wai-aria-1.1/#aria-live)="polite". Both options are
- `off`: if the carousel is automatically rotating.
- `polite`: if the carousel is NOT automatically rotating.

### <a name='aria-support'>7.1 ARIA support</a>
* `Roles`:
* role="button" https://www.w3.org/TR/wai-aria/roles#button
* role="list" https://www.w3.org/TR/wai-aria/roles#list
* `Attributes`:
* aria-label="carousel" https://www.w3.org/TR/wai-aria/states_and_properties#aria-label
#### **Carousel component**
##### `Roles`:
* [role="region"](https://www.w3.org/TR/wai-aria-1.1/#region)
* [role="button"](https://www.w3.org/TR/wai-aria/roles#button)
* [role="tablist"](https://www.w3.org/TR/wai-aria-1.1/#tablist)
* [role="tab"](https://www.w3.org/TR/wai-aria-1.1/#tab)
##### `Attributes`:
* [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription)='carousel'
* [aria-selected](https://www.w3.org/TR/wai-aria/states_and_properties#aria-selected)="slide.active"
* [aria-controls](https://www.w3.org/TR/wai-aria-1.1/#aria-controls)="'panel-' + slide.index"
* [aria-live](https://www.w3.org/TR/wai-aria-1.1/#aria-live)="!interval || stoppedByInteraction ? 'polite' : 'off'"
* [aria-label](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label)="carousel"
* aria-label="setAriaLabel(slide)" - slide based
* aria-selected="slide.active" https://www.w3.org/TR/wai-aria/states_and_properties#aria-selected

* aria-label (buttons)
- aria-label="resourceStrings.igx_carousel_previous_slide" (keydown.enter)="prev()"
- aria-label="resourceStrings.igx_carousel_next_slide" (keydown.enter)="next()"

#### **Slide component**
##### `Roles`:
* attr.role=["tabpanel"](https://www.w3.org/TR/wai-aria-1.1/#tabpanel) - container for the resources associated with a tab, where each tab is contained in a tablist.
##### `Attributes`:
* id="panel-${this.index}"
* aria-labelledby="tab-${this.index}-${this.total}"
* aria-selected="active" active slide - class.igx-slide--current
### <a name='keyboard'>7.2 Keyboard navigation</a>
| Key | Result |
| ---------- | ---------------- |
Expand Down