apply prettier

Author: mituron

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

@@ -13,9 +13,9 @@ const doList = [
   'Provide  localized string of the "carousel" using `ariaRoleDescription` prop.',
   'Provide label to the carousel using `ariaLabel` prop.',
   <Box>
-    If carousel contains `navigation`: 
+    If carousel contains `navigation`:
     <ul>
-      <li> provide label to `navigation` and to navigation item using `aria-label` attribute</li> 
+      <li> provide label to `navigation` and to navigation item using `aria-label` attribute</li>
       <li> add `aria-controls` attribute to navigation item referencing to `carouselItem` id </li>
     </ul>
   </Box>,

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

@@ -1,15 +1,14 @@
 import { Accessibility } from '../../types'
 import * as keyboardKey from 'keyboard-key'
 
-
 /**
  * @description
  * Adds attribute 'role=region' to 'root' slot if 'navigation' property is false. Does not set the attribute otherwise.
  * Adds attribute 'aria-roledescription' to 'root' slot if 'navigation' property is false. Does not set the attribute otherwise.
  * Adds attribute 'aria-label' to 'root' slot if 'navigation' property is false. Does not set the attribute otherwise.
  * Adds attribute 'aria-roledescription' to 'itemsContainer' slot if 'navigation' property is true. Does not set the attribute otherwise.
  * Adds attribute 'aria-label' to 'itemsContainer' slot if 'navigation' property is true. Does not set the attribute otherwise.
- * 
+ *
  * @specification
  * Adds attribute 'role=region' to 'root' slot.
  * Adds attribute 'aria-live=polite' to 'itemsContainerWrapper' slot if 'ariaLiveOn' property is true. Sets the attribute to 'off' otherwise.
@@ -26,7 +25,7 @@ import * as keyboardKey from 'keyboard-key'
 const carouselBehavior: Accessibility<CarouselBehaviorProps> = props => ({
   attributes: {
     root: {
-      role: props.navigation ? undefined :  'region',
+      role: props.navigation ? undefined : 'region',
       'aria-roledescription': props.navigation ? undefined : props.ariaRoleDescription,
       'aria-label': props.navigation ? undefined : props.ariaLabel,
     },
@@ -78,10 +77,9 @@ const carouselBehavior: Accessibility<CarouselBehaviorProps> = props => ({
 export type CarouselBehaviorProps = {
   /** Element type. */
   navigation: Object | Object[]
-  ariaLiveOn: boolean    
+  ariaLiveOn: boolean
   ariaRoleDescription?: string
   ariaLabel?: string
-
 }
 
 export default carouselBehavior

packages/accessibility/test/behaviors/caroselBehavior-test.tsx

@@ -1,33 +1,48 @@
 import { carouselBehavior } from '@fluentui/accessibility'
 
-const roleDescription = "carousel"
-const label = "portrait collection"
+const roleDescription = 'carousel'
+const label = 'portrait collection'
 
 describe('carouselBehavior.ts', () => {
-
   describe('root', () => {
     test(`sets "role=region" when carousel has NO navigation`, () => {
       const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false })
       expect(expectedResult.attributes.root.role).toEqual('region')
     })
 
     test('sets "aria-roledescription" when carousel has NO navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaRoleDescription: roleDescription })
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: false,
+        ariaRoleDescription: roleDescription,
+      })
       expect(expectedResult.attributes.root['aria-roledescription']).toEqual(roleDescription)
     })
 
     test('sets "aria-label" when carousel has NO navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaLabel: label })
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: false,
+        ariaLabel: label,
+      })
       expect(expectedResult.attributes.root['aria-label']).toEqual(label)
     })
 
     test('do NOT set "aria-roledescription" when carousel has navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaRoleDescription: roleDescription })
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: true,
+        ariaRoleDescription: roleDescription,
+      })
       expect(expectedResult.attributes.root['aria-roledescription']).toBeUndefined()
     })
 
     test('do NOT set "aria-label" when carousel has navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaLabel: label })
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: true,
+        ariaLabel: label,
+      })
       expect(expectedResult.attributes.root['aria-label']).toBeUndefined()
     })
 
@@ -39,22 +54,40 @@ describe('carouselBehavior.ts', () => {
 
   describe('itemsContainer', () => {
     test('sets "aria-roledescription" when carousel has navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaRoleDescription: roleDescription })
-      expect(expectedResult.attributes.itemsContainer['aria-roledescription']).toEqual(roleDescription)
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: true,
+        ariaRoleDescription: roleDescription,
+      })
+      expect(expectedResult.attributes.itemsContainer['aria-roledescription']).toEqual(
+        roleDescription,
+      )
     })
 
     test('sets "aria-label" when carousel has navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaLabel: label })
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: true,
+        ariaLabel: label,
+      })
       expect(expectedResult.attributes.itemsContainer['aria-label']).toEqual(label)
     })
 
     test('do NOT set "aria-roledescription" when carousel has NO navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaRoleDescription: roleDescription })
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: false,
+        ariaRoleDescription: roleDescription,
+      })
       expect(expectedResult.attributes.itemsContainer['aria-roledescription']).toBeUndefined()
     })
 
     test('do NOT set "aria-label" when carousel has NO navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaLabel: label })
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: false,
+        ariaLabel: label,
+      })
       expect(expectedResult.attributes.itemsContainer['aria-label']).toBeUndefined()
     })
 
@@ -63,6 +96,4 @@ describe('carouselBehavior.ts', () => {
       expect(expectedResult.attributes.itemsContainer.role).toBeUndefined()
     })
   })
-
-
 })

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

@@ -241,7 +241,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
   }
 
   renderContent = (accessibility, styles, unhandledProps) => {
-    const {getItemPositionText, items} = this.props
+    const { getItemPositionText, items } = this.props
     const { activeIndex, itemIds } = this.state
 
     this.itemRefs = []