fix lint

.eslintrc.js

@@ -46,5 +46,6 @@ module.exports = {
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-noninteractive-element-interactions": "off",
     "jsx-a11y/no-static-element-interactions": "off",
+    "@typescript-eslint/default-param-last": "warn",
   },
 };

src/components/CrossFadeImages.tsx

@@ -70,6 +70,7 @@ const CrossFadeImages: React.FC<CrossFadeImagesProps> = ({
       $duration={len * SINGLE_IMAGE_TIME}
     >
       { images.map((image, idx) => (
+        // eslint-disable-next-line react/no-array-index-key
         <div key={idx} className={idx > 0 ? "not-first" : undefined}>
           <AnimatedImage
             key={image}

src/components/Favicons.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 const Icons = (): JSX.Element => (
   <>
-    <link rel="shortcut icon" href="/favicons/favicon.ico" />
+    <link rel="icon" href="/favicons/favicon.ico" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="48x48" href="/favicons/favicon-48x48.png" />

src/components/Widgets/Checkbox/Checkboxes.tsx

@@ -16,7 +16,7 @@ const selectValue = (value, selected, all) => {
 const deselectValue = (value, selected) => selected.filter((v) => v !== value);
 
 type CheckboxesProps = Omit<WidgetProps, "options"> & {
-  options: any;
+  options: Record<string, any>;
 };
 
 const CheckboxContainer = styled.div`
@@ -30,12 +30,13 @@ const Checkboxes: React.FC<CheckboxesProps> = ({
   return (
     <div className="checkboxes" id={id}>
       {enumOptions.map((option, index) => {
+        const key = `${id}_${index}`;
         const checked = value.indexOf(option.value) !== -1;
         const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
         const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
         const checkbox = (
           <Checkbox
-            id={`${id}_${index}`}
+            id={key}
             checked={checked}
             disabled={disabled || itemDisabled || readonly}
             autoFocus={autofocus && index === 0}
@@ -52,11 +53,11 @@ const Checkboxes: React.FC<CheckboxesProps> = ({
           </Checkbox>
         );
         return inline ? (
-          <label key={index} className={`checkbox-inline ${disabledCls}`}>
+          <label key={key} className={`checkbox-inline ${disabledCls}`}>
             {checkbox}
           </label>
         ) : (
-          <CheckboxContainer key={index} className={disabledCls}>
+          <CheckboxContainer key={key} className={disabledCls}>
             {checkbox}
           </CheckboxContainer>
         );

src/components/Widgets/RadioButton/RadioButtonWidget.tsx

@@ -38,7 +38,8 @@ const RadioButtonWidget: React.FC<RadioButtonWidgetProps> = (props) => {
   // this is a temporary fix for radio button rendering bug in React, facebook/react#7630.
   return (
     <div className="field-radio-group" id={id}>
-      {enumOptions.map((option, i) => {
+      {enumOptions.map((option, index) => {
+        const key = `${id}_${index}`;
         const checked = option.value === value;
         const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
         const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
@@ -49,7 +50,7 @@ const RadioButtonWidget: React.FC<RadioButtonWidgetProps> = (props) => {
             required={required}
             value={option.value}
             disabled={disabled || itemDisabled || readonly}
-            autoFocus={autofocus && i === 0}
+            autoFocus={autofocus && index === 0}
             onChange={() => onChange(option.value)}
             onBlur={onBlur && ((event) => onBlur(id, event.target.value))}
             onFocus={onFocus && ((event) => onFocus(id, event.target.value))}
@@ -59,11 +60,11 @@ const RadioButtonWidget: React.FC<RadioButtonWidgetProps> = (props) => {
         );
 
         return inline ? (
-          <label key={i} className={`radio-inline ${disabledCls}`}>
+          <label key={key} className={`radio-inline ${disabledCls}`}>
             {radio}
           </label>
         ) : (
-          <RadioButtonContainer key={i} className={disabledCls}>
+          <RadioButtonContainer key={key} className={disabledCls}>
             {radio}
           </RadioButtonContainer>
         );