From 6b659443b58a8fce2434743f256eaaeacfcfdca1 Mon Sep 17 00:00:00 2001 From: bwang Date: Fri, 7 Jul 2023 12:59:15 -0500 Subject: [PATCH] Update popups to use codex buttons over mediawiki.ui.buttons - Provides missing accessible label for the settings button Bug: T340256 Change-Id: I86972322ae34f1d1df8d79c66daa9e34091f9dd3 --- .storybook/main.js | 4 --- .storybook/stories/index.stories.js | 1 + extension.json | 7 +++-- includes/PopupsHooks.php | 24 +++++++++++++++ package-lock.json | 28 +++++++++--------- package.json | 4 +-- resources/dist/index.js | Bin 46707 -> 47371 bytes resources/dist/index.js.map.json | Bin 213626 -> 214718 bytes src/ui/index.less | 12 ++++++++ src/ui/renderer.js | 8 ++--- src/ui/templates/pagePreview/pagePreview.js | 14 ++++++--- src/ui/templates/popup/popup.less | 25 ++++------------ .../referencePreview/referencePreview.js | 15 ++++++---- .../settingsDialog/settingsDialog.js | 11 ++++--- .../settingsDialog/settingsDialog.less | 2 +- tests/node-qunit/ui/renderer.test.js | 8 ++--- webpack.config.js | 10 +++++-- 17 files changed, 106 insertions(+), 67 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 2d25cacb1..a65c3f634 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -4,10 +4,6 @@ const webpack = require( "webpack" ); module.exports = { stories: ['./stories/*.stories.js' ], webpackFinal: async (config, { configType }) => { - config.module.rules.push({ - test: /\.css$/, - use: ['style-loader', 'css-loader'] - }); config.module.rules.push({ test: /\.less$/, use: ['style-loader', 'css-loader', { diff --git a/.storybook/stories/index.stories.js b/.storybook/stories/index.stories.js index ce36e6d36..0760ac637 100644 --- a/.storybook/stories/index.stories.js +++ b/.storybook/stories/index.stories.js @@ -21,6 +21,7 @@ import { storiesOf } from '@storybook/html'; * Popups dependencies */ import { createPointerMasks } from '../../src/ui/renderer.js'; +import '../../node_modules/@wikimedia/codex/dist/codex.style.css'; /** * Popups helpers diff --git a/extension.json b/extension.json index 10d765535..bc14cc35c 100644 --- a/extension.json +++ b/extension.json @@ -25,7 +25,8 @@ "UserGetDefaultOptions": "PopupsHooks", "MakeGlobalVariablesScript": "PopupsHooks", "LocalUserCreated": "PopupsHooks", - "GetBetaFeaturePreferences": "PopupsHooks" + "GetBetaFeaturePreferences": "PopupsHooks", + "ResourceLoaderRegisterModules": "PopupsHooks" }, "HookHandlers": { "PopupsHooks": { @@ -229,12 +230,12 @@ "mediawiki.jqueryMsg", "mediawiki.storage", "mediawiki.Title", - "mediawiki.ui.button", "mediawiki.ui.checkbox", "mediawiki.ui.icon", "mediawiki.Uri", "mediawiki.user", - "mediawiki.util" + "mediawiki.util", + "codex-search-styles" ] } }, diff --git a/includes/PopupsHooks.php b/includes/PopupsHooks.php index 49fed0ae9..2a3f47007 100644 --- a/includes/PopupsHooks.php +++ b/includes/PopupsHooks.php @@ -28,6 +28,8 @@ use MediaWiki\Hook\MakeGlobalVariablesScriptHook; use MediaWiki\MediaWikiServices; use MediaWiki\Preferences\Hook\GetPreferencesHook; use MediaWiki\ResourceLoader\Hook\ResourceLoaderGetConfigVarsHook; +use MediaWiki\ResourceLoader\Hook\ResourceLoaderRegisterModulesHook; +use MediaWiki\ResourceLoader\ResourceLoader; use MediaWiki\User\Hook\UserGetDefaultOptionsHook; use MediaWiki\User\UserOptionsManager; use OutputPage; @@ -43,6 +45,7 @@ class PopupsHooks implements GetPreferencesHook, BeforePageDisplayHook, ResourceLoaderGetConfigVarsHook, + ResourceLoaderRegisterModulesHook, MakeGlobalVariablesScriptHook, UserGetDefaultOptionsHook, LocalUserCreatedHook @@ -320,4 +323,25 @@ class PopupsHooks implements } } + /** + * ResourceLoaderRegisterModules hook handler. + * + * Provides support for MLEB where needed. + * + * @see https://www.mediawiki.org/wiki/Manual:Hooks/ResourceLoaderRegisterModules + * + * @param ResourceLoader $resourceLoader + */ + public function onResourceLoaderRegisterModules( ResourceLoader $resourceLoader ): void { + if ( !$resourceLoader->getModule( 'codex-search-styles' ) ) { + // We're running an older version of MediaWiki. + $resourceLoader->register( [ + 'codex-search-styles' => [ + 'localBasePath' => dirname( __DIR__ ), + 'remoteExtPath' => 'UniversalLanguageSelector', + 'styles' => 'resources/codex.mleb.css', + ] + ] ); + } + } } diff --git a/package-lock.json b/package-lock.json index 8473d0d90..fbd33d4af 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,8 +18,8 @@ "@wdio/local-runner": "7.4.6", "@wdio/mocha-framework": "7.30.2", "@wdio/sync": "7.4.6", - "@wikimedia/codex": "0.11.0", - "@wikimedia/codex-icons": "0.11.0", + "@wikimedia/codex": "0.14.0", + "@wikimedia/codex-icons": "0.14.0", "@wikimedia/mw-node-qunit": "7.0.0", "babel-loader": "8.0.4", "browserslist-config-wikimedia": "0.2.0", @@ -6550,9 +6550,9 @@ } }, "node_modules/@wikimedia/codex": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-0.11.0.tgz", - "integrity": "sha512-DYI9ewtEqNykzYp1nMcyrtbKpGbVPTWkbxV9QJIDIDe2GayA8XbfK/7u0V5cnTU90iqCLwqsEnQZiXX4QDvsWg==", + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-0.14.0.tgz", + "integrity": "sha512-qx3ADc2I5yDg448WVZ6TodGdV2vCs4SLgH6KdDx0obAr+1vsmBUyBhaVenJOL2WrMDq1rAxV1gx7YrbgOoU/MQ==", "dev": true, "engines": { "node": ">=16", @@ -6563,9 +6563,9 @@ } }, "node_modules/@wikimedia/codex-icons": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-0.11.0.tgz", - "integrity": "sha512-aXpGI5UsWiWk1uag5I2+YlJinflmUVEyFoDH8IOt+Nko7t/z6EbJCHoMV482pVl9Ygbk2/ukHQ3LOFyS0Dv8xQ==", + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-0.14.0.tgz", + "integrity": "sha512-xbHV+5OMhIXrtfweeDAXO/HN69fn+bSUZtns6hbMgWsAK8t3hYyhQRzUeFJxrS0tApG4X9NQxIQ6mOmjZwz/rA==", "dev": true, "engines": { "node": ">=16", @@ -32567,16 +32567,16 @@ } }, "@wikimedia/codex": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-0.11.0.tgz", - "integrity": "sha512-DYI9ewtEqNykzYp1nMcyrtbKpGbVPTWkbxV9QJIDIDe2GayA8XbfK/7u0V5cnTU90iqCLwqsEnQZiXX4QDvsWg==", + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-0.14.0.tgz", + "integrity": "sha512-qx3ADc2I5yDg448WVZ6TodGdV2vCs4SLgH6KdDx0obAr+1vsmBUyBhaVenJOL2WrMDq1rAxV1gx7YrbgOoU/MQ==", "dev": true, "requires": {} }, "@wikimedia/codex-icons": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-0.11.0.tgz", - "integrity": "sha512-aXpGI5UsWiWk1uag5I2+YlJinflmUVEyFoDH8IOt+Nko7t/z6EbJCHoMV482pVl9Ygbk2/ukHQ3LOFyS0Dv8xQ==", + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-0.14.0.tgz", + "integrity": "sha512-xbHV+5OMhIXrtfweeDAXO/HN69fn+bSUZtns6hbMgWsAK8t3hYyhQRzUeFJxrS0tApG4X9NQxIQ6mOmjZwz/rA==", "dev": true }, "@wikimedia/mw-node-qunit": { diff --git a/package.json b/package.json index 6dd3dbde9..f77cca6b8 100644 --- a/package.json +++ b/package.json @@ -39,8 +39,8 @@ "@wdio/local-runner": "7.4.6", "@wdio/mocha-framework": "7.30.2", "@wdio/sync": "7.4.6", - "@wikimedia/codex": "0.11.0", - "@wikimedia/codex-icons": "0.11.0", + "@wikimedia/codex": "0.14.0", + "@wikimedia/codex-icons": "0.14.0", "@wikimedia/mw-node-qunit": "7.0.0", "babel-loader": "8.0.4", "browserslist-config-wikimedia": "0.2.0", diff --git a/resources/dist/index.js b/resources/dist/index.js index 24e2c9442d222f7e515ca235fddad69905c55c72..36cd466f0f27273f8d2404830a8a90984e141678 100644 GIT binary patch delta 1316 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 delta 13244 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 diff --git a/src/ui/index.less b/src/ui/index.less index 0033473ee..45981f625 100644 --- a/src/ui/index.less +++ b/src/ui/index.less @@ -9,3 +9,15 @@ position: absolute; top: -1000px; } + +.cdx-button.cdx-button--icon-only { + // Hide text in icon only buttons + span + span { + .mixin-screen-reader-text(); + } +} + +// FIXME: Remove after Iac69f7b14b732b0bbaa6ba265379ed4c4cdb3f7e is merged +.cdx-button--fake-button { + justify-content: center; +} diff --git a/src/ui/renderer.js b/src/ui/renderer.js index 4b5646a15..1631f7439 100644 --- a/src/ui/renderer.js +++ b/src/ui/renderer.js @@ -306,10 +306,10 @@ export function bindBehavior( preview, behavior ) { preview.el.addEventListener( 'click', behavior.click ); - const icon = preview.el.querySelector( '.mwe-popups-settings-icon' ); - if ( icon ) { - icon.href = behavior.settingsUrl; - icon.addEventListener( 'click', ( event ) => { + const button = preview.el.querySelector( '.mwe-popups-settings-button' ); + if ( button ) { + button.href = behavior.settingsUrl; + button.addEventListener( 'click', ( event ) => { event.stopPropagation(); behavior.showSettings( event ); diff --git a/src/ui/templates/pagePreview/pagePreview.js b/src/ui/templates/pagePreview/pagePreview.js index a142f90a4..5527ce564 100644 --- a/src/ui/templates/pagePreview/pagePreview.js +++ b/src/ui/templates/pagePreview/pagePreview.js @@ -3,7 +3,7 @@ */ import { renderPopup } from '../popup/popup'; -import { createNodeFromTemplate } from '../templateUtil'; +import { escapeHTML, createNodeFromTemplate } from '../templateUtil'; const defaultExtractWidth = 215; const templateHTML = ` @@ -11,8 +11,9 @@ const templateHTML = ` @@ -37,9 +38,14 @@ export function renderPagePreview( extract.setAttribute( 'dir', model.languageDirection ); extract.setAttribute( 'lang', model.languageCode ); - el.querySelector( '.mwe-popups-settings-icon' ) + el.querySelector( '.mwe-popups-settings-button' ) .setAttribute( 'title', linkTitle ); + // Set label on settings icon button + const labelText = escapeHTML( mw.msg( 'popups-settings-icon-gear-title' ) ); + const label = el.querySelector( '.mwe-popups-settings-button-label' ); + label.textContent = labelText; + if ( thumbnail ) { el.querySelector( '.mwe-popups-discreet' ).appendChild( thumbnail.el ); } else { diff --git a/src/ui/templates/popup/popup.less b/src/ui/templates/popup/popup.less index 5e4ce9f07..f1daaca34 100644 --- a/src/ui/templates/popup/popup.less +++ b/src/ui/templates/popup/popup.less @@ -62,25 +62,12 @@ } } - .mwe-popups-settings-icon { - display: block; + .mwe-popups-settings-button { float: right; // positions icon near bottom right corner - border-radius: @border-radius-base; - opacity: 0.67; - transition: background-color 100ms, opacity 100ms; - - &:hover { - // TODO: Replace by `@background-color-button-quiet--hover` - // as soon as available in mediawiki.skin.variables. - background-color: rgba( 0, 24, 73, 0.027 ); - } - - &:active { - // TODO: Replace by `@background-color-button-quiet--active` - // as soon as available in mediawiki.skin.variables. - background-color: rgba( 0, 24, 73, 0.082 ); - opacity: 1; - } + pointer-events: auto; // Overrides pointer-events: none on footer to ensure the button is interactive + // !important needed to override 'responsive' button styles on smaller viewports defined in Vector's Button.less + min-width: 32px !important; /* stylelint-disable-line declaration-no-important */ + min-height: 32px !important; /* stylelint-disable-line declaration-no-important */ } .mwe-popups-extract { @@ -409,7 +396,7 @@ /* @noflip */ right: 0; - .mwe-popups-settings-icon { + .mwe-popups-settings-button { /* @noflip */ float: left; } diff --git a/src/ui/templates/referencePreview/referencePreview.js b/src/ui/templates/referencePreview/referencePreview.js index 4f3fa00b0..05fda7df1 100644 --- a/src/ui/templates/referencePreview/referencePreview.js +++ b/src/ui/templates/referencePreview/referencePreview.js @@ -106,12 +106,15 @@ export function renderReferencePreview( // TODO: Remove when not in Beta any more if ( !mw.config.get( 'wgPopupsReferencePreviewsBetaFeature' ) ) { // TODO: Do not remove this but move it up into the templateHTML constant! - const settingsIconLink = document.createElement( 'a' ); - settingsIconLink.classList.add( 'mwe-popups-settings-icon' ); - const settingsIconLabel = document.createElement( 'span' ); - settingsIconLabel.classList.add( 'mw-ui-icon', 'mw-ui-icon-element', 'mw-ui-icon-small', 'mw-ui-icon-settings' ); - settingsIconLink.append( settingsIconLabel ); - el.querySelector( '.mwe-popups-settings' ).appendChild( settingsIconLink ); + const settingsButton = document.createElement( 'button' ); + settingsButton.classList.add( 'cdx-button', 'cdx-button--fake-button', 'cdx-button--fake-button--enabled', 'cdx-button--weight-quiet', 'cdx-button--icon-only', 'mwe-popups-settings-button' ); + const settingsIcon = document.createElement( 'span' ); + settingsIcon.classList.add( 'mw-ui-icon', 'mw-ui-icon-small', 'mw-ui-icon-settings' ); + const settingsButtonLabel = document.createElement( 'span' ); + settingsButtonLabel.textContent = mw.msg( 'popups-settings-icon-gear-title' ); + settingsButton.append( settingsIcon ); + settingsButton.append( settingsButtonLabel ); + el.querySelector( '.mwe-popups-settings' ).appendChild( settingsButton ); } else { // Change the styling when there is no content in the footer (to prevent empty space) el.querySelector( '.mwe-popups-container' ).classList.add( 'footer-empty' ); diff --git a/src/ui/templates/settingsDialog/settingsDialog.js b/src/ui/templates/settingsDialog/settingsDialog.js index 527af7c06..3da9d2cbd 100644 --- a/src/ui/templates/settingsDialog/settingsDialog.js +++ b/src/ui/templates/settingsDialog/settingsDialog.js @@ -58,12 +58,15 @@ export function renderSettingsDialog( model ) {
-
${closeLabel}
+

${heading}

- - + +
@@ -83,7 +86,7 @@ export function renderSettingsDialog( model ) {
diff --git a/src/ui/templates/settingsDialog/settingsDialog.less b/src/ui/templates/settingsDialog/settingsDialog.less index 601d73541..4496a42f8 100644 --- a/src/ui/templates/settingsDialog/settingsDialog.less +++ b/src/ui/templates/settingsDialog/settingsDialog.less @@ -17,7 +17,7 @@ position: relative; display: table; width: 100%; - padding: 5px 7px 5px 0; + padding: 5px 7px; > div { display: table-cell; diff --git a/tests/node-qunit/ui/renderer.test.js b/tests/node-qunit/ui/renderer.test.js index 7a1384e63..e49e9ee15 100644 --- a/tests/node-qunit/ui/renderer.test.js +++ b/tests/node-qunit/ui/renderer.test.js @@ -18,7 +18,7 @@ function createPagePreview( isTall, hasThumbnail, thumbnail ) { el: $( '
' ).append( hasThumbnail ? $( '' ) : '', $( '' ).addClass( 'mwe-popups-extract' ).text( 'extract' ), - $( '' ).addClass( 'mwe-popups-settings-icon' ) + $( '' ).addClass( 'mwe-popups-settings-button' ) )[ 0 ], isTall, hasThumbnail, @@ -166,7 +166,7 @@ QUnit.test( 'createPagePreview', ( assert ) => { 'Language direction is safely espaced' ); assert.strictEqual( - $( preview.el ).find( '.mwe-popups-settings-icon' ).attr( 'title' ), + $( preview.el ).find( '.mwe-popups-settings-button' ).attr( 'title' ), '', 'Title attribute is correct.' ); @@ -458,7 +458,7 @@ QUnit.test( 'bindBehavior - settings link click', function ( assert ) { behavior = createBehavior( this.sandbox ); renderer.bindBehavior( preview, behavior ); - preview.el.querySelector( '.mwe-popups-settings-icon' ).dispatchEvent( new Event( 'click' ) ); + preview.el.querySelector( '.mwe-popups-settings-button' ).dispatchEvent( new Event( 'click' ) ); assert.false( behavior.previewDwell.called, 'Preview dwell is NOT called.' ); assert.false( @@ -475,7 +475,7 @@ QUnit.test( 'bindBehavior - settings link URL', function ( assert ) { renderer.bindBehavior( preview, behavior ); assert.strictEqual( - $( preview.el ).find( '.mwe-popups-settings-icon' ).attr( 'href' ), + $( preview.el ).find( '.mwe-popups-settings-button' ).attr( 'href' ), behavior.settingsUrl, 'Settings link URL is correct.' ); diff --git a/webpack.config.js b/webpack.config.js index 1f39a39de..65651fc5a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -63,6 +63,12 @@ module.exports = ( env, argv ) => ( { options: { removeSVGTagAttrs: false // Keep width and height attributes. } + }, { + test: /\.css$/, + use: [ + 'style-loader', + 'css-loader' + ] } ] }, optimization: { @@ -112,8 +118,8 @@ module.exports = ( env, argv ) => ( { // Minified uncompressed size limits for chunks / assets and entrypoints. Keep these numbers // up-to-date and rounded to the nearest 10th of a kibibyte so that code sizing costs are // well understood. Related to bundlesize minified, gzipped compressed file size tests. - maxAssetSize: 45.8 * 1024, - maxEntrypointSize: 45.8 * 1024, + maxAssetSize: 46.4 * 1024, + maxEntrypointSize: 46.4 * 1024, // The default filter excludes map files but we rename ours. assetFilter: ( filename ) => !filename.endsWith( srcMapExt )