import React from "react";
import type { ChoiceType } from "./multiple-choice-widget";
/**
 * Props for the MultipleChoiceComponent
 */
export interface MultipleChoiceComponentProps {
    choices: ReadonlyArray<ChoiceType>;
    countChoices: boolean | null | undefined;
    multipleSelect?: boolean;
    numCorrect: number;
    onChoiceChange: (choiceId: string, newCheckedState: boolean) => void;
    reviewMode: boolean;
}
/**
 * The MultipleChoiceComponent renders the UI for multiple choice questions.
 *
 * This component handles the presentation of choices, user interactions,
 * and accessibility features, while the MultipleChoiceWidget manages the
 * underlying logic and state.
 *
 * Supports both radio button (single select) and checkbox (multiple select) modes.
 *
 * NOTE: This widget does not implement standard radio button or checkbox elements.
 *       The key difference is that the single-select (aka radio button) should
 *           allow the user to deselect a choice, whereas regular radio buttons
 *           can only be deselected by selecting another choice.
 *       Another difference is that keyboard navigation with single-select is
 *           done with the tab key, whereas regular radio buttons use the arrow keys,
 *           and the radio buttons are automatically selected when navigating to them.
 *       Since interactions with the single-select version of this widget don't
 *           follow the standard radio button behavior, we decided to use toggle
 *           button semantics for both versions of the widget,
 *           and implement additional ARIA attributes where needed.
 *
 * NOTE: Redundant ARIA roles for <ul> element
 *      Different screen readers handle <fieldset> and <legend> elements inconsistently,
 *          causing unpredictable announcement behavior:
 *              - NVDA + Chrome: Announces the legend when entering the fieldset,
 *                  providing context for the choices
 *              - VoiceOver + Safari: Often fails to announce the legend when users
 *                  navigate directly to form controls, especially with certain
 *                  navigation methods (arrow keys) or on mobile
 *      This inconsistency means some users hear the critical instructions
 *          ("Choose 1 answer", "Choose 3 answers", etc.) while others miss them
 *          entirely, depending on their assistive technology and navigation method.
 *          Redundant roles were added to address this issue.`role="list"` attribute
 *          preserves list semantics, as some screen readers may remove the implicit
 *          list role when `list-style: none` is applied via CSS.
 *
 * Created as part of the Radio Revitalization Project (LEMS-2933).
 */
declare const MultipleChoiceComponent: ({ choices, countChoices, multipleSelect, numCorrect, onChoiceChange, reviewMode, }: MultipleChoiceComponentProps) => React.ReactElement;
export default MultipleChoiceComponent;