@yaronelh/accessibilitytool 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,162 @@
+# Changelog
+
+This file tracks versioned changes for the `accessibilitytool` repository.
+
+There are no Git tags in this repository. The latest upstream version marker found in commit history is `6.1.0` at commit `1cfaa72` (`master - build version 6.1.0`).
+
+All fork work completed after that point is recorded below as the first independent fork release line built on top of `6.1.0`.
+
+## [1.0.1] - 2026-03-23
+
+First modernized fork release, built on top of upstream `6.1.0`.
+
+### Added
+
+- Added repository-level documentation and review artifacts:
+  - `CODE_OVERVIEW.md`
+  - `SECURITY_REPORT.md`
+  - `MALICIOUS_CODE_REVIEW.md`
+  - `SUSPICIOUS_PATTERNS_REPORT.md`
+  - `UPGRADE_PLAN.md`
+- Added `CHANGELOG.md` and included it in the published package contents.
+- Added a modern root test setup using `vitest` and `jsdom`.
+- Added smoke tests for:
+  - constructor behavior
+  - DOM injection
+  - keyboard activation
+  - destroy cleanup
+  - menu accessibility state synchronization
+- Added security regression tests for:
+  - DOM attribute sanitization
+  - iframe URL restrictions
+  - session key migration and legacy restore behavior
+- Added new internal core modules under `src/core/`:
+  - `event-utils.ts`
+  - `hotkeys.ts`
+  - `options.ts`
+  - `security.ts`
+  - `session.ts`
+- Added new development scripts:
+  - `clean`
+  - `lint`
+  - `typecheck`
+  - `test`
+  - `test:watch`
+  - `format`
+  - `prepack`
+- Added ESLint configuration in `eslint.config.mjs`.
+- Added menu accessibility and UI improvements:
+  - `aria-controls`
+  - `aria-expanded`
+  - `aria-hidden`
+  - dialog labelling
+  - explicit button labels
+  - `Escape` to close
+  - focus return to the launcher
+  - focus-visible styling
+  - responsive and reduced-motion menu styling
+
+### Changed
+
+- Replaced the deprecated TSLint stack with ESLint.
+- Upgraded root tooling and supporting dependencies:
+  - `@types/node` to `25.5.0`
+  - `prettier` to `3.8.1`
+  - `ts-loader` to `9.5.4`
+  - `vite` to `8.0.2`
+  - introduced `eslint`, `@typescript-eslint/*`, `eslint-config-prettier`, `vitest`, and `jsdom`
+- Kept `typescript` on `5.9.3` instead of moving to `6.0.2` because the currently compatible lint/tooling stack did not install cleanly with TypeScript 6.
+- Refactored the runtime so `src/main.ts` now delegates option normalization, hotkey parsing, explicit event handling, session persistence, and security helpers to internal modules while preserving the public `new Accessibility(options)` API.
+- Replaced implicit `window.event` usage with explicit event-driven activation handling.
+- Updated menu toggle behavior to keep launcher/menu accessibility state synchronized.
+- Refreshed the injected toolbar and menu styling to improve appearance, responsiveness, focus treatment, and reduced-motion behavior without changing the public API surface.
+- Moved session persistence from the legacy `_accessState` key to `accessibility:session:v1`, while preserving backward-compatible restore behavior from the old key.
+- Changed default icon behavior so the library no longer fetches remote icon fonts unless `icon.allowRemoteFonts` is explicitly enabled.
+- Reworked the default launcher tile to use a single blue background with a bundled Material `accessibility_new` icon sized to fit cleanly inside the tile.
+- Replaced the default menu and header icon set with locally bundled Material Design / Material Symbols SVG assets instead of ad hoc icon geometry.
+- Tightened toolbar and menu density:
+  - reduced oversized visual chrome
+  - improved close/reset affordances
+  - reduced wasted spacing in menu rows
+  - replaced improvised glyphs with proper SVG icons
+- Rotated the text-spacing icon treatment so the spacing controls read in the intended orientation.
+- Reworked menu responsiveness so the panel now scales fluidly across desktop viewport widths instead of staying visually fixed until the mobile breakpoint.
+- Added a denser small-screen layout pass for very narrow screens, including tighter header/button sizing and more compact menu row spacing below `480px`.
+- Simplified the closed-menu behavior so it no longer depends on the earlier negative-position width hack.
+- Finalized fork release metadata under version `1.0.1` and aligned package, lockfile, and dry-run publish output to that release number.
+- Updated repository-facing documentation to use the actual repository and package name `accessibilitytool`.
+- Refreshed the README header to mark this as the modernized `accessibilitytool` release, preserve original-project attribution, note MIT license continuity, and credit the fork maintenance work.
+- Corrected usage and playground docs so they match the current build outputs and tarball names:
+  - browser script path now references `dist/main.js`
+  - README now includes the CommonJS import form
+  - `commonjs-test` now points at `accessibility-1.0.1.tgz`
+- Renamed the published package identity from `accessibility` to the scoped package `@yaronelh/accessibilitytool` so the fork no longer carries a separate repository/package identity.
+- Updated install/import/playground references to use `@yaronelh/accessibilitytool` consistently.
+- Cleaned up the playgrounds:
+  - removed stale dead `#output` wiring from both playground entry files
+  - aligned `commonjs-test` to `vite 8.0.2`
+  - refreshed the `commonjs-test` install and lockfile against the `1.0.1` tarball
+- Corrected fork documentation that no longer matched the current implementation:
+  - removed stale upstream-only README references
+  - replaced outdated session-persistence wording
+  - replaced the outdated upstream icon-customization reference
+  - corrected the build-command and session-persistence descriptions in `CODE_OVERVIEW.md`
+- Cleaned up npm-facing metadata and README wording before publication:
+  - improved the package description
+  - removed duplicate/weak keywords and replaced them with a tighter keyword set
+  - tightened install/usage headings and grammar in the README
+  - clarified that the default icon runtime uses bundled local icons
+
+### Security
+
+- Made remote icon font loading opt-in instead of default behavior.
+- Hardened `jsonToHtml()` to strip unsafe `on*` attributes.
+- Blocked unsafe URL schemes such as `javascript:` in generated DOM attributes.
+- Escaped dynamic CSS content used for generated icon rules.
+- Restricted iframe modal URLs through normalization and optional allowed-origin checks.
+- Added safer iframe attributes:
+  - `sandbox`
+  - `referrerpolicy`
+  - `loading`
+- Added `allowedIframeOrigins` as an optional configuration control.
+
+### Removed
+
+- Removed `tslint`.
+- Removed `tslint-loader`.
+- Removed `tslint.json`.
+- Removed stale handcrafted/default icon path definitions that were no longer the source of truth after the Material icon migration.
+
+### Verification
+
+- Repeatedly verified during fork work with:
+  - `npm run lint`
+  - `npm run typecheck`
+  - `npm run test`
+  - `npm run build`
+  - `npm run prepack`
+  - `npm pack --dry-run --cache /tmp/accessibility-npm-cache`
+- Latest automated verification status at the time of writing:
+  - `2` passing test files
+  - `13` passing tests
+
+### Notes
+
+- Some action-to-icon mappings are now fully Material-backed but still semantically approximate and may be refined further:
+  - `gray hues`
+  - `reading guide`
+  - `disable animations`
+  - separate increase/decrease variants for text spacing
+  - separate increase/decrease variants for line height
+- Several audit/review markdown files were also updated so historical findings are distinguished from current-state behavior after the modernization work.
+
+## [6.1.0] - Upstream Pre-Fork
+
+Latest upstream release marker found in commit history before fork maintenance began.
+
+### Included upstream changes around the 6.1.0 line
+
+- Fixed list and button `tabIndex` behavior that harmed accessibility and keyboard control.
+- Fixed reset behavior for `lineHeight`.
+- Added a `tabIndex` attribute-related improvement in the lead-up to the release.
+- Included the upstream build/release commit recorded as `master - build version 6.1.0`.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Ran Buchnik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,373 @@
+# accessibilitytool
+
+Modernized fork of the original [ranbuch/accessibility](https://github.com/ranbuch/accessibility).
+
+This fork keeps the same MIT license as the original project and was updated by [Yaron Elharar](https://github.com/yaronelh) using GPT-5.4.
+
+Great appreciation goes to Ran Buchnik and all contributors to the original library.
+
+For the full list of fork changes, see [CHANGELOG.md](./CHANGELOG.md).
+
+![chrome_2026-03-23_21-17-29](https://github.com/user-attachments/assets/c233801c-e417-4bc2-9ead-8af4f1016a02)
+
+## Overview
+Add an **accessibility toolbar** to your website with a single line of code.
+
+![Alt text](https://raw.githubusercontent.com/ranbuch/accessibility/master/accessibility.png "accessibility icon")
+
+### USAGE
+
+`npm install @yaronelh/accessibilitytool`
+
+Include script:
+`<script type="text/javascript" src="node_modules/@yaronelh/accessibilitytool/dist/main.js"></script>`
+
+Or import:
+`import { Accessibility } from '@yaronelh/accessibilitytool';`
+
+Or CommonJS:
+`const { Accessibility } = require('@yaronelh/accessibilitytool');`
+
+Initialize component:
+`window.addEventListener('load', function() {
+    new Accessibility();
+}, false);`
+
+### DESCRIPTION
+**Features:**
+- [x]  increase text size
+- [x]  decrease text size
+- [x]  increase line height
+- [x]  decrease line height
+- [x]  invert colors
+- [x]  gray hues
+- [x]  underline links
+- [x]  big cursor
+- [x]  reading guide
+- [x]  text to speech with 3 reading velocities
+- [x]  speech to text
+- [x]  suppress animations
+
+>Does not depend on any other library (**jQuery is not required**).
+Easy to use.
+
+### LIMITATIONS & KNOWN ISSUES
+* Works with html5 browsers only (no IE8 and below)
+* Text to speech & speech to text works in supported browsers and languages only
+
+### MULTI LANGUAGE EXAMPLE
+
+```javascript
+var labels = {
+    resetTitle: 'reset (in my language)',
+    closeTitle: 'close (in my language)',
+    menuTitle: 'title (in my language)',
+    increaseText: 'increase text size (in my language)',
+    decreaseText: 'decrease text size (in my language)',
+    increaseTextSpacing: 'increase text spacing (in my language)',
+    decreaseTextSpacing: 'decrease text spacing (in my language)',
+    increaseLineHeight: 'increase line height (in my language)',
+    decreaseLineHeight: 'decrease line height (in my language)',
+    invertColors: 'invert colors (in my language)',
+    grayHues: 'gray hues (in my language)',
+    underlineLinks: 'underline links (in my language)',
+    bigCursor: 'big cursor (in my language)',
+    readingGuide: 'reading guide (in my language)',
+    textToSpeech: 'text to speech (in my language)',
+    speechToText: 'speech to text (in my language)',
+    disableAnimations: 'disable animations (in my language)',
+    hotkeyPrefix: 'Hotkey: (in my language)',
+};
+```
+
+```javascript
+var options = { labels: labels };
+options.textToSpeechLang = 'en-US'; // or any other language
+options.speechToTextLang = 'en-US'; // or any other language
+new Accessibility(options);
+```
+
+### DISABLE FEATURES EXAMPLE
+```javascript
+options.modules = {
+    decreaseText: [true/false],
+    increaseText: [true/false],
+    invertColors: [true/false],
+    increaseTextSpacing: [true/false],
+    decreaseTextSpacing: [true/false],
+    increaseLineHeight: [true/false],
+    decreaseLineHeight: [true/false],
+    grayHues: [true/false],
+    underlineLinks: [true/false],
+    bigCursor: [true/false],
+    readingGuide: [true/false],
+    textToSpeech: [true/false],
+    speechToText: [true/false],
+    disableAnimations: [true/false]
+};
+```
+
+>When the default is **true**
+
+### TEXT SIZE MANIPULATION APPROACHES
+If text increase / decrease isn't working for your site, you are probably not using responsive font-size units such as `em` or `rem`.  
+In that case you can initialize the accessibility tool like this:  
+```javascript
+new Accessibility({textPixelMode: true})
+```
+You can change the factor of the font size difference between every iteration (default is 12.5):
+```javascript
+new Accessibility({textSizeFactor: 4})
+```
+
+### ANIMATIONS
+Cancel all buttons animations:  
+```javascript
+new Accessibility({animations: {buttons: false}})
+```
+
+### POSITIONING
+You can position the accessibility icon anywhere on the screen. The default position is bottom right:
+```css
+body {
+    --_access-icon-top: 50px;
+    --_access-icon-left: 50px;
+    --_access-icon-right: unset;
+    --_access-icon-bottom: unset;
+}
+```
+
+
+### ICON IMAGE
+This fork ships with bundled local SVG defaults for the launcher, close button, reset button, and built-in menu actions.
+
+You can still replace the launcher and header icons through the `icon` options, for example by providing your own `imgElem`, `closeIconElem`, or `resetIconElem`.
+
+### PERSISTENT SESSION
+Session persistence is enabled by default in the current fork.
+
+The modernized implementation stores state under a namespaced key and still restores legacy session data from older installs when available.
+
+To disable this feature use:
+```javascript
+const options = {
+    session: {
+        persistent: false
+    }
+};
+new Accessibility(options);
+```
+
+
+### DIRECT ACCESS TO THE API
+You can toggle the menu buttons directly via the exposed API:
+```javascript
+var instance = new Accessibility();
+
+instance.menuInterface.increaseText();
+
+instance.menuInterface.decreaseText();
+
+instance.menuInterface.increaseTextSpacing();
+
+instance.menuInterface.decreaseTextSpacing();
+
+instance.menuInterface.invertColors();
+
+instance.menuInterface.grayHues();
+
+instance.menuInterface.underlineLinks();
+
+instance.menuInterface.bigCursor();
+
+instance.menuInterface.readingGuide();
+
+instance.menuInterface.textToSpeech();
+
+instance.menuInterface.speechToText();
+
+instance.menuInterface.disableAnimations();
+```
+
+You can also override the functionality like this:
+```javascript
+instance.menuInterface.increaseText = function() {
+    // My own way to increase text size . . .
+}
+```
+
+### ADD CUSTOM IFRAME
+You can add buttons that open a modal with custom iframes, for example for accessibility terms:
+```javascript
+const options = {
+    iframeModals: [{
+        iframeUrl: 'https://example.com/accessibility-terms',
+        buttonText: 'terms',
+        icon: 'favorite',
+        emoji: '❤️'
+    }
+};
+new Accessibility(options);
+```
+
+If you do not provide the `icon` and `emoji`, this setup is used:
+
+icon: 'policy',
+emoji: '⚖️'
+
+If you are using an icon font for custom button icons, choose names from the icon set you load yourself.
+
+### ADD CUSTOM FUNCTIONS
+You can add buttons that will invoke custom functions like so:
+```javascript
+const options = {
+    customFunctions: [{
+        method: (cf, state) => {
+            console.log('The provided customFunctions object:', cf);
+            console.log('Toggle state:', state);
+        },
+        buttonText: 'my foo',
+        id: 1,
+        toggle: true,
+        icon: 'psychology_alt',
+        emoji: '❓'
+    }
+};
+new Accessibility(options);
+```
+
+If you do not provide the `icon` and `emoji`, this setup is used:
+
+icon: 'psychology_alt',
+emoji: '❓'
+
+If you are using an icon font for custom button icons, choose names from the icon set you load yourself.
+
+You must provide the `id` parameter. This is how you identify the button if you are using more than one custom function.
+
+You must provide the `toggle` parameter. This determines whether the button toggles an active state on and off.
+
+
+
+
+
+
+
+### CUSTOMIZE STYLING
+You can use CSS variables to change the styling of the menu. Here is an example of changing the exposed variables to a dark theme:
+```css
+:root {
+    --_access-menu-background-color: #000;
+    --_access-menu-item-button-background: #222;
+    --_access-menu-item-color: rgba(255,255,255,.6);
+    --_access-menu-header-color: rgba(255,255,255,.87);
+    --_access-menu-item-button-active-color: #000;
+    --_access-menu-item-button-active-background-color: #fff;
+    --_access-menu-div-active-background-color: #fff;
+    --_access-menu-item-button-hover-color: rgba(255,255,255,.8);
+    --_access-menu-item-button-hover-background-color: #121212;
+    --_access-menu-item-icon-color: rgba(255,255,255,.6);
+    --_access-menu-item-hover-icon-color: rgba(255,255,255,.8);
+    --_access-menu-item-active-icon-color: #000;
+}
+```
+
+Alternatively, you can suppress the default CSS injection altogether (not recommended):
+```javascript
+new Accessibility({suppressCssInjection: true});
+```
+You can also replace the icons by replacing the content attribute with the CSS variables currently being used.
+
+You can suppress the default HTML injection altogether:
+```javascript
+const instance = new Accessibility({suppressDomInjection: true});
+```
+You will need to provide your own DOM and call `menuInterface` functions.
+
+By default the library does not fetch remote icon fonts. The default runtime uses bundled local icons, so it works without reaching out to Google Fonts.
+
+If you already load an icon font yourself from a local or self-hosted stylesheet, you can point the component at that font without enabling remote loading:
+```javascript
+const options = {
+    icon: {
+        useEmojis: false,
+        fontClass: 'material-icons'
+    }
+};
+new Accessibility(options);
+```
+
+If you want the component itself to fetch a remote icon font URL, you must opt in explicitly:
+```javascript
+const options = {
+    icon: {
+        useEmojis: false,
+        allowRemoteFonts: true,
+        fontFaceSrc: ['https://fonts.bunny.net/icon?family=Material+Icons']
+    }
+};
+new Accessibility(options);
+```
+
+Another example with font-awesome icons:
+```javascript
+const options = {
+    icon: {
+        useEmojis: false,
+        allowRemoteFonts: true,
+        fontFaceSrc: ['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/v4-font-face.min.css'],
+        fontFamily: '"FontAwesome"',
+        img: '[optional - URL for an image that will replace the menu icon]',
+        closeIcon: '[optional - replacement text for the close menu icon]',
+        resetIcon: '[optional - replacement text for the reset all icon]',
+        closeIconElem: {
+            type: 'i',
+            attrs: {
+                'class': 'fa fa-window-close',
+                'aria-hidden': 'true'
+            }
+        },
+        imgElem: {
+            type: 'i',
+            attrs: {
+                'class': 'fa fa-universal-access',
+                'aria-hidden': 'true'
+            }
+        },
+        resetIconElem: {
+            type: 'i',
+            attrs: {
+                'class': 'fa fa-refresh',
+                'aria-hidden': 'true'
+            }
+        }
+    }
+};
+new Accessibility(options);
+```
+
+If your site uses a strict CSP, keep remote font loading disabled and self-host the stylesheet instead.
+```css
+:root {
+    --_access-menu-item-icon-increase-text: "\f062";
+    --_access-menu-item-icon-decrease-text: "\f063";
+}
+```
+Obviously you will need to add the missing variables for the rest of the fonts.
+
+### CHANGE MODULES ORDER
+You can determine the order of the modules:
+```javascript
+new Accessibility({
+    modulesOrder: [
+        {
+            type: AccessibilityModulesType.textToSpeech,
+            order: 0
+        }
+    ]
+});
+```
+
+
+### LICENSE
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://spdx.org/licenses/MIT)

package/dist/common.d.ts

@@ -0,0 +1,22 @@
+import { ICommon, IDeployedObjects, IFormattedDim, IInjectStyleOptions, IJsonToHtml } from './interfaces/common.interface.js';
+export declare class Common implements ICommon {
+    static DEFAULT_PIXEL: string;
+    private body;
+    private deployedMap;
+    private _isIOS;
+    private _canvas;
+    constructor();
+    isIOS(): boolean;
+    jsonToHtml(obj: IJsonToHtml): HTMLElement;
+    injectStyle(css: string, innerOptions?: IInjectStyleOptions): HTMLStyleElement;
+    getFormattedDim(value: string): IFormattedDim;
+    extend(src: any, dest: any): any;
+    injectIconsFont(urls: Array<string>, callback: Function): void;
+    getFixedFont(name: string): any;
+    getFixedPseudoFont(name: string): any;
+    isFontLoaded(fontFamily?: string, callback?: Function): any;
+    warn(msg: string): void;
+    get deployedObjects(): IDeployedObjects;
+    createScreenshot(url: string): Promise<string>;
+    getFileExtension(filename: string): string;
+}