fixed wcag issue in ui-editor (#4517)

* fixed wcag issue in ui-editor Co-authored-by: Nina Kylstad <[email protected]> * updated snapshot * corrected identation * updated indents * changed indentation * fix remaining code smells * fix imports * fix failing test Co-authored-by: Nina Kylstad <[email protected]>
Altinn · Jul 20, 2020 · 8efa702 · 8efa702
1 parent e764da0
commit 8efa702
Show file tree

Hide file tree

Showing 11 changed files with 152 additions and 89 deletions.
diff --git a/.../designer/frontend/app-development/features/administration/components/SideMenuContent.tsx b/.../designer/frontend/app-development/features/administration/components/SideMenuContent.tsx
@@ -107,7 +107,7 @@ const SideMenuContent = (props: ISideMenuContent): JSX.Element => {
       <Typography className={classNames(classes.sidebarHeader, classes.sidebarHeaderSecond)}>
         {getLanguageFromKey('administration.reset_repo_heading', props.language)}
       </Typography>
-      <Typography className={classNames(classes.sidebarInfoText, classes.sidebarInfoTextList)}>
+      <Typography className={classNames(classes.sidebarInfoText, classes.sidebarInfoTextList)} component='div'>
         <ul>
           <li>{getLanguageFromKey('administration.reset_repo_info_i1', props.language)}</li>
           <li>{getLanguageFromKey('administration.reset_repo_info_i2', props.language)}</li>

diff --git a/...signer/frontend/app-development/features/appPublish/components/appDeploymentComponent.tsx b/...signer/frontend/app-development/features/appPublish/components/appDeploymentComponent.tsx
@@ -12,7 +12,7 @@ import * as moment from 'moment';
 import * as React from 'react';
 import Select from 'react-select';
 import { AltinnButton } from 'app-shared/components/AltinnButton';
-import { AltinnIcon } from 'app-shared/components/AltinnIcon';
+import AltinnIcon from 'app-shared/components/AltinnIcon';
 import { AltinnLink } from 'app-shared/components/AltinnLink';
 import AltinnSpinner from 'app-shared/components/AltinnSpinner';
 import AltinnPopoverSimple from 'app-shared/components/molecules/AltinnPopoverSimple';

diff --git a/...src/designer/frontend/app-development/test/__tests__/HandleMergeConflictFileList.test.tsx b/...src/designer/frontend/app-development/test/__tests__/HandleMergeConflictFileList.test.tsx
@@ -139,11 +139,8 @@ describe('HandleMergeConflictFileList', () => {
     expect(wrapper.exists('#handleMergeConflictFileList')).toEqual(true);
 
     // Expect correct icons to show
-    expect(wrapper.find('AltinnIcon')).toHaveLength(mockRepostatus.contentStatus.length);
-    expect(wrapper.find('AltinnIcon').at(0).find('i').hasClass('fa-check')).toBe(true);
-    expect(wrapper.find('AltinnIcon').at(1).find('i').hasClass('fa-circlecancel')).toBe(true);
-    expect(wrapper.find('AltinnIcon').at(2).find('i').hasClass('fa-check')).toBe(true);
-
+    expect(wrapper.getDOMNode().getElementsByClassName('fa-check').length).toBe(2);
+    expect(wrapper.getDOMNode().getElementsByClassName('fa-circlecancel').length).toBe(1);
   });
 
   it('should trigger handleListItemClick() when listItem is clicked', async () => {

diff --git a/...signer/frontend/app-development/test/__tests__/__snapshots__/Administration.test.tsx.snap b/...signer/frontend/app-development/test/__tests__/__snapshots__/Administration.test.tsx.snap
@@ -487,7 +487,7 @@ exports[`Administration Should match snapshot 1`] = `
         >
           administration.reset_repo_heading
         </p>
-        <p
+        <div
           className="MuiTypography-root makeStyles-sidebarInfoText-53 makeStyles-sidebarInfoTextList-54 MuiTypography-body1"
         >
           <ul>
@@ -501,7 +501,7 @@ exports[`Administration Should match snapshot 1`] = `
               administration.reset_repo_info_i3
             </li>
           </ul>
-        </p>
+        </div>
         <button
           className="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button-47 MuiButton-containedPrimary Mui-disabled Mui-disabled"
           disabled={true}

diff --git a/src/studio/src/designer/frontend/shared/components/AltinnIcon.tsx b/src/studio/src/designer/frontend/shared/components/AltinnIcon.tsx
@@ -15,8 +15,6 @@ export interface IAltinnIconCompontentProvidedProps {
   weight?: number;
 }
 
-export interface IAltinnIconComponentState {
-}
 const theme = createMuiTheme(altinnTheme);
 
 const styles = {
@@ -25,24 +23,33 @@ const styles = {
   },
 };
 
-export class AltinnIcon extends React.Component<IAltinnIconCompontentProvidedProps, IAltinnIconComponentState> {
-  public render() {
-    return (
-      <i
-        className={
-          classNames(
-            this.props.iconClass,
-          )}
-        style={{
-          color: this.props.isActive ? this.props.isActiveIconColor : this.props.iconColor,
-          fontSize: this.props.iconSize ? this.props.iconSize : null,
-          fontWeight: this.props.weight ? this.props.weight : null,
-          margin: this.props.margin ? this.props.margin : null,
-          padding: this.props.padding ? this.props.padding : null,
-        }}
-      />
-    );
-  }
+export function AltinnIconComponent(props: IAltinnIconCompontentProvidedProps) {
+  const {
+    isActive,
+    isActiveIconColor,
+    iconClass,
+    iconColor,
+    iconSize,
+    weight,
+    margin,
+    padding,
+  } = props;
+
+  return (
+    <i
+      className={
+        classNames(
+          iconClass,
+        )}
+      style={{
+        color: isActive ? isActiveIconColor : iconColor,
+        fontSize: iconSize || null,
+        fontWeight: weight || null,
+        margin: margin || null,
+        padding: padding || null,
+      }}
+    />
+  );
 }
 
-export default withStyles(styles)(AltinnIcon);
+export default withStyles(styles)(AltinnIconComponent);
diff --git a/src/studio/src/designer/frontend/shared/components/atoms/AltinnAttachment.tsx b/src/studio/src/designer/frontend/shared/components/atoms/AltinnAttachment.tsx
@@ -8,7 +8,7 @@ import Typography from '@material-ui/core/Typography';
 import classNames from 'classnames';
 import * as React from 'react';
 import { IAttachment } from '../../types/index.d';
-import { AltinnIcon } from '../AltinnIcon';
+import AltinnIcon from '../AltinnIcon';
 
 const styles = createStyles({
   a: {

diff --git a/...studio/src/designer/frontend/shared/components/molecules/AltinnCollapsibleAttachments.tsx b/...studio/src/designer/frontend/shared/components/molecules/AltinnCollapsibleAttachments.tsx
@@ -10,7 +10,7 @@ import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
 import classNames from 'classnames';
 import * as React from 'react';
 import { IAttachment } from '../../types';
-import { AltinnIcon } from '../AltinnIcon';
+import AltinnIcon from '../AltinnIcon';
 import AltinnAttachment from '../atoms/AltinnAttachment';
 
 const styles = createStyles({

diff --git a/src/studio/src/designer/frontend/shared/navigation/drawer/LeftDrawerMenu.tsx b/src/studio/src/designer/frontend/shared/navigation/drawer/LeftDrawerMenu.tsx
@@ -1,14 +1,10 @@
 import Divider from '@material-ui/core/Divider';
 import Drawer from '@material-ui/core/Drawer';
 import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
 import { withStyles, WithStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
-import AltinnIcon from '../../components/AltinnIcon';
+import ListItemLink from './ListItemLink';
 import { IMenuItem, leftDrawerMenuSettings } from './drawerMenuSettings';
 import { styles } from './leftDrawerMenuStyles';
 
@@ -112,40 +108,17 @@ class LeftDrawerMenu extends
 
             <List>
               {leftDrawerMenuSettings[this.props.menuType].map((menuItem: IMenuItem, index: number) => (
-                <Link
+                <ListItemLink
                   to={menuItem.navLink}
-                  style={{ borderBottom: 0 }}
                   key={index}
-                >
-                  <ListItem
-                    classes={{
-                      root: classNames(classes.listItem,
-                        {
-                          [classes.activeListItem]: this.props.activeLeftMenuSelection ===
-                            menuItem.activeLeftMenuSelection,
-                        },
-                      ),
-                    }}
-                    onMouseEnter={this.onMouseEnterListItem(index)}
-                    onMouseLeave={this.onMouseLeaveListItem(index)}
-                  >
-                    <ListItemIcon>
-                      <AltinnIcon
-                        isActive={this.props.activeLeftMenuSelection ===
-                          menuItem.activeLeftMenuSelection}
-                        isActiveIconColor={altinnTheme.altinnPalette.primary.blueDark}
-                        iconClass={menuItem.iconClass}
-                        iconColor={this.state.iconColor[index] === undefined
-                          ? 'rgba(0, 0, 0, 0.54)' : this.state.iconColor[index]}
-                      />
-                    </ListItemIcon>
-                    <ListItemText
-                      disableTypography={true}
-                      primary={menuItem.displayText}
-                      classes={{ root: classNames(classes.listItemText) }}
-                    />
-                  </ListItem>
-                </Link>
+                  classes={classes}
+                  menuItem={menuItem}
+                  index={index}
+                  activeLeftMenuSelection={this.props.activeLeftMenuSelection === menuItem.activeLeftMenuSelection}
+                  onMouseEnterListItem={this.onMouseEnterListItem(index)}
+                  onMouseLeaveListItem={this.onMouseLeaveListItem(index)}
+                  state={this.state}
+                />
               ))}
             </List>
           </Drawer>

diff --git a/src/studio/src/designer/frontend/shared/navigation/drawer/ListItemLink.tsx b/src/studio/src/designer/frontend/shared/navigation/drawer/ListItemLink.tsx
@@ -0,0 +1,80 @@
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import * as React from 'react';
+import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
+import AltinnIcon from '../../components/AltinnIcon';
+import { IMenuItem } from './drawerMenuSettings';
+import { styles } from './leftDrawerMenuStyles';
+
+import altinnTheme from '../../theme/altinnStudioTheme';
+
+export interface ListItemLinkProps {
+    to: string;
+    classes: any;
+    menuItem: IMenuItem;
+    index: number;
+    activeLeftMenuSelection: boolean;
+    onMouseEnterListItem: any;
+    onMouseLeaveListItem: any;
+    state: any;
+}
+
+function ListItemLink(props: ListItemLinkProps) {
+  const {
+    to,
+    classes,
+    index,
+    menuItem,
+    activeLeftMenuSelection,
+    onMouseEnterListItem,
+    onMouseLeaveListItem,
+    state,
+  } = props;
+  const renderLink = React.useMemo(
+    () => React.forwardRef<any, Omit<RouterLinkProps, 'to'>>((itemProps, ref) => (
+      <RouterLink
+        to={to}
+        ref={ref}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...itemProps}
+      />)),
+    [to],
+  );
+  return (
+    <ListItem
+      button={true}
+      component={renderLink}
+      classes={{
+        root: classNames(classes.listItem,
+          {
+            [classes.activeListItem]: activeLeftMenuSelection,
+          }),
+      }}
+      style={{ borderBottom: 0 }}
+      onMouseEnter={onMouseEnterListItem}
+      onMouseLeave={onMouseLeaveListItem}
+    >
+
+      <ListItemIcon>
+        <AltinnIcon
+          isActive={activeLeftMenuSelection}
+          isActiveIconColor={altinnTheme.altinnPalette.primary.blueDark}
+          iconClass={menuItem.iconClass}
+          iconColor={state.iconColor[index] === undefined
+            ? 'rgba(0, 0, 0, 0.54)' : state.iconColor[index]}
+        />
+      </ListItemIcon>
+      <ListItemText
+        disableTypography={true}
+        primary={menuItem.displayText}
+        classes={{ root: classNames(classes.listItemText) }}
+      />
+
+    </ListItem>
+  );
+}
+
+export default withStyles(styles)(ListItemLink);
diff --git a/src/studio/src/designer/frontend/ux-editor/components/toolbar/ToolbarItemComponent.tsx b/src/studio/src/designer/frontend/ux-editor/components/toolbar/ToolbarItemComponent.tsx
@@ -21,7 +21,7 @@ class ToolbarItem extends React.Component<IToolbarItemProps> {
   public render(): JSX.Element {
     return (
       <Paper square={true} classes={{ root: classNames(this.props.classes.paper) }}>
-        <ListItem classes={{ root: classNames(this.props.classes.listItem) }}>
+        <ListItem classes={{ root: classNames(this.props.classes.listItem) }} component='div'>
           <i className={this.props.icon} />
           <ListItemText
             classes={{

diff --git a/src/studio/src/designer/frontend/ux-editor/containers/Toolbar.tsx b/src/studio/src/designer/frontend/ux-editor/containers/Toolbar.tsx
@@ -101,8 +101,8 @@ class ToolbarClass extends React.Component<IToolbarProps, IToolbarState> {
           itemType: LayoutItemType.Component,
           textResourceBindings: {
             title: c.name === 'Button' ?
-            getLanguageFromKey('ux_editor.modal_properties_button_type_submit', this.props.language)
-            : getComponentTitleByComponentType(c.Type, this.props.language),
+              getLanguageFromKey('ux_editor.modal_properties_button_type_submit', this.props.language)
+              : getComponentTitleByComponentType(c.Type, this.props.language),
           },
           dataModelBindings: {},
           ...JSON.parse(JSON.stringify(customProperties)),
@@ -292,28 +292,33 @@ class ToolbarClass extends React.Component<IToolbarProps, IToolbarState> {
               dense={false}
               id='schema-components'
             >
+
               {this.components.map((component: IToolbarElement, index: number) => (
-                <ToolbarItem
-                  text={getComponentTitleByComponentType(component.componentType, this.props.language)
-                    || component.label}
-                  icon={component.icon}
-                  componentType={component.componentType}
-                  onDropAction={component.actionMethod}
-                  onClick={this.handleComponentInformationOpen}
-                  key={index}
-                />
+                <li>
+                  <ToolbarItem
+                    text={getComponentTitleByComponentType(component.componentType, this.props.language)
+                      || component.label}
+                    icon={component.icon}
+                    componentType={component.componentType}
+                    onDropAction={component.actionMethod}
+                    onClick={this.handleComponentInformationOpen}
+                    key={index}
+                  />
+                </li>
               ))
               }
 
               {this.getThirdPartyComponents().map((component: IToolbarElement, index: number) => (
-                <ToolbarItem
-                  text={component.label}
-                  icon={component.icon}
-                  componentType={component.componentType}
-                  onDropAction={component.actionMethod}
-                  onClick={this.handleComponentInformationOpen}
-                  key={index}
-                />
+                <li>
+                  <ToolbarItem
+                    text={component.label}
+                    icon={component.icon}
+                    componentType={component.componentType}
+                    onDropAction={component.actionMethod}
+                    onClick={this.handleComponentInformationOpen}
+                    key={index}
+                  />
+                </li>
               ))}
               {/*
 
@@ -326,6 +331,7 @@ class ToolbarClass extends React.Component<IToolbarProps, IToolbarState> {
                 componentType={ComponentTypes.Container}
               />
               */}
+
             </List>
           </Collapse>
           <CollapsableMenuComponent