@ndla/ui 26.1.0 → 27.0.0

package/src/TreeStructure/FolderItem.tsx

@@ -16,6 +16,7 @@ import { colors, spacing, animations, spacingUnit, misc, fonts } from '@ndla/cor
 import SafeLink from '@ndla/safelink';
 import { CommonFolderItemsProps, FolderType } from './types';
 import { arrowNavigation } from './arrowNavigation';
+import { treestructureId } from './helperFunctions';
 
 const OpenButton = styled.span<{ isOpen: boolean }>`
   display: flex;
@@ -40,22 +41,13 @@ const StyledName = styled.span`
   text-align: left;
 `;
 
-const WrapperForFolderChild = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: ${spacing.xsmall};
-  margin-left: auto;
-`;
-
-const shouldForwardProp = (name: string) => !['selected', 'noArrow', 'fullWidth', 'level'].includes(name);
+const shouldForwardProp = (name: string) => !['selected', 'level', 'focused', 'isCreatingFolder'].includes(name);
 
 interface FolderNameProps {
   selected?: boolean;
-  noArrow?: boolean;
-  fullWidth?: boolean;
   level: number;
   isCreatingFolder?: boolean;
+  focused?: boolean;
 }
 
 const FolderName = styled(Button, { shouldForwardProp })<FolderNameProps>`
@@ -66,14 +58,15 @@ const FolderName = styled(Button, { shouldForwardProp })<FolderNameProps>`
   gap: ${spacing.xxsmall};
   border: none;
   outline: none;
-  background: ${({ selected, isCreatingFolder }) => selected && !isCreatingFolder && colors.brand.lighter};
-  color: ${({ isCreatingFolder, selected }) =>
-    isCreatingFolder && selected ? colors.brand.primary : colors.text.primary};
+  background: ${({ selected, isCreatingFolder, focused }) =>
+    isCreatingFolder ? 'none' : selected ? colors.brand.lighter : focused && colors.brand.lightest};
+  color: ${({ isCreatingFolder, focused }) =>
+    isCreatingFolder && focused ? colors.brand.primary : colors.text.primary};
   transition: ${animations.durations.superFast};
   line-height: 1;
   word-break: break-word;
-  &:hover,
-  &:focus {
+
+  &:hover {
     box-shadow: none;
     outline: none;
     background: ${({ selected }) => (selected ? colors.brand.light : colors.brand.lightest)};
@@ -115,7 +108,7 @@ interface Props extends CommonFolderItemsProps {
 }
 
 const FolderItem = ({
-  focusedFolderId,
+  focusedFolder,
   folder,
   isOpen,
   level,
@@ -124,45 +117,48 @@ const FolderItem = ({
   onCloseFolder,
   onOpenFolder,
   onSelectFolder,
-  openOnFolderClick,
-  setFocusedId,
+  setFocusedFolder,
   setSelectedFolder,
   targetResource,
   visibleFolders,
-  framed,
   maxLevel,
   isCreatingFolder,
+  type,
+  closeTree,
 }: Props) => {
   const { t } = useTranslation();
-  const { id, name } = folder;
+  const { id, name, isNavigation } = folder;
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
-  const selected = selectedFolder && selectedFolder.id === id;
-  const focused = focusedFolderId === id;
+  const selected = selectedFolder ? selectedFolder.id === id : false;
+
+  const focused = focusedFolder?.id === id;
 
   const handleClickFolder = () => {
-    if (openOnFolderClick) {
-      if (selected) {
-        if (isOpen) {
-          onCloseFolder(id);
-        } else {
-          onOpenFolder(id);
-        }
-      }
-    }
     if (!selected) {
       setSelectedFolder(folder);
-      setFocusedId(id);
     }
-    onSelectFolder?.(id);
+    setFocusedFolder(folder);
+    if (type === 'picker') {
+      if (selected) {
+        closeTree();
+      }
+      onSelectFolder?.(id);
+    }
   };
 
   useEffect(() => {
-    if (focusedFolderId === id && !isCreatingFolder) {
-      ref.current?.focus();
+    if (focusedFolder?.id === id && !isCreatingFolder) {
+      if (type === 'navigation') {
+        ref.current?.focus();
+      }
+      ref.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
     }
-  }, [focusedFolderId, ref, id, isCreatingFolder]);
+  }, [focusedFolder, ref, id, isCreatingFolder, type]);
 
-  const linkPath = `/minndla${level > 0 ? '/folders' : ''}/${id}`;
+  const linkPath = `/minndla${!isNavigation ? '/folders' : ''}/${id}`;
 
   const containsResource =
     targetResource && folder.resources.some((resource) => resource.resourceId === targetResource.resourceId);
@@ -173,28 +169,36 @@ const FolderItem = ({
 
   const hideArrow = isMaxDepth || emptyFolder;
 
-  return onSelectFolder ? (
-    <FolderName
-      variant="ghost"
-      shape="sharp"
-      fontWeight="normal"
-      colorTheme="light"
+  return type === 'navigation' ? (
+    <FolderNameLink
+      role="treeitem"
+      aria-owns={folder.subfolders.length ? treestructureId(type, `subfolders-${folder.id}`) : undefined}
+      aria-expanded={isMaxDepth || emptyFolder ? undefined : isOpen}
+      aria-current={selected ? 'page' : undefined}
+      aria-describedby={containsResource ? `alreadyAdded-${folder.id}` : undefined}
       ref={ref}
       level={level}
-      fullWidth={framed}
-      onKeyDown={(e) => arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)}
-      noArrow={hideArrow}
+      onKeyDown={(e: KeyboardEvent<HTMLElement>) => {
+        if (e.key === 'Enter') {
+          setSelectedFolder(folder);
+          setFocusedFolder(folder);
+          return;
+        }
+        arrowNavigation(e, id, visibleFolders, setFocusedFolder, onOpenFolder, onCloseFolder);
+      }}
+      to={loading ? '' : linkPath}
       tabIndex={selected || focused ? 0 : -1}
       selected={selected}
-      disabled={loading}
-      onFocus={() => setFocusedId(id)}
-      onClick={handleClickFolder}
-      isCreatingFolder={isCreatingFolder}>
-      {!hideArrow && (
+      onFocus={() => setFocusedFolder(folder)}
+      onClick={handleClickFolder}>
+      {(!hideArrow || level === 0) && (
         <OpenButton
+          aria-hidden
           tabIndex={-1}
           isOpen={isOpen}
-          onClick={() => {
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
             ref.current?.focus();
             if (isOpen) {
               onCloseFolder(id);
@@ -206,29 +210,37 @@ const FolderItem = ({
         </OpenButton>
       )}
       <StyledName>{name}</StyledName>
-      <WrapperForFolderChild>
-        {containsResource && <StyledDone title={t('myNdla.alreadyInFolder')} />}
-      </WrapperForFolderChild>
-    </FolderName>
+    </FolderNameLink>
   ) : (
-    <FolderNameLink
+    <FolderName
+      tabIndex={-1}
+      role="treeitem"
+      id={treestructureId(type, folder.id)}
+      aria-expanded={isMaxDepth || emptyFolder ? undefined : isOpen}
+      aria-selected={selected}
+      focused={focusedFolder?.id === folder.id}
+      aria-describedby={containsResource ? `alreadyAdded-${folder.id}` : undefined}
+      variant="ghost"
+      shape="sharp"
+      fontWeight="normal"
+      colorTheme="light"
       ref={ref}
       level={level}
-      onKeyDown={(e: KeyboardEvent<HTMLElement>) =>
-        arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)
-      }
-      noArrow={!isMaxDepth}
-      to={loading ? '' : linkPath}
-      tabIndex={selected || focused ? 0 : -1}
       selected={selected}
-      onFocus={() => setFocusedId(id)}
-      onClick={handleClickFolder}>
-      {(!hideArrow || level === 0) && (
+      disabled={loading}
+      onFocus={(e) => {
+        setFocusedFolder(focusedFolder || folder, true);
+      }}
+      onClick={handleClickFolder}
+      isCreatingFolder={isCreatingFolder}>
+      {!hideArrow && (
         <OpenButton
+          aria-hidden
           tabIndex={-1}
           isOpen={isOpen}
-          onClick={() => {
-            ref.current?.focus();
+          onClick={(e) => {
+            e.stopPropagation();
+            setFocusedFolder(folder, true);
             if (isOpen) {
               onCloseFolder(id);
             } else {
@@ -239,7 +251,14 @@ const FolderItem = ({
         </OpenButton>
       )}
       <StyledName>{name}</StyledName>
-    </FolderNameLink>
+      {containsResource && (
+        <StyledDone
+          aria-label={t('myNdla.alreadyInFolder')}
+          id={`alreadyAdded-${folder.id}`}
+          title={t('myNdla.alreadyInFolder')}
+        />
+      )}
+    </FolderName>
   );
 };
 

package/src/TreeStructure/FolderItems.tsx

@@ -6,13 +6,14 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { animations } from '@ndla/core';
 import FolderItem from './FolderItem';
 import FolderNameInput from './FolderNameInput';
 import { CommonFolderItemsProps, FolderType, TreeStructureType } from './types';
 import NavigationLink from './NavigationLink';
+import { treestructureId } from './helperFunctions';
 
 const StyledUL = styled.ul`
   ${animations.fadeInLeft(animations.durations.fast)};
@@ -43,6 +44,8 @@ export interface FolderItemsProps extends CommonFolderItemsProps {
   onCancelNewFolder: () => void;
   onSaveNewFolder: (name: string, parentId: string) => void;
   openFolders: string[];
+  parentFolder?: FolderType;
+  children?: ReactNode;
 }
 
 const FolderItems = ({
@@ -54,15 +57,28 @@ const FolderItems = ({
   onSaveNewFolder,
   openFolders,
   type,
+  parentFolder,
+  children,
   ...rest
 }: FolderItemsProps) => (
-  <StyledUL role={level === 0 ? 'tree' : 'group'}>
+  <StyledUL
+    id={
+      level === 0 && type === 'picker'
+        ? treestructureId(type, 'popup')
+        : parentFolder
+        ? treestructureId(type, `subfolders-${parentFolder.id}`)
+        : undefined
+    }
+    tabIndex={-1}
+    aria-labelledby={level === 0 && type === 'picker' ? treestructureId(type, 'label') : undefined}
+    role={level === 0 ? 'tree' : 'group'}>
+    {children}
     {folders.map((folder) => {
       const { subfolders, id } = folder;
       const isOpen = openFolders?.includes(id);
 
       return (
-        <StyledLI key={id} role="treeitem" type={type}>
+        <StyledLI key={id} tabIndex={-1} role="none" type={type}>
           {folder.isNavigation ? (
             <NavigationLink folder={folder} isOpen={isOpen} level={level} type={type} loading={loading} {...rest} />
           ) : (
@@ -73,20 +89,12 @@ const FolderItems = ({
                 level={level}
                 loading={loading}
                 type={type}
-                isCreatingFolder={newFolderParentId === folder.id}
+                isCreatingFolder={!!newFolderParentId}
                 {...rest}
               />
-              {newFolderParentId === id && (
-                <FolderNameInput
-                  loading={loading}
-                  level={level}
-                  onCancelNewFolder={onCancelNewFolder}
-                  onSaveNewFolder={onSaveNewFolder}
-                  parentId={newFolderParentId}
-                />
-              )}
-              {subfolders && isOpen && (
+              {((subfolders && isOpen) || newFolderParentId === id) && (
                 <FolderItems
+                  parentFolder={folder}
                   folders={subfolders}
                   level={level + 1}
                   loading={loading}
@@ -95,8 +103,20 @@ const FolderItems = ({
                   onCancelNewFolder={onCancelNewFolder}
                   onSaveNewFolder={onSaveNewFolder}
                   openFolders={openFolders}
-                  {...rest}
-                />
+                  {...rest}>
+                  {newFolderParentId === id && (
+                    <li role="none">
+                      <FolderNameInput
+                        loading={loading}
+                        level={level}
+                        onCancelNewFolder={onCancelNewFolder}
+                        onSaveNewFolder={onSaveNewFolder}
+                        parentId={newFolderParentId}
+                        type={type}
+                      />
+                    </li>
+                  )}
+                </FolderItems>
               )}
             </>
           )}

package/src/TreeStructure/FolderNameInput.tsx

@@ -15,6 +15,9 @@ import { Spinner } from '@ndla/icons';
 import { IconButton } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
 import { Done } from '@ndla/icons/editor';
+import { InputV2 as Input } from '@ndla/forms';
+import { TreeStructureType } from './types';
+import { treestructureId } from './helperFunctions';
 
 // Source: https://kovart.github.io/dashed-border-generator/
 const borderStyle = `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='${encodeURIComponent(
@@ -57,7 +60,7 @@ const InputWrapper = styled.div<{ level: number }>`
   }
 `;
 
-const StyledInput = styled.input`
+const StyledInput = styled(Input)`
   padding: ${spacing.small};
   flex-grow: 1;
   border: 0;
@@ -74,54 +77,65 @@ interface FolderNameInputProps {
   onCancelNewFolder: () => void;
   loading?: boolean;
   level: number;
+  type: TreeStructureType;
 }
 
-const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading, level }: FolderNameInputProps) => {
+const FolderNameInput = ({
+  onSaveNewFolder,
+  parentId,
+  onCancelNewFolder,
+  loading,
+  level,
+  type,
+}: FolderNameInputProps) => {
   const { t } = useTranslation();
   const [name, setName] = useState<string>('');
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    inputRef.current?.select();
     if (isMobile) {
       inputRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
-    return () => {
-      onCancelNewFolder();
-    };
-  }, [onCancelNewFolder]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <NewFolderWrapper>
       <InputWrapper level={level}>
         <StyledInput
+          name="name"
+          labelHidden
+          label={t('treeStructure.newFolder.folderName')}
+          aria-invalid={name.length === 0}
+          aria-disabled={loading ? true : undefined}
+          aria-describedby={loading ? treestructureId(type, 'spinner') : undefined}
           ref={inputRef}
           autoFocus
           placeholder={t('treeStructure.newFolder.placeholder')}
-          disabled={loading}
           value={name}
           onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
             if (e.key === 'Escape') {
               e.preventDefault();
               onCancelNewFolder();
-            } else if (e.key === 'Enter' || e.key === 'Tab') {
+            } else if (e.key === 'Enter') {
               e.preventDefault();
-              if (name === '') {
-                onCancelNewFolder();
+              if (name === '' || loading) {
                 return;
               }
               onSaveNewFolder(name, parentId);
             }
           }}
-          onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
+            if (!loading) {
+              setName(e.target.value);
+            }
+          }}
         />
         <Row>
-          {!loading ? (
+          {!loading && (
             <>
-              <IconButton aria-label={t('close')} title={t('close')} size="small" ghostPill onClick={onCancelNewFolder}>
-                <Cross />
-              </IconButton>
               <IconButton
+                tabIndex={0}
                 aria-label={t('save')}
                 title={t('save')}
                 size="small"
@@ -129,10 +143,21 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
                 onClick={() => onSaveNewFolder(name, parentId)}>
                 <Done />
               </IconButton>
+              <IconButton aria-label={t('close')} title={t('close')} size="small" ghostPill onClick={onCancelNewFolder}>
+                <Cross />
+              </IconButton>
             </>
-          ) : (
-            <Spinner size="small" margin="0" />
           )}
+          <div aria-live="assertive">
+            {loading && (
+              <Spinner
+                size="normal"
+                margin={spacing.small}
+                id={treestructureId(type, 'spinner')}
+                aria-label={t('loading')}
+              />
+            )}
+          </div>
         </Row>
       </InputWrapper>
     </NewFolderWrapper>

package/src/TreeStructure/NavigationLink.tsx

@@ -55,9 +55,9 @@ const NavigationLink = ({
   loading,
   folder,
   selectedFolder,
-  focusedFolderId,
+  focusedFolder,
   setSelectedFolder,
-  setFocusedId,
+  setFocusedFolder,
   visibleFolders,
   onOpenFolder,
   onCloseFolder,
@@ -65,30 +65,37 @@ const NavigationLink = ({
   const { id, icon, name } = folder;
   const selected = selectedFolder && selectedFolder.id === id;
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
-  const focused = focusedFolderId === id;
+  const focused = focusedFolder?.id === id;
 
   const handleClick = () => {
     if (!selected) {
       setSelectedFolder(folder);
-      setFocusedId(id);
+      setFocusedFolder(folder);
     }
   };
 
   useEffect(() => {
-    if (focusedFolderId === id) {
+    if (focusedFolder?.id === id) {
       ref.current?.focus();
     }
-  }, [focusedFolderId, ref, id]);
+  }, [focusedFolder, ref, id]);
 
   return (
     <StyledSafeLink
+      role="treeitem"
       ref={ref}
-      onKeyDown={(e: KeyboardEvent<HTMLElement>) =>
-        arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)
-      }
+      onKeyDown={(e: KeyboardEvent<HTMLElement>) => {
+        if (e.key === 'Enter') {
+          setSelectedFolder(folder);
+          setFocusedFolder(folder);
+          return;
+        }
+        arrowNavigation(e, id, visibleFolders, setFocusedFolder, onOpenFolder, onCloseFolder);
+      }}
+      aria-current={selected ? 'page' : undefined}
       tabIndex={selected || focused ? 0 : -1}
       selected={selected}
-      onFocus={() => setFocusedId(id)}
+      onFocus={() => setFocusedFolder(folder)}
       onClick={handleClick}
       to={loading ? '' : `/minndla/${id}`}>
       <IconWrapper>{icon}</IconWrapper>