Confirm?

Are you sure you want to proceed?
?

Accessibility Button Footer

Clone & Customize via AI

Blazor Accessibility Menu provides an RTL accessibility widget with quick toggles and an enlargable-text feature using InputCheckbox binding and Bootstrap layout. Generated by Instruct UI and editable for integration into .NET apps.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Floating accessibility launcher button and a dismissible panel (Bootstrap card). - Preset controls list and a grid of feature buttons (enlarge text, contrast, hide images, dyslexia-friendly, etc.). - Toggle switch bound with `InputCheckbox` to control a menu option and an enlarge-text toggle that uses an `EventCallback` to notify the parent. - RTL layout support and visual states for active features (CSS classes and inline styles). ## Key components - Blazor component files: `AccessibilityMenu.razor`, `AccessibilityDemoPage.razor`. - Model: `AccessibilityFeatureModel` (feature Id, Text, IconCssClass, HasInfoIcon). - Built-in Blazor primitives: `InputCheckbox`, `@bind-Value`, `@onclick`, `EventCallback<bool>`. - Markup uses Bootstrap classes: `btn`, `card`, `list-group`, `row`, `col-4`, `form-switch` and Font Awesome icons. ## How it works - Feature list is created in `OnInitialized()` as a `List<AccessibilityFeatureModel>` and rendered with a `foreach` loop. - UI state is local in the component (`isPanelOpen`, `isMenuEnlarged`) and parent state is synchronized via `IsTextEnlarged` parameter and `OnEnlargeTextChanged` callback. - Click handlers use `@onclick` to toggle UI state or invoke `EventCallback` for parent communication; other features log actions to the console as stubs. - RTL support is provided with `dir="rtl"` and CSS adjustments (`[dir="rtl"] .feature-sup-icon`) alongside Bootstrap layout behavior. ## Styling - Visual layout relies on Bootstrap utility classes and components for spacing and grid. - Component-specific styles are placed in `AccessibilityMenu.razor.css` for the floating button, fixed panel, feature grid, and enlarged-text modifier. - Inline styles and CSS variables are used for active state borders/backgrounds; responsive constraints use `max-width: calc(100vw - 40px)` and `max-height: 70vh`. ## Reuse steps 1. Add the Razor files to a Blazor project and include `AccessibilityFeatureModel` in a shared namespace. 2. Ensure Bootstrap CSS and Font Awesome are included in the app (index.html or _Host.cshtml). 3. Import the component namespace where it is used or add `@using` in `_Imports.razor`. 4. Optionally copy `AccessibilityMenu.razor.css` into the same folder (scoped CSS is applied automatically) and include provided JS in wwwroot if JS interop is required. 5. Wire parent state by binding `IsTextEnlarged` and handling `OnEnlargeTextChanged` to toggle application-level styles or call the JS helper. ## Limitations & next steps - Accessibility features (text-to-speech, contrast transforms, image hiding) are UI stubs; behavior requires additional CSS/JS and services. - Keyboard shortcut mentioned in header (`CTRL+U`) is not implemented; add `KeyboardEvent` handling or JS to capture shortcuts. - Persistence and user preferences are not implemented; consider localStorage or server-side storage for settings. - Icon library and Bootstrap must be added to the host; consider ARIA roles and focus management improvements for full accessibility compliance.