igCurrencyEditor and igPercentEditor accessibility

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css"
    rel="stylesheet">
</link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet">
</link>

<div class="editor-wrapper">
    <label for="igCurrencyEditor">Amount</label><br>
    <input id="igCurrencyEditor" />
</div>

<div class="editor-wrapper">
    <label for="igPercentEditor">Percentage</label><br>
    <input id="igPercentEditor" />
</div>

CSS

.editor-wrapper {
    margin-bottom: 20px;
}

JavaScript

$(function () {
    const userLocale = "en-GB";

    const currencySymbol = new Intl.NumberFormat(userLocale, {
        style: "currency",
        currency: getCurrencyCodeFromLocale(userLocale)
    }).formatToParts(0).find(part => part.type === "currency")?.value || "$";

    const percentSymbol = "%";

    // CURRENCY
    $("#igCurrencyEditor").igCurrencyEditor({
        value: 600,
        currencySymbol: currencySymbol,
        textChanged: function (evt, ui) {
            const rawVal = ui.owner.value();
            $("#igCurrencyEditor").attr("aria-label", `${rawVal} ${getCurrencyName(userLocale)}`);
        },
        valueChanged: function (evt, ui) {
            $("#igCurrencyEditor").attr("aria-label", `${ui.newValue} ${getCurrencyName(userLocale)}`);
        }
    });
    $("#igCurrencyEditor").attr("aria-label", `600 ${getCurrencyName(userLocale)}`);

    // PERCENT
    $("#igPercentEditor").igPercentEditor({
        value: 10,
        displayFactor: 1,
        percentSymbol: percentSymbol,
        textChanged: function (evt, ui) {
            const rawVal = ui.owner.value();
            $("#igPercentEditor").attr("aria-label", `${rawVal} percent`);
        },
        valueChanged: function (evt, ui) {
            $("#igPercentEditor").attr("aria-label", `${ui.newValue} percent`);
        }
    });
    $("#igPercentEditor").attr("aria-label", "10 percent");

    // Helper: Basic locale-to-currency mapping
    function getCurrencyCodeFromLocale(locale) {
        const map = {
            "en-US": "USD",
            "en-GB": "GBP",
            "de-DE": "EUR",
            "fr-FR": "EUR",
            "ja-JP": "JPY",
            "hi-IN": "INR",
            "zh-CN": "CNY"
        };
        return map[locale] || "USD"; // Fallback
    }

    // Helper: Currency name for aria-label
    function getCurrencyName(locale) {
        const names = {
            "USD": "dollars",
            "GBP":...