nicolium: enable jsx-a11y and react linter plugins, make them less strict

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/.oxlintrc.json

@@ -1,6 +1,6 @@
 {
   "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "plugins": ["typescript", "import", "promise"],
+  "plugins": ["typescript", "import", "promise", "react", "jsx-a11y"],
   "jsPlugins": ["eslint-plugin-formatjs"],
   "categories": {
     "correctness": "error",
@@ -45,6 +45,17 @@
     "unbound-method": "warn",
     "no-shadow": "off",
 
+    "react/exhaustive-deps": "off",
+
+    "jsx-a11y/anchor-is-valid": "warn",
+    "jsx-a11y/click-events-have-key-events": "warn",
+    "jsx-a11y/label-has-associated-control": "warn",
+    "jsx-a11y/media-has-caption": "off",
+    "jsx-a11y/mouse-events-have-key-events": "warn",
+    "jsx-a11y/no-autofocus": "warn",
+    "jsx-a11y/no-static-element-interactions": "warn",
+    "jsx-a11y/prefer-tag-over-role": "warn",
+
     "formatjs/enforce-default-message": "error",
     "formatjs/enforce-id": "error",
     "formatjs/no-literal-string-in-jsx": "warn"

packages/pl-fe/src/components/parsed-mfm.tsx

@@ -57,6 +57,7 @@ const ParsedMfm: React.FC<IParsedMfm> = React.memo(({ text, emojis, mentions, sp
       .join('');
 
   const genEl = (ast: mfm.MfmNode[], scale: number) =>
+    /* eslint-disable react/jsx-key */
     ast
       .map((token): React.JSX.Element | string | (React.JSX.Element | string)[] => {
         switch (token.type) {

packages/pl-fe/src/components/status-content.tsx

@@ -218,8 +218,9 @@ const StatusContent: React.FC<IStatusContent> = React.memo(
             '⁂-status-title--clamp': !expanded && lineClamp,
           })}
           key='spoiler'
-          aria-expanded={expanded}
-          {...(expandable ? { onClick: toggleExpanded, role: 'button' } : {})}
+          {...(expandable
+            ? { onClick: toggleExpanded, role: 'button', 'aria-expanded': expanded }
+            : {})}
         >
           <span ref={spoilerNode}>
             <Emojify text={spoilerText} emojis={status.emojis} />

packages/pl-fe/src/features/admin/components/counter.tsx

@@ -76,6 +76,7 @@ const Counter: React.FC<ICounter> = ({
             })}
           >
             {percentChange > 0 && '+'}
+            {/* eslint-disable-next-line react/style-prop-object */}
             <FormattedNumber value={percentChange} style='percent' />
           </span>
         )}

packages/pl-fe/src/features/admin/components/retention.tsx

@@ -93,6 +93,7 @@ const Retention: React.FC<IRetention> = ({ startAt, endAt, frequency }) => {
                     className='bg-primary-200 p-2.5 font-medium dark:bg-gray-800'
                     style={{ ['--tw-bg-opacity' as any]: 0.5 + average / 2 }}
                   >
+                    {/* eslint-disable-next-line react/style-prop-object */}
                     <FormattedNumber value={average} style='percent' />
                   </div>
                 </td>
@@ -120,6 +121,7 @@ const Retention: React.FC<IRetention> = ({ startAt, endAt, frequency }) => {
                     className='bg-primary-200 p-2.5 font-medium dark:bg-gray-800'
                     style={{ ['--tw-bg-opacity' as any]: 0.5 + retention.rate / 2 }}
                   >
+                    {/* eslint-disable-next-line react/style-prop-object */}
                     <FormattedNumber value={retention.rate} style='percent' />
                   </div>
                 </td>

packages/pl-fe/src/features/auth-login/components/consumers-list.tsx

@@ -23,7 +23,7 @@ const ConsumersList: React.FC = () => {
           </Text>
           <HStack space={2}>
             {providers.map((provider) => (
-              <ConsumerButton provider={provider} />
+              <ConsumerButton key={provider} provider={provider} />
             ))}
           </HStack>
         </Stack>

packages/pl-fe/src/modals/compare-history-modal.tsx

@@ -51,7 +51,7 @@ const CompareHistoryModal: React.FC<BaseModalProps & CompareHistoryModalProps> =
           const poll = typeof version.poll !== 'string' && version.poll;
 
           return (
-            <Stack space={2} className='py-2 first:pt-0 last:pb-0'>
+            <Stack space={2} className='py-2 first:pt-0 last:pb-0' key={version.created_at}>
               {version.spoiler_text.length > 0 && (
                 <>
                   <span>
@@ -67,11 +67,14 @@ const CompareHistoryModal: React.FC<BaseModalProps & CompareHistoryModalProps> =
                 <div className='poll'>
                   <Stack>
                     {poll.options.map((option: any) => (
-                      <HStack alignItems='center' className='p-1 text-gray-900 dark:text-gray-300'>
+                      <HStack
+                        alignItems='center'
+                        className='p-1 text-gray-900 dark:text-gray-300'
+                        key={option.title}
+                      >
                         <span
                           className='mr-2.5 inline-block size-4 flex-none rounded-full border border-solid border-primary-600'
-                          tabIndex={0}
-                          role='radio'
+                          aria-hidden
                         />
 
                         <span>

packages/pl-fe/src/pages/statuses/event-information.tsx

@@ -167,7 +167,7 @@ const EventInformationPage: React.FC = () => {
         </Text>
 
         {status.event.links.map((link) => (
-          <HStack space={2} alignItems='center'>
+          <HStack space={2} alignItems='center' key={link.url}>
             <Icon src={require('@phosphor-icons/core/regular/link-simple.svg')} />
             <a
               href={link.remote_url ?? link.url}

packages/pl-fe/src/pages/utils/about.tsx

@@ -45,15 +45,14 @@ const About: React.FC<IAbout> = ({ slug }) => {
         </li>
         {pageLocales?.map((locale) => (
           <li className="inline after:content-['_·_'] last:after:content-none" key={locale}>
-            <a
-              href='#'
+            <button
               onClick={() => {
                 setLocale(locale);
               }}
             >
               {/* @ts-expect-error */}
               {languages[locale] ?? locale}
-            </a>
+            </button>
           </li>
         ))}
       </ul>

packages/pl-fe/src/utils/numbers.tsx

@@ -39,6 +39,7 @@ const shortNumberFormat = (number: any, max?: number): React.ReactNode => {
         minimumFractionDigits={0}
         maximumSignificantDigits={3}
         numberingSystem='latn'
+        // eslint-disable-next-line react/style-prop-object
         style='decimal'
       />
       {factor}