When the notification icons are clicked, Echo replaces them with an OOUI badge. This was a huge problem when switching Vector 2022 from mediawiki UI to Codex and currently, Vector 2022 manages and syncs styles for the Echo button before and after being clicked.
In T342907 while preparing Minerva for the switch from mediawiki UI to Codex, we found the exact same problem with the Minerva desktop skin so this resulting in us having to temporarilydisable the feature.
We considered various solutions:
Create a transparent mode
We considered changing the logic for Echo to add a transparent icon alongside the existing icon rather than add a new icon:
https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Echo/+/803369
We were concerned that this would create issues for screen readers.
Option 2: Remove the badge logic (T343838)
The badge logic seems to exist for the sole purpose of updating the badge count when actions in the overlay occur. However, the badge count can also be easily manipulated by a hook e.g.
mw.hook( 'ext.echo.badge.countChange' ).add( function ( type, count, converted ) { if ( type === 'message' ) { $existingMessageLink.attr( 'data-counter-text', converted ); $existingMessageLink.attr( 'data-counter-num', count ); } } );
We think it would be better if Echo progressively enhanced the button rather than replacing it with its own button.
This felt like a relatively large refactor and a decision we couldn't make without the Echo maintainers so I created a new ticket: T343838
Disable the Echo experience in Minerva desktop and fallback to Special:Notifications
Rather than continue this pattern of creating technical debt, we decided to disable the Echo experience in the Minerva desktop skin. This seemed like the simplest short term solution so has been implemented currently.