wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-11-23 23:44:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make NotificationItemWidget an <a> tag to fix focus issues

Browse source 
Bug: T258705
Change-Id: Ib44e04dd08e2818eb99ffb0cba73c775256d66d5
This commit is contained in:
Ed Sanders 2020-07-23 15:23:29 +01:00
parent 25e2fb4a8f
commit 42e2e5efbc
2 changed files with 22 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
modules/styles/mw.echo.ui.NotificationItemWidget.less
View file

@ -3,6 +3,7 @@
@import '../echo.mixins.less';
.mw-echo-ui-notificationItemWidget {
display: block;
background-color: @notification-item-background-read;
position: relative;
white-space: normal;
@ -11,10 +12,25 @@
border: 1px solid #c8ccd1;
border-bottom: 0;
&:not( [ href ] ) {
// Items without a primary URL are not clickable
cursor: default;
}
label {
// Reset browser default of cursor:default;
cursor: inherit;
}
&:hover {
background-color: #ececec;
}
&:focus {
box-shadow: inset 0 0 0 2px @color-primary;
outline: 0;
}
&:last-child {
border-bottom: 1px solid #c8ccd1;
}

19
modules/ui/mw.echo.ui.NotificationItemWidget.js
View file

@ -200,25 +200,18 @@
.toggleClass( 'mw-echo-ui-notificationItemWidget-initiallyUnseen', !this.model.isSeen() && !this.bundle )
.toggleClass( 'mw-echo-ui-notificationItemWidget-bundled', this.bundle );
// Wrap the entire item with primary url
if ( this.model.getPrimaryUrl() ) {
this.$element.contents()
.wrapAll(
// HACK: Wrap the entire item with a link that takes
// the user to the primary url. This is not perfect,
// but it makes the behavior native to the browser rather
// than us listening to click events and opening new
// windows.
$( '<a>' )
.addClass( 'mw-echo-ui-notificationItemWidget-linkWrapper' )
.attr( 'href', this.model.getPrimaryUrl() )
.on( 'click', this.onPrimaryLinkClick.bind( this ) )
);
this.$element
.attr( 'href', this.model.getPrimaryUrl() )
.on( 'click', this.onPrimaryLinkClick.bind( this ) );
}
};
OO.inheritClass( mw.echo.ui.NotificationItemWidget, OO.ui.Widget );
// Make the whole item a link to get native link behaviour
mw.echo.ui.NotificationItemWidget.static.tagName = 'a';
/**
* Respond to primary link click.
* Override this in the descendents.