chore(web): improve accessibility in feature's component (#1585)

mkumbobeaty · web-flow · commit 1e15dcc0abc0 · 2025-04-24T13:23:32.000+03:00
diff --git a/web/src/beta/features/AccountSetting/index.tsx b/web/src/beta/features/AccountSetting/index.tsx
@@ -51,7 +51,7 @@ const AccountSetting: FC = () => {
   return (
     <>
       <SettingBase tabs={tabs} tab={"account"}>
-        <InnerPage wide>
+        <InnerPage data-testid="inner-page" wide>
           <SettingsWrapper>
             <TitleWrapper size="body" weight="bold">
               {t("Account")}
diff --git a/web/src/beta/features/CursorStatus/index.tsx b/web/src/beta/features/CursorStatus/index.tsx
@@ -46,7 +46,7 @@ const CursorStatus: FC = () => {
     enabled &&
     inView && (
       <Wrapper left={mousePosition.x + offsetX} top={mousePosition.y + offsetY}>
-        <Loader />
+        <Loader data-testid="loader" />
       </Wrapper>
     )
   );
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/RecycleBin/items/RecycleBinItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/RecycleBin/items/RecycleBinItem.tsx
@@ -47,7 +47,7 @@ const RecycleBinItem: FC<Prop> = ({
   ];
 
   return (
-    <Card>
+    <Card data-testid={`recycle-bin-item-${project?.id}`}>
       <CardImage
         backgroundImage={project?.imageUrl ?? defaultProjectBackgroundImage}
         isHovered={isHovered ?? false}
diff --git a/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx b/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx
@@ -36,7 +36,7 @@ const LeftSidePanel: FC<Props> = ({
   onWorkspaceChange
 }) => {
   return (
-    <SidebarWrapper>
+    <SidebarWrapper data-testid="left-side-panel">
       <SidebarMainSection>
         <LogoWrapper />
         <SidebarDivider />
@@ -57,6 +57,7 @@ const LeftSidePanel: FC<Props> = ({
               icon={tab.icon}
               active={tab.id === currentTab}
               disabled={tab.disabled}
+              data-testid={`sidebar-tab-${tab.id}`}
               tileComponent={tab.tileComponent}
             />
           ))}
@@ -76,6 +77,7 @@ const LeftSidePanel: FC<Props> = ({
               icon={tab.icon}
               active={tab.id === currentTab}
               disabled={tab.disabled}
+              data-testid={`sidebar-tab-${tab.id}`}
               tileComponent={tab.tileComponent}
             />
           ))}
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/DataSource/SketchCustomProperties/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/DataSource/SketchCustomProperties/index.tsx
@@ -62,6 +62,7 @@ const CustomPropertiesSchema: FC<Props> = ({
           {sortedValues?.map(({ key, value }) => (
             <CustomPropertyFieldItem
               key={key}
+              data-testid={`custom-property-field-${key}`}
               title={key}
               icon={getIcon(value)}
               openCustomPropertySchema={() => handleEditField(key, value)}
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx
@@ -36,6 +36,7 @@ const InspectorPanel: FC<Props> = ({ areaRef, showCollapseArea }) => {
   return (
     <Panel
       title={t("Inspector")}
+      dataTestid="editor-map-inspector-panel"
       storageId="editor-map-inspector-panel"
       extend
       alwaysOpen
diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx
@@ -58,6 +58,7 @@ const StylesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
       showCollapseArea={showCollapseArea}
       areaRef={areaRef}
       noPadding
+      dataTestid="editor-map-scene-panel"
     >
       <LayerStyleManager onClick={() => handleSelectLayerStyle(undefined)}>
         <ActionsWrapper>
diff --git a/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx b/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx
@@ -185,6 +185,7 @@ const LayerItem: FC<LayerItemProps> = ({
         optionsMenu={optionsMenu}
         optionsMenuWidth={150}
         actions={hoverActions}
+        dataTestid="layer-item"
       />
       {showDeleteLayerConfirmModal && (
         <ConfirmModal
diff --git a/web/src/beta/features/Editor/Map/LayersPanel/index.tsx b/web/src/beta/features/Editor/Map/LayersPanel/index.tsx
@@ -82,7 +82,12 @@ const LayersPanel: FC = () => {
   );
 
   return (
-    <Panel title={t("Layers")} storageId="editor-map-layers-panel" extend>
+    <Panel
+      dataTestid="editor-map-layers-panel"
+      title={t("Layers")}
+      storageId="editor-map-layers-panel"
+      extend
+    >
       <Wrapper>
         <PopupMenu
           label={
@@ -105,9 +110,8 @@ const LayersPanel: FC = () => {
             onMoveStart={handleMoveStart}
             dragDisabled={false}
           />
-          <EmptySpace onClick={() => handleLayerSelect(undefined)} />
+          <EmptySpace data-testid="empty-space" onClick={() => handleLayerSelect(undefined)} />
         </LayersContainer>
-        
       </Wrapper>
     </Panel>
   );
diff --git a/web/src/beta/features/Editor/Map/ScenePanel/index.tsx b/web/src/beta/features/Editor/Map/ScenePanel/index.tsx
@@ -34,7 +34,11 @@ const ScenePanel: FC = () => {
   );
 
   return (
-    <Panel title={t("Scene")} storageId="editor-map-scene-panel">
+    <Panel
+      title={t("Scene")}
+      storageId="editor-map-scene-panel"
+      dataTestid="editor-map-scene-panel"
+    >
       <Wrapper>
         {[
           ...new Set(
@@ -48,6 +52,7 @@ const ScenePanel: FC = () => {
                 title={handleTranslatedCollectionName(
                   collection as ScenePropertyCollection
                 )}
+                dataTestid="editor-map-scene-item"
                 highlighted={selectedSceneSetting === collection}
                 onClick={() => handleSceneSettingSelect(collection)}
               />
diff --git a/web/src/beta/features/Editor/Map/ToolsPanel/index.tsx b/web/src/beta/features/Editor/Map/ToolsPanel/index.tsx
@@ -180,7 +180,11 @@ const ToolsPanel: FC = () => {
   ]);
 
   return (
-    <Panel storageId="editor-map-tools-panel" extend>
+    <Panel
+      dataTestid="editor-map-tools-panel"
+      storageId="editor-map-tools-panel"
+      extend
+    >
       <SketchToolsWrapper>
         <SketchFeatureButtons>
           {sketchTools.map(
diff --git a/web/src/beta/features/Editor/Map/index.tsx b/web/src/beta/features/Editor/Map/index.tsx
@@ -48,6 +48,7 @@ const Map: FC = () => {
           direction="column"
           resizableEdge="right"
           storageId="editor-map-left-area"
+          dataTestid="editor-map-left-area"
           hidden={hideNormalPanels}
         >
           <ScenePanel />
diff --git a/web/src/beta/features/Editor/Publish/PublishToolsPanel/index.tsx b/web/src/beta/features/Editor/Publish/PublishToolsPanel/index.tsx
@@ -33,7 +33,7 @@ const PublishToolsPanel: FC = () => {
   });
 
   return (
-    <Panel extend>
+    <Panel dataTestid="publish-tools-panel" extend>
       <StyledSecondaryNav>
         <LeftSection>
           {publishItems.map((item) => (
diff --git a/web/src/beta/features/Editor/Story/PageSettingsPanel/index.tsx b/web/src/beta/features/Editor/Story/PageSettingsPanel/index.tsx
@@ -35,6 +35,7 @@ const PageSettingsPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
     <Panel
       title={t("Page Settings")}
       storageId="editor-widgets-page-settings-panel"
+      dataTestid="editor-widgets-page-settings-panel"
       extend
       alwaysOpen
       showCollapseArea={showCollapseArea}
diff --git a/web/src/beta/features/Editor/Story/PagesPanel/index.tsx b/web/src/beta/features/Editor/Story/PagesPanel/index.tsx
@@ -74,6 +74,7 @@ const PagesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
       extend
       alwaysOpen
       storageId="editor-story-pages-panel"
+      dataTestid="editor-story-pages-panel"
       showCollapseArea={showCollapseArea}
       areaRef={areaRef}
     >
diff --git a/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/index.tsx b/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/index.tsx
@@ -24,7 +24,12 @@ const ContainerSettingsPanel: FC = () => {
   const t = useT();
 
   return widgetArea ? (
-    <Panel title={t("Container Settings")} alwaysOpen extend>
+    <Panel
+      dataTestid="settings-panel"
+      title={t("Container Settings")}
+      alwaysOpen
+      extend
+    >
       <FieldsWrapper>
         <NumberField
           title={t("Padding top")}
diff --git a/web/src/beta/features/Editor/Widgets/WidgetInspectorPanel/index.tsx b/web/src/beta/features/Editor/Widgets/WidgetInspectorPanel/index.tsx
@@ -17,7 +17,7 @@ const WidgetInspectorPanel: FC = () => {
   const { visibleItems } = useHooks({ sceneId, selectedWidget });
 
   return (
-    <Panel title={t("Inspector")} extend alwaysOpen>
+    <Panel dataTestid="inspector-panel" title={t("Inspector")} extend alwaysOpen>
       {selectedWidget && (
         <Wrapper>
           {visibleItems?.map((i, idx) => (
diff --git a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/index.tsx b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/index.tsx
@@ -34,6 +34,7 @@ const WidgetManagerPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
       storageId="editor-widgets-widget-manager-panel"
       showCollapseArea={showCollapseArea}
       areaRef={areaRef}
+      dataTestid="editor-widgets-widget-manager-panel"
     >
       <Wrapper>
         <ActionArea
diff --git a/web/src/beta/ui/components/EntryItem/index.tsx b/web/src/beta/ui/components/EntryItem/index.tsx
@@ -29,6 +29,7 @@ export interface EntryItemProps {
   optionsMenu?: PopupMenuItem[];
   optionsMenuWidth?: number;
   actions?: EntryItemAction[];
+  dataTestid?: string;
   onClick?: (e: MouseEvent) => void;
 }
 
@@ -41,6 +42,7 @@ export const EntryItem: FC<EntryItemProps> = ({
   optionsMenu,
   optionsMenuWidth,
   actions,
+  dataTestid,
   onClick
 }) => {
   const t = useT();
@@ -74,6 +76,7 @@ export const EntryItem: FC<EntryItemProps> = ({
       hovered={hovered}
       highlight={highlighted}
       smallPaddingRight={!!optionsMenu}
+      data-testid={dataTestid}
     >
       <MainContent
         className={dragHandleClassName}
diff --git a/web/src/beta/ui/components/Sidebar/index.tsx b/web/src/beta/ui/components/Sidebar/index.tsx
@@ -38,6 +38,7 @@ export const SidebarMenuItem: FC<SidebarMenuItemProps> = ({
       active={subItem ? false : active}
       disabled={disabled}
       onClick={subItem ? () => setIsOpen(!isOpen) : onClick}
+      data-testid="sidebar-menu"
     >
       <Info>
         {icon && (
diff --git a/web/src/beta/ui/layout/Area/index.tsx b/web/src/beta/ui/layout/Area/index.tsx
@@ -38,6 +38,7 @@ export type AreaProps = {
   storageId?: string;
   passive?: boolean;
   children?: ReactNode;
+  dataTestid?: string;
   onResize?: (props: AreaSize) => void;
 };
 
@@ -71,6 +72,7 @@ export const Area = forwardRef<AreaRef, AreaProps>(
       storageId,
       passive,
       children,
+      dataTestid,
       onResize
     },
     ref
@@ -320,6 +322,7 @@ export const Area = forwardRef<AreaRef, AreaProps>(
         backgroundColor={backgroundColor}
         asWrapper={asWrapper}
         passive={passive}
+        data-testid={dataTestid}
       >
         {!collapsed && children}
         {resizableEdge && isValidEdge && !collapsed && (
diff --git a/web/src/beta/ui/layout/Panel/index.tsx b/web/src/beta/ui/layout/Panel/index.tsx
@@ -14,6 +14,7 @@ export type PanelProps = {
   background?: "default" | "normal" | string;
   areaRef?: React.RefObject<AreaRef>;
   showCollapseArea?: boolean;
+  dataTestid?: string;
   children?: ReactNode;
 };
 
@@ -27,6 +28,7 @@ export const Panel: FC<PanelProps> = ({
   background = "default",
   areaRef,
   showCollapseArea,
+  dataTestid,
   children
 }) => {
   const theme = useTheme();
@@ -98,7 +100,11 @@ export const Panel: FC<PanelProps> = ({
           {children}
         </Collapse>
       ) : (
-        <ContentWrapper background={backgroundStyle} extend={extend}>
+        <ContentWrapper
+          background={backgroundStyle}
+          extend={extend}
+          data-testid={dataTestid}
+        >
           {children}
         </ContentWrapper>
       )}

Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ const CursorStatus: FC = () => {`
`46`	`46`	`enabled &&`
`47`	`47`	`inView && (`
`48`	`48`	`<Wrapper left={mousePosition.x + offsetX} top={mousePosition.y + offsetY}>`
`49`		`- <Loader />`
	`49`	`+ <Loader data-testid="loader" />`
`50`	`50`	`</Wrapper>`
`51`	`51`	`)`
`52`	`52`	`);`
Original file line number	Diff line number	Diff line change
`@@ -58,6 +58,7 @@ const StylesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {`
`58`	`58`	`showCollapseArea={showCollapseArea}`
`59`	`59`	`areaRef={areaRef}`
`60`	`60`	`noPadding`
	`61`	`+ dataTestid="editor-map-scene-panel"`
`61`	`62`	`>`
`62`	`63`	`<LayerStyleManager onClick={() => handleSelectLayerStyle(undefined)}>`
`63`	`64`	`<ActionsWrapper>`