Fix accessibility issues for rest of the components

Altinn · Jan 29, 2025 · 4da5fa0 · 4da5fa0
1 parent 1e7c636
commit 4da5fa0
Show file tree

Hide file tree

Showing 27 changed files with 68 additions and 64 deletions.
diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -3,6 +3,9 @@ import { getStoryContext } from '@storybook/test-runner';
 import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
 
 const config: TestRunnerConfig = {
+  tags:{
+    exclude: ['Demo']
+  },
   async preVisit(page) {
     await injectAxe(page);
   },

diff --git a/lib/components/Dialog/DialogListItem.tsx b/lib/components/Dialog/DialogListItem.tsx
@@ -144,7 +144,7 @@ export const DialogListItem = ({
   }
 
   return (
-    <ListItemBase {...rest} size={size} selected={selected} theme={applicableTheme}>
+    <ListItemBase {...rest} size={size} selected={selected} theme={applicableTheme} hidden={loading} loading={loading}>
       <ListItemLink {...rest} size={size} className={styles.link}>
         <div className={styles.border} data-size={size} data-seen={seen} data-loading={loading}>
           <header className={styles.header} data-size={size}>

diff --git a/lib/components/Dialog/DialogSelect.tsx b/lib/components/Dialog/DialogSelect.tsx
@@ -16,7 +16,7 @@ export type DialogSelectProps = {
 export const DialogSelect = ({ checked = false, onChange, className }: DialogSelectProps) => {
   return (
     <label className={cx(styles.label, className)}>
-      <input type="checkbox" checked={checked} onChange={onChange} className={styles.input} tabIndex={-1} />
+      <input type="checkbox" checked={checked} onChange={onChange} className={styles.input} />
       <CheckboxIcon hover={true} checked={checked} className={styles.icon} />
     </label>
   );

diff --git a/lib/components/Dialog/dialogSelect.module.css b/lib/components/Dialog/dialogSelect.module.css
@@ -15,6 +15,7 @@
 .input {
   position: absolute;
   opacity: 0;
+  display: none;
 }
 
 .icon {

diff --git a/lib/components/Dropdown/DrawerBase.tsx b/lib/components/Dropdown/DrawerBase.tsx
@@ -12,9 +12,10 @@ export interface DrawerBaseProps {
 }
 
 export const DrawerBase = ({ placement = 'inline', open = false, className, children }: DrawerBaseProps) => {
+  const drawerBaseStyles = cx(styles.drawer, className, open && styles.drawerExpanded )
   return (
     <div
-      className={cx(styles.drawer, className)}
+      className={drawerBaseStyles}
       data-placement={placement}
       data-theme="default"
       data-color="neutral"

diff --git a/lib/components/Dropdown/DropdownBase.tsx b/lib/components/Dropdown/DropdownBase.tsx
@@ -25,16 +25,17 @@ export const DropdownBase = ({
   const ref = useRef<HTMLDivElement>(null);
   useClickOutside(ref, onClose);
 
+ const dropdownBaseStyles = cx(styles.dropdown, className, open && styles.dropdownExpanded) 
+
   return (
     <div
       ref={ref}
-      className={cx(styles.dropdown, className)}
+      className={dropdownBaseStyles}
       data-theme="default"
       data-color="neutral"
       data-shadow="md"
       data-placement={placement}
       data-padding={padding}
-      aria-expanded={open}
       role="menu"
     >
       {children}

diff --git a/lib/components/Dropdown/drawerBase.module.css b/lib/components/Dropdown/drawerBase.module.css
@@ -2,7 +2,7 @@
   display: none;
 }
 
-.drawer[aria-expanded="true"] {
+.drawerExpanded {
   display: block;
   width: 100%;
 }
@@ -13,4 +13,4 @@
   bottom: 0;
   left: 0;
   right: 0;
-}
+}
diff --git a/lib/components/Dropdown/dropdownBase.module.css b/lib/components/Dropdown/dropdownBase.module.css
@@ -2,7 +2,7 @@
   display: none;
 }
 
-.dropdown[aria-expanded="true"] {
+.dropdownExpanded {
   display: block;
   position: absolute;
   z-index: 2;
@@ -30,4 +30,4 @@
 
 .drawer .button {
   border-radius: 50%;
-}
+}
diff --git a/lib/components/Header/HeaderMenu.tsx b/lib/components/Header/HeaderMenu.tsx
@@ -8,9 +8,9 @@ export interface HeaderMenuProps {
   children?: ReactNode;
 }
 
-export const HeaderMenu = ({ expanded = false, className, children }: HeaderMenuProps) => {
+export const HeaderMenu = ({ className, children }: HeaderMenuProps) => {
   return (
-    <div className={cx(styles.menu, className)} aria-expanded={expanded}>
+    <div className={cx(styles.menu, className)} >
       {children}
     </div>
   );

diff --git a/lib/components/Header/HeaderSearch.tsx b/lib/components/Header/HeaderSearch.tsx
@@ -9,8 +9,11 @@ export interface HeaderSearchProps {
 }
 
 export const HeaderSearch = ({ expanded = false, className, children }: HeaderSearchProps) => {
+
+  const headerSearchStyles = cx(styles.search, className, expanded && styles.searchExpanded)
+
   return (
-    <div className={cx(styles.search, className)} aria-expanded={expanded}>
+    <div className={headerSearchStyles}>
       {children}
     </div>
   );

diff --git a/lib/components/Header/headerSearch.module.css b/lib/components/Header/headerSearch.module.css
@@ -2,7 +2,7 @@
   width: 100%;
 }
 
-.search[aria-expanded="true"] {
+.searchExpanded {
   z-index: 2;
 }
 
@@ -15,7 +15,7 @@
     max-width: 320px;
   }
 
-  .search[aria-expanded="true"] {
+  .searchExpanded {
     max-width: 640px;
   }
-}
+}
diff --git a/lib/components/List/ListItemBase.tsx b/lib/components/List/ListItemBase.tsx
@@ -56,7 +56,7 @@ export const ListItemBase = ({
   const appliedShadow = theme === 'transparent' ? 'none' : shadow;
 
   if (interactive) {
-    const linkClass = cx(styles.item, styles.interactive, className);
+    const linkClass = cx(styles.item, styles.interactive, className, selected && styles.interactiveSelected, hidden && styles.interactiveHidden);
     const Component = as || 'button';
 
     return (
@@ -75,10 +75,8 @@ export const ListItemBase = ({
         }}
         onClick={onClick}
         tabIndex={tabIndex}
-        aria-hidden={hidden}
         aria-disabled={disabled || loading}
-        aria-selected={selected}
-        aria-expanded={expanded}
+        disabled={disabled || loading}
       >
         {children}
       </Component>
@@ -99,7 +97,6 @@ export const ListItemBase = ({
       aria-hidden={hidden}
       aria-disabled={disabled || loading}
       aria-selected={selected}
-      aria-expanded={expanded}
     >
       {children}
     </article>

diff --git a/lib/components/List/ListItemLink.tsx b/lib/components/List/ListItemLink.tsx
@@ -28,7 +28,6 @@ export const ListItemLink = ({
   href,
   onClick,
   onKeyPress,
-  tabIndex,
   className,
   children,
 }: ListItemLinkProps) => {
@@ -51,7 +50,6 @@ export const ListItemLink = ({
         onKeyPress?.(e);
       }}
       onClick={onClick}
-      tabIndex={tabIndex}
       aria-disabled={loading || disabled}
       aria-selected={selected}
       data-size={size}

diff --git a/lib/components/List/ListItemSelect.tsx b/lib/components/List/ListItemSelect.tsx
@@ -18,7 +18,7 @@ export type ListItemSelectProps = {
 export const ListItemSelect = ({ size, checked = false, onChange, className }: ListItemSelectProps) => {
   return (
     <label className={cx(styles.label, className)} data-size={size}>
-      <input type="checkbox" checked={checked} onChange={onChange} className={styles.input} tabIndex={-1} />
+      <input type="checkbox" checked={checked} onChange={onChange} className={styles.input} />
       <CheckboxIcon hover={true} checked={checked} className={styles.icon} />
     </label>
   );

diff --git a/lib/components/List/listItemBase.module.css b/lib/components/List/listItemBase.module.css
@@ -92,12 +92,16 @@
 
 /* interactive classes, active, selected, expanded */
 
-.interactive:not([aria-selected="true"]) {
-  cursor: pointer;
+.interactiveSelected {
+  outline: 2px solid var(--ds-color-border-strong);
 }
 
-.interactive:not([aria-expanded="true"]):not([data-theme="transparent"]):hover,
-.interactive:not([aria-selected="true"]):not([data-theme="transparent"]):hover,
-.interactive:not([aria-disabled="true"]):not([data-theme="transparent"]):hover {
-  outline: 2px solid var(--ds-color-border-strong);
+.interactiveHidden {
+  display: none;
 }
+
+.interactive:not([data-theme="transparent"]):hover,
+.interactive:not([data-theme="transparent"]):hover,
+.interactive:not([data-theme="transparent"]):hover {
+  outline: 2px solid var(--ds-color-border-strong);
+}
diff --git a/lib/components/List/listItemSelect.module.css b/lib/components/List/listItemSelect.module.css
@@ -13,8 +13,7 @@
 }
 
 .input {
-  position: absolute;
-  opacity: 0;
+  display: none;
 }
 
 .icon {
@@ -81,4 +80,4 @@
 .label[data-size="xl"] .icon {
   width: 24px;
   height: 24px;
-}
+}
diff --git a/lib/components/Menu/MenuBase.tsx b/lib/components/Menu/MenuBase.tsx
@@ -35,16 +35,16 @@ export interface MenuListItemProps {
 export const MenuBase = ({ as = 'nav', color, theme, className, children }: MenuBaseProps) => {
   const Component = as;
   return (
-    <Component className={cx(styles.menu, className)} data-color={color} data-theme={theme} role="menu">
+    <Component className={cx(styles.menu, className)} data-color={color} data-theme={theme}>
       {children}
     </Component>
   );
 };
 
-export const MenuList = ({ as = 'ul', role = 'group', expanded, className, children }: MenuListProps) => {
+export const MenuList = ({ as = 'ul', role = 'group', className, children }: MenuListProps) => {
   const Component = as;
   return (
-    <Component className={cx(styles.list, className)} role={role} aria-expanded={expanded}>
+    <Component className={cx(styles.list, className)} role={role}>
       {children}
     </Component>
   );
@@ -53,13 +53,12 @@ export const MenuList = ({ as = 'ul', role = 'group', expanded, className, child
 export const MenuListItem = ({
   as = 'li',
   role = 'presentation',
-  expanded,
   className,
   children,
 }: MenuListItemProps) => {
   const Component = as;
   return (
-    <Component className={cx(styles.item, className)} role={role} aria-expanded={expanded}>
+    <Component className={cx(styles.item, className)} role={role}>
       {children}
     </Component>
   );

diff --git a/lib/components/Menu/MenuItemBase.tsx b/lib/components/Menu/MenuItemBase.tsx
@@ -40,9 +40,6 @@ export const MenuItemBase = ({
   tabIndex = 0,
   hidden,
   disabled = false,
-  active = false,
-  selected = false,
-  expanded = false,
   linkIcon,
   linkText,
   badge,
@@ -52,17 +49,13 @@ export const MenuItemBase = ({
 
   return (
     <Component
-      role="menuitem"
       tabIndex={disabled ? '-1' : (tabIndex ?? 0)}
       className={cx(styles.item, className)}
       data-size={size}
       data-color={color}
       data-theme={theme}
-      data-active={active}
       aria-hidden={hidden}
-      aria-expanded={expanded}
       aria-disabled={disabled}
-      aria-selected={selected}
       href={href}
       onKeyPress={(e: KeyboardEvent) => {
         e.key === 'Enter' && onClick?.();

diff --git a/lib/components/Menu/MenuItems.tsx b/lib/components/Menu/MenuItems.tsx
@@ -74,7 +74,7 @@ export const MenuItems = ({
                 const { expanded } = itemProps;
                 const nextItem = group?.items[index + 1];
                 return (
-                  <MenuListItem role="presentation" expanded={expanded} key={index}>
+                  <MenuListItem expanded={expanded} key={index}>
                     <MenuItem
                       {...itemProps}
                       size={itemProps?.size || groupProps?.defaultItemSize || defaultItemSize}

diff --git a/lib/components/Menu/menuBase.module.css b/lib/components/Menu/menuBase.module.css
@@ -24,4 +24,4 @@
 
 .item[role="separator"] {
   border-top: 1px solid var(--ds-color-border-subtle);
-}
+}
diff --git a/lib/components/Menu/menuSearch.module.css b/lib/components/Menu/menuSearch.module.css
@@ -32,8 +32,8 @@
   position: absolute;
   top: 0;
   right: 0;
-  margin: 10px;
+  margin: 8px;
   border-radius: 100%;
-  width: 1.25rem;
-  height: 1.25rem;
-}
+  width: 1.5rem;
+  height: 1.5rem;
+}
diff --git a/lib/components/Searchbar/SearchField.tsx b/lib/components/Searchbar/SearchField.tsx
@@ -47,7 +47,7 @@ export const SearchField = ({
   };
 
   return (
-    <div className={cx(styles.field, className)} aria-expanded={expanded}>
+    <div className={cx(styles.field, className)}>
       <input
         ref={ref}
         onFocus={onFocus}
@@ -62,7 +62,6 @@ export const SearchField = ({
         aria-haspopup
         autoComplete="off"
         aria-autocomplete="list"
-        aria-expanded={expanded}
         tabIndex={tabIndex ?? 0}
       />
       <Icon name="magnifying-glass" className={styles.icon} />

diff --git a/lib/components/Searchbar/SearchbarBase.tsx b/lib/components/Searchbar/SearchbarBase.tsx
@@ -10,10 +10,10 @@ export interface SearchbarBaseProps {
 }
 
 export const SearchbarBase = ({ className, children, expanded = false, autocomplete = false }: SearchbarBaseProps) => {
+  const searchBaseStyles = cx(styles.searchbar, className, expanded && styles.searchbarExpanded)
   return (
     <div
-      className={cx(styles.searchbar, className)}
-      aria-expanded={expanded}
+      className={searchBaseStyles}
       data-autocomplete={autocomplete}
       data-color="neutral"
     >

diff --git a/lib/components/Searchbar/searchbarBase.module.css b/lib/components/Searchbar/searchbarBase.module.css
@@ -11,10 +11,10 @@
   display: none;
 }
 
-.searchbar[aria-expanded="true"] nav {
+.searchbarExpanded nav {
   position: absolute;
   display: block;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   margin-top: -2px;
-}
+}
diff --git a/lib/components/Skeleton/Skeleton.tsx b/lib/components/Skeleton/Skeleton.tsx
@@ -15,7 +15,13 @@ interface SkeletonProps {
 export const Skeleton = ({ loading = false, size, variant = 'text', className, children }: SkeletonProps) => {
   if (loading) {
     return (
-      <span className={cx(styles.skelaton, className)} data-size={size} data-loading={loading} data-variant={variant}>
+      <span
+        className={cx(styles.skelaton, className)}
+        data-size={size}
+        data-loading={loading}
+        data-variant={variant}
+        aria-hidden="true"
+      >
         {children}
       </span>
     );
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,4 +24,4 @@ @@
     .item[role="separator"] {
       border-top: 1px solid var(--ds-color-border-subtle);
-    }
+    }