JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Fieldset</title>
    <style>
     
    </style>
</head>
<body>

<div aria-label="select category" class="category-dropdown category-dropdown--open" role="button" tabindex="0"
     aria-controls="edit-search-category-type--3--wrapper">
    <span class="bold-text">Category</span>
    <span class="light-text">: People</span>
    <span class="category-dropdown--icon" aria-hidden="true"></span>
</div>

<fieldset data-twig-suggestion="search_bar" data-drupal-selector="edit-search-category-type"
          id="edit-search-category-type--3--wrapper" class="fieldgroup form-composite js-form-item form-item js-form-wrapper form-wrapper dropdown-active"
          aria-hidden="true">
    <legend>
        <span class="fieldset-legend">Category</span>
    </legend>
    <div class="fieldset-wrapper">

        <ul id="edit-search-category-type--3" class="category-navigation">
            <li>
                <input data-twig-suggestion="search_bar" data-drupal-selector="edit-search-category-type-all-3"
                       type="radio" id="edit-search-category-type-all--3" name="search_category_type" value="All"
                       class="form-radio" aria-checked="false" aria-labelledby="radio-label-0">
                <label for="edit-search-category-type-all--3" class="option" id="radio-label-0" aria-hidden="true">All
                    results</label>
            </li>
            <li>
                <input data-twig-suggestion="search_bar" data-drupal-selector="edit-search-category-type-2-3"
                       type="radio" id="edit-search-category-type-2--3" name="search_category_type" value="2"
                       checked="checked" class="form-radio" aria-checked="true" aria-labelledby="radio-label-1">
                <label for="edit-search-category-type-2--3" class="option" id="radio-label-1"...

CSS

.category-dropdown {
            cursor: pointer;
        }

        .category-navigation {
            list-style: none;
            padding: 0;
        }

        .category-navigation li {
            margin-bottom: 5px;
        }

JavaScript

const categoryDropdown = document.querySelector('.category-dropdown');
    const fieldsetWrapper = document.querySelector('.fieldset-wrapper');

    categoryDropdown.addEventListener('click', function () {
        const isFieldsetHidden = fieldsetWrapper.getAttribute('aria-hidden') === 'true';
        fieldsetWrapper.setAttribute('aria-hidden', String(!isFieldsetHidden));
    });

    const radioInputs = document.querySelectorAll('input[name="search_category_type"]');
    radioInputs.forEach(function (radioInput) {
        radioInput.addEventListener('click', function () {
            fieldsetWrapper.setAttribute('aria-hidden', 'true');
        });
    });

    document.addEventListener('keydown', function (event) {
        const keyCode = event.keyCode || event.which;
        const isVisible = fieldsetWrapper.getAttribute('aria-hidden') === 'false';

        if (keyCode === 13 || keyCode === 32) { // Enter or Space key
            fieldsetWrapper.setAttribute('aria-hidden', String(!isVisible));
        } else if (keyCode === 27) { // Escape key
            fieldsetWrapper.setAttribute('aria-hidden', 'true');
        } else if (keyCode === 38 && isVisible) { // Up arrow key
            // Handle navigation using up arrow key
        } else if (keyCode === 40 && isVisible) { // Down arrow key
            // Handle navigation using down arrow key
        }
    });