Typescript definitions: make aria-* props optional (#2774)

Co-authored-by: Stephen James <[email protected]>

Author: rthadr

components/checkbox.d.ts

@@ -7,23 +7,23 @@ declare module '@salesforce/design-system-react/components/checkbox' {
      * another region of the page. An example would be a select box
      * that shows or hides a panel.
      */
-    'aria-controls': string;
+    'aria-controls'?: string;
     /**
      * The `aria-describedby` attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need.
      */
-    'aria-describedby': string;
+    'aria-describedby'?: string;
     /**
      * The aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion.
      */
-    'aria-labelledby': string;
+    'aria-labelledby'?: string;
     /**
      * `aria-owns` indicate that an element depends on the current one when the relation can't be determined by the hierarchy structure.
      */
-    'aria-owns': string;
+    'aria-owns'?: string;
     /**
      * The `aria-required` attribute is used to indicate that user input is required on an element before a form can be submitted.
      */
-    'aria-required': boolean;
+    'aria-required'?: boolean;
     /**
      * **Assistive text for accessibility**
      * This object is merged with the default props object on every render.

components/combobox/combobox.d.ts

@@ -24,9 +24,9 @@ declare module '@salesforce/design-system-react/components/combobox/combobox' {
 		}>;
 		/**
 		 * The `aria-describedby` attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them.
-		 * This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need. _Tested with snapshot testing._
+		 * This is very similar to aria-labelledby?: a label describes the essence of an object, while a description provides more information that the user might need. _Tested with snapshot testing._
 		 */
-		'aria-describedby': string;
+		'aria-describedby'?: string;
 		/**
 		 * CSS classes to be added to tag with `.slds-combobox`. Uses `classNames` [API](https://github.com/JedWatson/classnames). _Tested with snapshot testing._
 		 */

components/input/private/inner-input.d.ts

@@ -1,27 +1,27 @@
 declare module '@salesforce/design-system-react/components/input/private/inner-input' {
 	import React from 'react';
 	type Props = {
-		'aria-activedescendant': string;
-		'aria-autocomplete': string;
+		'aria-activedescendant'?: string;
+		'aria-autocomplete'?: string;
 		/**
 		 * An HTML ID that is shared with ARIA-supported devices with the
 		 * `aria-controls` attribute in order to relate the input with
 		 * another region of the page. An example would be a select box
 		 * that shows or hides a panel.
 		 */
-		'aria-controls': string;
-		'aria-describedby': string;
-		'aria-expanded': boolean;
-		'aria-haspopup': boolean | string;
-		'aria-labelledby': string;
+		'aria-controls'?: string;
+		'aria-describedby'?: string;
+		'aria-expanded'?: boolean;
+		'aria-haspopup'?: boolean | string;
+		'aria-labelledby'?: string;
 		/**
 		 * An HTML ID that is shared with ARIA-supported devices with the
 		 * `aria-controls` attribute in order to relate the input with
 		 * another region of the page. An example would be a search field
 		 * that shows search results.
 		 */
-		'aria-owns': string;
-		'aria-required': boolean;
+		'aria-owns'?: string;
+		'aria-required'?: boolean;
 		/**
 		 * **Assistive text for accessibility.**
 		 * This object is merged with the default props object on every render.

components/radio.d.ts

@@ -12,11 +12,11 @@ declare module "@salesforce/design-system-react/components/radio" {
     /**
      * The ID of an element that describes this radio input. Often used for error messages.
      */
-    "aria-describedby": string;
+    "aria-describedby"?: string;
     /**
      * The aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion.
      */
-    "aria-labelledby": string;
+    "aria-labelledby"?: string;
     /**
      * This is a controlled component. This radio is checked according to this value.
      */

components/textarea.d.ts

@@ -11,45 +11,45 @@ declare module '@salesforce/design-system-react/components/textarea' {
     /**
      * The aria-activedescendant attribute contains the ID of the currently active child object that is part of a composite widget within the Document Object Model. It makes do with the overhead of having all or more than one child focusable. As the name specifies, it helps in managing the current active child of the composite widget.
      */
-    'aria-activedescendant': string;
+    'aria-activedescendant'?: string;
     /**
      * Indicates if the suggestions in a composite widget are values that complete the current textbox input.
      */
-    'aria-autocomplete': string;
+    'aria-autocomplete'?: string;
     /**
      * An HTML ID that is shared with ARIA-supported devices with the
      * `aria-controls` attribute in order to relate the input with
      * another region of the page. An example would be a select box
      * that shows or hides a panel.
      */
-    'aria-controls': string;
+    'aria-controls'?: string;
     /**
      * The `aria-describedby` attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need.
      */
-    'aria-describedby': string;
+    'aria-describedby'?: string;
     /**
      * Use the `aria-expanded` state to indicate whether regions of the content are collapsible, and to expose whether a region is currently expanded or collapsed.
      */
-    'aria-expanded': boolean;
+    'aria-expanded'?: boolean;
     /**
      * Indicates that the element has a popup context menu or sub-level menu.
      */
-    'aria-haspopup': boolean;
+    'aria-haspopup'?: boolean;
     /**
      * The aria-labelledby attribute contains the element IDs of labels in objects such as input elements, widgets, and groups. The attribute establishes relationships between objects and their labels. Assistive technology, such as screen readers, use this attribute to catalog the objects in a document so that users can navigate between them. Without an element ID, the assistive technology cannot catalog the object.
      */
-    'aria-labelledby': string;
+    'aria-labelledby'?: string;
     /**
      * An HTML ID that is shared with ARIA-supported devices with the
      * `aria-controls` attribute in order to relate the input with
      * another region of the page. An example would be a search field
      * that shows search results.
      */
-    'aria-owns': string;
+    'aria-owns'?: string;
     /**
      * The `aria-required` attribute is used to indicate that user input is required on an element before a form can be submitted.
      */
-    'aria-required': boolean;
+    'aria-required'?: boolean;
     /**
      * Specifies is the textarea should automatically get focus when the page loads. This is typically a poor user experience.
      */

components/utilities/menu-list/item.d.ts

@@ -1,7 +1,7 @@
 declare module '@salesforce/design-system-react/components/utilities/menu-list/item' {
 	import React from 'react';
 	type Props = {
-		'aria-disabled': boolean;
+		'aria-disabled'?: boolean;
 		className?: any[] | Record<string, any> | string;
 		checkmark?: boolean;
 		data?: Record<string, any>;