Accessibility Widget

The AccessibilityWidget provides a customizable accessibility menu that allows users to enable and manage different accessibility features such as contrast, highlight links, big text, hide images, big cursor, saturation, text alignment, line height, focus indicator, and dyslexia-friendly font.

The AccessibilityWidget is already included inside MainProvider. Therefore, you do not need to import or render AccessibilityWidget separately.

You only need to import and use MainProvider. The accessibility widget can be configured through the showAccessibility and accessibilityPosition props.

Getting Started

MainProvider

Wrap your application with MainProvider:

import { MainProvider } from "tawuniya";

export default function AppLayout({ children }) {
  return (
    <MainProvider accessibilityPosition="bottom-left">
      {children}
    </MainProvider>
  );
}

The example above:

• Enables the accessibility widget using showAccessibility.
• Positions the accessibility widget at the bottom-left using accessibilityPosition.
• Automatically renders the AccessibilityWidget internally.

Important: You should not import or render AccessibilityWidget separately. It is automatically included and managed by MainProvider.

MainProvider Props

Prop	Type	Default	Description
showAccessibility	boolean	true	Controls whether the accessibility widget is displayed.
accessibilityPosition	AccessibilityPositionType	"default"	Controls the position of the accessibility widget.

👉 View in Storybook

AccessibilityPositionType

The accessibilityPosition prop determines where the accessibility widget is displayed.

type AccessibilityPositionType =
  | "default"
  | "top-left"
  | "top-right"
  | "bottom-left"
  | "bottom-right";

The available values depend on the configured POPOVER_POSITIONS and accessibility position utilities in the library.

Usage

Basic Usage

The accessibility widget is enabled by default when using MainProvider.

<MainProvider>
  {children}
</MainProvider>

Show the Widget

Use showAccessibility={true} to display the accessibility widget.

<MainProvider>
  {children}
</MainProvider>

Hide the Widget

Use showAccessibility={false} when the accessibility widget should not be displayed.

<MainProvider showAccessibility={false}>
  {children}
</MainProvider>

Position the Widget

Use the accessibilityPosition prop on MainProvider to control the widget position.

<MainProvider
  accessibilityPosition="bottom-right"
>
  {children}
</MainProvider>

Top Left

<MainProvider
  accessibilityPosition="top-left"
>
  {children}
</MainProvider>

Top Right

<MainProvider
  accessibilityPosition="top-right"
>
  {children}
</MainProvider>

Bottom Left

<MainProvider
  accessibilityPosition="bottom-left"
>
  {children}
</MainProvider>

Bottom Right

<MainProvider
  accessibilityPosition="bottom-right"
>
  {children}
</MainProvider>

Accessibility Features

When the accessibility widget is opened, it provides the following accessibility options:

Feature	Description
Contrast	Enables enhanced contrast for improved readability.
Highlight Links	Highlights links to make them easier to identify.
Big Text	Cycles through different text size levels.
Hide Images	Hides images to reduce visual distractions.
Big Cursor	Increases the cursor size.
Saturation	Adjusts page saturation.
Text Align	Cycles through default, left, center, and justified text alignment.
Line Height	Increases line height to improve readability.
Focus Indicator	Enhances the visual focus indicator for keyboard navigation.
Dyslexia Font	Enables a dyslexia-friendly font.

Accessibility Menu

Clicking the accessibility trigger opens the accessibility settings menu.

The menu contains:

• Accessibility feature controls.
• Current active state for each feature.
• Big text level indicator when applicable.
• A reset button.
• A saved settings indicator.

Reset Settings

The Reset button resets all accessibility settings to their default values.

The reset functionality is handled internally by the accessibility context.

Active Settings Count

The accessibility trigger displays the number of currently active accessibility settings.

For example, if three accessibility features are enabled, the trigger displays:

Accessibility 3

If no accessibility features are enabled, it displays:

Accessibility

Text Alignment

The Text Align option cycles through the available alignment modes:

Default
Left
Center
Justify

The current alignment state is managed internally by the accessibility context.

Big Text

The Big Text option cycles through the configured text size levels.

The current level is displayed as a badge on the accessibility item.

For example:

Big Text 1

or:

Big Text 2

depending on the current accessibility setting.

Portal Rendering

The accessibility widget uses React's createPortal API.

The widget is mounted directly into:

document.body

This allows the accessibility menu to appear independently from the component's parent container and helps prevent layout or overflow issues caused by parent elements.

Internally, the component uses:

createPortal(
  <div>
    {/* Accessibility Widget */}
  </div>,
  document.body,
);

Features

• Accessibility settings menu.
• Multiple accessibility options.
• Toggle accessibility features on and off.
• Cycle through big text levels.
• Cycle through text alignment options.
• Display active accessibility settings count.
• Reset all accessibility settings.
• Configurable widget position through MainProvider.
• Portal-based rendering.
• Responsive popover width.
• Keyboard-accessible controls.
• Accessible dialog semantics.
• Customizable styling through the library's existing design system.

Notes

• The AccessibilityWidget is internally included in MainProvider.
• Do not import or render AccessibilityWidget separately.
• Use MainProvider to enable and configure the accessibility widget.
• Use the showAccessibility prop to control whether the accessibility widget is displayed.
• Use the accessibilityPosition prop to configure the widget position.
• When showAccessibility is false, the accessibility widget is not rendered.
• The accessibility widget requires a browser environment because it uses document.body for portal rendering.
• Accessibility settings are managed through useAccessibilityContext.
• Localization is handled internally using the library language and accessibility messages.
• MainProvider should normally be rendered once at the application/layout level rather than inside individual pages.