diff --git a/widget.js b/widget.js
index 1fd59fb..f89efa5 100644
--- a/widget.js
+++ b/widget.js
@@ -109,7 +109,8 @@ const DEFAULT_WIDGET_CONFIG = {
screenReaderOff: 'Screen reader off',
voiceControlActivated: 'Voice control activated',
notSupportedBrowser: 'is not supported in this browser',
- close: 'Close'
+ close: 'Close',
+ reset: 'Reset'
},
// Voice Command Configuration - Developers can customize commands for different languages
@@ -272,18 +273,20 @@ const widgetStyles = `
flex: 1;
}
- .snn-close {
+ .snn-close, .snn-reset-button {
background: none;
border: none;
font-size: ${WIDGET_CONFIG.menu.closeButtonSize};
color: ${WIDGET_CONFIG.colors.secondary};
cursor: pointer;
- margin-left: auto;
line-height: ${WIDGET_CONFIG.typography.lineHeight};
border-radius: ${WIDGET_CONFIG.button.borderRadius};
width: ${WIDGET_CONFIG.menu.closeButtonSize};
height: ${WIDGET_CONFIG.menu.closeButtonSize};
position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.snn-close::before {
@@ -296,13 +299,57 @@ const widgetStyles = `
line-height: 1;
}
- .snn-close:focus {
+ .snn-reset-button svg {
+ width: 22px;
+ height: 22px;
+ fill: ${WIDGET_CONFIG.colors.secondary};
+ }
+
+ .snn-close:focus, .snn-reset-button:focus {
outline: solid 2px ${WIDGET_CONFIG.colors.secondary};
}
- .snn-close:hover {
+ .snn-close:hover, .snn-reset-button:hover {
color: ${WIDGET_CONFIG.colors.secondary};
- background: ${WIDGET_CONFIG.colors.primary};
+ background: rgba(255, 255, 255, 0.2);
+ }
+
+ /* Tooltip styles */
+ .snn-tooltip {
+ position: absolute;
+ bottom: -35px;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: rgba(0, 0, 0, 0.8);
+ color: white;
+ padding: 6px 10px;
+ border-radius: 4px;
+ font-size: 12px;
+ white-space: nowrap;
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity 0.2s;
+ z-index: 1000;
+ }
+
+ .snn-tooltip::before {
+ content: '';
+ position: absolute;
+ top: -4px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-bottom: 5px solid rgba(0, 0, 0, 0.8);
+ }
+
+ .snn-close:hover .snn-tooltip,
+ .snn-close:focus .snn-tooltip,
+ .snn-reset-button:hover .snn-tooltip,
+ .snn-reset-button:focus .snn-tooltip {
+ opacity: 1;
}
.snn-header {
@@ -316,35 +363,13 @@ const widgetStyles = `
top: 0;
z-index: 10;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ gap: 8px;
}
.snn-content {
padding: 0 10px 10px 10px;
}
- .snn-reset-button {
- font-size: ${WIDGET_CONFIG.menu.fontSize};
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: 10px;
- padding: ${WIDGET_CONFIG.menu.optionPadding};
- width: 100%;
- background-color: #343434;
- color: ${WIDGET_CONFIG.colors.secondary};
- border: none;
- cursor: pointer;
- border-radius: ${WIDGET_CONFIG.menu.borderRadius};
- transition: background-color ${WIDGET_CONFIG.animation.transition};
- line-height: ${WIDGET_CONFIG.typography.lineHeight} !important;
- font-weight: 500;
- gap: 8px;
- }
-
- .snn-reset-button:hover {
- background-color: #cc3333;
- }
-
.snn-options-grid {
display: grid;
grid-template-columns: ${WIDGET_CONFIG.gridLayout.columns};
@@ -359,6 +384,7 @@ const widgetStyles = `
line-height: ${WIDGET_CONFIG.typography.lineHeight} !important;
margin-left: 5px;
font-weight: ${WIDGET_CONFIG.typography.titleFontWeight};
+ flex: 1;
}
`;
@@ -532,7 +558,7 @@ const icons = {
lineHeight: ``,
textAlign: ``,
screenReader: ``,
- resetAll: ``,
+ resetAll: ``,
voiceControl: ``,
fontSelection: ``,
colorFilter: ``,
@@ -1313,10 +1339,18 @@ function createAccessibilityMenu() {
title.id = 'snn-accessibility-title';
title.textContent = WIDGET_CONFIG.lang.accessibilityTools;
+ // Create reset button
+ const resetButton = document.createElement('button');
+ resetButton.classList.add('snn-reset-button');
+ resetButton.innerHTML = `${icons.resetAll}${WIDGET_CONFIG.lang.reset}`;
+ resetButton.setAttribute('aria-label', WIDGET_CONFIG.lang.resetAllSettings);
+ resetButton.addEventListener('click', resetAccessibilitySettings);
+
+ // Create close button
const closeButton = document.createElement('button');
closeButton.className = 'snn-close';
- closeButton.innerHTML = '';
- closeButton.setAttribute('title', WIDGET_CONFIG.lang.closeAccessibilityMenu);
+ closeButton.innerHTML = `${WIDGET_CONFIG.lang.close}`;
+ closeButton.setAttribute('aria-label', WIDGET_CONFIG.lang.closeAccessibilityMenu);
closeButton.addEventListener('click', function () {
closeMenu();
@@ -1330,6 +1364,7 @@ function createAccessibilityMenu() {
});
header.appendChild(title);
+ header.appendChild(resetButton);
header.appendChild(closeButton);
menu.appendChild(header);
@@ -1337,14 +1372,6 @@ function createAccessibilityMenu() {
const content = document.createElement('div');
content.classList.add('snn-content');
- // Create reset button (outside grid, full width)
- const resetButton = document.createElement('button');
- resetButton.innerHTML = `${icons.resetAll}${WIDGET_CONFIG.lang.resetAllSettings}`;
- resetButton.setAttribute('aria-label', WIDGET_CONFIG.lang.resetAllSettings);
- resetButton.classList.add('snn-reset-button');
- resetButton.addEventListener('click', resetAccessibilitySettings);
- content.appendChild(resetButton);
-
// Create grid wrapper for accessibility options
const optionsGrid = document.createElement('div');
optionsGrid.classList.add('snn-options-grid');
@@ -1586,7 +1613,7 @@ let keyboardCache = {
if (menuCache.menu) {
this.focusableElements = {
all: menuCache.menu.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
- options: Array.from(menuCache.menu.querySelectorAll('.snn-accessibility-option, .snn-close'))
+ options: Array.from(menuCache.menu.querySelectorAll('.snn-accessibility-option, .snn-close, .snn-reset-button'))
};
this.lastUpdate = now;
}