fix: add keyboard focus and accessibility support for editor tabs and close buttons (#3957)

Author: lilangtop

packages/editor/src/browser/tab.view.tsx

@@ -37,6 +37,7 @@ import { LayoutViewSizeConfig } from '@opensumi/ide-core-browser/lib/layout/cons
 import { VIEW_CONTAINERS } from '@opensumi/ide-core-browser/lib/layout/view-id';
 import { IMenuRegistry, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
 import { useInjectable, useUpdateOnEventBusEvent } from '@opensumi/ide-core-browser/lib/react-hooks';
+import { formatLocalize } from '@opensumi/ide-core-common';
 
 import {
   IEditorGroup,
@@ -377,7 +378,9 @@ export const Tabs = ({ group }: ITabsProps) => {
       return editorTabService.renderEditorTab(
         <>
           <div className={tabsLoadingMap[resource.uri.toString()] ? 'loading_indicator' : cls(resource.icon)}> </div>
-          <div>{resource.name}</div>
+          <div tabIndex={0} role='tab' aria-selected={isCurrent ? 'true' : 'false'}>
+            {resource.name}
+          </div>
           {subname ? <div className={styles.subname}>{subname}</div> : null}
           {decoration.readOnly ? (
             <span className={cls(getExternalIcon('lock'), styles.editor_readonly_icon)}></span>
@@ -397,7 +400,12 @@ export const Tabs = ({ group }: ITabsProps) => {
               }}
             >
               {editorTabService.renderTabCloseComponent(
-                <div className={cls(getIcon('close'), styles_kt_editor_close_icon)} />,
+                <div
+                  className={cls(getIcon('close'), styles_kt_editor_close_icon)}
+                  tabIndex={0}
+                  role='button'
+                  aria-label={formatLocalize('editor.closeTab.title', resource.name)}
+                />,
               )}
             </div>
           </div>
@@ -418,6 +426,7 @@ export const Tabs = ({ group }: ITabsProps) => {
           [styles_kt_editor_tabs_current_last]: curTabIndex === group.resources.length - 1,
         })}
         ref={contentRef as any}
+        role='tablist'
       >
         {group.resources.map((resource, i) => {
           let ref: HTMLDivElement | null;