Skip to content

PO-2984 Adding href, removing redundant attributes and amending styles for links#2343

Draft
ChrisGarratt122 wants to merge 7 commits intomasterfrom
PO-2984
Draft

PO-2984 Adding href, removing redundant attributes and amending styles for links#2343
ChrisGarratt122 wants to merge 7 commits intomasterfrom
PO-2984

Conversation

@ChrisGarratt122
Copy link
Copy Markdown
Contributor

@ChrisGarratt122 ChrisGarratt122 commented Mar 17, 2026

Jira link

See PO-2984

Change description

The cause of links rendering with incorrect styling (black colour as opposed to blue, and an IBeam cursor on hover when it should be a pointer) is caused when links are used without the href="" attribute. The presence of href on links is in the best interest of accessibility, but is only functionally required when navigating away from a page.
Ideally link elements would only be used when navigating away from a page and would always use href to achieve this, however there are many existing links across the application that are either used not to navigate away from the page or achieve their functionality via a (click) event.

In the interest of retaining existing functionality across the application but still prioritising accessibility and expected stying, this PR is a compromise that applies the following changes to links application wide:

  • Ensuring the presence of href, using href="" where functionality is achieved via a click event.
  • Ensuring event.preventDefault() is called in underlying methods to prevent unintended page navigation.
  • Removing tabindex="0". This is redundant as links with href are focusable by default.
  • Removing redundant (keydown.enter)/(keyup.enter) handlers, links with href trigger click on enter by default.

Testing done

Several affected links tested manually, ensured at least one instance of each different 'type' of link tested manually (e.g. list link, cancel link, delete link)
Tests introduced to check for presence of expected attributes on links and absence of redundant attributes.
Tests introduced to ensure original underlying methods are still being called and that event.preventDefault() is being called.

Security Vulnerability Assessment

CVE Suppression: Are there any CVEs present in the codebase (either newly introduced or pre-existing) that are being intentionally suppressed or ignored by this commit?

  • Yes
  • No

Checklist

  • commit messages are meaningful and follow good commit message guidelines
  • README and other documentation has been updated / added (if needed)
  • tests have been updated / new tests has been added (if needed)
  • Does this PR introduce a breaking change

@ChrisGarratt122
Copy link
Copy Markdown
Contributor Author

This changes rely on updates to opal-frontend-common-ui-lib, without these changes:

  • Some underlying methods come from the ui and do not call event.preventDefault() causing possible unintended page navigation.
  • Links using the govuk-error-colour class lose their red colour styling.

The PR for the ui library changes is available here:
common-ui-lib PR#419

@ChrisGarratt122 ChrisGarratt122 self-assigned this Mar 19, 2026
This was referenced Mar 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant