Improve AccessibleButton & related types (#12075)

* Fix wrong type enum usage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Use improved type definition for forwardRef which enables Generic props

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve AccessibleButton & related Props types

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove useless comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/accessibility/context_menu/ContextMenuButton.tsx

@@ -16,25 +16,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ComponentProps } from "react";
 
 import AccessibleButton from "../../components/views/elements/AccessibleButton";
 
-interface IProps extends React.ComponentProps<typeof AccessibleButton> {
+type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof AccessibleButton<T>> & {
     label?: string;
-    // whether or not the context menu is currently open
+    // whether the context menu is currently open
     isExpanded: boolean;
-}
+};
 
 // Semantic component for representing the AccessibleButton which launches a <ContextMenu />
-export const ContextMenuButton: React.FC<IProps> = ({
+export const ContextMenuButton = <T extends keyof JSX.IntrinsicElements>({
     label,
     isExpanded,
     children,
     onClick,
     onContextMenu,
     ...props
-}) => {
+}: Props<T>): JSX.Element => {
     return (
         <AccessibleButton
             {...props}

src/accessibility/context_menu/ContextMenuTooltipButton.tsx

@@ -16,23 +16,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ComponentProps } from "react";
 
 import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
 
-interface IProps extends React.ComponentProps<typeof AccessibleTooltipButton> {
-    // whether or not the context menu is currently open
+type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof AccessibleTooltipButton<T>> & {
+    // whether the context menu is currently open
     isExpanded: boolean;
-}
+};
 
 // Semantic component for representing the AccessibleButton which launches a <ContextMenu />
-export const ContextMenuTooltipButton: React.FC<IProps> = ({
+export const ContextMenuTooltipButton = <T extends keyof JSX.IntrinsicElements>({
     isExpanded,
     children,
     onClick,
     onContextMenu,
     ...props
-}) => {
+}: Props<T>): JSX.Element => {
     return (
         <AccessibleTooltipButton
             {...props}

src/accessibility/roving/RovingAccessibleButton.tsx

@@ -14,25 +14,28 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ComponentProps } from "react";
 
 import AccessibleButton from "../../components/views/elements/AccessibleButton";
 import { useRovingTabIndex } from "../RovingTabIndex";
 import { Ref } from "./types";
 
-interface IProps extends Omit<React.ComponentProps<typeof AccessibleButton>, "inputRef" | "tabIndex"> {
+type Props<T extends keyof JSX.IntrinsicElements> = Omit<
+    ComponentProps<typeof AccessibleButton<T>>,
+    "inputRef" | "tabIndex"
+> & {
     inputRef?: Ref;
     focusOnMouseOver?: boolean;
-}
+};
 
 // Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components.
-export const RovingAccessibleButton: React.FC<IProps> = ({
+export const RovingAccessibleButton = <T extends keyof JSX.IntrinsicElements>({
     inputRef,
     onFocus,
     onMouseOver,
     focusOnMouseOver,
     ...props
-}) => {
+}: Props<T>): JSX.Element => {
     const [onFocusInternal, isActive, ref] = useRovingTabIndex(inputRef);
     return (
         <AccessibleButton

src/accessibility/roving/RovingAccessibleTooltipButton.tsx

@@ -14,19 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ComponentProps } from "react";
 
 import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
 import { useRovingTabIndex } from "../RovingTabIndex";
 import { Ref } from "./types";
 
-type ATBProps = React.ComponentProps<typeof AccessibleTooltipButton>;
-interface IProps extends Omit<ATBProps, "inputRef" | "tabIndex"> {
+type Props<T extends keyof JSX.IntrinsicElements> = Omit<
+    ComponentProps<typeof AccessibleTooltipButton<T>>,
+    "tabIndex"
+> & {
     inputRef?: Ref;
-}
+};
 
 // Wrapper to allow use of useRovingTabIndex for simple AccessibleTooltipButtons outside of React Functional Components.
-export const RovingAccessibleTooltipButton: React.FC<IProps> = ({ inputRef, onFocus, ...props }) => {
+export const RovingAccessibleTooltipButton = <T extends keyof JSX.IntrinsicElements>({
+    inputRef,
+    onFocus,
+    ...props
+}: Props<T>): JSX.Element => {
     const [onFocusInternal, isActive, ref] = useRovingTabIndex(inputRef);
     return (
         <AccessibleTooltipButton