fix: make TabButton close button aria compliant as a button

Make the close button on TabButton a button instead of a div. It looks identical
and is aria compliant as a button, supporting screen readers and keyboard
navigation with tab to select and enter or space to click. Note that a event
handler for onCloseKeyDown was added to stop event propagation when pressing
enter or space, so that the button's normal onClick logic is called, and the
keyboard event does not propagate to the TabButton keyboard event handler.

Allows using the keyboard to select the tab close button by pressing the Tab key
to switch between elements on the page, and then pressing "enter" or space " "
to select the highlighted button.

Signed-off-by: Christian Stewart <[email protected]>

Author: paralin

src/view/TabButton.tsx

@@ -90,7 +90,8 @@ export const TabButton = (props: ITabButtonProps) => {
         return false;
     };
 
-    const onClose = (event: React.MouseEvent<HTMLElement>) => {
+    const onClose = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
         if (isClosable()) {
             layout.doAction(Actions.deleteTab(node.getId()));
         } else {
@@ -102,6 +103,10 @@ export const TabButton = (props: ITabButtonProps) => {
         event.stopPropagation();
     };
 
+    const onCloseKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+    };
+
     const onTextBoxPointerDown = (event: React.PointerEvent<HTMLInputElement>) => {
         event.stopPropagation();
     };
@@ -161,9 +166,17 @@ export const TabButton = (props: ITabButtonProps) => {
     if (node.isEnableClose() && !isStretch) {
         const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
         renderState.buttons.push(
-            <div key="close" data-layout-path={path + "/button/close"} title={closeTitle} className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING)} onPointerDown={onClosePointerDown} onClick={onClose}>
+            <button
+                key="close"
+                data-layout-path={path + "/button/close"}
+                title={closeTitle}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING)}
+                onPointerDown={onClosePointerDown}
+                onClick={onClose}
+                onKeyDown={onCloseKeyDown}
+            >
                 {typeof icons.close === "function" ? icons.close(node) : icons.close}
-            </div>,
+            </button>,
         );
     }