Adding AriaLabelingProps to ComboBox, Calendar, RangeCalendar, Tabs, and StatusLight (#3378)

* adding AriaLabelingProps to SpectrumComboBoxPrsop

* adding aria props to more components they were missing from

* moving aria props in Tabs to AriaTabListBase

* fixing an import order error

* moving aria for combobox

* moving aria props to aria types of autocomplete and calendar

* aria added to searchautocomplete via a different PR

* trying something different with SearchAutocomplete, need API review

* missing comma

Co-authored-by: Daniel Lu <[email protected]>

Author: ktabors

packages/@react-types/autocomplete/src/index.d.ts

@@ -10,11 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaSearchFieldProps} from '@react-types/searchfield';
 import {AsyncLoadable, CollectionBase, LoadingState, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared';
 import {Key} from 'react';
 import {MenuTriggerAction} from '@react-types/combobox';
-import {SpectrumSearchFieldProps} from '@react-types/searchfield';
-export interface SearchAutocompleteProps<T> extends CollectionBase<T>, Omit<SpectrumSearchFieldProps, 'onSubmit'> {
+import {ReactElement} from 'react';
+
+export interface SearchAutocompleteProps<T> extends CollectionBase<T>, Omit<AriaSearchFieldProps, 'onSubmit'> {
   /** The list of SearchAutocomplete items (uncontrolled). */
   defaultItems?: Iterable<T>,
   /** The list of SearchAutocomplete items (controlled). */
@@ -32,7 +34,9 @@ export interface SearchAutocompleteProps<T> extends CollectionBase<T>, Omit<Spec
    * @default 'input'
    */
   menuTrigger?: MenuTriggerAction,
-  onSubmit?: (value: string, key: Key | null) => void
+  onSubmit?: (value: string, key: Key | null) => void,
+  /** An icon to display at the start of the input. */
+  icon?: ReactElement
 }
 
 export interface SpectrumSearchAutocompleteProps<T> extends SpectrumTextInputBase, Omit<SearchAutocompleteProps<T>, 'menuTrigger'>, SpectrumLabelableProps, StyleProps, Omit<AsyncLoadable, 'isLoading'> {

packages/@react-types/calendar/src/index.d.ts

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaLabelingProps, DOMProps, RangeValue, StyleProps, ValidationState, ValueBase} from '@react-types/shared';
 import {CalendarDate, CalendarDateTime, ZonedDateTime} from '@internationalized/date';
-import {DOMProps, RangeValue, StyleProps, ValidationState, ValueBase} from '@react-types/shared';
 import {ReactNode} from 'react';
 
 export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;
@@ -56,24 +56,24 @@ export interface CalendarPropsBase {
 }
 
 export type DateRange = RangeValue<DateValue>;
-export interface CalendarProps<T extends DateValue> extends CalendarPropsBase, ValueBase<T, MappedDateValue<T>> {}
-export interface RangeCalendarProps<T extends DateValue> extends CalendarPropsBase, ValueBase<RangeValue<T>, RangeValue<MappedDateValue<T>>> {
+export interface CalendarProps<T extends DateValue> extends CalendarPropsBase, ValueBase<T, MappedDateValue<T>>, DOMProps, AriaLabelingProps {}
+export interface RangeCalendarProps<T extends DateValue> extends CalendarPropsBase, ValueBase<RangeValue<T>, RangeValue<MappedDateValue<T>>>, DOMProps, AriaLabelingProps {
   /**
    * When combined with `isDateUnavailable`, determines whether non-contiguous ranges,
    * i.e. ranges containing unavailable dates, may be selected.
    */
   allowsNonContiguousRanges?: boolean
 }
 
-export interface SpectrumCalendarProps<T extends DateValue> extends CalendarProps<T>, DOMProps, StyleProps {
+export interface SpectrumCalendarProps<T extends DateValue> extends CalendarProps<T>, StyleProps {
   /**
    * The number of months to display at once. Up to 3 months are supported.
    * @default 1
    */
   visibleMonths?: number
 }
 
-export interface SpectrumRangeCalendarProps<T extends DateValue> extends RangeCalendarProps<T>, DOMProps, StyleProps {
+export interface SpectrumRangeCalendarProps<T extends DateValue> extends RangeCalendarProps<T>, StyleProps {
   /**
    * The number of months to display at once. Up to 3 months are supported.
    * @default 1

packages/@react-types/combobox/src/index.d.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AsyncLoadable, CollectionBase, DOMProps, FocusableProps, HelpTextProps, InputBase, LabelableProps, LoadingState, SingleSelection, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps, TextInputBase, Validation} from '@react-types/shared';
+import {AriaLabelingProps, AsyncLoadable, CollectionBase, DOMProps, FocusableProps, HelpTextProps, InputBase, LabelableProps, LoadingState, SingleSelection, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps, TextInputBase, Validation} from '@react-types/shared';
 
 export type MenuTriggerAction = 'focus' | 'input' | 'manual';
 
@@ -45,7 +45,7 @@ export interface ComboBoxProps<T> extends CollectionBase<T>, Omit<SingleSelectio
   name?: string
 }
 
-export interface AriaComboBoxProps<T> extends ComboBoxProps<T>, DOMProps {
+export interface AriaComboBoxProps<T> extends ComboBoxProps<T>, DOMProps, AriaLabelingProps {
   /** Whether keyboard navigation is circular. */
   shouldFocusWrap?: boolean
 }

packages/@react-types/statuslight/src/index.d.ts

@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMProps, StyleProps} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared';
 import {ReactNode} from 'react';
 
-export interface SpectrumStatusLightProps extends DOMProps, StyleProps {
+export interface SpectrumStatusLightProps extends DOMProps, StyleProps, AriaLabelingProps {
   /** The content to display as the label. */
   children?: ReactNode,
   /**

packages/@react-types/tabs/src/index.d.ts

@@ -21,7 +21,7 @@ import {
 } from '@react-types/shared';
 import {Key, ReactNode} from 'react';
 
-export interface AriaTabProps {
+export interface AriaTabProps extends AriaLabelingProps {
   /** The key of the tab. */
   key: Key,
   /** Whether the tab should be disabled. */
@@ -36,7 +36,7 @@ export interface TabListProps<T> extends CollectionBase<T>, Omit<SingleSelection
   isDisabled?: boolean
 }
 
-interface AriaTabListBase {
+interface AriaTabListBase extends AriaLabelingProps {
   /**
    * Whether tabs are activated automatically on focus or manually.
    * @default 'automatic'