feat(AccessibilityBehaviors): Define types for accessibility behaviors

CHANGELOG.md

@@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Moved the `rtl` and `renderer` props from the `theme` prop object to the `Provider`'s props API @mnajdova ([#1377](https://github.com/stardust-ui/react/pull/1377))
 
 ### Features
+- Define types for accessibility behaviors props. Do not render `aria-disabled` if the value is `false` @sophieH29 ([#1481](https://github.com/stardust-ui/react/pull/1481))
 - Add `Toolbar` component @miroslavstastny ([#1408](https://github.com/stardust-ui/react/pull/1408))
 - Add `disableAnimations` boolean prop on the `Provider` @mnajdova ([#1377](https://github.com/stardust-ui/react/pull/1377))
 - Add expand/collapse and navigation with `ArrowUp` and `ArrowDown` to `Tree` @silviuavram ([#1457](https://github.com/stardust-ui/react/pull/1457))

packages/react/src/lib/accessibility/Behaviors/Accordion/accordionBehavior.ts

@@ -9,7 +9,7 @@ import * as keyboardKey from 'keyboard-key'
  * Triggers 'moveFirst' action with 'Home' on 'root'.
  * Triggers 'moveLast' action with 'End' on 'root'.
  */
-const accordionBehavior: Accessibility = (props: any) => ({
+const accordionBehavior: Accessibility = () => ({
   attributes: {
     root: {
       role: 'presentation',

packages/react/src/lib/accessibility/Behaviors/Accordion/accordionContentBehavior.ts

@@ -7,7 +7,7 @@ import { Accessibility } from '../../types'
  * @specification
  * Adds attribute 'aria-labelledby' based on the property 'accordionTitleId' to 'root' component's part.
  */
-const accordionContentBehavior: Accessibility = (props: any) => {
+const accordionContentBehavior: Accessibility<AccordionContentBehaviorProps> = props => {
   return {
     attributes: {
       root: {
@@ -18,3 +18,8 @@ const accordionContentBehavior: Accessibility = (props: any) => {
 }
 
 export default accordionContentBehavior
+
+type AccordionContentBehaviorProps = {
+  /** id of the accordion title element. */
+  accordionTitleId?: string
+}

packages/react/src/lib/accessibility/Behaviors/Accordion/accordionTitleBehavior.ts

@@ -14,7 +14,7 @@ import * as keyboardKey from 'keyboard-key'
  * Adds attribute 'aria-controls=content-id' based on the property 'accordionContentId' to 'content' component's part.
  * Triggers 'performClick' action with 'Enter' or 'Spacebar' on 'content'.
  */
-const accordionTitleBehavior: Accessibility = (props: any) => {
+const accordionTitleBehavior: Accessibility<AccordionTitleBehaviorProps> = props => {
   const isHeading = /(h\d{1})$/.test(props.as)
   return {
     attributes: {
@@ -41,3 +41,14 @@ const accordionTitleBehavior: Accessibility = (props: any) => {
 }
 
 export default accordionTitleBehavior
+
+type AccordionTitleBehaviorProps = {
+  /** Element type. */
+  as: string
+  /** Whether or not the title is in the open state. */
+  active?: boolean
+  /** If at least one panel needs to stay active and this title does not correspond to the last active one. */
+  canBeCollapsed?: boolean
+  /** Id of the content it owns. */
+  accordionContentId?: string
+}

packages/react/src/lib/accessibility/Behaviors/Alert/alertBehavior.ts

@@ -7,7 +7,14 @@ import defaultBehavior from '../defaultBehavior'
  * Uses 'alertWarningBehavior` for 'danger' and 'warning' variants.
  * Uses 'defaultBehavior` for 'success' and 'info' variants.
  */
-const alertBehavior: Accessibility = (props: any) =>
+const alertBehavior: Accessibility<AlertBehaviorProps> = props =>
   props.warning || props.danger ? alertWarningBehavior(props) : defaultBehavior(props)
 
 export default alertBehavior
+
+type AlertBehaviorProps = {
+  /** An alert may be formatted to display a danger message. */
+  danger?: boolean
+  /** An alert may be formatted to display a warning message. */
+  warning?: boolean
+}

packages/react/src/lib/accessibility/Behaviors/Alert/alertWarningBehavior.ts

@@ -6,7 +6,7 @@ import { Accessibility } from '../../types'
  * Adds attribute 'aria-live=polite' to 'content' component's part.
  */
 
-const alertWarningBehavior: Accessibility = (props: any) => ({
+const alertWarningBehavior: Accessibility = () => ({
   attributes: {
     content: {
       role: 'alert',

packages/react/src/lib/accessibility/Behaviors/Attachment/attachmentBehavior.ts

@@ -7,7 +7,7 @@ import { IS_FOCUSABLE_ATTRIBUTE } from '../../FocusZone/focusUtilities'
  * Adds attribute 'tabIndex=0' to 'root' component's part.
  * Triggers 'performClick' action with 'Enter' or 'Spacebar' on 'root'.
  */
-const attachmentBehavior: Accessibility = (props: any) => ({
+const attachmentBehavior: Accessibility = () => ({
   attributes: {
     root: {
       tabIndex: 0,

packages/react/src/lib/accessibility/Behaviors/Button/buttonBehavior.ts

@@ -1,21 +1,24 @@
 import { Accessibility } from '../../types'
-import * as _ from 'lodash'
 
 /**
  * @specification
  * Adds role='button' if element type is other than 'button'. This allows screen readers to handle the component as a button.
  * Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component.
  */
-
-const buttonBehavior: Accessibility = (props: any) => ({
+const buttonBehavior: Accessibility<ButtonBehaviorProps> = props => ({
   attributes: {
     root: {
       role: props.as === 'button' ? undefined : 'button',
-      'aria-disabled': !_.isNil(props['aria-disabled'])
-        ? props['aria-disabled']
-        : !!props['disabled'],
+      'aria-disabled': props.disabled,
     },
   },
 })
 
 export default buttonBehavior
+
+export type ButtonBehaviorProps = {
+  /** Element type. */
+  as: string
+  /** A button can show it is currently unable to be interacted with. */
+  disabled?: boolean
+}

packages/react/src/lib/accessibility/Behaviors/Button/toggleButtonBehavior.ts

@@ -1,23 +1,25 @@
 import { Accessibility } from '../../types'
-import * as _ from 'lodash'
+import { ButtonBehaviorProps } from './buttonBehavior'
 
 /**
  * @specification
  * Adds role='button' if element type is other than 'button'. This allows screen readers to handle the component as a button
  * Adds attribute 'aria-pressed=true' based on the property 'active'. This can be overriden by providing 'aria-presssed' property directly to the component.
  * Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component.
  */
-
-const toggleButtonBehavior: Accessibility = (props: any) => ({
+const toggleButtonBehavior: Accessibility<ToggleButtonBehaviorProps> = props => ({
   attributes: {
     root: {
       role: props.as === 'button' ? undefined : 'button',
-      'aria-disabled': !_.isNil(props['aria-disabled'])
-        ? props['aria-disabled']
-        : !!props['disabled'],
-      'aria-pressed': !_.isNil(props['aria-presssed']) ? props['aria-presssed'] : !!props['active'],
+      'aria-disabled': props.disabled,
+      'aria-pressed': !!props.active,
     },
   },
 })
 
 export default toggleButtonBehavior
+
+type ToggleButtonBehaviorProps = ButtonBehaviorProps & {
+  /** Indicates if a button is in pressed state. */
+  active: boolean
+}

packages/react/src/lib/accessibility/Behaviors/Chat/chatBehavior.ts

@@ -16,7 +16,7 @@ const CHAT_FOCUSZONE_ATTRIBUTE = 'chat-focuszone'
  * Focused active element of the component is reset when TAB from the component.
  * Focus can be moved inside a child component with embeded inner FocusZone by pressing a specified key.
  */
-const ChatBehavior: Accessibility = (props: any) => ({
+const ChatBehavior: Accessibility = () => ({
   attributes: {
     root: {},
   },

packages/react/src/lib/accessibility/Behaviors/Chat/chatMessageBehavior.ts

@@ -15,7 +15,7 @@ import { FocusZoneTabbableElements, FocusZoneDirection } from '../../FocusZone'
  * Keyboard navigation is circular.
  * Focus is moved within the focusable children of the component using TAB key.
  */
-const chatMessageBehavior: Accessibility = (props: any) => ({
+const chatMessageBehavior: Accessibility = () => ({
   attributes: {
     root: {
       [IS_FOCUSABLE_ATTRIBUTE]: true,

packages/react/src/lib/accessibility/Behaviors/Checkbox/checkboxBehavior.ts

@@ -1,11 +1,6 @@
 import * as keyboardKey from 'keyboard-key'
 import { Accessibility } from '../../types'
 
-type CheckboxBehaviorProps = {
-  checked: boolean
-  disabled?: boolean
-}
-
 /**
  * @specification
  * Adds role='checkbox'. This allows screen readers to handle the component as a checkbox button.
@@ -16,7 +11,7 @@ type CheckboxBehaviorProps = {
 const checkboxBehavior: Accessibility<CheckboxBehaviorProps> = props => ({
   attributes: {
     root: {
-      'aria-checked': props.checked,
+      'aria-checked': !!props.checked,
       'aria-disabled': props.disabled,
       role: 'checkbox',
       tabIndex: 0,
@@ -32,3 +27,10 @@ const checkboxBehavior: Accessibility<CheckboxBehaviorProps> = props => ({
 })
 
 export default checkboxBehavior
+
+type CheckboxBehaviorProps = {
+  /** Whether or not item is checked. */
+  checked: boolean
+  /** If the checkbox is in disabled state. */
+  disabled?: boolean
+}

packages/react/src/lib/accessibility/Behaviors/Dialog/dialogBehavior.ts

@@ -1,5 +1,6 @@
-import { Accessibility } from '../../types'
+import { Accessibility, AccessibilityAttributes } from '../../types'
 import popupFocusTrapBehavior from '../Popup/popupFocusTrapBehavior'
+import { PopupBehaviorProps } from '../Popup/popupBehavior'
 import * as _ from 'lodash'
 
 /**
@@ -17,7 +18,7 @@ import * as _ from 'lodash'
  * Generates unique ID and adds it as attribute 'id' to the 'content' component's part if it has not been provided by the user.
  * Traps focus inside component.
  */
-const dialogBehavior: Accessibility = (props: any) => {
+const dialogBehavior: Accessibility<DialogBehaviorProps> = props => {
   const behaviorData = popupFocusTrapBehavior(props)
   const defaultAriaLabelledBy = getDefaultAriaLabelledBy(props)
   const defaultAriaDescribedBy = getDefaultAriaDescribedBy(props)
@@ -66,3 +67,13 @@ const getDefaultAriaDescribedBy = (props: any) => {
 }
 
 export default dialogBehavior
+
+type DialogBehaviorProps = {
+  header?: {
+    id?: string
+  }
+  content?: {
+    id?: string
+  }
+} & PopupBehaviorProps &
+  Pick<AccessibilityAttributes, 'aria-label' | 'aria-labelledby' | 'aria-describedby'>

packages/react/src/lib/accessibility/Behaviors/Embed/embedBehavior.ts

@@ -12,7 +12,7 @@ import { Accessibility } from '../../types'
  * Adds attribute 'aria-hidden=true', if there is no 'alt' property provided.
  * Adds attribute 'tabIndex=0' to 'root' component's part.
  */
-const embedBehavior: Accessibility = (props: any) => ({
+const embedBehavior: Accessibility<EmbedBehaviorProps> = props => ({
   attributes: {
     root: {
       'aria-hidden': props.alt || props.title ? undefined : true,
@@ -30,3 +30,10 @@ const embedBehavior: Accessibility = (props: any) => ({
 })
 
 export default embedBehavior
+
+type EmbedBehaviorProps = {
+  /** Corresponds to HTML title attribute. */
+  title?: string
+  /** Alternative text. */
+  alt?: string
+}

packages/react/src/lib/accessibility/Behaviors/Grid/gridBehavior.ts

@@ -6,7 +6,7 @@ import { FocusZoneDirection } from '../../FocusZone'
  * Embeds component into FocusZone.
  * Provides arrow key navigation in bidirectional direction.
  */
-const gridBehavior: Accessibility = (props: any) => ({
+const gridBehavior: Accessibility = () => ({
   attributes: {},
   focusZone: {
     mode: FocusZoneMode.Embed,

packages/react/src/lib/accessibility/Behaviors/Icon/iconBehavior.ts

@@ -1,4 +1,4 @@
-import { Accessibility } from '../../types'
+import { Accessibility, AccessibilityAttributes } from '../../types'
 
 /**
  * @description
@@ -9,14 +9,19 @@ import { Accessibility } from '../../types'
  * Adds attribute 'aria-hidden=true', if there is no 'alt' property provided.
  * Adds attribute 'aria-hidden=true', if there is no 'aria-label' property provided.
  */
-
-const iconBehavior: Accessibility = (props: any) => ({
+const iconBehavior: Accessibility<IconBehaviorProps> = props => ({
   attributes: {
     root: {
       role: 'img',
-      'aria-hidden': props['alt'] || props['aria-label'] ? undefined : 'true',
+      'aria-hidden': props.alt || props['aria-label'] ? undefined : 'true',
     },
   },
 })
 
 export default iconBehavior
+
+type IconBehaviorProps = {
+  /** Alternative text. */
+  alt?: string
+  'aria-label'?: string
+} & Pick<AccessibilityAttributes, 'aria-label'>

packages/react/src/lib/accessibility/Behaviors/Image/imageBehavior.ts

@@ -1,4 +1,4 @@
-import { Accessibility } from '../../types'
+import { Accessibility, AccessibilityAttributes } from '../../types'
 
 /**
  * @description
@@ -8,12 +8,18 @@ import { Accessibility } from '../../types'
  * Adds attribute 'aria-hidden=true', if there is no 'alt' property provided.
  */
 
-const imageBehavior: Accessibility = (props: any) => ({
+const imageBehavior: Accessibility<ImageBehaviorProps> = props => ({
   attributes: {
     root: {
-      'aria-hidden': props['alt'] ? undefined : 'true',
+      'aria-hidden': props.alt || props['aria-label'] ? undefined : 'true',
     },
   },
 })
 
 export default imageBehavior
+
+type ImageBehaviorProps = {
+  /** Alternative text. */
+  alt?: string
+  'aria-label'?: string
+} & Pick<AccessibilityAttributes, 'aria-label'>

packages/react/src/lib/accessibility/Behaviors/Input/inputBehavior.ts

@@ -1,19 +1,15 @@
 import { Accessibility } from '../../types'
-import * as _ from 'lodash'
 import * as keyboardKey from 'keyboard-key'
 
 /**
  * @specification
  * Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component.
  * Triggers 'clear' action with 'Escape' on 'input'.
  */
-
-const inputBehavior: Accessibility = (props: any) => ({
+const inputBehavior: Accessibility<InputBehaviorProps> = props => ({
   attributes: {
     root: {
-      'aria-disabled': !_.isNil(props['aria-disabled'])
-        ? props['aria-disabled']
-        : !!props['disabled'],
+      'aria-disabled': props.disabled,
     },
   },
   keyActions: {
@@ -26,3 +22,7 @@ const inputBehavior: Accessibility = (props: any) => ({
 })
 
 export default inputBehavior
+
+type InputBehaviorProps = {
+  disabled?: boolean
+}

packages/react/src/lib/accessibility/Behaviors/List/basicListBehavior.ts

@@ -1,4 +1,5 @@
 import { Accessibility } from '../../types'
+import { ListBehaviorProps } from './listBehavior'
 
 /**
  * @description
@@ -8,7 +9,7 @@ import { Accessibility } from '../../types'
  * Adds role='list'.
  */
 
-const basicListBehavior: Accessibility = (props: any) => ({
+const basicListBehavior: Accessibility<ListBehaviorProps> = props => ({
   attributes: {
     root: {
       role: 'list',

packages/react/src/lib/accessibility/Behaviors/List/basicListItemBehavior.ts

@@ -1,4 +1,5 @@
 import { Accessibility } from '../../types'
+import { ListItemBehaviorProps } from './listItemBehavior'
 
 /**
  * @description
@@ -8,7 +9,7 @@ import { Accessibility } from '../../types'
  * Adds role='listitem'.
  */
 
-const basicListItemBehavior: Accessibility = (props: any) => ({
+const basicListItemBehavior: Accessibility<ListItemBehaviorProps> = props => ({
   attributes: {
     root: {
       role: 'listitem',

packages/react/src/lib/accessibility/Behaviors/List/listBehavior.ts

@@ -6,8 +6,12 @@ import basicListBehavior from './basicListBehavior'
  * @description
  * Defines a behavior 'BasicListBehavior' or 'SelectableListBehavior' based on property 'selectable'.
  */
-
-const ListBehavior: Accessibility = (props: any) =>
+const ListBehavior: Accessibility<ListBehaviorProps> = props =>
   props.selectable ? selectableListBehavior(props) : basicListBehavior(props)
 
 export default ListBehavior
+
+export type ListBehaviorProps = {
+  /** Indicates if a list is a selectable list. */
+  selectable?: boolean
+}