Skip to content

Fix: notification links must have discernible text (a11y link-name) #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ZebaAfiaShama wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix: notification links must have discernible text (a11y link-name) #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2a74cb
Fix: ensure notification links have a discernible accessible name
ZebaAfiaShama Jun 18, 2026
8136733
Build: compile the link a11y fix into frontend.js
ZebaAfiaShama Jun 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/public/js/frontend.js
View file
Open in desktop

Large diffs are not rendered by default.

17 changes: 17 additions & 0 deletions nxdev/notificationx/frontend/core/Analytics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,20 @@ const Analytics = ({config, children = null, href = null, data = {}, dispatch =
}, []);
const iconUrl = getIconUrl(config.button_icon);

// a11y: guarantee the link has a discernible accessible name.
// ("Links must have discernible text" — Lighthouse/axe `link-name`.)
// The anchor's only visible text is the optional button text, which is
// hidden when link_text/link_button is off or link_button_text is empty.
// When no visible text is rendered, fall back to the configured button
// text, then the notification title, then the destination URL.
const isLinkTextRendered = !!(
(config.source === 'press_bar' ? config.link_text : config.link_button) &&
link_text && String(link_text).trim()
);
const accessibleLabel = isLinkTextRendered
? undefined
: (link_text || config?.title || link || undefined);

if( config.source == 'press_bar' ) {
// Apply computed styles to the anchor to avoid conflicting wrapper styles
const { style: incomingStyle, ...otherRest } = rest || {};
Expand All @@ -116,13 +130,15 @@ const Analytics = ({config, children = null, href = null, data = {}, dispatch =
<a
href={ link }
target={config?.link_open ? "_blank" : ""}
aria-label={accessibleLabel}
onClick={e => analyticsOnClick(e, restUrl, config, dispatch, frontendContext.rest.omit_credentials)}
style={anchorStyle}
{...otherRest}
>
{ (config?.button_icon && config?.button_icon !== 'none') && (
<img
src={iconUrl}
alt=""
style={{ width: 24, height: 24, marginRight: 8 }}
/>
)}
Expand Down Expand Up @@ -150,6 +166,7 @@ const Analytics = ({config, children = null, href = null, data = {}, dispatch =
href={ link }
style={styles}
target={config?.link_open ? "_blank" : ""}
aria-label={accessibleLabel}
onClick={e => analyticsOnClick(e, restUrl, config, frontendContext.rest.omit_credentials)}
{...rest}
>
Expand Down
6 changes: 6 additions & 0 deletions nxdev/notificationx/frontend/themes/helpers/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,16 @@ const Button = ({ data, config, announcementCSS = '', icon = false }) => {
}
const frontendContext = useNotificationContext();
const restUrl = nxHelper.getPath(frontendContext.rest, `analytics/`);
// a11y: ensure a discernible accessible name when the button text is empty.
const accessibleLabel =
(announcement_link_button_text && String(announcement_link_button_text).trim())
? undefined
: (config?.title || link || undefined);
return (
<a
href={link}
target={config?.link_open ? "_blank" : ""}
aria-label={accessibleLabel}
onClick={e => analyticsOnClick(e, restUrl, config, frontendContext.rest.omit_credentials)}
style={{
...(announcementCSS?.linkButtonTextColor && { color: announcementCSS.linkButtonTextColor }),
Expand Down