Support style props and aria labeling props in ContextualHelp (#2845)

devongovett · web-flow · commit 68d1882d0b98 · 2022-02-11T09:35:17.000-08:00
diff --git a/packages/@react-spectrum/contextualhelp/intl/ar-AE.json b/packages/@react-spectrum/contextualhelp/intl/ar-AE.json
@@ -0,0 +1,4 @@
+{
+  "help": "مساعدة",
+  "info": "معلومات"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/bg-BG.json b/packages/@react-spectrum/contextualhelp/intl/bg-BG.json
@@ -0,0 +1,4 @@
+{
+  "help": "Помощ",
+  "info": "Информация"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/cs-CZ.json b/packages/@react-spectrum/contextualhelp/intl/cs-CZ.json
@@ -0,0 +1,4 @@
+{
+  "help": "Nápověda",
+  "info": "Informace"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/da-DK.json b/packages/@react-spectrum/contextualhelp/intl/da-DK.json
@@ -0,0 +1,4 @@
+{
+  "help": "Hjælp",
+  "info": "Oplysninger"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/de-DE.json b/packages/@react-spectrum/contextualhelp/intl/de-DE.json
@@ -0,0 +1,4 @@
+{
+  "help": "Hilfe",
+  "info": "Informationen"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/el-GR.json b/packages/@react-spectrum/contextualhelp/intl/el-GR.json
@@ -0,0 +1,4 @@
+{
+  "help": "Βοήθεια",
+  "info": "Πληροφορίες"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/en-US.json b/packages/@react-spectrum/contextualhelp/intl/en-US.json
@@ -1,3 +1,4 @@
 {
-  "open": "Open help"
+  "info": "Information",
+  "help": "Help"
 }
diff --git a/packages/@react-spectrum/contextualhelp/intl/es-ES.json b/packages/@react-spectrum/contextualhelp/intl/es-ES.json
@@ -0,0 +1,4 @@
+{
+  "help": "Ayuda",
+  "info": "Información"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/et-EE.json b/packages/@react-spectrum/contextualhelp/intl/et-EE.json
@@ -0,0 +1,4 @@
+{
+  "help": "Spikker",
+  "info": "Teave"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/fi-FI.json b/packages/@react-spectrum/contextualhelp/intl/fi-FI.json
@@ -0,0 +1,4 @@
+{
+  "help": "Ohje",
+  "info": "Tiedot"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/fr-FR.json b/packages/@react-spectrum/contextualhelp/intl/fr-FR.json
@@ -0,0 +1,4 @@
+{
+  "help": "Aide",
+  "info": "Informations"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/he-IL.json b/packages/@react-spectrum/contextualhelp/intl/he-IL.json
@@ -0,0 +1,4 @@
+{
+  "help": "עזרה",
+  "info": "מידע"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/hr-HR.json b/packages/@react-spectrum/contextualhelp/intl/hr-HR.json
@@ -0,0 +1,4 @@
+{
+  "help": "Pomoć",
+  "info": "Informacije"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/hu-HU.json b/packages/@react-spectrum/contextualhelp/intl/hu-HU.json
@@ -0,0 +1,4 @@
+{
+  "help": "Súgó",
+  "info": "Információ"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/it-IT.json b/packages/@react-spectrum/contextualhelp/intl/it-IT.json
@@ -0,0 +1,4 @@
+{
+  "help": "Aiuto",
+  "info": "Informazioni"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/ja-JP.json b/packages/@react-spectrum/contextualhelp/intl/ja-JP.json
@@ -0,0 +1,4 @@
+{
+  "help": "ヘルプ",
+  "info": "情報"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/ko-KR.json b/packages/@react-spectrum/contextualhelp/intl/ko-KR.json
@@ -0,0 +1,4 @@
+{
+  "help": "도움말",
+  "info": "정보"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/lt-LT.json b/packages/@react-spectrum/contextualhelp/intl/lt-LT.json
@@ -0,0 +1,4 @@
+{
+  "help": "Žinynas",
+  "info": "Informacija"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/lv-LV.json b/packages/@react-spectrum/contextualhelp/intl/lv-LV.json
@@ -0,0 +1,4 @@
+{
+  "help": "Palīdzība",
+  "info": "Informācija"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/nb-NO.json b/packages/@react-spectrum/contextualhelp/intl/nb-NO.json
@@ -0,0 +1,4 @@
+{
+  "help": "Hjelp",
+  "info": "Informasjon"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/nl-NL.json b/packages/@react-spectrum/contextualhelp/intl/nl-NL.json
@@ -0,0 +1,4 @@
+{
+  "help": "Help",
+  "info": "Informatie"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/pl-PL.json b/packages/@react-spectrum/contextualhelp/intl/pl-PL.json
@@ -0,0 +1,4 @@
+{
+  "help": "Pomoc",
+  "info": "Informacja"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/pt-BR.json b/packages/@react-spectrum/contextualhelp/intl/pt-BR.json
@@ -0,0 +1,4 @@
+{
+  "help": "Ajuda",
+  "info": "Informações"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/pt-PT.json b/packages/@react-spectrum/contextualhelp/intl/pt-PT.json
@@ -0,0 +1,4 @@
+{
+  "help": "Ajuda",
+  "info": "Informação"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/ro-RO.json b/packages/@react-spectrum/contextualhelp/intl/ro-RO.json
@@ -0,0 +1,4 @@
+{
+  "help": "Ajutor",
+  "info": "Informaţii"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/ru-RU.json b/packages/@react-spectrum/contextualhelp/intl/ru-RU.json
@@ -0,0 +1,4 @@
+{
+  "help": "Справка",
+  "info": "Информация"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/sk-SK.json b/packages/@react-spectrum/contextualhelp/intl/sk-SK.json
@@ -0,0 +1,4 @@
+{
+  "help": "Pomoc",
+  "info": "Informácie"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/sl-SI.json b/packages/@react-spectrum/contextualhelp/intl/sl-SI.json
@@ -0,0 +1,4 @@
+{
+  "help": "Pomoč",
+  "info": "Informacije"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/sr-SP.json b/packages/@react-spectrum/contextualhelp/intl/sr-SP.json
@@ -0,0 +1,4 @@
+{
+  "help": "Pomoć",
+  "info": "Informacije"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/sv-SE.json b/packages/@react-spectrum/contextualhelp/intl/sv-SE.json
@@ -0,0 +1,4 @@
+{
+  "help": "Hjälp",
+  "info": "Information"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/tr-TR.json b/packages/@react-spectrum/contextualhelp/intl/tr-TR.json
@@ -0,0 +1,4 @@
+{
+  "help": "Yardım",
+  "info": "Bilgiler"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/uk-UA.json b/packages/@react-spectrum/contextualhelp/intl/uk-UA.json
@@ -0,0 +1,4 @@
+{
+  "help": "Довідка",
+  "info": "Інформація"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/zh-CN.json b/packages/@react-spectrum/contextualhelp/intl/zh-CN.json
@@ -0,0 +1,4 @@
+{
+  "help": "帮助",
+  "info": "信息"
+}
diff --git a/packages/@react-spectrum/contextualhelp/intl/zh-TW.json b/packages/@react-spectrum/contextualhelp/intl/zh-TW.json
@@ -0,0 +1,4 @@
+{
+  "help": "說明",
+  "info": "資訊"
+}
diff --git a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx
@@ -40,13 +40,19 @@ function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef<HT
     footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}
   };
 
+  let ariaLabel = otherProps['aria-label'];
+  if (!ariaLabel && !otherProps['aria-labelledby']) {
+    ariaLabel = formatMessage(variant);
+  }
+
   return (
-    <DialogTrigger type="popover" placement={placement} hideArrow {...otherProps}>
+    <DialogTrigger {...otherProps} type="popover" placement={placement} hideArrow>
       <ActionButton
+        {...otherProps}
         ref={ref}
         UNSAFE_className={helpStyles['react-spectrum-ContextualHelp-button']}
         isQuiet
-        aria-label={formatMessage('open')}>
+        aria-label={ariaLabel}>
         {icon}
       </ActionButton>
       <SlotProvider slots={slots}>
diff --git a/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx b/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx
@@ -33,7 +33,7 @@ storiesOf('ContextualHelp', module)
   'with button',
   () => (<Flex alignItems="center">
     <Button variant="primary" isDisabled>Create</Button>
-    <ContextualHelp>
+    <ContextualHelp marginStart="size-100">
       <Heading>Help title</Heading>
       <Content>{helpText()}</Content>
     </ContextualHelp>
diff --git a/packages/@react-spectrum/contextualhelp/test/ContextualHelp.test.js b/packages/@react-spectrum/contextualhelp/test/ContextualHelp.test.js
@@ -127,4 +127,61 @@ describe('ContextualHelp', function () {
     expect(content).toBeVisible();
     expect(content.parentElement).toHaveClass('react-spectrum-ContextualHelp-footer');
   });
+
+  it('includes a default aria-label', function () {
+    let {getByRole} = render(
+      <Provider theme={theme}>
+        <ContextualHelp>
+          <Header>Test title</Header>
+          <Content>Help content</Content>
+        </ContextualHelp>
+      </Provider>
+    );
+
+    let button = getByRole('button');
+    expect(button).toHaveAttribute('aria-label', 'Help');
+  });
+
+  it('includes a default aria-label for info variant', function () {
+    let {getByRole} = render(
+      <Provider theme={theme}>
+        <ContextualHelp variant="info">
+          <Header>Test title</Header>
+          <Content>Help content</Content>
+        </ContextualHelp>
+      </Provider>
+    );
+
+    let button = getByRole('button');
+    expect(button).toHaveAttribute('aria-label', 'Information');
+  });
+
+  it('supports a custom aria-label', function () {
+    let {getByRole} = render(
+      <Provider theme={theme}>
+        <ContextualHelp aria-label="test">
+          <Header>Test title</Header>
+          <Content>Help content</Content>
+        </ContextualHelp>
+      </Provider>
+    );
+
+    let button = getByRole('button');
+    expect(button).toHaveAttribute('aria-label', 'test');
+  });
+
+  it('supports a custom aria-labelledby', function () {
+    let {getByRole} = render(
+      <Provider theme={theme}>
+        <ContextualHelp aria-labelledby="test">
+          <Header>Test title</Header>
+          <Content>Help content</Content>
+        </ContextualHelp>
+      </Provider>
+    );
+
+    let button = getByRole('button');
+    expect(button).not.toHaveAttribute('aria-label');
+    expect(button).toHaveAttribute('aria-labelledby', 'test');
+  });
 });
diff --git a/packages/@react-types/contextualhelp/src/index.d.ts b/packages/@react-types/contextualhelp/src/index.d.ts
@@ -10,13 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared';
 import {OverlayTriggerProps, Placement, PositionProps} from '@react-types/overlays';
 import {ReactNode} from 'react';
 
-export interface SpectrumContextualHelpProps extends OverlayTriggerProps, PositionProps {
-  /**
-   * Contents of the Contextual Help popover.
-   */
+export interface SpectrumContextualHelpProps extends OverlayTriggerProps, PositionProps, StyleProps, DOMProps, AriaLabelingProps {
+  /** Contents of the Contextual Help popover. */
   children: ReactNode,
   /**
    * Indicates whether contents are informative or provides helpful guidance.

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "help": "مساعدة",
 +  "info": "معلومات"
 +}
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "open": "Open help"`
	`2`	`+ "info": "Information",`
	`3`	`+ "help": "Help"`
`3`	`4`	`}`