@ndla/ui 30.0.8 → 30.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "30.0.8",
+  "version": "30.1.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5cb8d6b7fce98737fda299e7f52b70bc3af35d1d"
+  "gitHead": "609ced53b97a824ca3f872f47cf13856d0558b15"
 }

package/src/TagSelector/TagSelector.tsx

@@ -68,7 +68,15 @@ interface Props {
   labelHidden?: boolean;
 }
 
-const TagSelector = ({ selected: _selected, tags: _tags, onChange, onCreateTag, className, label }: Props) => {
+const TagSelector = ({
+  selected: _selected,
+  tags: _tags,
+  onChange,
+  onCreateTag,
+  className,
+  label,
+  labelHidden,
+}: Props) => {
   const { t } = useTranslation();
   const [input, setInput] = useState('');
   const tags = useMemo(() => _tags.map((tag) => ({ value: tag, label: tag })), [_tags]);
@@ -93,7 +101,7 @@ const TagSelector = ({ selected: _selected, tags: _tags, onChange, onCreateTag,
   return (
     <StyledTagSelector className={className}>
       {label && (
-        <StyledLabel labelHidden htmlFor="tagselector-creatable" id="tagselector-label">
+        <StyledLabel labelHidden={labelHidden} htmlFor="tagselector-creatable" id="tagselector-label">
           {label}
         </StyledLabel>
       )}

package/src/TreeStructure/ComboboxButton.tsx

@@ -60,6 +60,7 @@ interface Props {
   onOpenFolder: (id: string) => void;
   onCloseFolder: (id: string) => void;
   setFocusedFolder: (folder: FolderType) => void;
+  ariaDescribedby?: string;
 }
 
 const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
@@ -76,6 +77,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
       setFocusedFolder,
       onOpenFolder,
       onCloseFolder,
+      ariaDescribedby,
     },
     ref,
   ) => {
@@ -124,6 +126,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
           aria-expanded={showTree}
           aria-labelledby={label ? treestructureId(type, 'label') : undefined}
           aria-activedescendant={focusedFolder ? treestructureId(type, focusedFolder.id) : undefined}
+          aria-describedby={ariaDescribedby}
           variant="ghost"
           colorTheme="light"
           fontWeight="normal"

package/src/TreeStructure/TreeStructure.tsx

@@ -74,6 +74,7 @@ export interface TreeStructureProps extends CommonTreeStructureProps {
   maxLevel?: number;
   newFolderInput?: NewFolderInputFunc;
   onSelectFolder?: (id: string) => void;
+  ariaDescribedby?: string;
 }
 
 const TreeStructure = ({
@@ -86,6 +87,7 @@ const TreeStructure = ({
   targetResource,
   type,
   newFolderInput,
+  ariaDescribedby,
 }: TreeStructureProps) => {
   const ref = useRef<HTMLButtonElement>(null);
 
@@ -209,6 +211,7 @@ const TreeStructure = ({
             flattenedFolders={flattenedFolders}
             onCloseFolder={onCloseFolder}
             onOpenFolder={onOpenFolder}
+            ariaDescribedby={ariaDescribedby}
           />
         )}
         {showTree && (