سجل التغييرات

اتصلّح

• Read aloud says how it works when you switch it on: "Read aloud is on. Click or tap any text to hear it." Before, switching it on gave no sound, so it looked broken until you clicked some text. Only a switch in the panel says it, never a page load with the setting saved. New label readAloudOn, in English, Arabic and the 14 languages of the language pack.

اتضاف

• Read aloud (readAloud): a click or tap on the page, or keyboard focus, reads that block (or an image's alt text) with the browser's own speech, in the language of that part of the page. Escape, or a second tap on the same block, stops it. Form fields are read by their label, never their value. Speech the page started itself is not interrupted. Shown only in browsers that can speak; nothing is sent anywhere by the widget.
• Page structure (feature key pageStructure): a dialog listing the page's headings (with their level), regions (header, navigation, main content, sidebar, footer, search, named forms and regions) and links. Choosing one moves focus and the view to it.
• Bold text (boldText) and Invert colors (invertColors). Invert works on the layer below the widget, like the other color filters; images, video, canvas and frames are inverted twice, so they keep their colors (not CSS background photos or inline SVG). Bold text leaves icon fonts and code alone.
• The text magnifier shows an image's alt text (or a role="img" element's label) when the pointer or focus is on it.
• `feedbackUrl` option: a "Report a problem" link in the footer (a page, a form or mailto:).
• Labels for all of the above in English, Arabic and the 14 languages of the language pack.

اتصلّحsecurity

• The text magnifier never shows what is typed in a password field (it showed the field's value before); read aloud never speaks any field's value. Password fields show their placeholder or label instead.

اتغيّرdesign

• The dark panel uses neutral charcoal surfaces, and a brighter tint of the brand color for icons, links and focus rings.

اتغيّر

• statementUrl (and feedbackUrl) accept mailto: links too. Other schemes such as javascript: are still dropped.
• The bundle-size budget is 28 KB gzipped (was 26 KB).

اتضاف

• `colorScheme` option: the panel follows the site's dark mode. With "auto" (the default) the panel turns dark while the page's own background is dark, whether the site switches themes with a class, a data attribute or prefers-color-scheme, and with any color format (oklch too). The widget's own contrast modes don't count, and a theme that sets the panel colors keeps them. "light" and "dark" fix the scheme. Brand-colored text, icons and focus rings use a lighter tint of theme.primary on the dark panel, so they keep their contrast.
• Optional language pack (open-accessibility-widget/languages, or dist/open-accessibility-widget.languages.global.js → window.A11yWidgetLanguages): Spanish, French, German, Italian, Portuguese, Dutch, Polish, Turkish, Russian, Chinese, Japanese, Korean, Hindi and Hebrew (right-to-left), plus extraLanguages and allLanguages. It stays out of the main bundle; the ESM entry is tree-shakable (about 1 KB gzipped per language). Translations by the maintainers; native-speaker corrections welcome.

اتغيّرdesign

• The language menu button in the header is the globe icon only, a square like the close button; the current language stays its value for screen readers and its tooltip.
• Smaller panel title and subtitle.

اتصلّح

• The panel's scrollbars use the widget's colors instead of inheriting the page's scrollbar-color.

اتغيّرproject

• The bundle-size budget is 26 KB gzipped (was 25 KB).
• Docs site: the demo widget offers all 16 languages; the logo always opens the home page at the top; tidier footer; the scrollbar follows the light theme; Arabic pages in Egyptian Arabic, with technical terms in English.

اتضاف

• Open Shadow DOM. Adjustments now reach inside web components: each open shadow root gets the page rules as an adopted stylesheet (works under a strict CSP), text size measures its text, and media in it is muted or paused. Components added later are found too. Closed shadow roots stay out of reach.
• Same-origin iframes get the same adjustments while the page is adjusted (content scale and color filters come from the page around them, so nothing is applied twice). Reading aids follow the pointer and focus into them. A frame that runs its own copy of the widget is left to it. Cross-origin iframes (video players, maps, payment forms) can't be reached by any script.
• Reading aids on touch screens. Reading line, focus window and magnifier move to where you tap; the magnifier keeps showing what was tapped.
• "Stop animations" also stops script and SVG animations (Web Animations API, SMIL), including ones started later. Like CSS animations, finite ones jump to their end (content that fades or slides in still arrives); endless ones are paused, and only those are resumed. GIFs, <canvas> and requestAnimationFrame loops still keep moving.

اتصلّحaccessibility

• The launcher steps aside for a focused control under it (WCAG 2.4.11). When keyboard focus lands on a page control under the launcher, including after the page scrolls, the launcher fades out and lets clicks through (it stays in the tab order) until focus moves on. It still covers its corner for mouse and touch users.

اتغيّرproject

• The bundle-size budget is 25 KB gzipped (was 24 KB).

اتغيّرproject

• New documentation site at open-accessibility-widget.vercel.app, in English and Arabic: getting started, a page per framework, guides (theming, languages, controls and profiles, the widget's own accessibility, privacy, CSP and SRI, limitations), the API reference and this changelog, with search and a live playground that drives the real widget. It serves sitemap.xml (every page in both languages, with hreflang), robots.txt and llms.txt (a Markdown map of the docs for language models, generated from the same content). It is a Next.js app in examples/ (an npm workspace), deployed by Vercel, and replaces the GitHub Pages demo (examples/index.html, pages.yml). No changes to the package.
• README banner and social preview, rendered with npm run banner (the e2e tests' headless Chrome, no new dependency).
• README and docs: the Subresource Integrity example pins 1.3.0 with its real hash.

اتغيّرdesign revamp

• Header polish. Heavier title; the close button is a rounded square on a soft tint of the brand color (it was a bare circle), matching the logo tile. The language menu keeps its outlined pill so its text stays at full contrast. CSS only, no class names changed.
• New look. The header is filled with the brand color and has a subtitle; profiles are larger icon tiles; each settings section is its own card on a soft background; steppers are pill groups; "Reset all" is a pill button; the launcher glows in the brand color.
• Custom language menu. The native <select> is replaced by a WAI-ARIA select-only combobox with a styled list: arrow keys, Home/End and type-ahead move through languages, and Enter, Space or a click picks one. Arrowing never switches the language (it used to rebuild the panel on every arrow press in Windows browsers), and Escape closes only the list.
• Label subtitle (English and Arabic).
• The bundle-size budget is 24 KB gzipped (was 22 KB).

اتغيّرdesign

• Refined panel design. Brand-tinted header, layered shadow, profile icons on tinted tiles that fill with the brand color when the profile is on, a soft shadow on the selected option, and hover tints on steppers.
• CSS-only motion throughout. The panel opens with a springy rise and closes faster than it opens; profile cards and sections slide in one after another; sections slide open; switches, the check mark, counters and the "adjustments are on" dot spring into place; buttons press in; the close and reset icons turn on hover; read mode rises over a dimming backdrop.
• Motion uses only transform, opacity and colors (no layout changes), never animates text transparency, and is switched off completely by prefers-reduced-motion.

اتصلّحaccessibility

• Open dialogs make the page behind them inert. While the panel or read mode is open, the rest of the page is inert (content added meanwhile too), so screen-reader virtual cursors can't leave the dialog (aria-modal alone doesn't stop them in every screen reader). inert the page sets itself, before or meanwhile, is left as the page set it. A click outside still closes the panel.
• Profile cards are named by all their visible text (title + description), so speech-input users can say what they see (WCAG 2.5.3). Found by axe-core 4.14.
• Dark, light and custom background modes remove background images (except on form controls, links and buttons), so text is never left on a photo or gradient with poor contrast (WCAG 1.4.3).
• Custom colors warn about low contrast. When the chosen text or heading color has less than 4.5:1 contrast with the background, the color section shows (and announces) a warning.
• Steppers say when a limit is reached ("Text size 200%, maximum") instead of staying silent.
• Read mode no longer sets an empty lang="" when the page has no language.

اتضاف

• Labels maximum, minimum and lowContrast (English and Arabic).
• README: "Privacy and storage", a strict CSP example, a pinned CDN snippet with Subresource Integrity, and placement advice for the launcher (WCAG 2.4.11).
• ACCESSIBILITY.md (accessibility statement for the widget and demo) and docs/at-test-matrix.md (manual assistive-technology test record).

اتغيّرproject

• axe-core is a devDependency: the accessibility test runs offline and fails instead of skipping when axe can't load.
• The Trusted Types test now also uses a strict CSP (nonce-only styles, data: images) and fails on any CSP violation.
• GitHub Actions are pinned to commit SHAs, the release workflow pins npm to 11.x, and Dependabot keeps both updated.

اتصلّح

• The widget is never changed by its own adjustments. Saturation and high-contrast filters now sit on a page-wide backdrop-filter layer below the widget instead of on <html>, and the large cursor, stop animations and dark/light color-scheme no longer reach the panel.
• The panel text no longer grows with the Text size setting (added in 1.1.0); it keeps following the browser's default font size.
• The release workflow skips versions that are already published to npm and publishes through npm Trusted Publishing (no token or 2FA code needed).

اتصلّحaccessibility

• Highlight links / headings / hover no longer hide the focus indicator. Their outlines skip the focused element, so keyboard focus stays visible (WCAG 2.4.7).
• Mute media only mutes media that starts on its own. Media the visitor plays or unmutes keeps its sound (it used to be re-muted on every play).
• The `Alt+A` shortcut no longer swallows typed characters, e.g. macOS Option+A ("å", Polish "ą") in form fields.
• Reading line, focus window and text magnifier follow keyboard focus, stay below the widget panel, and Escape dismisses the magnifier (WCAG 2.1.1, 1.4.13).
• Selected options in the segmented controls use the brand color: 5:1 state contrast instead of 1.1:1 (WCAG 1.4.11).
• Hide images keeps controls usable: images inside links/buttons, image buttons and form-control backgrounds (e.g. checkbox ticks) stay visible, and alt text stays available to screen readers.
• Dark / light / custom background modes set color-scheme, keep selected/pressed states visible with an outline, keep links underlined when a custom text color is chosen, switch off in forced-colors mode, and don't apply when printing.
• Read mode reads the page in its own language and direction, keeps links, table cells, image alt text and text in <div>s, and its title is "Read mode".
• Steppers announce "Text size 120%" (name + value) and their buttons reference the current value; percentages are formatted for the widget's language (Intl.NumberFormat).
• The panel text grows with the Text size setting (up to 150%) and follows the browser's default font size.
• The launcher's "adjustments are on" dot is also exposed to screen readers and has enough contrast.
• The large cursor keeps its meaning: a large hand on links and buttons, the text bar in fields.
• Letter spacing is not applied to Arabic and other cursive scripts.
• Skip link is only added when there is a <main>/<h1> to skip to and the page doesn't already have its own; it prefers <main> over a header <h1>, and the temporary tabindex is removed afterwards.
• "Hide widget" is only offered on devices with a keyboard-friendly pointer, where the shortcut can bring it back.
• "Justify" was removed from text alignment: uneven word spacing makes text harder to read.
• The "Screen reader user" profile is now called "Quiet media", which is what it does. Profile ids are unchanged.

اتصلّحhost pages and robustness

• The widget no longer changes the page layout (it was a grid/flex item of <body>).
• Stop animations keeps transitionend / animationend events firing, catches videos that start later, and only resumes silent videos when switched off.
• Works under a Trusted Types CSP (no innerHTML).
• Survives frameworks re-rendering <html class> / <html style> and pages swapping <body> (Turbo, htmx, Astro view transitions).
• Font scaling no longer writes inline styles; it no longer re-measures on height-only resizes (mobile URL bar) and is about 40% faster on very large pages.
• Color filters are disabled in forced-colors (Windows High Contrast) mode.
• Invalid options (offset, buttonSize, zIndex) are clamped instead of hiding the launcher.
• toggleProfile() with an unknown id is ignored (it used to corrupt state and then throw).
• An exception in onChange or a subscribe listener no longer leaves the panel out of sync.
• getState() / getSettings() return frozen snapshots; exported constants (PROFILE_PRESETS, RANGES, labels) are frozen.
• setSettings({ profiles }) applies the profiles' adjustments; turning a profile off keeps adjustments the visitor changed afterwards.
• Settings stay in sync across tabs; the saved format is versioned.
• React adapter: removing a prop now resets that option; useAccessibility().widget is null during server render and hydration.
• destroy() leaves no empty style attribute behind.

اتضاف

• features option to remove individual controls ({ hideImages: false, readMode: false }).
• initialSettings option for first-time visitors.
• FeatureKey and SettingKey types.
• {label} placeholder for the increase / decrease / reset labels; RTL detection for custom languages without dir.
• Theme contrast warnings now also check focus outlines, links and panel text.
• Test suite (unit + headless Chrome end-to-end with axe-core), CI on every pull request, a bundle-size budget, and a release workflow with npm provenance.
• Docs: profiles table, limitations, preference precedence, Angular runOutsideAngular, SECURITY.md, CONTRIBUTING.md.

الحجم