From c358f22f1f9c433a3631d119c146b0390f775c2c Mon Sep 17 00:00:00 2001
From: Uladzislau_Kutarkin <uladzislau_kutarkin@epam.com>
Date: Mon, 13 Jan 2025 15:05:08 +0400
Subject: [PATCH] UIU-3027: Update fee/fine actions column UX for accessibility

---
 CHANGELOG.md                                           | 1 +
 src/components/Accounts/ViewFeesFines/ViewFeesFines.js | 5 +++--
 src/views/AccountsListing/AccountsListing.js           | 2 +-
 translations/ui-users/en.json                          | 1 +
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 80c710d17..f685297c8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * Remove duplicates from the keyboard shortcut modal. Refs UIU-3026.
 * React v19: refactor away from default props for functional components. Refs. UIU-3141.
 * Hide Create block button for user without permission. Refs UIU-3300.
+* Update fee/fine actions column UX for accessibility. Refs UIU-3027.
 
 ## [11.0.10](https://github.com/folio-org/ui-users/tree/v11.0.10) (2025-01-10)
 [Full Changelog](https://github.com/folio-org/ui-users/compare/v11.0.9...v11.0.10)
diff --git a/src/components/Accounts/ViewFeesFines/ViewFeesFines.js b/src/components/Accounts/ViewFeesFines/ViewFeesFines.js
index b75e32899..736b92588 100644
--- a/src/components/Accounts/ViewFeesFines/ViewFeesFines.js
+++ b/src/components/Accounts/ViewFeesFines/ViewFeesFines.js
@@ -249,7 +249,7 @@ class ViewFeesFines extends React.Component {
       'callNumber': f => (f.callNumber ? f.callNumber : '-'),
       'dueDate': f => (f.dueDate ? this.formatDateTime(f.dueDate) : '-'),
       'returnedDate': f => (this.getLoan(f).returnDate ? this.formatDateTime(this.getLoan(f).returnDate) : '-'),
-      ' ': f => this.renderActions(f, this.getLoan(f)),
+      'actions': f => this.renderActions(f, this.getLoan(f)),
     };
   }
 
@@ -478,6 +478,7 @@ class ViewFeesFines extends React.Component {
       'callNumber': intl.formatMessage({ id: 'ui-users.accounts.history.columns.number' }),
       'dueDate': intl.formatMessage({ id: 'ui-users.accounts.history.columns.due' }),
       'returnedDate': intl.formatMessage({ id: 'ui-users.accounts.history.columns.returned' }),
+      'actions': intl.formatMessage({ id: 'ui-users.accounts.history.columns.actions' }),
     };
 
     return (
@@ -499,7 +500,7 @@ class ViewFeesFines extends React.Component {
           'callNumber': 110,
           'dueDate': 110,
           'returnedDate': 110,
-          ' ': 50
+          'actions': 70
         }}
         visibleColumns={this.props.visibleColumns}
         fullWidth
diff --git a/src/views/AccountsListing/AccountsListing.js b/src/views/AccountsListing/AccountsListing.js
index 9bc9f3649..20809ac6b 100644
--- a/src/views/AccountsListing/AccountsListing.js
+++ b/src/views/AccountsListing/AccountsListing.js
@@ -99,7 +99,7 @@ const possibleColumns = [
   'callNumber',
   'dueDate',
   'returnedDate',
-  ' ',
+  'actions',
 ];
 
 class AccountsHistory extends React.Component {
diff --git a/translations/ui-users/en.json b/translations/ui-users/en.json
index 9e1f6dffb..3589e681c 100644
--- a/translations/ui-users/en.json
+++ b/translations/ui-users/en.json
@@ -647,6 +647,7 @@
   "accounts.history.columns.number": "Effective call number string",
   "accounts.history.columns.status": "Payment status",
   "accounts.history.columns.due": "Due date",
+  "accounts.history.columns.actions": "Actions",
   "accounts.history.columns.returned": "Returned date",
   "accounts.history.possibleColumns.columns.created": "Date Created",
   "accounts.history.button.select": "Select columns",