Enhance accessibility features and improve layout responsiveness#18
Enhance accessibility features and improve layout responsiveness#18Pavlusha311245 wants to merge 1 commit into
Conversation
- Added comprehensive accessibility widget with multiple modes - Implemented localStorage persistence for accessibility preferences - Improved keyboard accessibility and added toggle functionality for mobile menu - Migrated layout to CSS Grid for better responsiveness - Updated typography scaling and line-height for enhanced readability - Fixed various layout and animation issues for better user experience
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a comprehensive accessibility overhaul for the FreeUnit documentation, including a new accessibility widget with multiple display modes, mobile navigation improvements, and keyboard accessibility enhancements. The review feedback highlights specific WAI-ARIA improvements for the search functionality, mobile menu, and accessibility panel to ensure better screen reader support.
| if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { | ||
| e.preventDefault() | ||
| const items = Array.from(container.querySelectorAll('.nxt_search_item')) | ||
| if (!items.length) return | ||
| const cur = container.querySelector('.nxt_search_item.nxt_active') | ||
| let idx = items.indexOf(cur) | ||
| items.forEach(i => i.classList.remove('nxt_active')) | ||
| if (e.key === 'ArrowDown') idx = Math.min(idx + 1, items.length - 1) | ||
| else idx = Math.max(idx - 1, 0) | ||
| items[idx] && items[idx].classList.add('nxt_active') | ||
| items[idx] && items[idx].scrollIntoView({ block: 'nearest' }) | ||
| } |
There was a problem hiding this comment.
The keyboard navigation for search results should update the aria-selected attribute on the items and the aria-activedescendant attribute on the input field to comply with the WAI-ARIA Combobox pattern. This allows screen readers to announce the currently highlighted result as the user navigates with arrow keys.
| function openMenu() { | ||
| side.classList.add('side-open') | ||
| overlay && overlay.classList.add('overlay-open') | ||
| btn.setAttribute('aria-expanded', 'true') | ||
| btn.textContent = '✕' | ||
| } | ||
| function closeMenu() { | ||
| side.classList.remove('side-open') | ||
| overlay && overlay.classList.remove('overlay-open') | ||
| btn.setAttribute('aria-expanded', 'false') | ||
| btn.textContent = '☰' | ||
| } |
There was a problem hiding this comment.
When the mobile menu is toggled, the aria-label on the button should be updated to reflect the current state (e.g., 'Close navigation' when open). This ensures screen reader users understand the action the button will perform.
function openMenu() {
side.classList.add('side-open')
overlay && overlay.classList.add('overlay-open')
btn.setAttribute('aria-expanded', 'true')
btn.setAttribute('aria-label', 'Close navigation')
btn.textContent = '✕'
}
function closeMenu() {
side.classList.remove('side-open')
overlay && overlay.classList.remove('overlay-open')
btn.setAttribute('aria-expanded', 'false')
btn.setAttribute('aria-label', 'Open navigation')
btn.textContent = '☰'
}| <div id="a11y-panel" | ||
| role="dialog" | ||
| aria-label="Accessibility settings" | ||
| aria-modal="false" |
There was a problem hiding this comment.
The accessibility panel uses a focus trap in JavaScript but is marked with aria-modal="false". If the panel is intended to behave as a modal dialog (preventing interaction with the rest of the page), it should be set to aria-modal="true". If it is a non-modal overlay, the focus trap should be removed to allow keyboard users to navigate out of the panel naturally.
1 participant
A personal suggestion for improving the documentation website interface