feat: Support bigger font size in dashboard (#10974)
# Pull Request Template ## Description Fixes https://linear.app/chatwoot/issue/CW-4091/accessibility-improvement-support-bigger-font-size-for-the-dashboard ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? ### **Loom video** https://www.loom.com/share/1ab781859fa748a5ad54aacbacd127b4?sid=a7dd9164-a6de-462f-bff7-1b25e9c55b4f ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
This commit is contained in:
Sivin Varghese
175
app/javascript/dashboard/composables/spec/useFontSize.spec.js
Normal file
175
app/javascript/dashboard/composables/spec/useFontSize.spec.js
Normal file
@@ -0,0 +1,175 @@
|
||||
import { ref } from 'vue';
|
||||
import { useFontSize } from '../useFontSize';
|
||||
import { useUISettings } from 'dashboard/composables/useUISettings';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
// Mock dependencies
|
||||
vi.mock('dashboard/composables/useUISettings');
|
||||
vi.mock('dashboard/composables', () => ({
|
||||
useAlert: vi.fn(message => message),
|
||||
}));
|
||||
vi.mock('vue-i18n');
|
||||
|
||||
// Mock requestAnimationFrame
|
||||
global.requestAnimationFrame = vi.fn(cb => cb());
|
||||
|
||||
describe('useFontSize', () => {
|
||||
const mockUISettings = ref({
|
||||
font_size: '16px',
|
||||
});
|
||||
const mockUpdateUISettings = vi.fn().mockResolvedValue(undefined);
|
||||
const mockTranslate = vi.fn(key => key);
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
|
||||
// Setup mocks
|
||||
useUISettings.mockReturnValue({
|
||||
uiSettings: mockUISettings,
|
||||
updateUISettings: mockUpdateUISettings,
|
||||
});
|
||||
|
||||
useI18n.mockReturnValue({
|
||||
t: mockTranslate,
|
||||
});
|
||||
|
||||
// Reset DOM state
|
||||
document.documentElement.style.removeProperty('font-size');
|
||||
|
||||
// Reset mockUISettings to default
|
||||
mockUISettings.value = { font_size: '16px' };
|
||||
});
|
||||
|
||||
it('returns fontSizeOptions with correct structure', () => {
|
||||
const { fontSizeOptions } = useFontSize();
|
||||
expect(fontSizeOptions).toHaveLength(6);
|
||||
expect(fontSizeOptions[0]).toHaveProperty('value');
|
||||
expect(fontSizeOptions[0]).toHaveProperty('label');
|
||||
|
||||
// Check specific options
|
||||
expect(fontSizeOptions.find(option => option.value === '16px')).toEqual({
|
||||
value: '16px',
|
||||
label:
|
||||
'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.DEFAULT',
|
||||
});
|
||||
|
||||
expect(fontSizeOptions.find(option => option.value === '14px')).toEqual({
|
||||
value: '14px',
|
||||
label:
|
||||
'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.SMALLER',
|
||||
});
|
||||
|
||||
expect(fontSizeOptions.find(option => option.value === '22px')).toEqual({
|
||||
value: '22px',
|
||||
label:
|
||||
'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.EXTRA_LARGE',
|
||||
});
|
||||
});
|
||||
|
||||
it('returns currentFontSize from UI settings', () => {
|
||||
const { currentFontSize } = useFontSize();
|
||||
expect(currentFontSize.value).toBe('16px');
|
||||
|
||||
mockUISettings.value.font_size = '18px';
|
||||
expect(currentFontSize.value).toBe('18px');
|
||||
});
|
||||
|
||||
it('applies font size to document root correctly based on pixel values', () => {
|
||||
const { applyFontSize } = useFontSize();
|
||||
|
||||
applyFontSize('18px');
|
||||
expect(document.documentElement.style.fontSize).toBe('18px');
|
||||
|
||||
applyFontSize('14px');
|
||||
expect(document.documentElement.style.fontSize).toBe('14px');
|
||||
|
||||
applyFontSize('22px');
|
||||
expect(document.documentElement.style.fontSize).toBe('22px');
|
||||
|
||||
applyFontSize('16px');
|
||||
expect(document.documentElement.style.fontSize).toBe('16px');
|
||||
});
|
||||
|
||||
it('updates UI settings and applies font size', async () => {
|
||||
const { updateFontSize } = useFontSize();
|
||||
|
||||
await updateFontSize('20px');
|
||||
|
||||
expect(mockUpdateUISettings).toHaveBeenCalledWith({ font_size: '20px' });
|
||||
expect(document.documentElement.style.fontSize).toBe('20px');
|
||||
expect(useAlert).toHaveBeenCalledWith(
|
||||
'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.UPDATE_SUCCESS'
|
||||
);
|
||||
});
|
||||
|
||||
it('shows error alert when update fails', async () => {
|
||||
mockUpdateUISettings.mockRejectedValueOnce(new Error('Update failed'));
|
||||
|
||||
const { updateFontSize } = useFontSize();
|
||||
await updateFontSize('20px');
|
||||
|
||||
expect(useAlert).toHaveBeenCalledWith(
|
||||
'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.UPDATE_ERROR'
|
||||
);
|
||||
});
|
||||
|
||||
it('handles unknown font size values gracefully', () => {
|
||||
const { applyFontSize } = useFontSize();
|
||||
|
||||
// Should not throw an error and should apply the default font size
|
||||
applyFontSize('unknown-size');
|
||||
expect(document.documentElement.style.fontSize).toBe('16px');
|
||||
});
|
||||
|
||||
it('watches for UI settings changes and applies font size', async () => {
|
||||
useFontSize();
|
||||
|
||||
// Initial font size should now be 16px instead of empty
|
||||
expect(document.documentElement.style.fontSize).toBe('16px');
|
||||
|
||||
// Update UI settings
|
||||
mockUISettings.value = { font_size: '18px' };
|
||||
|
||||
// Wait for next tick to let watchers fire
|
||||
await Promise.resolve();
|
||||
|
||||
expect(document.documentElement.style.fontSize).toBe('18px');
|
||||
});
|
||||
|
||||
it('translates font size option labels correctly', () => {
|
||||
// Set up specific translation mapping
|
||||
mockTranslate.mockImplementation(key => {
|
||||
const translations = {
|
||||
'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.SMALLER':
|
||||
'Smaller',
|
||||
'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.DEFAULT':
|
||||
'Default',
|
||||
'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.EXTRA_LARGE':
|
||||
'Extra Large',
|
||||
};
|
||||
return translations[key] || key;
|
||||
});
|
||||
|
||||
const { fontSizeOptions } = useFontSize();
|
||||
|
||||
// Check that translation is applied
|
||||
expect(fontSizeOptions.find(option => option.value === '14px').label).toBe(
|
||||
'Smaller'
|
||||
);
|
||||
expect(fontSizeOptions.find(option => option.value === '16px').label).toBe(
|
||||
'Default'
|
||||
);
|
||||
expect(fontSizeOptions.find(option => option.value === '22px').label).toBe(
|
||||
'Extra Large'
|
||||
);
|
||||
|
||||
// Verify translation function was called with correct keys
|
||||
expect(mockTranslate).toHaveBeenCalledWith(
|
||||
'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.SMALLER'
|
||||
);
|
||||
expect(mockTranslate).toHaveBeenCalledWith(
|
||||
'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.DEFAULT'
|
||||
);
|
||||
});
|
||||
});
|
||||
140
app/javascript/dashboard/composables/useFontSize.js
Normal file
140
app/javascript/dashboard/composables/useFontSize.js
Normal file
@@ -0,0 +1,140 @@
|
||||
/**
|
||||
* @file useFontSize.js
|
||||
* @description A composable for managing font size settings throughout the application.
|
||||
* This handles font size selection, application to the DOM, and persistence in user settings.
|
||||
*/
|
||||
|
||||
import { computed, watch } from 'vue';
|
||||
import { useUISettings } from 'dashboard/composables/useUISettings';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
/**
|
||||
* Font size options with their pixel values
|
||||
* @type {Object}
|
||||
*/
|
||||
const FONT_SIZE_OPTIONS = {
|
||||
SMALLER: '14px',
|
||||
SMALL: '15px',
|
||||
DEFAULT: '16px',
|
||||
LARGE: '18px',
|
||||
LARGER: '20px',
|
||||
EXTRA_LARGE: '22px',
|
||||
};
|
||||
|
||||
/**
|
||||
* Array of font size option keys
|
||||
* @type {Array<string>}
|
||||
*/
|
||||
const FONT_SIZE_NAMES = Object.keys(FONT_SIZE_OPTIONS);
|
||||
|
||||
/**
|
||||
* Get font size label translation key
|
||||
*
|
||||
* @param {string} name - Font size name
|
||||
* @returns {string} Translation key
|
||||
*/
|
||||
const getFontSizeLabelKey = name =>
|
||||
`PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.${name}`;
|
||||
|
||||
/**
|
||||
* Create font size option object
|
||||
*
|
||||
* @param {Function} t - Translation function
|
||||
* @param {string} name - Font size name
|
||||
* @returns {Object} Font size option with value and label
|
||||
*/
|
||||
const createFontSizeOption = (t, name) => ({
|
||||
value: FONT_SIZE_OPTIONS[name],
|
||||
label: t(getFontSizeLabelKey(name)),
|
||||
});
|
||||
|
||||
/**
|
||||
* Apply font size value to document root
|
||||
*
|
||||
* @param {string} pixelValue - Font size value in pixels
|
||||
*/
|
||||
const applyFontSizeToDOM = pixelValue => {
|
||||
document.documentElement.style.setProperty(
|
||||
'font-size',
|
||||
pixelValue ?? FONT_SIZE_OPTIONS.DEFAULT
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Font size management composable
|
||||
*
|
||||
* @returns {Object} Font size utilities and state
|
||||
* @property {Array} fontSizeOptions - Array of font size options for select components
|
||||
* @property {import('vue').ComputedRef<string>} currentFontSize - Current font size from UI settings
|
||||
* @property {Function} applyFontSize - Function to apply font size to document
|
||||
* @property {Function} updateFontSize - Function to update font size in settings with alert feedback
|
||||
*/
|
||||
export const useFontSize = () => {
|
||||
const { uiSettings, updateUISettings } = useUISettings();
|
||||
const { t } = useI18n();
|
||||
|
||||
/**
|
||||
* Font size options for select dropdown
|
||||
* @type {Array<{value: string, label: string}>}
|
||||
*/
|
||||
const fontSizeOptions = FONT_SIZE_NAMES.map(name =>
|
||||
createFontSizeOption(t, name)
|
||||
);
|
||||
|
||||
/**
|
||||
* Current font size from UI settings
|
||||
* @type {import('vue').ComputedRef<string>}
|
||||
*/
|
||||
const currentFontSize = computed(
|
||||
() => uiSettings.value.font_size || FONT_SIZE_OPTIONS.DEFAULT
|
||||
);
|
||||
|
||||
/**
|
||||
* Apply font size to document root
|
||||
* @param {string} pixelValue - Font size in pixels (e.g., '16px')
|
||||
* @returns {void}
|
||||
*/
|
||||
const applyFontSize = pixelValue => {
|
||||
// Use requestAnimationFrame for better performance
|
||||
requestAnimationFrame(() => applyFontSizeToDOM(pixelValue));
|
||||
};
|
||||
|
||||
/**
|
||||
* Update font size in settings and apply to document
|
||||
* Shows success/error alerts
|
||||
* @param {string} pixelValue - Font size in pixels (e.g., '16px')
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
const updateFontSize = async pixelValue => {
|
||||
try {
|
||||
await updateUISettings({ font_size: pixelValue });
|
||||
applyFontSize(pixelValue);
|
||||
useAlert(
|
||||
t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.UPDATE_SUCCESS')
|
||||
);
|
||||
} catch (error) {
|
||||
useAlert(
|
||||
t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.UPDATE_ERROR')
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Watch for changes to the font size in UI settings
|
||||
watch(
|
||||
() => uiSettings.value.font_size,
|
||||
newSize => {
|
||||
applyFontSize(newSize);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
return {
|
||||
fontSizeOptions,
|
||||
currentFontSize,
|
||||
applyFontSize,
|
||||
updateFontSize,
|
||||
};
|
||||
};
|
||||
|
||||
export default useFontSize;
|
||||
Reference in New Issue
Block a user