re-implement scrollOnInit with aria-current

apps/app/src/components/Sidebar/PageTree/PageTreeSubstance.tsx

@@ -111,19 +111,25 @@ export const PageTreeContent = memo(({ isWipPageShown }: PageTreeContentProps) =
   const { data: sidebarScrollerRef } = useSidebarScrollerRef();
   const [isInitialScrollCompleted, setIsInitialScrollCompleted] = useState(false);
 
-  const rootElemRef = useRef(null);
+  const rootElemRef = useRef<HTMLDivElement>(null);
 
   // ***************************  Scroll on init ***************************
   const scrollOnInit = useCallback(() => {
-    const scrollTargetElement = document.getElementById('grw-pagetree-current-page-item');
+    const rootElement = rootElemRef.current;
+    const scrollElement = sidebarScrollerRef?.current;
 
-    if (sidebarScrollerRef?.current == null || scrollTargetElement == null) {
+    if (rootElement == null || scrollElement == null) {
+      return;
+    }
+
+    const scrollTargetElement = rootElement.querySelector<HTMLElement>('[aria-current]');
+
+    if (scrollTargetElement == null) {
       return;
     }
 
     logger.debug('scrollOnInit has invoked');
 
-    const scrollElement = sidebarScrollerRef.current;
 
     // NOTE: could not use scrollIntoView
     //  https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move

apps/app/src/components/TreeItem/TreeItemLayout.tsx

@@ -139,8 +139,9 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
         role="button"
         className={`list-group-item list-group-item-action ${itemClassName}
           border-0 py-0 ps-0 d-flex align-items-center rounded-1`}
-        id={isSelected ? 'grw-pagetree-current-page-item' : `grw-pagetree-list-${page._id}`}
+        id={`grw-pagetree-list-${page._id}`}
         onClick={itemClickHandler}
+        aria-current={isSelected ? true : undefined}
       >
 
         <div className="btn-triangle-container d-flex justify-content-center">