feat: implement URL parameter override, KoshienTestModal migration, and accessibility enhancements

- Allow ?showAllExtensions=true/false to override localStorage settings
- Migrate KoshienTestModal to use headerActions pattern
- Add aria-label to 'Show all extensions' checkbox for screen readers

Co-Authored-By: Gemini <noreply@google.com>

Author: takaokouji

src/components/koshien-test-modal/koshien-test-modal.css

@@ -21,3 +21,16 @@
     flex: 1;
     min-height: 0;
 }
+
+.reload-button {
+    font-weight: normal;
+    font-size: 0.75rem;
+}
+
+.stop-icon {
+    position: relative;
+    margin: 0.25rem;
+    user-select: none;
+    transform-origin: 50%;
+    transform: rotate(45deg);
+}

src/components/koshien-test-modal/koshien-test-modal.jsx

@@ -1,10 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
 
 import Box from '../box/box.jsx';
+import Button from '../button/button.jsx';
 import Modal from '../../containers/modal.jsx';
 
+import reloadIcon from '../../lib/assets/icon--reload.svg';
+import stopIcon from '../close-button/icon--close.svg';
+
 import styles from './koshien-test-modal.css';
 
 const messages = defineMessages({
@@ -33,16 +37,42 @@ const KoshienTestModal = props => {
         setLoading(false);
     }, []);
 
+    const headerActions = loading ? (
+        <Button
+            className={styles.reloadButton}
+            iconClassName={styles.stopIcon}
+            iconSrc={stopIcon}
+            onClick={handleStop}
+        >
+            <FormattedMessage
+                defaultMessage="Stop"
+                description="Stop button in modal"
+                id="gui.modal.stop"
+            />
+        </Button>
+    ) : (
+        <Button
+            className={styles.reloadButton}
+            iconSrc={reloadIcon}
+            onClick={handleReload}
+        >
+            <FormattedMessage
+                defaultMessage="Reload"
+                description="Reload button in modal"
+                id="gui.modal.reload"
+            />
+        </Button>
+    );
+
     return (
         <Modal
             className={styles.modalContent}
             contentLabel={intl.formatMessage(messages.title)}
             fullScreen
+            headerActions={headerActions}
             headerClassName={styles.header}
             id="koshienTestModal"
             loading={loading}
-            onReload={handleReload}
-            onStop={handleStop}
             onRequestClose={onRequestClose}
         >
             <Box

src/containers/extension-library.jsx

@@ -71,12 +71,17 @@ class ExtensionLibrary extends React.PureComponent {
         const extensionsParam = query.get('extensions') || '';
         const showMeshV2 = extensionsParam.split(',').includes('meshV2');
 
+        const showAllExtensionsParam = query.get('showAllExtensions');
+        const showAllExtensions = showAllExtensionsParam === 'true' ? true :
+            showAllExtensionsParam === 'false' ? false :
+                this.props.showAllExtensions;
+
         const extensionLibraryThumbnailData = extensionLibraryContent
             .filter(extension => {
                 if (extension.extensionId === 'meshV2' && !showMeshV2) {
                     return false;
                 }
-                if (!this.props.showAllExtensions && extension.defaultHidden) {
+                if (!showAllExtensions && extension.defaultHidden) {
                     return false;
                 }
                 return true;
@@ -86,10 +91,17 @@ class ExtensionLibrary extends React.PureComponent {
                 ...extension
             }));
 
+        const checkboxLabel = this.props.intl.formatMessage({
+            defaultMessage: 'Show all extensions',
+            description: 'Checkbox label to show all extensions including hidden ones',
+            id: 'gui.extensionLibrary.showAllExtensions'
+        });
+
         const headerActions = (
             <label className={styles.showAllExtensionsLabel}>
                 <input
-                    checked={this.props.showAllExtensions}
+                    aria-label={checkboxLabel}
+                    checked={showAllExtensions}
                     className={styles.showAllExtensionsCheckbox}
                     type="checkbox"
                     onChange={this.handleToggleShowAllExtensions}