🤖 Merge PR DefinitelyTyped#72166 [react] Backport DefinitelyTyped#63076 and DefinitelyTyped#65621 to v17 by @awx-doma-lei

Author: awx-doma-lei

types/react/v17/index.d.ts

@@ -1591,6 +1591,16 @@ declare namespace React {
          * presented if they are made.
          */
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        /**
+         * Defines a string value that labels the current element, which is intended to be converted into Braille.
+         * @see aria-label.
+         */
+        "aria-braillelabel"?: string | undefined;
+        /**
+         * Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
+         * @see aria-roledescription.
+         */
+        "aria-brailleroledescription"?: string | undefined;
         /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
         "aria-busy"?: Booleanish | undefined;
         /**
@@ -1608,6 +1618,11 @@ declare namespace React {
          * @see aria-colcount @see aria-colspan.
          */
         "aria-colindex"?: number | undefined;
+        /**
+         * Defines a human readable text alternative of aria-colindex.
+         * @see aria-rowindextext.
+         */
+        "aria-colindextext"?: string | undefined;
         /**
          * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
          * @see aria-colindex @see aria-rowspan.
@@ -1625,6 +1640,11 @@ declare namespace React {
          * @see aria-labelledby
          */
         "aria-describedby"?: string | undefined;
+        /**
+         * Defines a string value that describes or annotates the current element.
+         * @see related aria-describedby.
+         */
+        "aria-description"?: string | undefined;
         /**
          * Identifies the element that provides a detailed, extended description for the object.
          * @see aria-describedby.
@@ -1749,6 +1769,11 @@ declare namespace React {
          * @see aria-rowcount @see aria-rowspan.
          */
         "aria-rowindex"?: number | undefined;
+        /**
+         * Defines a human readable text alternative of aria-rowindex.
+         * @see aria-colindextext.
+         */
+        "aria-rowindextext"?: string | undefined;
         /**
          * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
          * @see aria-rowindex @see aria-colspan.
@@ -2503,6 +2528,9 @@ declare namespace React {
         width?: number | string | undefined;
         disablePictureInPicture?: boolean | undefined;
         disableRemotePlayback?: boolean | undefined;
+
+        onResize?: ReactEventHandler<T> | undefined;
+        onResizeCapture?: ReactEventHandler<T> | undefined;
     }
 
     // this list is "complete" in that it contains every SVG attribute

types/react/v17/test/elementAttributes.tsx

@@ -40,7 +40,7 @@ const testCases = [
     <svg>
         <image crossOrigin="anonymous" />
     </svg>,
-    <details open={true} onToggle={() => {}} name="foo" />,
+    <details open={true} onToggle={() => { }} name="foo" />,
     <input value={["one", "two"] as readonly string[]} />,
     <input value={["one", "two"] as string[]} />,
     <input value={["one", "two"]} />,
@@ -124,4 +124,13 @@ const eventCallbacksTestCases = [
     <meter onClick={e => e.currentTarget.optimum} />,
     <output onClick={e => e.currentTarget.value} />,
     <time onClick={e => e.currentTarget.dateTime} />,
+    <video onResize={e => e.currentTarget} onResizeCapture={e => e.currentTarget} />
 ];
+
+const ariaAttributesTestCases = [
+    <a aria-braillelabel="a" />,
+    <a aria-brailleroledescription="a" />,
+    <a aria-colindextext="a" />,
+    <a aria-rowindextext="a" />,
+    <a aria-description="a" />,
+]