Forem: hritickjaiswal

Building an Accessible Toast Notification System in React

hritickjaiswal — Sun, 29 Mar 2026 06:15:36 +0000

Toast notifications are often implemented as simple UI feedback components, but making them accessible requires additional considerations. In this implementation, the focus was not just on functionality but also on ensuring the component works well for screen reader users, keyboard users, and assistive technologies.

Accessibility Goals

The toast system was designed with the following accessibility goals:

Notifications should be announced to screen readers
Users should have enough time to read the message
Keyboard users should get the same behavior as mouse users
Users should be able to manually dismiss notifications

Screen Reader Announcements

To make sure assistive technologies announce notifications automatically, the toast container is implemented as a live region.

This tells screen readers:

role="status" → This region contains status updates.
aria-live="polite" → Announce updates when the user is idle.
aria-atomic="true" → Read the entire notification message.

When a new toast is added, screen readers automatically announce the message without interrupting the user’s current task.

Pause on Interaction

Auto-dismissing notifications can be problematic if users don't have enough time to read them. To address this, the toast timer pauses when the user interacts with the notification.

onMouseEnter → pause timer
onMouseLeave → resume timer
onFocus → pause timer
onBlur → resume timer

Supporting both hover and focus ensures the behavior works for:

Mouse users
Keyboard users navigating with the tab key

Accessible Dismiss Button

Each toast includes a dismiss button so users can remove notifications manually.

The aria-label ensures screen readers clearly communicate the purpose of the button, even though the visible content is just an "X".

Non-Disruptive Notifications

Another important accessibility consideration is not stealing focus when a toast appears.

This implementation ensures that:

Notifications appear visually
Screen readers announce them
The user's current focus remains unchanged

This prevents interruptions while users are typing or navigating through the interface.

Supporting Multiple Notifications

The system also supports stacked toasts, allowing multiple notifications to appear without overlapping content. A maximum limit prevents excessive notifications from overwhelming users.

Why Accessibility Matters Here

Toast notifications may seem small, but poorly implemented ones can create problems for assistive technology users. By incorporating:

ARIA live regions
keyboard interaction support
pause-on-interaction behavior
accessible controls

the component ensures notifications remain usable and understandable for all users.

Accessibility often comes down to small decisions in implementation, and even simple components like toast notifications can benefit from thoughtful design.

Improving Accessibility - Tooltip

hritickjaiswal — Sun, 22 Feb 2026 06:50:39 +0000

Tooltips look simple.

They are not.

If you’ve ever tried building one properly, you’ll realize quickly that it’s not about styling — it’s about behavior.

In this article, I’ll walk through a simple accessible Tooltip implementation in React and focus only on three important aspects:

⏱ Time interval handling (prevent flicker)
⌨ Escape key handling (keyboard accessibility)
📍 CSS positioning (clean layout without layout hacks)

The Goal

We want a tooltip that:

Appears on hover and focus
Disappears on mouse leave and blur
Closes when pressing Escape
Doesn’t flicker on quick mouse movement
Is positioned cleanly using CSS

Implementation

import {
  useEffect,
  useRef,
  useState,
  cloneElement,
  isValidElement,
  type ReactElement,
  useId,
} from "react";

import styles from "./style.module.css";

interface TooltipProps {
  children: ReactElement;
  title: string;
}

const DELAY_INTERVAL = 200;

function Tooltip({ children, title }: TooltipProps) {
  const [showTitle, setShowTitle] = useState(false);
  const openTimer = useRef(-1);
  const closeTimer = useRef(-1);
  const tooltipId = useId();

  function show() {
    clearTimeout(openTimer.current);

    openTimer.current = setTimeout(() => setShowTitle(true), DELAY_INTERVAL);
  }

  function hide() {
    clearTimeout(closeTimer.current);
    clearTimeout(openTimer.current);

    closeTimer.current = setTimeout(() => setShowTitle(false), DELAY_INTERVAL);
  }

  useEffect(() => {
    function keydownHandler(e: KeyboardEvent) {
      const { key } = e;

      if (key === "Escape") {
        setShowTitle(false);
      }
    }

    if (showTitle) {
      document.addEventListener("keydown", keydownHandler);
    }

    return () => {
      if (showTitle) {
        document.removeEventListener("keydown", keydownHandler);
      }
    };
  }, [showTitle]);

  if (!isValidElement(children)) {
    throw new Error("Tooltip expects a single React element child");
  }

  const trigger = cloneElement(children, {
    onMouseEnter: (e) => {
      children.props.onMouseEnter?.(e);
      show();
    },
    onMouseLeave: (e) => {
      children.props.onMouseLeave?.(e);
      hide();
    },
    onFocus: (e) => {
      children.props.onFocus?.(e);
      show();
    },
    onBlur: (e) => {
      children.props.onBlur?.(e);
      hide();
    },
    "aria-describedby": showTitle ? tooltipId : undefined,
  });

  return (
    <div className={styles.container}>
      {trigger}

      {showTitle ? (
        <div className={styles.titleContainer}>
          <div role="tooltip" id={tooltipId} className={styles.titleWrapper}>
            {title}
          </div>
        </div>
      ) : null}
    </div>
  );
}

export default Tooltip;

CSS

.container {
  position: relative;
}

.titleContainer {
  position: absolute;
  left: 50%;
  top: calc(100%);
  transform: translateX(-50%);
  padding-top: 8px;
}

.titleWrapper {
  padding: 0.25rem;
  background-color: #afafaf;
  color: #fff;
  border-radius: 0.25rem;
}

Why this works well:

No layout shifts
No DOM measurements
No scroll listeners
No portal complexity

Improving Accessibility - Tabs Component

hritickjaiswal — Wed, 04 Feb 2026 02:42:16 +0000

In this iteration I will be picking *Tabs Component *

Why Tabs?

Tabs look simple, but they force you to think about:
Keyboard navigation (Arrow keys vs Tab key)
Focus management
ARIA roles and relationships
Disabled state handling
Component composition and APIs

In interviews and real apps, Tabs are a very common a11y failure point.

Key Concepts Used in This Implementation

1. Compound Component Pattern

Instead of one giant component, we expose:

<Tabs>
  <TabList>
    <Tab />
  </TabList>
  <PanelList>
    <TabPanel />
  </PanelList>
</Tabs>

This:

Keeps the API expressive
Avoids prop drilling
Mirrors how headless UI libraries are designed

2. Children.map + cloneElement

We need to:

Inject index
Attach refs
Preserve user-defined JSX

This is where Children.map and cloneElement shine.

3. forwardRef

Keyboard navigation requires programmatic focus movement.
To do that, the parent must be able to call .focus() on each .

forwardRef enables that cleanly.

4. Accessibility First

This component follows WAI-ARIA Tabs Authoring Practices, including:

role="tablist", tab, tabpanel
aria-selected, aria-controls, aria-labelledby
Roving tabIndex
Disabled tab skipping
Automatic activation model

Accessibility Behavior (What This Component Supports)

ArrowLeft / ArrowRight navigate between tabs
Only one tab is tabbable at a time
Disabled tabs are skipped during keyboard navigation
Panels are hidden from screen readers when inactive
Focus never jumps unexpectedly

Full Source Code

import type React from "react";
import {
  createContext,
  useState,
  type ReactNode,
  Children,
  cloneElement,
  useContext,
  useRef,
  forwardRef,
  isValidElement,
  useEffect,
} from "react";
import styles from "./style.module.css";

/**
 * TabsContext holds shared state for the compound components
 */
const TabsContext = createContext<{
  activeIndex: number;
  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
  onChange?: (index: number) => void;
  disableMap: Array<boolean>;
  setDisableMap: React.Dispatch<React.SetStateAction<boolean[]>>;
} | null>(null);

/**
 * Safe context hook
 */
// eslint-disable-next-line react-refresh/only-export-components
export const useTabsContext = () => {
  const context = useContext(TabsContext);
  if (context === null) {
    throw new Error(
      "useTabsContext must be used within a TabsContext.Provider"
    );
  }
  return context;
};

interface TabsProps {
  children: ReactNode;
  onChange?: (index: number) => void;
}

interface TabListProps {
  children: ReactNode;
}

interface PanelListProps {
  children: ReactNode;
}

type TabProps = React.ComponentPropsWithRef<"button"> & {
  index: number;
  children: ReactNode;
};

interface TabPanelProps {
  index: number;
  children: ReactNode;
}

export function TabList({ children }: TabListProps) {
  const { activeIndex, setActiveIndex, onChange, disableMap } =
    useTabsContext();
  const tabsRef = useRef<Array<HTMLButtonElement>>([]);
  const childrenLength = Children.count(children);

  function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
    const { key } = e;

    /**
     * Find next enabled tab (wraps around)
     */
    const getNextIndex = () => {
      for (let i = activeIndex + 1; i < childrenLength; i++) {
        if (!disableMap[i]) return i;
      }

      for (let i = 0; i < activeIndex; i++) {
        if (!disableMap[i]) return i;
      }

      return activeIndex;
    };

    /**
     * Find previous enabled tab (wraps around)
     */
    const getPrevIndex = () => {
      for (let i = activeIndex - 1; i >= 0; i--) {
        if (!disableMap[i]) return i;
      }

      for (let i = childrenLength - 1; i >= activeIndex; i--) {
        if (!disableMap[i]) return i;
      }

      return activeIndex;
    };

    if (key === "ArrowRight") {
      e.preventDefault();
      const nextIndex = getNextIndex();

      tabsRef.current[nextIndex]?.focus();
      setActiveIndex(nextIndex);

      if (typeof onChange === "function") {
        onChange(nextIndex);
      }
    } else if (key === "ArrowLeft") {
      e.preventDefault();
      const prevIndex = getPrevIndex();

      tabsRef.current[prevIndex]?.focus();
      setActiveIndex(prevIndex);
      if (typeof onChange === "function") {
        onChange(prevIndex);
      }
    }
  }

  return (
    <div
      onKeyDown={handleKeyDown}
      className={styles.btnContainer}
      role="tablist"
      aria-orientation="horizontal"
    >
      {Children.map(children, (child, index) =>
        cloneElement(child, {
          index,
          ref: (el: HTMLButtonElement | null) => {
            tabsRef.current[index] = el;
          },
        })
      )}
    </div>
  );
}

export function PanelList({ children }: PanelListProps) {
  return (
    <div className={styles.panelConatiner}>
      {Children.map(children, (child, index) => {
        if (!isValidElement(child)) return null;

        return cloneElement(child, {
          index,
        });
      })}
    </div>
  );
}

export const Tab = forwardRef<HTMLButtonElement, TabProps>((props, ref) => {
  const { index, children, disabled, ...restProps } = props;
  const { activeIndex, setActiveIndex, onChange, setDisableMap } =
    useTabsContext();

  function clickHandler() {
    setActiveIndex(index);

    if (typeof onChange === "function") {
      onChange(index);
    }
  }

  /**
   * Register disabled state in parent
   */
  useEffect(() => {
    setDisableMap((prev) => {
      const temp = [...prev];
      temp[index] = !!disabled;

      return temp;
    });
  }, [disabled, index]);

  return (
    <button
      onClick={clickHandler}
      className={`${styles.tabBtn} ${
        activeIndex === index ? styles.activeBtn : ""
      }`}
      role="tab"
      aria-controls={`panel-${index}`}
      ref={ref}
      tabIndex={activeIndex === index ? 0 : -1}
      aria-selected={activeIndex === index ? "true" : "false"}
      id={`tab-${index}`}
      disabled={disabled}
      aria-disabled={disabled ? "true" : "false"}
      {...restProps}
    >
      {children}
    </button>
  );
});

export function TabPanel({ children, index }: TabPanelProps) {
  const { activeIndex } = useTabsContext();
  return (
    <div
      className={index !== activeIndex ? styles.hidden : ""}
      role="tabpanel"
      aria-labelledby={`tab-${index}`}
      hidden={index !== activeIndex}
    >
      {children}
    </div>
  );
}

/**
 * Root Tabs component
 */
function Tabs({ children, onChange }: TabsProps) {
  const [activeIndex, setActiveIndex] = useState(0);
  const [disableMap, setDisableMap] = useState<Array<boolean>>(() =>
    Array(Children.count(children)).fill(false)
  );

  return (
    <TabsContext.Provider
      value={{
        activeIndex,
        setActiveIndex,
        onChange,
        disableMap,
        setDisableMap,
      }}
    >
      {children}
    </TabsContext.Provider>
  );
}

export default Tabs;

Styles

.tabBtn:focus {
  outline: 2px solid orangered;
  outline-offset: 4px;
}

.activeBtn {
  background-color: green;
  color: #fff;
  font-weight: 700;
}

.hidden {
  display: none;
}

I learned and revised more concepts than I expected before I started working on this and was really fun.

Any suggestions and improvements are always welcome

Improving Accessibility - Typehead

hritickjaiswal — Sun, 25 Jan 2026 16:33:40 +0000

Accessibility isn't just a "nice-to-have" feature—it’s the difference between a usable tool and a digital brick for many users. This Typeahead component balances performance (debouncing), reliability (aborting race conditions), and strict ARIA compliance.

1. The Power of aria-activedescendant
Instead of manually moving focus between list items (which is a nightmare for screen readers), this component uses the aria-activedescendant pattern.

The Logic: The focus remains on the , while the aria-activedescendant attribute points to the ID of the currently "highlighted" list item.

Why it matters: It allows the user to keep typing while the screen reader announces the current selection in the list.

2. Concurrency & Race Conditions
When fetching suggestions over a network, speed varies. If a user types "Apple" and then quickly "Banana," the "Apple" request might finish after "Banana," overwriting your state with stale data.

The Fix: Using AbortController and a latestRequestRef.

How it works: Every time the search query changes, we abort the previous request and use a ref to ensure only the most recent fetch updates the state.

3. Smart Keyboard Ergonomics
A component is only as good as its keyboard support. This implementation handles:

ArrowUp/Down: Navigates the list with index wrapping (going from the last item back to the first).

Enter: Selects the active item and closes the menu.

Escape: Immediately dismisses the dropdown to prevent focus traps.

Automatic Scrolling: The useEffect with scrollIntoView({ block: "nearest" }) ensures that if you keyboard-navigate to an item off-screen, the list scrolls to show it.

4. Performance: The Custom useDebounce
We don't want to fire an API call for every single keystroke.

Implementation: The custom useDebounce hook delays the update of the search term.

The Result: If the user types "React" quickly, only one network request is fired instead of five.

5. Semantic Feedback
The use of aria-live="polite" and aria-busy ensures that users are notified when the list is loading or if an error occurs. Without these, a screen reader user would have no idea if the component is working or if the search failed.

import {
  useEffect,
  useRef,
  useState,
  type ChangeEvent,
  type FocusEvent,
  type KeyboardEvent,
  type MouseEvent,
} from "react";
import styles from "./style.module.css";

export interface OptionType {
  label: string;
  value: string;
  id: number;
}

interface TypeheadProps {
  label: string;
  options: Array<OptionType>;
  onSelect?: (obj: OptionType) => void;
  fetchSuggestions?: (
    query: string,
    signal: AbortSignal
  ) => Promise<OptionType[]>;
}

function useDebounce<T>(value: T, delay = 300): T {
  const [debouncedValue, setDebouncedValue] = useState(() => value);

  useEffect(() => {
    const timerid = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timerid);
    };
  }, [value, delay]);

  return debouncedValue;
}

function Typehead({
  label,
  options,
  onSelect,
  fetchSuggestions,
}: TypeheadProps) {
  const [show, setShow] = useState(false);
  const [input, setInput] = useState("");
  const [searchedItems, setSearchedItems] = useState<Array<OptionType>>([]);
  const [activeId, setActiveId] = useState<null | number>(null);
  const [selectedLabel, setSelectedLabel] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const debouncedValue = useDebounce(input);

  const wrapperRef = useRef<HTMLDivElement>(null);
  const listRef = useRef<HTMLUListElement>(null);
  const latestRequestRef = useRef(0);

  function onChangeHandler(e: ChangeEvent<HTMLInputElement>) {
    setInput(e.target.value);
    setSelectedLabel("");
  }

  function onFocusHandler(e: FocusEvent<HTMLInputElement, Element>) {
    setShow(true);
  }

  function onBlurHandler(e: FocusEvent<HTMLInputElement, Element>) {
    setShow(false);
  }

  function onMouseDownHandler(
    e: MouseEvent<HTMLLIElement, globalThis.MouseEvent>,
    obj: OptionType
  ) {
    e.preventDefault();
    setInput("");
    setSelectedLabel(obj.label);
    if (typeof onSelect === "function") onSelect(obj);
    setActiveId(obj.id);
    setShow(false);
  }

  function keyDownHandler(e: KeyboardEvent) {
    const { key } = e;

    if (key === "Escape") {
      setShow(false);
    } else if (searchedItems.length > 0) {
      if (key === "ArrowUp" && activeId === null) {
        e.preventDefault();
        setActiveId(searchedItems[searchedItems.length - 1].id);
      } else if (key === "ArrowUp") {
        e.preventDefault();
        let index = searchedItems.findIndex((obj) => obj.id === activeId);

        index = index - 1 < 0 ? searchedItems.length - 1 : index - 1;

        setActiveId(searchedItems[index].id);
      } else if (key === "ArrowDown" && activeId === null) {
        e.preventDefault();
        setActiveId(searchedItems[0].id);
      } else if (key === "ArrowDown") {
        e.preventDefault();
        let index = searchedItems.findIndex((obj) => obj.id === activeId);

        index = index + 1 >= searchedItems.length ? 0 : index + 1;

        setActiveId(searchedItems[index].id);
      } else if (key === "Enter" && activeId !== null) {
        const obj = searchedItems.find((e) => e.id === activeId);

        if (obj) {
          setInput("");
          setSelectedLabel(obj.label);
          if (typeof onSelect === "function") onSelect(obj);
          setActiveId(obj.id);
          setShow(false);
        }
      }
    }
  }

  async function handleFetch(query: string, signal: AbortSignal) {
    if (typeof fetchSuggestions === "function") {
      const requestId = ++latestRequestRef.current;

      try {
        setLoading(true);
        setError("");

        const temp = await fetchSuggestions(query, signal);

        if (requestId === latestRequestRef.current) {
          setSearchedItems(temp);
        }
      } catch (error) {
        if (signal.aborted) return;

        console.error(error);
        setError("Error");
      } finally {
        setLoading(false);
      }
    }
  }

  useEffect(() => {
    let controller: AbortController;

    if (typeof fetchSuggestions === "function") {
      console.log("debouncedValue", debouncedValue);

      if (debouncedValue.length === 0) {
        setSearchedItems([]);
        return;
      }

      controller = new AbortController();

      handleFetch(debouncedValue, controller.signal);
    } else {
      if (debouncedValue.length === 0) {
        setSearchedItems(options);
      } else {
        const temp = options.filter((option) =>
          option.value.toLowerCase().includes(debouncedValue.toLowerCase())
        );

        setSearchedItems(temp);
        setShow(true);
      }
    }

    return () => {
      if (typeof fetchSuggestions === "function" && controller) {
        controller.abort();
      }
    };
  }, [debouncedValue, fetchSuggestions, options]);

  useEffect(() => {
    if (show) {
      try {
        for (const child of listRef.current?.children) {
          const id = child.getAttribute("data-id");

          if (Number(id) === activeId) {
            child.scrollIntoView({
              behavior: "auto", // "auto" provides the instant jump you want
              block: "nearest", // Prevents unnecessary shifting if already in view
              inline: "nearest", // Applies the same logic horizontally
            });
            return;
          }
        }
      } catch (error) {
        console.error(error);
      }
    }
  }, [activeId, show]);

  return (
    <div ref={wrapperRef} className={styles.wrapper}>
      <label className={styles.label} htmlFor={`${label}-dropdown`}>
        {label}
      </label>
      <input
        onChange={onChangeHandler}
        value={input || selectedLabel}
        className={styles.input}
        id={`${label}-dropdown`}
        onFocus={onFocusHandler}
        onBlur={onBlurHandler}
        aria-expanded={show}
        role="combobox"
        aria-activedescendant={
          show && activeId !== null && activeId >= 0
            ? `option-${activeId}`
            : undefined
        }
        onKeyDown={keyDownHandler}
        aria-controls={show ? "listbox" : undefined}
        aria-autocomplete="list"
      />

      {show ? (
        <ul
          id="listbox"
          role="listbox"
          ref={listRef}
          tabIndex={-1}
          className={styles.list}
        >
          {error.length > 0 ? (
            <li aria-busy="true" aria-live="polite" className={styles.listItem}>
              Error
            </li>
          ) : loading ? (
            <li aria-busy="true" aria-live="polite" className={styles.listItem}>
              Loading...
            </li>
          ) : searchedItems.length > 0 ? (
            <>
              {searchedItems.map((obj) => (
                <li
                  id={`option-${obj.id}`}
                  role="option"
                  aria-selected={activeId === obj.id}
                  onMouseDown={(e) => onMouseDownHandler(e, obj)}
                  className={`${styles.listItem} ${
                    activeId === obj.id ? styles.active : ""
                  }`}
                  key={obj.id}
                  data-id={obj.id}
                >
                  {obj.label}
                </li>
              ))}
            </>
          ) : (
            <li aria-live="polite" role="option" className={styles.listItem}>
              No filtered items found
            </li>
          )}
        </ul>
      ) : null}
    </div>
  );
}

export default Typehead;

And let's not forget how much CSS is important for accessibility

.list {
  position: absolute;
  list-style: none;
  background-color: lightgray;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 240px;
  width: 100%;
  transform: translateY(80px);
}

.listItem {
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  color: #000;
}

.listItem.active {
  background-color: springgreen;
}

.listItem:hover {
  /* background-color: springgreen; */
  background-color: #a5e356;
}

Improving Accessibility – Dropdown

hritickjaiswal — Tue, 13 Jan 2026 15:32:26 +0000

I recently set out to improve my accessibility skills by doing something practical:
building accessible UI primitives from scratch.

And so today I targeted custom Dropdown / Select (not the native )

Why a Custom Dropdown?

Because it is deceptively simple.

Visually, it’s trivial.
Behaviorally and accessibly, it’s one of the most commonly broken components on the web.

If you can build an accessible custom select, you are forced to understand:

Focus management
Keyboard-first interaction
ARIA behavior, not just attributes
Event scoping and containment

First Iteration Requirements

Keyboard navigation
ARIA Must Match the Actual Interaction Model
Keyboard Handling Must Be Scoped

Implementation

import { useEffect, useRef, useState } from "react";
import styles from "./style.module.css";

interface OptionType {
  label: string;
  value: string;
}

interface DropdownProps {
  value: string;
  options: Array<OptionType>;
  onChangeHandler: (val: string) => void;
}

function Dropdown({ onChangeHandler, options, value }: DropdownProps) {
  const [show, setShow] = useState(false);
  const [activeIndex, setActiveIndex] = useState(-1);

  const wrapperRef = useRef<HTMLDivElement>(null);

  function handleSelectBtnClick() {
    if (!show) {
      setActiveIndex(options.findIndex((option) => option.value === value));
    }

    setShow((prev) => !prev);
  }

  function handleOptionClick(e: MouseEvent, val: string) {
    e.preventDefault();

    onChangeHandler(val);
    setShow(false);
  }

  function blurHandler() {
    setShow(false);
  }

  useEffect(() => {
    const keyDownHandler = (e: KeyboardEvent) => {
      const { key } = e;

      if (key === "ArrowUp") {
        setActiveIndex((prev) => {
          return prev - 1 >= 0 ? prev - 1 : 0;
        });
      } else if (key === "ArrowDown") {
        setActiveIndex((prev) => {
          return prev + 1 < options.length ? prev + 1 : options.length - 1;
        });
      } else if (key === "Enter" && activeIndex >= 0) {
        onChangeHandler(options[activeIndex].value);
      } else if (key === "Escape") {
        setShow(false);
      } else if (
        key.toLowerCase().charCodeAt(0) >= 97 &&
        key.toLowerCase().charCodeAt(0) <= 122
      ) {
        const index = options.findIndex(
          (option) => option.value[0].toLowerCase() === key.toLowerCase()
        );

        if (index >= 0) {
          setActiveIndex(index);
        }
      }
    };

    if (show) {
      wrapperRef.current?.addEventListener("keydown", keyDownHandler);
    }

    return () => {
      if (show)
        wrapperRef.current?.removeEventListener("keydown", keyDownHandler);
    };
  }, [show, options, activeIndex, onChangeHandler]);

  return (
    <div ref={wrapperRef} className={styles.wrapper}>
      <button
        onClick={handleSelectBtnClick}
        className={styles.selectBtn}
        onBlur={blurHandler}
        aria-haspopup="listbox"
        aria-expanded={show}
        aria-controls="dropdown-listbox"
        aria-activedescendant={
          show && activeIndex >= 0 ? `option-${activeIndex}` : undefined
        }
      >
        {value ? value : "Select an option"}
      </button>

      <ul
        role="listbox"
        id="dropdown-listbox"
        className={`${styles.optionList} ${!show ? styles.hidden : ""}`}
      >
        {options.map(({ label, value }, i) => (
          <li
            id={`option-${i}`}
            onMouseDown={(e) => handleOptionClick(e, value)}
            className={`${styles.listItem} ${
              i === activeIndex ? styles.active : ""
            }`}
            key={value}
            aria-selected={i === activeIndex}
            role="option"
          >
            {label}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Dropdown;

Styles

.listItem.active {
  background-color: green;
  color: #fff;
  font-weight: 600;
}

.selectBtn:focus {
  outline-offset: 4px;
}

.hidden {
  display: none;
}

Key Learnings

This was the most practical, hands-on learning.

The problem
When clicking an option:
blur fires
Then click fires

And the dropdown closes before selection happens

Visually, everything looks fine. Functionally, selection can fail.

The fix

Understanding event priority changed everything:

onMouseDown fires before blur

onClick fires after blur

By handling selection on onMouseDown, I was able to:

Capture the user’s intent
Prevent premature close
Preserve correct keyboard and mouse behavior

This wasn’t about hacks — it was about understanding how the browser processes events.

[Boost]

hritickjaiswal — Tue, 13 Jan 2026 15:12:44 +0000

Improving Accessibility – Modal

hritickjaiswal ・ Jan 6

#a11y #frontend #react #nextjs

Improving Accessibility – Modal

hritickjaiswal — Tue, 06 Jan 2026 15:32:19 +0000

This year, I decided to intentionally improve how I approach accessibility in UI components.

Instead of chasing a “perfect” implementation, I’m focusing on iterative improvements—build, test, learn, and refine. In my experience, this leads to better engineering outcomes than over-designing upfront.

I started with a modal, since it’s common, deceptively simple, and easy to get wrong.

First Iteration Requirements

For the first pass, these were my non-negotiables:

Focus trapping (Tab / Shift + Tab)
Focus restoration on close
Move focus into the modal on open
role="dialog" and aria-modal="true"
Background inertness (inert / aria-hidden)
Escape key handling
Screen reader announcement timing
Visible focus outlines via CSS

Implementation

import { useEffect, useRef, useState, type ReactNode } from "react";

import styles from "./style.module.css";
import { createPortal } from "react-dom";

interface ModalProps {
  children: ReactNode;
  open: boolean;
  onClose: () => void;
}

function Modal({ children, onClose, open }: ModalProps) {
  const modalRef = useRef<HTMLDivElement>(null);
  const bgFocusElement = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    const keydownHandler = (e: KeyboardEvent) => {
      const { key } = e;
      const focusableElements = modalRef.current?.querySelectorAll(
        'button, a, [href], input,textarea, select, [tabindex]:not([tabindex = "-1"])'
      );

      if (key === "Tab" && focusableElements?.length) {
        const firstFocusableElement = focusableElements[0];
        const lastFocusableElement =
          focusableElements[focusableElements.length - 1];

        if (e.shiftKey) {
          if (document.activeElement === firstFocusableElement) {
            e.preventDefault();
            (lastFocusableElement as HTMLButtonElement).focus();
          }
        } else {
          if (document.activeElement === lastFocusableElement) {
            e.preventDefault();
            (firstFocusableElement as HTMLButtonElement).focus();
          }
        }
      } else if (key === "Escape") {
        onClose();
      }
    };

    if (open) {
      document.addEventListener("keydown", keydownHandler);
      const focusableElements = modalRef.current?.querySelectorAll(
        'button, a, [href], input,textarea, select, [tabindex]:not([tabindex = "-1"])'
      );

      bgFocusElement.current = document.activeElement as HTMLButtonElement;

      if (focusableElements?.length) {
        (focusableElements[0] as HTMLButtonElement)?.focus();
      }
    }

    return () => {
      if (open) {
        document.removeEventListener("keydown", keydownHandler);
      }
    };
  }, [open]);

  useEffect(() => {
    if (open) {
      const rootElement = document.getElementById("root");

      if (rootElement) {
        rootElement.inert = true;
      }

      document.body.style.overflow = "hidden";
    } else {
      const rootElement = document.getElementById("root");

      if (rootElement) {
        rootElement.inert = false;
      }

      document.body.style.overflow = "";

      if (bgFocusElement.current) {
        bgFocusElement.current.focus();
        bgFocusElement.current = null;
      }
    }

    return () => {
      const rootElement = document.getElementById("root");
      if (rootElement) {
        rootElement.inert = false;
      }
      document.body.style.overflow = "";
    };
  }, [open]);

  if (!open) {
    return null;
  }

  return createPortal(
    <section
      onClick={onClose}
      aria-modal="true"
      role="dialog"
      className={styles.modalContainer}
      ref={modalRef}
      aria-label="Modal-Container"
    >
      <div
        onClick={(e) => e.stopPropagation()}
        className={styles.childrenContainer}
        aria-label="Modal-Child-Container"
      >
        {children}
      </div>
    </section>,
    document.body
  );
}

function ModalParent() {
  const [open, setOpen] = useState(false);

  const openModal = () => {
    setOpen(true);
  };

  const closeModal = () => {
    setOpen(false);
  };

  return (
    <article>
      <button className={styles.btn} onClick={openModal}>
        ModalParent
      </button>
      <div
        style={{
          width: 400,
          height: 1300,
          backgroundColor: "red",
        }}
      ></div>

      <Modal open={open} onClose={closeModal}>
        <div>
          <h1>Modal</h1>

          <button className={styles.btn}>Modal Button</button>

          <input type="text" />
        </div>
      </Modal>
    </article>
  );
}

export default ModalParent;

Styles (Focus Visibility Matters)

.modalContainer {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}

.childrenContainer {
  background: #fff;
  padding: 1rem;
  border-radius: 4px;
  max-width: 768px;
  width: 95%;
}

button:focus,
input:focus {
  outline: 2px solid orange;
  outline-offset: 4px;
}

Key Learnings

Focus management is not optional
Background inertness dramatically improves keyboard and screen reader behavior
Native semantics + minimal ARIA works better than over-annotating
Visual focus indicators matter more than expected

Hope anyone who reads it finds it useful and any suggestions for my next iteration is most welcome.

Event Bubbling and Delegation in JavaScript for beginners by a beginner.

hritickjaiswal — Fri, 11 Feb 2022 07:44:32 +0000

Event Bubbling and delegation is a very common topic asked in JavaScript interviews but before knowing what they are we first need to have a basic concept about events in JavaScript.

When we say events we usually mean HTML events and what we mean by that, is some change occurred in one of the HTML elements present on the page. Some e.g. are

An HTML input field was changed
An HTML button was clicked

and often times when such an event occurs the developers want to perform specific actions in response to that event like for e.g

Check the value inside the input element is valid or not
Toggle a modal

and such. So to accomplish these things we developers use EventListeners , these event listeners helps us to execute a callback function in response to an event. e.g.

document.getElementById("btn").addEventListener("click", sayHello);

function sayHello() { // Callback function
   console.log("Hello");
}

So great, now we have the power to response to events
BUT
there is this one problem with event listeners they consume memory. So if you go crazy with them it's gonna affect the performance of the site.

So to solve the problem we can use Event Delegation and Event Bubbling.

Suppose you have your HTML code kinda like this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Event Bubbling</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="grid">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>

And now you want to perform some action when a "box" is clicked, in the above code there are 30 box divs so instead on attaching eventListeners to all 30 what we can do is delegate those events
by attaching a single event listener on the parent div "grid".

const grid = document.addEventListener(".grid");

grid.addEventListener("click", (eventObj) => {
  console.log(eventObj)
});

BUT we wanted to target the box right ?? So what to do now.
The answer is (drum rolls) event object "eventObj" , the callback function for an event Listener passes an event object which has several methods and properties which are very handy and can help us accomplish our task.

And this is it . Simple, right ?

So if you guys find the post helpful like and share and if I made a mistake somewhere please let me know.

Debouncing for beginners by a beginner

hritickjaiswal — Sat, 23 Oct 2021 11:41:00 +0000

I am a beginner and I recently learned debouncing and throttling ,their usage and differences.

Debouncing

Debouncing is a procedure in JavaScript(and possibly other programming languages) which helps us to reduce the number of function calls in response to an event.
For understanding and simplicity sake let us suppose we need to make API calls for "keyup" events on an input element.

function makeAPICall() {
   //Making API Call
}

document.querySelector("input").addEventListener("keyup",makeAPICall)

If we use the above method and suppose I typed "Hritick" in 1 go in the input element a total of 7 API calls will be made (for each character typed) but most probably the application should only make the API call for "Hritick" or "Hrit" but we made an API call for each new character inserted which is very expensive.
So to solve this problem we can use Debouncing - by using debouncing we will make the API call only if the event (triggering the API call) hasn't taken place for a given iterval of time.

function makeAPICall() {
   //Making API Call
}

function debounce(fn, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  };
}

const optimisedFunction = debounce(makeAPICall, 500);

document.querySelector("input").addEventListener("keyup", optimisedFunction);

In the above code we created an "optimisedFunction" for debouncing. Instead of directly making API calls on every "keyup" event we will make the API call 500 milliseconds after every "keyup" event and by using the concept of closures we will cancel every request for API call before the current "keyup" event by using clearTimeout(...).
Thus making the API call only when the user has stopped typing or have slowed down typing.
As the title said I am a beginner so if I made any mistakes or anyone has any question please comment me. And I'll make sure I correct or answer the comment.

Deep Freeze tutorial for Beginners by a Beginner

hritickjaiswal — Fri, 08 Oct 2021 11:03:08 +0000

Deep Freeze tutorial for Beginners by a Beginner

I got into web development just a few months back and a few days ago I came across a interview question asking to write code to deep freeze an object.

But what is freezing an object ???

Freezing an object means preventing new properties from being added to it, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties. Basically freezing an object means we cannot add ,delete or change existing properties which otherwise would have been possible in javascript as it is a dynamic language.

To freeze objects in javascript we use Object.freeze() method

const obj = {
  name: "Hritick",
};

console.log(obj.name); //* Prints -> Hritick

obj.name = "Hritick Jaiswal";
console.log(obj.name);//* Prints -> Hritick Jaiswal

But now if we use Object.freeze

Object.freeze(obj); //* Freezes the object
console.log(Object.isFrozen(obj)); //* Checks if an object is frozen or not

obj.name = "Hritick"; //* Changing values is ignored
console.log(obj);//* Prints -> { name: 'Hritick Jaiswal' }

obj.surname = "Jaiswal"; //* Adding values is ignored
console.log(obj);//* Prints -> { name: 'Hritick Jaiswal' }

delete obj.name; //* Deleting values is ignored
console.log(obj);//* Prints -> { name: 'Hritick Jaiswal' }

Ok great but what the hell is deep freeze and if we have Object.freeze and why do we need it.

const obj = {
  name: "Hritick",
  address: {
    is: "Kolkata",
  },
};

console.log(obj.address.is);//* Prints -> Kolkata

Object.freeze(obj)

obj.address.is = "Hyderabad"; //! This is allowed
console.log(obj.address.is);//* Prints -> Hyderabad

So why did Object.freeze did not work ???

Well Object.freeze did work
It did "freeze" the properties of the object "obj" as the property "address" stores the memory location of the object { is:"Kolkata" } which cannot be changed but Object.freeze works on the immediate layer only.

Deep freezing is preventing from such cases. So what should we do ....

function deepFreeze(object) {
  if (typeof object !== "object") return;

  for (const value of Object.values(object)) {
    deepFreeze(value);
  }

  Object.freeze(object);
}

The above code uses recursion to basically freeze every object no matter at what level it is.

And that's it , this is my first post here so if I made any mistakes or anyone has any suggestions please tell me