diff --git a/CHANGELOG.md b/CHANGELOG.md index 864516dd5a..9f3ed4e701 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/packages/react/src/lib/accessibility/Behaviors/Accordion/accordionBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Accordion/accordionBehavior.ts index eb58f4754e..2053ff8cfc 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Accordion/accordionBehavior.ts +++ b/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', diff --git a/packages/react/src/lib/accessibility/Behaviors/Accordion/accordionContentBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Accordion/accordionContentBehavior.ts index 444120d274..a167d76f01 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Accordion/accordionContentBehavior.ts +++ b/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 = 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 +} diff --git a/packages/react/src/lib/accessibility/Behaviors/Accordion/accordionTitleBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Accordion/accordionTitleBehavior.ts index 7e475f024b..4234bda98c 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Accordion/accordionTitleBehavior.ts +++ b/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 = 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 +} diff --git a/packages/react/src/lib/accessibility/Behaviors/Alert/alertBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Alert/alertBehavior.ts index bf89d810de..b779fc733f 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Alert/alertBehavior.ts +++ b/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 = 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 +} diff --git a/packages/react/src/lib/accessibility/Behaviors/Alert/alertWarningBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Alert/alertWarningBehavior.ts index d94bde34b2..671ced9374 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Alert/alertWarningBehavior.ts +++ b/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', diff --git a/packages/react/src/lib/accessibility/Behaviors/Attachment/attachmentBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Attachment/attachmentBehavior.ts index 2ced391759..7c83d78609 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Attachment/attachmentBehavior.ts +++ b/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, diff --git a/packages/react/src/lib/accessibility/Behaviors/Button/buttonBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Button/buttonBehavior.ts index e2f65517b8..0bc0d3c012 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Button/buttonBehavior.ts +++ b/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 = 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 +} diff --git a/packages/react/src/lib/accessibility/Behaviors/Button/toggleButtonBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Button/toggleButtonBehavior.ts index 2b1caf8311..da4d296b11 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Button/toggleButtonBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Button/toggleButtonBehavior.ts @@ -1,5 +1,5 @@ import { Accessibility } from '../../types' -import * as _ from 'lodash' +import { ButtonBehaviorProps } from './buttonBehavior' /** * @specification @@ -7,17 +7,19 @@ import * as _ from 'lodash' * 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 = 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 +} diff --git a/packages/react/src/lib/accessibility/Behaviors/Chat/chatBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Chat/chatBehavior.ts index 14720ab253..75d290ccdb 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Chat/chatBehavior.ts +++ b/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: {}, }, diff --git a/packages/react/src/lib/accessibility/Behaviors/Chat/chatMessageBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Chat/chatMessageBehavior.ts index 8644180a6b..7e4e958978 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Chat/chatMessageBehavior.ts +++ b/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, diff --git a/packages/react/src/lib/accessibility/Behaviors/Checkbox/checkboxBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Checkbox/checkboxBehavior.ts index f3c2c7f1db..cf3abbf571 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Checkbox/checkboxBehavior.ts +++ b/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 = 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 = props => ({ }) export default checkboxBehavior + +type CheckboxBehaviorProps = { + /** Whether or not item is checked. */ + checked: boolean + /** If the checkbox is in disabled state. */ + disabled?: boolean +} diff --git a/packages/react/src/lib/accessibility/Behaviors/Dialog/dialogBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Dialog/dialogBehavior.ts index 5ea4104545..9fa5cc2984 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Dialog/dialogBehavior.ts +++ b/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 = 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 diff --git a/packages/react/src/lib/accessibility/Behaviors/Embed/embedBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Embed/embedBehavior.ts index d2bab2c8db..0616ccc21d 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Embed/embedBehavior.ts +++ b/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 = 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 +} diff --git a/packages/react/src/lib/accessibility/Behaviors/Grid/gridBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Grid/gridBehavior.ts index 1e13b33a6e..709681eb85 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Grid/gridBehavior.ts +++ b/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, diff --git a/packages/react/src/lib/accessibility/Behaviors/Icon/iconBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Icon/iconBehavior.ts index b7783e553e..f309b0ff57 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Icon/iconBehavior.ts +++ b/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 = 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 diff --git a/packages/react/src/lib/accessibility/Behaviors/Image/imageBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Image/imageBehavior.ts index 1e2bdd7a93..c4d0c0adb4 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Image/imageBehavior.ts +++ b/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 = 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 diff --git a/packages/react/src/lib/accessibility/Behaviors/Input/inputBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Input/inputBehavior.ts index 1b812d6cb3..7f5746ab44 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Input/inputBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Input/inputBehavior.ts @@ -1,5 +1,4 @@ import { Accessibility } from '../../types' -import * as _ from 'lodash' import * as keyboardKey from 'keyboard-key' /** @@ -7,13 +6,10 @@ import * as keyboardKey from 'keyboard-key' * 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 = 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 +} diff --git a/packages/react/src/lib/accessibility/Behaviors/List/basicListBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/List/basicListBehavior.ts index 7d2e3e9547..4ee2dc4cc5 100644 --- a/packages/react/src/lib/accessibility/Behaviors/List/basicListBehavior.ts +++ b/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 = props => ({ attributes: { root: { role: 'list', diff --git a/packages/react/src/lib/accessibility/Behaviors/List/basicListItemBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/List/basicListItemBehavior.ts index ce116a8063..a86c0cc326 100644 --- a/packages/react/src/lib/accessibility/Behaviors/List/basicListItemBehavior.ts +++ b/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 = props => ({ attributes: { root: { role: 'listitem', diff --git a/packages/react/src/lib/accessibility/Behaviors/List/listBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/List/listBehavior.ts index 54f91bf632..724f4ad957 100644 --- a/packages/react/src/lib/accessibility/Behaviors/List/listBehavior.ts +++ b/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 = props => props.selectable ? selectableListBehavior(props) : basicListBehavior(props) export default ListBehavior + +export type ListBehaviorProps = { + /** Indicates if a list is a selectable list. */ + selectable?: boolean +} diff --git a/packages/react/src/lib/accessibility/Behaviors/List/listItemBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/List/listItemBehavior.ts index 714bf96c3f..537c16327f 100644 --- a/packages/react/src/lib/accessibility/Behaviors/List/listItemBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/List/listItemBehavior.ts @@ -6,8 +6,14 @@ import { Accessibility } from '../../types' * @description * Defines a behavior "BasicListItemBehavior" or "SelectableListItemBehavior" based on "selectable" property. */ - -const listItemBehavior: Accessibility = (props: any) => +const listItemBehavior: Accessibility = props => props.selectable ? selectableListItemBehavior(props) : basicListItemBehavior(props) export default listItemBehavior + +export type ListItemBehaviorProps = { + /** Indicates if a list is a selectable list. */ + selectable?: boolean + /** Indicates if the current list item is selected. */ + selected?: boolean +} diff --git a/packages/react/src/lib/accessibility/Behaviors/List/selectableListBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/List/selectableListBehavior.ts index ec7d47f9b8..dc70694459 100644 --- a/packages/react/src/lib/accessibility/Behaviors/List/selectableListBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/List/selectableListBehavior.ts @@ -1,5 +1,6 @@ import * as keyboardKey from 'keyboard-key' import { Accessibility } from '../../types' +import { ListBehaviorProps } from './listBehavior' /** * @description @@ -12,7 +13,7 @@ import { Accessibility } from '../../types' * Triggers 'moveFirst' action with 'Home' on 'root'. * Triggers 'moveLast' action with 'End' on 'root'. */ -const selectableListBehavior: Accessibility = (props: any) => ({ +const selectableListBehavior: Accessibility = props => ({ attributes: { root: { role: 'listbox', diff --git a/packages/react/src/lib/accessibility/Behaviors/List/selectableListItemBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/List/selectableListItemBehavior.ts index 02c43f4810..ed24a436a8 100644 --- a/packages/react/src/lib/accessibility/Behaviors/List/selectableListItemBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/List/selectableListItemBehavior.ts @@ -1,5 +1,6 @@ import { Accessibility } from '../../types' import * as keyboardKey from 'keyboard-key' +import { ListItemBehaviorProps } from './listItemBehavior' /** * @specification @@ -7,12 +8,11 @@ import * as keyboardKey from 'keyboard-key' * Adds attribute 'aria-selected=true' based on the property 'selected'. Based on this screen readers will recognize the selected state of the item. * Triggers 'performClick' action with 'Enter' or 'Spacebar' on 'root'. */ - -const selectableListItemBehavior: Accessibility = (props: any) => ({ +const selectableListItemBehavior: Accessibility = props => ({ attributes: { root: { role: 'option', - 'aria-selected': !!props['selected'], + 'aria-selected': !!props.selected, }, }, keyActions: { diff --git a/packages/react/src/lib/accessibility/Behaviors/Menu/menuBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Menu/menuBehavior.ts index 3ad9aedd09..2e50dc8a9c 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Menu/menuBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Menu/menuBehavior.ts @@ -15,8 +15,7 @@ import menuDividerBehavior from './menuDividerBehavior' * When 'vertical' prop is used, provides keyboard navigation in vertical direction. * Keyboard navigation is circular. */ - -const menuBehavior: Accessibility = (props: any) => ({ +const menuBehavior: Accessibility = props => ({ attributes: { root: { role: 'menu', @@ -37,3 +36,8 @@ const menuBehavior: Accessibility = (props: any) => ({ }) export default menuBehavior + +type MenuBehaviorProps = { + /** Indicates if menu has its items displayed vertically. */ + vertical?: boolean +} diff --git a/packages/react/src/lib/accessibility/Behaviors/Menu/menuDividerBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Menu/menuDividerBehavior.ts index 0a0c467f8a..224c7eb71e 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Menu/menuDividerBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Menu/menuDividerBehavior.ts @@ -8,7 +8,7 @@ import { Accessibility } from '../../types' * Adds role 'presentation' to 'root' component's part. */ -const menuDividerBehavior: Accessibility = (props: any) => ({ +const menuDividerBehavior: Accessibility = () => ({ attributes: { root: { role: 'presentation', diff --git a/packages/react/src/lib/accessibility/Behaviors/Menu/menuItemBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Menu/menuItemBehavior.ts index 05780d4fe9..edb4d193bb 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Menu/menuItemBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Menu/menuItemBehavior.ts @@ -1,7 +1,6 @@ -import { Accessibility } from '../../types' +import { Accessibility, AccessibilityAttributes } from '../../types' import { IS_FOCUSABLE_ATTRIBUTE } from '../../FocusZone/focusUtilities' import * as keyboardKey from 'keyboard-key' -import * as _ from 'lodash' /** * @description @@ -25,8 +24,7 @@ import * as _ from 'lodash' * Triggers 'openMenu' action with 'ArrowDown' on 'wrapper', when orientation is horizontal. * Triggers 'openMenu' action with 'ArrowRight' on 'wrapper', when orientation is vertical. */ - -const menuItemBehavior: Accessibility = (props: any) => ({ +const menuItemBehavior: Accessibility = props => ({ attributes: { wrapper: { role: 'presentation', @@ -39,12 +37,8 @@ const menuItemBehavior: Accessibility = (props: any) => ({ 'aria-label': props['aria-label'], 'aria-labelledby': props['aria-labelledby'], 'aria-describedby': props['aria-describedby'], - 'aria-disabled': !_.isNil(props['aria-disabled']) - ? props['aria-disabled'] - : !!props['disabled'] - ? true - : undefined, - [IS_FOCUSABLE_ATTRIBUTE]: !props['disabled'], + 'aria-disabled': props.disabled, + [IS_FOCUSABLE_ATTRIBUTE]: !props.disabled, }, }, @@ -72,3 +66,14 @@ const menuItemBehavior: Accessibility = (props: any) => ({ }) export default menuItemBehavior + +export type MenuItemBehaviorProps = { + /** Indicated if menu item has submenu. */ + menu?: boolean | object + /** Defines if submenu is opened. */ + menuOpen?: boolean + /** If a menu item can is currently unable to be interacted with. */ + disabled?: boolean + /** If a menu displays elements vertically. */ + vertical?: boolean +} & Pick diff --git a/packages/react/src/lib/accessibility/Behaviors/Menu/submenuBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Menu/submenuBehavior.ts index a2da1ecb35..f4e6c472b3 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Menu/submenuBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Menu/submenuBehavior.ts @@ -13,8 +13,7 @@ import menuItemBehavior from './menuItemBehavior' * Keyboard navigation is circular. * Component will get focus when mounted. */ - -const submenuBehavior: Accessibility = (props: any) => ({ +const submenuBehavior: Accessibility = () => ({ attributes: { root: { role: 'menu', diff --git a/packages/react/src/lib/accessibility/Behaviors/Popup/popupAutoFocusBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Popup/popupAutoFocusBehavior.ts index a6010c3681..bf85b12b8c 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Popup/popupAutoFocusBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Popup/popupAutoFocusBehavior.ts @@ -1,5 +1,5 @@ import { Accessibility } from '../../types' -import popupBehavior from './popupBehavior' +import popupBehavior, { PopupBehaviorProps } from './popupBehavior' /** * @description @@ -9,7 +9,7 @@ import popupBehavior from './popupBehavior' * Adds attribute 'aria-disabled=true' to 'trigger' component's part if 'disabled' property is true. Does not set the attribute otherwise. * Automatically focus the first focusable element inside component. */ -const popupAutoFocusBehavior: Accessibility = (props: any) => ({ +const popupAutoFocusBehavior: Accessibility = props => ({ ...popupBehavior(props), autoFocus: true, }) diff --git a/packages/react/src/lib/accessibility/Behaviors/Popup/popupBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Popup/popupBehavior.ts index 8e5ff6b60c..0d14db828a 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Popup/popupBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Popup/popupBehavior.ts @@ -1,6 +1,7 @@ import { Accessibility } from '../../types' import * as keyboardKey from 'keyboard-key' import * as _ from 'lodash' +import { PopupEvents, PopupEventsArray } from '../../../../components/Popup/Popup' /** * @description @@ -10,17 +11,13 @@ import * as _ from 'lodash' * Adds attribute 'aria-disabled=true' to 'trigger' component's part if 'disabled' property is true. Does not set the attribute otherwise. * Adds attribute 'role=complementary' to 'popup' component's part. */ -const popupBehavior: Accessibility = (props: any) => { +const popupBehavior: Accessibility = props => { const onAsArray = _.isArray(props.on) ? props.on : [props.on] return { attributes: { trigger: { tabIndex: getAriaAttributeFromProps('tabIndex', props, 0), - 'aria-disabled': !_.isNil(props['aria-disabled']) - ? props['aria-disabled'] - : !!props['disabled'] - ? true - : undefined, + 'aria-disabled': props.disabled, }, popup: { role: 'complementary', @@ -85,3 +82,21 @@ const getAriaAttributeFromProps = ( } export default popupBehavior + +export type PopupBehaviorProps = { + /** Events triggering the popup. */ + on?: PopupEvents | PopupEventsArray + /** Indicates if popup's trigger is disabled. */ + disabled?: boolean + /** Element which triggers popup */ + trigger?: { + props?: { + /** Element type. */ + as?: string + href?: string + tabIndex?: string + } + /** Element type. */ + type?: string + } +} diff --git a/packages/react/src/lib/accessibility/Behaviors/Popup/popupFocusTrapBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Popup/popupFocusTrapBehavior.ts index f1eb2b2553..c6cf39e429 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Popup/popupFocusTrapBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Popup/popupFocusTrapBehavior.ts @@ -1,5 +1,5 @@ import { Accessibility } from '../../types' -import popupBehavior from './popupBehavior' +import popupBehavior, { PopupBehaviorProps } from './popupBehavior' /** * @description @@ -11,7 +11,7 @@ import popupBehavior from './popupBehavior' * Adds attribute 'role=dialog' to 'popup' component's part. * Traps focus inside component. */ -const popupFocusTrapBehavior: Accessibility = (props: any) => { +const popupFocusTrapBehavior: Accessibility = props => { const behaviorData = popupBehavior(props) behaviorData.attributes.popup = { ...behaviorData.attributes.popup, diff --git a/packages/react/src/lib/accessibility/Behaviors/Radio/radioGroupBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Radio/radioGroupBehavior.ts index ee87f83cdf..9a247ff709 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Radio/radioGroupBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Radio/radioGroupBehavior.ts @@ -9,7 +9,7 @@ import * as keyboardKey from 'keyboard-key' * Triggers 'nextItem' action with 'ArrowDown' or 'ArrowRight' on 'root'. * Triggers 'prevItem' action with 'ArrowUp' or 'ArrowLeft' on 'root'. */ -const radioGroupBehavior: Accessibility = (props: any) => ({ +const radioGroupBehavior: Accessibility = () => ({ attributes: { root: { role: 'radiogroup', diff --git a/packages/react/src/lib/accessibility/Behaviors/Radio/radioGroupItemBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Radio/radioGroupItemBehavior.ts index d5a6094c85..c6d5ca93bc 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Radio/radioGroupItemBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Radio/radioGroupItemBehavior.ts @@ -1,5 +1,4 @@ import { Accessibility } from '../../types' -import * as _ from 'lodash' /** * @specification @@ -8,17 +7,22 @@ import * as _ from 'lodash' * Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component. * Implements roving tabIndex. */ -const radioGroupItemBehavior: Accessibility = (props: any) => ({ +const radioGroupItemBehavior: Accessibility = props => ({ attributes: { root: { role: 'radio', tabIndex: props.checked ? 0 : -1, 'aria-checked': props.checked, - 'aria-disabled': !_.isNil(props['aria-disabled']) - ? props['aria-disabled'] - : !!props['disabled'], + 'aria-disabled': props.disabled, }, }, }) export default radioGroupItemBehavior + +type RadioGroupItemBehaviorProps = { + /** Indicates if radio item is selected. */ + checked?: boolean + /** Indicates if radio item is disabled. */ + disabled?: boolean +} diff --git a/packages/react/src/lib/accessibility/Behaviors/Status/statusBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Status/statusBehavior.ts index fcf39831c8..1aa0d7e2f9 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Status/statusBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Status/statusBehavior.ts @@ -7,7 +7,7 @@ import { Accessibility } from '../../types' * @specification * Adds role='img'. */ -const statusBehavior: Accessibility = (props: any) => ({ +const statusBehavior: Accessibility = () => ({ attributes: { root: { role: 'img', diff --git a/packages/react/src/lib/accessibility/Behaviors/Tab/tabBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Tab/tabBehavior.ts index 62afdbcb84..5164de15cc 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Tab/tabBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Tab/tabBehavior.ts @@ -1,7 +1,6 @@ -import { Accessibility } from '../../types' +import { Accessibility, AccessibilityAttributes } from '../../types' import * as keyboardKey from 'keyboard-key' import { IS_FOCUSABLE_ATTRIBUTE } from '../../FocusZone/focusUtilities' -import * as _ from 'lodash' /** * @specification @@ -17,7 +16,7 @@ import * as _ from 'lodash' * Adds attribute 'aria-disabled=true' to 'root' component's part based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component. * Triggers 'performClick' action with 'Enter' or 'Spacebar' on 'wrapper'. */ -const tabBehavior: Accessibility = (props: any) => ({ +const tabBehavior: Accessibility = props => ({ attributes: { wrapper: { role: 'presentation', @@ -25,19 +24,13 @@ const tabBehavior: Accessibility = (props: any) => ({ root: { role: 'tab', tabIndex: 0, - 'aria-selected': !_.isNil(props['aria-selected']) - ? props['aria-selected'] - : !!props['active'], + 'aria-selected': !!props.active, 'aria-label': props['aria-label'], 'aria-labelledby': props['aria-labelledby'], 'aria-describedby': props['aria-describedby'], 'aria-controls': props['aria-controls'], - 'aria-disabled': !_.isNil(props['aria-disabled']) - ? props['aria-disabled'] - : !!props['disabled'] - ? true - : undefined, - [IS_FOCUSABLE_ATTRIBUTE]: !props['disabled'], + 'aria-disabled': props['disabled'], + [IS_FOCUSABLE_ATTRIBUTE]: !props.disabled, }, }, @@ -51,3 +44,13 @@ const tabBehavior: Accessibility = (props: any) => ({ }) export default tabBehavior + +type TabBehaviorProps = { + /** Indicates if tab is selected. */ + active?: boolean + /** Indicates if tab is disabled. */ + disabled?: boolean +} & Pick< + AccessibilityAttributes, + 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-controls' +> diff --git a/packages/react/src/lib/accessibility/Behaviors/Tab/tabListBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Tab/tabListBehavior.ts index 9052bfb378..3ed34ec057 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Tab/tabListBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Tab/tabListBehavior.ts @@ -12,7 +12,7 @@ import tabBehavior from './tabBehavior' * Provides arrow key navigation in bidirectional direction. * When component's container element receives focus, focus will be set to the default focusable child element of the component. */ -const tabListBehavior: Accessibility = (props: any) => ({ +const tabListBehavior: Accessibility = () => ({ attributes: { root: { role: 'tablist', diff --git a/packages/react/src/lib/accessibility/Behaviors/Toolbar/menuAsToolbarBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Toolbar/menuAsToolbarBehavior.ts index 20bfe48037..3a89a28956 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Toolbar/menuAsToolbarBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Toolbar/menuAsToolbarBehavior.ts @@ -12,7 +12,7 @@ import menuItemAsToolbarButtonBehavior from './menuItemAsToolbarButtonBehavior' * Provides arrow key navigation in bidirectional direction. * When component's container element receives focus, focus will be set to the default focusable child element of the component. */ -const menuAsToolbarBehavior: Accessibility = (props: any) => ({ +const menuAsToolbarBehavior: Accessibility = () => ({ attributes: { root: { role: 'toolbar', diff --git a/packages/react/src/lib/accessibility/Behaviors/Toolbar/menuItemAsToolbarButtonBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Toolbar/menuItemAsToolbarButtonBehavior.ts index 42fc3b5ea7..40a18fa82d 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Toolbar/menuItemAsToolbarButtonBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Toolbar/menuItemAsToolbarButtonBehavior.ts @@ -1,7 +1,7 @@ import { Accessibility } from '../../types' import { IS_FOCUSABLE_ATTRIBUTE } from '../../FocusZone/focusUtilities' import * as keyboardKey from 'keyboard-key' -import * as _ from 'lodash' +import { MenuItemBehaviorProps } from '../Menu/menuItemBehavior' /** * @description @@ -22,7 +22,7 @@ import * as _ from 'lodash' * Triggers 'openMenu' action with 'ArrowDown' on 'wrapper', when orientation is horizontal. * Triggers 'doNotNavigateNextParentItem' action with 'ArrowLeft' or 'ArrowRight' on 'wrapper', when toolbar button has submenu and it is opened. */ -const menuItemAsToolbarButtonBehavior: Accessibility = (props: any) => ({ +const menuItemAsToolbarButtonBehavior: Accessibility = props => ({ attributes: { wrapper: { role: 'presentation', @@ -31,15 +31,11 @@ const menuItemAsToolbarButtonBehavior: Accessibility = (props: any) => ({ role: 'button', tabIndex: 0, 'aria-haspopup': props.menu ? 'true' : undefined, - 'aria-disabled': !_.isNil(props['aria-disabled']) - ? props['aria-disabled'] - : !!props['disabled'] - ? true - : undefined, + 'aria-disabled': props['disabled'], 'aria-label': props['aria-label'], 'aria-labelledby': props['aria-labelledby'], 'aria-describedby': props['aria-describedby'], - [IS_FOCUSABLE_ATTRIBUTE]: !props['disabled'], + [IS_FOCUSABLE_ATTRIBUTE]: !props.disabled, }, }, diff --git a/packages/react/src/lib/accessibility/Behaviors/Tree/subtreeBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Tree/subtreeBehavior.ts index 9b1a36a052..15e6e59f03 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Tree/subtreeBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Tree/subtreeBehavior.ts @@ -5,7 +5,7 @@ import * as keyboardKey from 'keyboard-key' * @specification * Triggers 'expandSiblings' action with '*' on 'root'. */ -const subtreeBehavior: Accessibility = (props: any) => ({ +const subtreeBehavior: Accessibility = () => ({ attributes: { root: {}, }, diff --git a/packages/react/src/lib/accessibility/Behaviors/Tree/treeBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Tree/treeBehavior.ts index c230a31773..b7f4d32d2a 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Tree/treeBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Tree/treeBehavior.ts @@ -8,8 +8,8 @@ import subtreeBehavior from './subtreeBehavior' * Provides arrow key navigation in vertical direction. * Triggers 'expandSiblings' action with '*' on 'root'. */ -const treeBehavior: Accessibility = (props: any) => { - const subtreeBehaviorData = subtreeBehavior(props) +const treeBehavior: Accessibility = () => { + const subtreeBehaviorData = subtreeBehavior({}) return { attributes: { root: { diff --git a/packages/react/src/lib/accessibility/Behaviors/Tree/treeTitleBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Tree/treeTitleBehavior.ts index 5d108be045..b07b241b08 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Tree/treeTitleBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/Tree/treeTitleBehavior.ts @@ -9,7 +9,7 @@ import { IS_FOCUSABLE_ATTRIBUTE } from '../../FocusZone/focusUtilities' * Triggers 'expand' action with 'ArrowRight' on 'root'. * Triggers 'collapse' action with 'ArrowLeft' on 'root'. */ -const treeTitleBehavior: Accessibility = (props: any) => ({ +const treeTitleBehavior: Accessibility = props => ({ attributes: { root: { ...(props.hasSubtree && { 'aria-expanded': props.open ? 'true' : 'false' }), @@ -34,3 +34,10 @@ const treeTitleBehavior: Accessibility = (props: any) => ({ }) export default treeTitleBehavior + +type TreeTitleBehavior = { + /** Indicated if tree title has a subtree */ + hasSubtree?: boolean + /** If subtree is opened. */ + open?: boolean +} diff --git a/packages/react/src/lib/accessibility/Behaviors/defaultBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/defaultBehavior.ts index 2f56420291..0386e7fcda 100644 --- a/packages/react/src/lib/accessibility/Behaviors/defaultBehavior.ts +++ b/packages/react/src/lib/accessibility/Behaviors/defaultBehavior.ts @@ -1,6 +1,6 @@ import { Accessibility } from '../types' -const defaultBehavior: Accessibility = (props: any) => ({ +const defaultBehavior: Accessibility = () => ({ attributes: { root: {}, }, diff --git a/packages/react/test/specs/behaviors/testDefinitions.ts b/packages/react/test/specs/behaviors/testDefinitions.ts index 31c0e59b1c..2de9a1b8d1 100644 --- a/packages/react/test/specs/behaviors/testDefinitions.ts +++ b/packages/react/test/specs/behaviors/testDefinitions.ts @@ -144,7 +144,7 @@ definitions.push({ // Example: Adds attribute 'aria-selected=true' to 'anchor' component's part based on the property 'active'. This can be overriden by directly providing 'aria-selected' property to the component. definitions.push({ - regexp: /Adds attribute '([\w-]+)=([\w\d]+)' to '([\w-]+)' component's part based on the property '\w+'\. This can be overriden by providing '([\w-]+)' property directly to the component\./g, + regexp: /Adds attribute '([\w-]+)=([\w\d]+)' to '([\w-]+)' component's part based on the property '([\w-]+)'\. This can be overriden by providing '[\w-]+' property directly to the component\./g, testMethod: (parameters: TestMethod) => { const [ attributeToBeAdded, @@ -166,7 +166,7 @@ definitions.push({ // Example: Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component. definitions.push({ - regexp: /Adds attribute '([\w-]+)=([\w\d]+)' based on the property '\w+'\. This can be overriden by providing '([\w-]+)' property directly to the component\./g, + regexp: /Adds attribute '([\w-]+)=([\w\d]+)' based on the property '([\w-]+)'\. This can be overriden by providing '[\w-]+' property directly to the component\./g, testMethod: (parameters: TestMethod) => { const [attributeToBeAdded, valueOfAttributeToBeAdded, overridingProperty] = parameters.props const propertyWithOverride = {} diff --git a/packages/react/test/specs/components/Button/Button-test.tsx b/packages/react/test/specs/components/Button/Button-test.tsx index 3d6984d589..35cc702dda 100644 --- a/packages/react/test/specs/components/Button/Button-test.tsx +++ b/packages/react/test/specs/components/Button/Button-test.tsx @@ -39,9 +39,9 @@ describe('Button', () => { expect(getRenderedAttribute(renderedComponent, 'aria-disabled', '')).toBe('true') }) - test('is set to false, if disabled attribute is not provided', () => { + test('is set to undefined, if disabled attribute is not provided', () => { const renderedComponent = mountWithProviderAndGetComponent(Button,