Fix accessibility issues

CHANGELOG.md

@@ -5,6 +5,7 @@
 * Cover src/index.js file by jest/RTL tests. Refs UIREQMED-68.
 * Increase code coverage of RequestForm.js file by jest/RTL tests. Refs UIREQMED-69.
 * Fix issue with search field when user clears search value. Refs UIREQMED-75.
+* Fix accessibility issues. Refs UIREQMED-74.
 
 ## [2.0.1] (https://github.com/folio-org/ui-requests-mediated/tree/v2.0.1) (2024-12-06)
 [Full Changelog](https://github.com/folio-org/ui-requests-mediated/compare/v2.0.0...v2.0.1)

src/components/MediatedRequestsActivities/components/ItemDetail/ItemDetail.css

@@ -0,0 +1,3 @@
+.itemLink {
+  margin-right: 2px;
+}

src/components/MediatedRequestsActivities/components/ItemDetail/ItemDetail.js

@@ -1,6 +1,9 @@
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { FormattedMessage } from 'react-intl';
+import {
+  FormattedMessage,
+  useIntl,
+} from 'react-intl';
 
 import {
   Col,
@@ -14,11 +17,14 @@ import { ClipCopy } from '@folio/stripes/smart-components';
 
 import { ITEM_STATUS_TRANSLATION_KEYS } from '../../../../constants';
 
+import css from './ItemDetail.css';
+
 const ItemDetail = ({
   request,
   item,
   loan,
 }) => {
+  const { formatMessage } = useIntl();
   const itemId = request?.itemId || item.id;
 
   if (!itemId && !item.barcode) {
@@ -35,7 +41,15 @@ const ItemDetail = ({
   const dueDate = loan?.dueDate ? <FormattedDate value={loan.dueDate} /> : <NoValue />;
   const effectiveCallNumberString = effectiveCallNumber(item);
   const itemLabel = item.barcode ? 'ui-requests-mediated.itemDetails.barcode' : 'ui-requests-mediated.itemDetails.id';
-  const recordLink = itemId ? <Link to={`/inventory/view/${instanceId}/${holdingsRecordId}/${itemId}`}>{item.barcode || itemId}</Link> : item.barcode || <NoValue />;
+  const recordLink = itemId ?
+    <Link
+      aria-label={formatMessage({ id: 'ui-requests-mediated.form.item.ariaLabel' })}
+      to={`/inventory/view/${instanceId}/${holdingsRecordId}/${itemId}`}
+      className={css.itemLink}
+    >
+      {item.barcode || itemId}
+    </Link> :
+    item.barcode || <NoValue />;
 
   return (
     <>

src/components/MediatedRequestsActivities/components/ItemDetail/ItemDetail.test.js

@@ -157,4 +157,52 @@ describe('ItemDetail', () => {
       expect(dueDateValue).toBeInTheDocument();
     });
   });
+
+  describe('When item id does not exist', () => {
+    const props = {
+      ...basicProps,
+      item: {
+        ...basicProps.item,
+        id: undefined,
+      },
+    };
+
+    beforeEach(() => {
+      render(
+        <ItemDetail
+          {...props}
+        />
+      );
+    });
+
+    it('should render item barcode', () => {
+      const itemBarcode = screen.getByText(props.item.barcode);
+
+      expect(itemBarcode).toBeInTheDocument();
+    });
+  });
+
+  describe('When item barcode does not exist', () => {
+    const props = {
+      ...basicProps,
+      item: {
+        ...basicProps.item,
+        barcode: undefined,
+      },
+    };
+
+    beforeEach(() => {
+      render(
+        <ItemDetail
+          {...props}
+        />
+      );
+    });
+
+    it('should render item id', () => {
+      const itemId = screen.getByText(props.item.id);
+
+      expect(itemId).toBeInTheDocument();
+    });
+  });
 });

src/components/MediatedRequestsActivities/components/UserForm/UserForm.js

@@ -40,6 +40,7 @@ const UserForm = ({
       name={name}
       id={user.id}
       barcode={user.barcode}
+      ariaLabel={<FormattedMessage id="ui-requests-mediated.form.requester.ariaLabel" />}
     />;
   const proxySection = (isProxyAvailable && proxyInformation.id) ?
     <UserHighlightBox

src/components/MediatedRequestsActivities/components/UserHighlightBox/UserHighlightBox.js

@@ -17,9 +17,10 @@ const UserHighlightBox = ({
   name,
   id,
   barcode,
+  ariaLabel,
 }) => {
   const recordLink = getUserHighlightBoxLink(name, id);
-  const barcodeLink = getUserHighlightBoxLink(barcode, id);
+  const barcodeLink = getUserHighlightBoxLink(barcode, id, ariaLabel);
 
   return (
     <Row>
@@ -49,6 +50,7 @@ UserHighlightBox.propTypes = {
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   barcode: PropTypes.string.isRequired,
+  ariaLabel: PropTypes.node,
 };
 
 export default UserHighlightBox;

src/utils.js

@@ -283,8 +283,15 @@ export const formatNoteReferrerEntityData = (entityData) => {
   return false;
 };
 
-export const getUserHighlightBoxLink = (linkText, id) => {
-  return linkText ? <Link to={`/users/view/${id}`}>{linkText}</Link> : <></>;
+export const getUserHighlightBoxLink = (linkText, id, ariaLabel) => {
+  return linkText ?
+    <Link
+      {...(ariaLabel ? { ariaLabel } : {})}
+      to={`/users/view/${id}`}
+    >
+      {linkText}
+    </Link> :
+    <></>;
 };
 
 export const getProxyInformation = (proxy, proxyIdFromRequest) => {

translations/ui-requests-mediated/en.json

@@ -97,11 +97,13 @@
   "form.item.accordionLabel": "Item information",
   "form.item.inputPlaceholder": "Scan or enter item barcode",
   "form.item.inputLabel": "Item barcode",
+  "form.item.ariaLabel": "View item record",
 
   "form.requester.accordionLabel": "Requester information",
   "form.requester.inputPlaceholder": "Scan or enter requester barcode",
   "form.requester.inputLabel": "Requester barcode",
   "form.requester.lookupLabel": "Requester look-up",
+  "form.requester.ariaLabel": "View requester record",
 
   "form.request.accordionLabel": "Request information",
   "form.request.requestType": "Request type",