review comments

Author: snowystinger

packages/@react-spectrum/s2/intl/en-US.json

@@ -20,6 +20,7 @@
   "table.sortAscending": "Sort Ascending",
   "table.sortDescending": "Sort Descending",
   "table.resizeColumn": "Resize column",
+  "tabs.selectorLabel": "Tab selector",
   "tag.showAllButtonLabel": "Show all ({tagCount, number})",
   "tag.hideButtonLabel": "Show less",
   "tag.actions": "Actions",

packages/@react-spectrum/s2/src/Tabs.tsx

@@ -32,12 +32,15 @@ import {createContext, forwardRef, Fragment, ReactNode, useCallback, useContext,
 import {focusRing, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {Picker, PickerItem} from './TabsPicker';
 import {Text, TextContext} from './Content';
 import {useControlledState} from '@react-stately/utils';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useEffectEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'children'>, UnsafeStyles {
@@ -454,6 +457,7 @@ let HiddenTabs = function (props: {
 };
 
 let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']}) => {
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {items} = props;
   let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys} = useContext(InternalTabsContext);
   let state = useContext(TabListStateContext);
@@ -480,7 +484,7 @@ let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['o
           disabledKeys={disabledKeys}
           selectedKey={selectedKey}
           onSelectionChange={onSelectionChange}
-          aria-label={'Tab selector'}>
+          aria-label={stringFormatter.format('tabs.selectorLabel')}>
           {(item: Node<any>) => {
             // need to determine the best way to handle icon only -> icon and text
             // good enough to aria-label the picker item?

packages/@react-spectrum/s2/src/TabsPicker.tsx

@@ -46,7 +46,7 @@ import {fieldInput, StyleProps} from './style-utils' with {type: 'macro'};
 import {
   FieldLabel
 } from './Field';
-import {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue, SpectrumLabelableProps} from '@react-types/shared';
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon';
@@ -77,7 +77,6 @@ export interface PickerProps<T extends object> extends
   PickerStyleProps,
   StyleProps,
   SpectrumLabelableProps,
-  HelpTextProps,
   Pick<ListBoxProps<T>, 'items'>,
   Pick<AriaPopoverProps, 'shouldFlip'> {
     /** The contents of the collection. */
@@ -96,6 +95,7 @@ export interface PickerProps<T extends object> extends
     align?: 'start' | 'end',
     /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */
     menuWidth?: number,
+    /** Density of the tabs, affects the height of the picker. */
     density: 'compact' | 'regular'
 }