feat(Tooltip): Add label behavior for Tooltip

CHANGELOG.md

@@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Split action handlers with "OR" condition in accessibility behaviors @sophieH29 ([#1622](https://github.com/stardust-ui/react/pull/1622))
 - Add `headerAction` slot to the `Dialog` component @mnajdova ([#1617](https://github.com/stardust-ui/react/pull/1617))
 - Add `Slider` component @Bugaa92 ([#1559](https://github.com/stardust-ui/react/pull/1559))
+- Add `tooltipAsLabelBehavior` accessibility behavior for `Tooltip` @sophieH29 ([#1635](https://github.com/stardust-ui/react/pull/1635))
 
 ### Fixes
 - Fix `ChatMessage`'s focus border overlays `actionMenu` in Teams theme @mnajdova ([#1637](https://github.com/stardust-ui/react/pull/1637))

docs/src/examples/components/Tooltip/BestPractices/TooltipBestPractices.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+import ComponentBestPractices from 'docs/src/components/ComponentBestPractices'
+
+const doList = [
+  'Use `tooltipAsLabelBehavior` if adding tooltip to icon-only button or to another visual-only element without any text, title or label.',
+]
+
+const DropdownBestPractices: React.FunctionComponent<{}> = () => {
+  return <ComponentBestPractices doList={doList} />
+}
+
+export default DropdownBestPractices

docs/src/examples/components/Tooltip/BestPractices/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+import TooltipBestPractices from '././TooltipBestPractices'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const BestPractices = () => (
+  <ExampleSection title="Best Practices">
+    <TooltipBestPractices />
+  </ExampleSection>
+)
+
+export default BestPractices

docs/src/examples/components/Tooltip/index.tsx

@@ -5,9 +5,11 @@ import Types from './Types'
 import Variations from './Variations'
 import Usage from './Usage'
 import States from './States'
+import BestPractices from './BestPractices'
 
 const TooltipExamples = () => (
   <>
+    <BestPractices />
     <Types />
     <Variations />
     <States />

packages/react/src/components/Tooltip/Tooltip.tsx

@@ -48,6 +48,8 @@ export interface TooltipProps
     BasicPositioningProps {
   /**
    * Accessibility behavior if overridden by the user.
+   * @default tooltipBehavior
+   * @available tooltipAsLabelBehavior
    * */
   accessibility?: Accessibility
 

packages/react/src/lib/accessibility/Behaviors/Tooltip/tooltipAsLabelBehavior.ts

@@ -0,0 +1,39 @@
+import { Accessibility } from '../../types'
+import tooltipBehavior, { TooltipBehaviorProps } from './tooltipBehavior'
+
+/**
+ * @specification
+ * Adds attribute 'role=tooltip' to 'tooltip' slot.
+ * Adds attribute 'aria-hidden=false' to 'tooltip' slot if 'open' property is true. Sets the attribute to 'true' otherwise.
+ * Adds attribute 'aria-labelledby' based on the property 'aria-labelledby' to 'trigger' slot.
+ * Triggers 'close' action with 'Escape' on 'trigger'.
+ */
+const tooltipAsLabelBehavior: Accessibility<TooltipBehaviorProps> = props => {
+  const behaviorData = tooltipBehavior(props)
+  const defaultAriaLabeledBy = getDefaultAriaLabelledBy(props)
+
+  behaviorData.attributes = {
+    trigger: {
+      'aria-labelledby': defaultAriaLabeledBy || props['aria-labelledby'],
+    },
+    tooltip: {
+      ...behaviorData.attributes.tooltip,
+      id: defaultAriaLabeledBy,
+    },
+  }
+
+  return behaviorData
+}
+
+export default tooltipAsLabelBehavior
+
+/**
+ * Returns the element id of the tooltip, it is used when user does not provide aria-label or
+ * aria-labelledby as props.
+ */
+const getDefaultAriaLabelledBy = (props: TooltipBehaviorProps) => {
+  if (props['aria-label'] || props['aria-labelledby']) {
+    return undefined
+  }
+  return props.contentId
+}

packages/react/src/lib/accessibility/index.ts

@@ -47,4 +47,5 @@ export { default as accordionTitleBehavior } from './Behaviors/Accordion/accordi
 export { default as accordionContentBehavior } from './Behaviors/Accordion/accordionContentBehavior'
 export { default as checkboxBehavior } from './Behaviors/Checkbox/checkboxBehavior'
 export { default as tooltipBehavior } from './Behaviors/Tooltip/tooltipBehavior'
+export { default as tooltipAsLabelBehavior } from './Behaviors/Tooltip/tooltipAsLabelBehavior'
 export { default as sliderBehavior } from './Behaviors/Slider/sliderBehavior'

packages/react/test/specs/behaviors/behavior-test.tsx

@@ -48,6 +48,7 @@ import {
   toolbarRadioGroupBehavior,
   toolbarRadioGroupItemBehavior,
   tooltipBehavior,
+  tooltipAsLabelBehavior,
 } from 'src/lib/accessibility'
 import { TestHelper } from './testHelper'
 import definitions from './testDefinitions'
@@ -100,5 +101,6 @@ testHelper.addBehavior('toolbarItemBehavior', toolbarItemBehavior)
 testHelper.addBehavior('toolbarRadioGroupBehavior', toolbarRadioGroupBehavior)
 testHelper.addBehavior('toolbarRadioGroupItemBehavior', toolbarRadioGroupItemBehavior)
 testHelper.addBehavior('tooltipBehavior', tooltipBehavior)
+testHelper.addBehavior('tooltipAsLabelBehavior', tooltipAsLabelBehavior)
 
 testHelper.run(behaviorMenuItems)