From 0aa96ecaee91d87a757d3d0bdecbeef472228bb6 Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Tue, 9 Dec 2025 21:39:50 +0000
Subject: [PATCH] Fix lint violations (vol.3) (#6301)

* Fix lint violations

* Refactor code for clarity and consistency

- Updated various components to improve readability and maintainability, including:
  - Changed `while (1)` to `while (true)` for better clarity.
  - Simplified conditional checks by removing unnecessary boolean casts.
  - Added missing `key` props in mapped elements to ensure proper rendering in lists.
  - Adjusted the handling of hidden states in budget components for clearer logic.
  - Cleaned up linting rules in `.oxlintrc.json` to streamline configuration.

* Enhance accessibility and linting compliance

- Updated `.oxlintrc.json` to add a warning for `jsx-a11y/no-autofocus` and removed several disabled rules.
- Added `aria-level` attributes to improve semantic structure in `Page.tsx`, `Modal.tsx`, and `ReportCardName.tsx`.
- Replaced `<label>` elements with `<Text>` components in various modals to ensure proper accessibility.
- Added `htmlFor` attributes to labels in `ImportTransactionsModal.tsx` for better form accessibility.
- Disabled specific linting rules inline to address accessibility concerns in `Image.jsx` and `Toggle.tsx`.

* Add new keywords to spelling allowlist

- Updated `.github/actions/docs-spelling/allow/keywords.txt` to include `oxfmt` and `oxlint` for improved spell-checking in documentation and code comments.

* Disable no-autofocus rule in .oxlintrc.json

* Update Trans component usage in MergeUnusedPayeesModal

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .github/actions/docs-spelling/allow/keywords.txt |  2 ++
 .oxlintrc.json                                   |  7 ++-----
 packages/component-library/src/Toggle.tsx        |  1 +
 packages/desktop-client/src/components/Page.tsx  |  1 +
 .../src/components/common/Modal.tsx              |  1 +
 .../src/components/modals/EditAccess.tsx         |  4 ++--
 .../src/components/modals/EditUser.tsx           | 16 ++++++++--------
 .../ImportTransactionsModal.tsx                  |  6 ++++++
 .../components/modals/MergeUnusedPayeesModal.tsx | 10 ++++++----
 .../src/components/modals/TransferOwnership.tsx  | 12 ++++++------
 .../src/components/reports/FormulaResult.tsx     |  1 -
 .../src/components/reports/ReportCardName.tsx    |  1 +
 .../src/components/reports/SummaryNumber.tsx     |  1 -
 .../src/components/settings/AuthSettings.tsx     |  4 ++--
 packages/docs/src/components/Image.jsx           |  1 +
 upcoming-release-notes/6301.md                   |  6 ++++++
 16 files changed, 45 insertions(+), 29 deletions(-)
 create mode 100644 upcoming-release-notes/6301.md

diff --git a/.github/actions/docs-spelling/allow/keywords.txt b/.github/actions/docs-spelling/allow/keywords.txt
index c2b8fadf3a..21b014e318 100644
--- a/.github/actions/docs-spelling/allow/keywords.txt
+++ b/.github/actions/docs-spelling/allow/keywords.txt
@@ -101,6 +101,8 @@ offbudget
 ofx
 OFX
 oneof
+oxfmt
+oxlint
 payeerule
 pikaday
 pikapods
diff --git a/.oxlintrc.json b/.oxlintrc.json
index 22caa3bc1f..0186281c46 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -2,15 +2,12 @@
   "$schema": "./node_modules/oxlint/configuration_schema.json",
   "plugins": ["react", "typescript", "import", "jsx-a11y"],
   "rules": {
+    "jsx-a11y/no-autofocus": ["warn", { "ignoreNonDOM": true }],
+
     // TODO fix all these and re-enable
-    "jsx-a11y/alt-text": "off",
-    "jsx-a11y/aria-role": "off",
     "jsx-a11y/click-events-have-key-events": "off",
-    "jsx-a11y/label-has-associated-control": "off",
     "jsx-a11y/prefer-tag-over-role": "off",
-    "jsx-a11y/role-has-required-aria-props": "off",
     "jsx-a11y/tabindex-no-positive": "off",
-    "no-autofocus": "off",
   },
   "overrides": [
     {
diff --git a/packages/component-library/src/Toggle.tsx b/packages/component-library/src/Toggle.tsx
index ee055edf8b..dd00190258 100644
--- a/packages/component-library/src/Toggle.tsx
+++ b/packages/component-library/src/Toggle.tsx
@@ -36,6 +36,7 @@ export const Toggle = ({
         })}
         type="checkbox"
       />
+      {/* oxlint-disable-next-line eslint-plugin-jsx-a11y(label-has-associated-control) */}
       <label
         data-toggle-container
         data-on={isOn}
diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx
index 89920cea6a..65c60e6e72 100644
--- a/packages/desktop-client/src/components/Page.tsx
+++ b/packages/desktop-client/src/components/Page.tsx
@@ -78,6 +78,7 @@ export function MobilePageHeader({
       </View>
       <View
         role="heading"
+        aria-level={1}
         style={{
           textAlign: 'center',
           alignItems: 'center',
diff --git a/packages/desktop-client/src/components/common/Modal.tsx b/packages/desktop-client/src/components/common/Modal.tsx
index f0cd6ed4cd..960b5bd584 100644
--- a/packages/desktop-client/src/components/common/Modal.tsx
+++ b/packages/desktop-client/src/components/common/Modal.tsx
@@ -315,6 +315,7 @@ export function ModalHeader({
   return (
     <View
       role="heading"
+      aria-level={1}
       style={{
         justifyContent: 'center',
         alignItems: 'center',
diff --git a/packages/desktop-client/src/components/modals/EditAccess.tsx b/packages/desktop-client/src/components/modals/EditAccess.tsx
index 61f52c727f..e65f834a21 100644
--- a/packages/desktop-client/src/components/modals/EditAccess.tsx
+++ b/packages/desktop-client/src/components/modals/EditAccess.tsx
@@ -112,7 +112,7 @@ export function EditUserAccess({
                     onChange={(newValue: string) => setUserId(newValue)}
                     value={userId}
                   />
-                  <label
+                  <Text
                     style={{
                       ...styles.verySmallText,
                       color: theme.pageTextLight,
@@ -120,7 +120,7 @@ export function EditUserAccess({
                     }}
                   >
                     <Trans>Select a user from the directory</Trans>
-                  </label>
+                  </Text>
                 </View>
               )}
               {availableUsers.length === 0 && (
diff --git a/packages/desktop-client/src/components/modals/EditUser.tsx b/packages/desktop-client/src/components/modals/EditUser.tsx
index cdc8f45118..c15ae4c9ea 100644
--- a/packages/desktop-client/src/components/modals/EditUser.tsx
+++ b/packages/desktop-client/src/components/modals/EditUser.tsx
@@ -221,7 +221,7 @@ function EditUser({ defaultUser, onSave: originalOnSave }: EditUserProps) {
               borderColor: theme.buttonMenuBorder,
             }}
           />
-          <label
+          <Text
             style={{
               ...styles.verySmallText,
               color: theme.pageTextLight,
@@ -229,7 +229,7 @@ function EditUser({ defaultUser, onSave: originalOnSave }: EditUserProps) {
             }}
           >
             <Trans>The username registered within the OpenID provider.</Trans>
-          </label>
+          </Text>
         </FormField>
         <View
           style={{
@@ -254,7 +254,7 @@ function EditUser({ defaultUser, onSave: originalOnSave }: EditUserProps) {
         </View>
       </SpaceBetween>
       {isOwner && (
-        <label
+        <Text
           style={{
             ...styles.verySmallText,
             color: theme.errorText,
@@ -264,7 +264,7 @@ function EditUser({ defaultUser, onSave: originalOnSave }: EditUserProps) {
           <Trans>
             Change this username with caution; it is the server owner.
           </Trans>
-        </label>
+        </Text>
       )}
       <SpaceBetween style={{ marginTop: 10 }}>
         <FormField style={{ flex: 1 }}>
@@ -365,7 +365,7 @@ const RoleDescription = () => {
         </Trans>
       </Text>
       <View style={{ paddingTop: 5 }}>
-        <label
+        <Text
           style={{
             ...styles.altMenuHeaderText,
             ...styles.verySmallText,
@@ -373,7 +373,7 @@ const RoleDescription = () => {
           }}
         >
           <Trans>Basic</Trans>
-        </label>
+        </Text>
         <Text
           style={{
             ...styles.verySmallText,
@@ -398,7 +398,7 @@ const RoleDescription = () => {
         </Text>
       </View>
       <View style={{ paddingTop: 10 }}>
-        <label
+        <Text
           style={{
             ...styles.altMenuHeaderText,
             ...styles.verySmallText,
@@ -406,7 +406,7 @@ const RoleDescription = () => {
           }}
         >
           <Trans>Admin</Trans>
-        </label>
+        </Text>
         <Text
           style={{
             ...styles.verySmallText,
diff --git a/packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.tsx b/packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.tsx
index 3ea99a587f..4a6cded221 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.tsx
+++ b/packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.tsx
@@ -970,6 +970,7 @@ export function ImportTransactionsModal({
                   <View style={{ marginLeft: 10, gap: 5 }}>
                     <SectionLabel title={t('CSV OPTIONS')} />
                     <label
+                      htmlFor="csv-delimiter-select"
                       style={{
                         display: 'flex',
                         flexDirection: 'row',
@@ -979,6 +980,7 @@ export function ImportTransactionsModal({
                     >
                       <Trans>Delimiter:</Trans>
                       <Select
+                        id="csv-delimiter-select"
                         options={[
                           [',', ','],
                           [';', ';'],
@@ -994,6 +996,7 @@ export function ImportTransactionsModal({
                       />
                     </label>
                     <label
+                      htmlFor="csv-skip-start-lines"
                       style={{
                         display: 'flex',
                         flexDirection: 'row',
@@ -1003,6 +1006,7 @@ export function ImportTransactionsModal({
                     >
                       <Trans>Skip start lines:</Trans>
                       <Input
+                        id="csv-skip-start-lines"
                         type="number"
                         value={skipStartLines}
                         min="0"
@@ -1014,6 +1018,7 @@ export function ImportTransactionsModal({
                       />
                     </label>
                     <label
+                      htmlFor="csv-skip-end-lines"
                       style={{
                         display: 'flex',
                         flexDirection: 'row',
@@ -1023,6 +1028,7 @@ export function ImportTransactionsModal({
                     >
                       <Trans>Skip end lines:</Trans>
                       <Input
+                        id="csv-skip-end-lines"
                         type="number"
                         value={skipEndLines}
                         min="0"
diff --git a/packages/desktop-client/src/components/modals/MergeUnusedPayeesModal.tsx b/packages/desktop-client/src/components/modals/MergeUnusedPayeesModal.tsx
index e41774d82e..48bfe82afb 100644
--- a/packages/desktop-client/src/components/modals/MergeUnusedPayeesModal.tsx
+++ b/packages/desktop-client/src/components/modals/MergeUnusedPayeesModal.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { Button } from '@actual-app/components/button';
 import { Paragraph } from '@actual-app/components/paragraph';
@@ -31,6 +31,7 @@ export function MergeUnusedPayeesModal({
   payeeIds,
   targetPayeeId,
 }: MergeUnusedPayeesModalProps) {
+  const { t } = useTranslation();
   const allPayees = usePayees();
   const modalStack = useSelector(state => state.modals.modalStack);
   const isEditingRule = !!modalStack.find(m => m.name === 'edit-rule');
@@ -177,6 +178,9 @@ export function MergeUnusedPayeesModal({
                   alignItems: 'center',
                   justifyContent: 'center',
                 }}
+                aria-label={t(
+                  'Automatically rename these payees in the future',
+                )}
               >
                 <input
                   type="checkbox"
@@ -184,9 +188,7 @@ export function MergeUnusedPayeesModal({
                   onChange={e => setShouldCreateRule(e.target.checked)}
                 />
                 <Text style={{ marginLeft: 3 }}>
-                  <Trans count={payees.length}>
-                    Automatically rename these payees in the future
-                  </Trans>
+                  <Trans>Automatically rename these payees in the future</Trans>
                 </Text>
               </label>
             )}
diff --git a/packages/desktop-client/src/components/modals/TransferOwnership.tsx b/packages/desktop-client/src/components/modals/TransferOwnership.tsx
index e810912798..4ffecdbe0e 100644
--- a/packages/desktop-client/src/components/modals/TransferOwnership.tsx
+++ b/packages/desktop-client/src/components/modals/TransferOwnership.tsx
@@ -125,7 +125,7 @@ export function TransferOwnership({
                     value={userId}
                     defaultLabel={t('Select a user')}
                   />
-                  <label
+                  <Text
                     style={{
                       ...styles.verySmallText,
                       color: theme.pageTextLight,
@@ -136,8 +136,8 @@ export function TransferOwnership({
                       Select a user from the directory to designate as the new
                       budget owner.
                     </Trans>
-                  </label>
-                  <label
+                  </Text>
+                  <Text
                     style={{
                       ...styles.verySmallText,
                       color: theme.errorText,
@@ -147,8 +147,8 @@ export function TransferOwnership({
                     {t(
                       'This action is irreversible, ownership of this budget file will only be able to be transferred by the server administrator or new owner.',
                     )}
-                  </label>
-                  <label
+                  </Text>
+                  <Text
                     style={{
                       ...styles.verySmallText,
                       color: theme.errorText,
@@ -156,7 +156,7 @@ export function TransferOwnership({
                     }}
                   >
                     <Trans>Proceed with caution.</Trans>
-                  </label>
+                  </Text>
                 </View>
               )}
               {availableUsers.length === 0 && (
diff --git a/packages/desktop-client/src/components/reports/FormulaResult.tsx b/packages/desktop-client/src/components/reports/FormulaResult.tsx
index 9c79ff258c..4166f3f43a 100644
--- a/packages/desktop-client/src/components/reports/FormulaResult.tsx
+++ b/packages/desktop-client/src/components/reports/FormulaResult.tsx
@@ -144,7 +144,6 @@ export function FormulaResult({
       {!loading && (
         <View
           ref={mergedRef as Ref<HTMLDivElement>}
-          role="text"
           aria-label={displayValue}
           style={{
             alignItems: 'center',
diff --git a/packages/desktop-client/src/components/reports/ReportCardName.tsx b/packages/desktop-client/src/components/reports/ReportCardName.tsx
index bad6685f07..d5b64d29fb 100644
--- a/packages/desktop-client/src/components/reports/ReportCardName.tsx
+++ b/packages/desktop-client/src/components/reports/ReportCardName.tsx
@@ -48,6 +48,7 @@ export const ReportCardName = ({
         marginBottom: 5,
       }}
       role="heading"
+      aria-level={2}
     >
       {name}
     </Block>
diff --git a/packages/desktop-client/src/components/reports/SummaryNumber.tsx b/packages/desktop-client/src/components/reports/SummaryNumber.tsx
index f011ab0191..e1aea30509 100644
--- a/packages/desktop-client/src/components/reports/SummaryNumber.tsx
+++ b/packages/desktop-client/src/components/reports/SummaryNumber.tsx
@@ -74,7 +74,6 @@ export function SummaryNumber({
       {!loading && (
         <View
           ref={mergedRef as Ref<HTMLDivElement>}
-          role="text"
           aria-label={
             value < 0
               ? t('Negative amount: {{amount}}', { amount: displayAmount })
diff --git a/packages/desktop-client/src/components/settings/AuthSettings.tsx b/packages/desktop-client/src/components/settings/AuthSettings.tsx
index e8a5803794..ed3a813118 100644
--- a/packages/desktop-client/src/components/settings/AuthSettings.tsx
+++ b/packages/desktop-client/src/components/settings/AuthSettings.tsx
@@ -84,11 +84,11 @@ export function AuthSettings() {
                 <Trans>Disable OpenID</Trans>
               </Button>
               {multiuserEnabled && (
-                <label style={{ paddingTop: 5, color: theme.errorText }}>
+                <Text style={{ paddingTop: 5, color: theme.errorText }}>
                   <Trans>
                     Disabling OpenID will deactivate multi-user mode.
                   </Trans>
-                </label>
+                </Text>
               )}
             </>
           )}
diff --git a/packages/docs/src/components/Image.jsx b/packages/docs/src/components/Image.jsx
index 12be30d4ef..0af899daaa 100644
--- a/packages/docs/src/components/Image.jsx
+++ b/packages/docs/src/components/Image.jsx
@@ -51,6 +51,7 @@ export default function Image({ img, ...props }) {
     }
     return <IdealImage img={img} theme={theme} {...props} />;
   } else {
+    // oxlint-disable-next-line alt-text
     return <img {...props} />;
   }
 }
diff --git a/upcoming-release-notes/6301.md b/upcoming-release-notes/6301.md
new file mode 100644
index 0000000000..af9df23171
--- /dev/null
+++ b/upcoming-release-notes/6301.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Fix more lint issues