fix(Carousel): improvement for windows screen readers experiences (#2223)

* first attempt, different fixes

* some fix

* addings specification for carouselItemBehavior

* changing to aria label as voiceover has some issue

* removing not necessary changes

* removing empty line

* adding prop navigation into carouselItem

* adress fix from review

Author: kolaps33

docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { Text } from '@fluentui/react'
+import { link } from '../../../../utils/helpers'
+
+import ComponentBestPractices from 'docs/src/components/ComponentBestPractices'
+
+const doList = [
+  <Text>
+    'Add textual representation for `CarouselItem`. Use `aria-label` attribute ( refer to{' '}
+    {link('reported issue', 'https://bugs.chromium.org/p/chromium/issues/detail?id=1040924')} for
+    details).
+  </Text>,
+]
+
+const CarouselBestPractices: React.FunctionComponent<{}> = () => {
+  return <ComponentBestPractices doList={doList} />
+}
+
+export default CarouselBestPractices

docs/src/examples/components/Carousel/Types/CarouselExample.tsx

@@ -12,21 +12,25 @@ const carouselItems = [
     key: 'ade',
     id: 'ade',
     content: <Image src="public/images/avatar/large/ade.jpg" fluid alt={imageAltTags.ade} />,
+    'aria-label': imageAltTags.ade,
   },
   {
     key: 'elliot',
     id: 'elliot',
     content: <Image src="public/images/avatar/large/elliot.jpg" fluid alt={imageAltTags.elliot} />,
+    'aria-label': imageAltTags.elliot,
   },
   {
     key: 'kristy',
     id: 'kristy',
     content: <Image src="public/images/avatar/large/kristy.png" fluid alt={imageAltTags.kristy} />,
+    'aria-label': imageAltTags.kristy,
   },
   {
     key: 'nan',
     id: 'nan',
     content: <Image src="public/images/avatar/large/nan.jpg" fluid alt={imageAltTags.nan} />,
+    'aria-label': imageAltTags.nan,
   },
 ]
 

packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts

@@ -2,14 +2,14 @@ import { Accessibility } from '../../types'
 
 /**
  * @specification
- * Adds attribute 'role=tabpanel' to 'root' slot.
+ * Adds attribute 'role=tabpanel' to 'root' slot if 'navigation' property is true. Sets the attribute to 'group' otherwise.
  * Adds attribute 'aria-hidden=false' to 'root' slot if 'active' property is true. Sets the attribute to 'true' otherwise.
  * Adds attribute 'tabIndex=0' to 'root' slot if 'active' property is true. Sets the attribute to '-1' otherwise.
  */
 const carouselItemBehavior: Accessibility<CarouselItemProps> = props => ({
   attributes: {
     root: {
-      role: 'tabpanel',
+      role: props.navigation ? 'tabpanel' : 'group',
       'aria-hidden': props.active ? 'false' : 'true',
       tabIndex: props.active ? 0 : -1,
     },
@@ -25,4 +25,5 @@ export default carouselItemBehavior
 export type CarouselItemProps = {
   /** If item is visible in the carousel. */
   active?: boolean
+  navigation?: boolean
 }

packages/react/src/components/Carousel/Carousel.tsx

@@ -278,6 +278,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
                     defaultProps: () => ({
                       active: activeIndex === index,
                       id: itemIds[index],
+                      navigation: !!this.props.navigation,
                       ...(getItemPositionText && {
                         itemPositionText: getItemPositionText(index, items.length),
                       }),
@@ -428,5 +429,7 @@ Carousel.create = createShorthandFactory({
  *
  * @accessibility
  * Implements [ARIA Carousel](https://www.w3.org/WAI/tutorials/carousels/structure/) design pattern.
+ * @accessibilityIssues
+ * [VoiceOver doens't narrate label referenced by aria-labelledby attribute, when role is "tabpanel"](https://bugs.chromium.org/p/chromium/issues/detail?id=1040924)
  */
 export default withSafeTypeForAs<typeof Carousel, CarouselProps, 'div'>(Carousel)

packages/react/src/components/Carousel/CarouselItem.tsx

@@ -32,6 +32,9 @@ export interface CarouselItemProps
    * up by screen readers.
    */
   itemPositionText?: string
+
+  /** Whether or not navigation exists in carousel. */
+  navigation?: boolean
 }
 
 class CarouselItem extends UIComponent<WithAsProp<CarouselItemProps>> {
@@ -44,6 +47,7 @@ class CarouselItem extends UIComponent<WithAsProp<CarouselItemProps>> {
   static propTypes = {
     ...commonPropTypes.createCommon(),
     active: PropTypes.bool,
+    navigation: PropTypes.bool,
     itemPositionText: PropTypes.string,
   }
 
@@ -64,13 +68,13 @@ class CarouselItem extends UIComponent<WithAsProp<CarouselItemProps>> {
         {...unhandledProps}
         {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
       >
+        {childrenExist(children) ? children : content}
         <div
           className={CarouselItem.slotClassNames.itemPositionText}
           style={screenReaderContainerStyles}
         >
           {itemPositionText}
         </div>
-        {childrenExist(children) ? children : content}
       </ElementType>
     )
   }