{"componentChunkName":"component---src-components-tutorials-js","path":"/tutorials/listbox-widget/","result":{"data":{"markdownRemark":{"html":"

Contents

\n
    \n
  1. Why would I need this?
    2. \n
  2. \n

    How does the listbox widget work?

    \n
      \n
    1. \n

      Building the R Component

      \n
        \n
      1. Listbox Toggle
        2. \n
      2. Listbox Options
        3. \n
      3. Listbox List
        4. \n
      4. Main Listbox function
        5. \n
      \n
      2. \n
    2. \n

      Creating the JavaScript Input Bindings

      \n
        \n
      1. initialize
        2. \n
      2. getValue
        3. \n
      3. subscribe
        4. \n
      \n
      3. \n
    \n
    3. \n
  3. What do I need to know before I integrate this into my app?
    4. \n
  4. How do I run the demo
    5. \n
  5. Further reading
    6. \n
\n\n\n

Why would I need this?

\n

In the post Custom Select Inputs, I demonstrated the use of the appearance CSS property for styling select inputs. However, that approach can cause the element to render differently across browsers making the web experience inconsistent. Using a well-designed component library will help with this, but it usually involves loading a large library into your app just to use a single component. Other solutions involve some creative markup and CSS, but it is not guaranteed that these approaches are accessible for individuals who use assistive web devices. Instead, it is possible to create your own dropdown menu by creating using the listbox role.

\n

In this post, I will provide an overview for creating your own listbox widget using HTML, CSS, and JavaScript. The Web Accessibility Initiative's (WAI) Authoring Practices for creating a listbox widget is used to ensure the widget follows recommended accessibility practices. The example discussed in the post reworks the Collapsible Dropdown Listbox Example for use in Shiny applications, including writing the R functions that generate the HTML and creating the custom JavaScript input binding that handles the communication between R and the listbox widget.

\n
\n

This tutorial focuses heavily on HTML and JavaScript. Some experience will definitely help, but it is not required. I have tried to keep concepts simple and reference outside sources where possible. If you notice any errors or have suggestions for improving this post, feel free to open a new issue on GitHub.

\n
\n\n

How does the listbox widget work?

\n

In this post, I will cover the basics for creating the listbox widget.

\n
    \n
  1. Building the R component
    2. \n
  2. Creating the JavaScript input binding
    3. \n
\n

Before we dive in, let's create the required files. Add the following files to your Shiny project.

\n
my-project/\n  R/\n    listbox.R\n  www/\n    css / \n      listbox.css\n    js/\n      listbox.js\n  ...
\n

You can place the CSS and JS files wherever you like as long as they are in the www folder. As of Shiny 1.5, files located in the R/ folder are loaded automatically.

\n

Checkout the listbox sub-repository on GitHub for CSS code. I wanted to keep this post short and focus mainly on the HTML and JavaScript code. All styles were written in SASS and compiled to CSS using the application bundler Parcel. The CSS file is located in the file src/listbox.scss and the compiled CSS file can be found at www/css/listbox.css. If you are using vanilla CSS, load the listbox.css file directly into your app or copy the contents into your app's primary CSS file.

\n\n

Building the R component

\n

In this section, we will be working from the listbox.R file.

\n

First, we will write the R functions that render the HTML markup and required attributes for the listbox widget. Using the Collapsible Dropdown Listbox Example as a guide, the markup requires a several HTML elements and ARIA attributes. Take a look at the example's HTML source code as this will help determine what the R functions should return.

\n
    \n
  • Container: In the example, they used a <div> element to wrap the component. We can use a <div> as the listbox container, but I opted for the <fieldset> element as I would primarily use the listbox element inside a <form>. The <fieldset> element can be accessed using the tags$fieldset object.
    • \n
  • Title: The title describes the listbox widget and its elements. Since I am using the <fieldset> element, then <legend> is the most appropriate element. (Accessed by tags$legend)
    • \n
  • Label: A label may also be useful as it provides additional context for the listbox widget. For example, if you were building a form where users select their preferred day of the week for scheduling appointments, a label could be used to give additional information about days and time an office is open (e.g., \"We are only open on Mondays and Tuesdays\"). I will use the <span> element for this (tags$span).
    • \n
  • Toggle: The listbox widget requires a <button> that opens and closes the widget. The text inside the button will be used to display the current value. I will also add an SVG icon to indicate that the button can be clicked and that there is expandable content.
    • \n
  • List of options: For the <select> elements, options are created using the <option> element, but this is not available for listboxes. Instead, I will use an unordered list (<ul>; tags$ul) and each option is created using a list item (<li>; tags$li) with the attribute role = \"option\".
    • \n
\n

Using the above list, here is the listbox HTML markup that we want the R functions to generate. I will talk about the required HTML- and ARIA attributes as we start writing the R functions.

\n
<fieldset>\n    <legend>Title</legend>\n    <span>A longer description</span>\n    <button>\n        <span>Currently Selected Option</span>\n        <svg>Icon</svg>\n    </button>\n    <ul>\n        <li>Option 1</li>\n        <li>Option 2</li>\n        <li>Option 3</li>\n        <li>...</li>\n    </ul>\n</fieldset>
\n

How do we generate the HTML markup from R? Since there several HTML elements need to be created and linked with each other (via HTML attributes), and options need to be dynamically generated, I will create a primary function (or parent function) that calls several helper functions. The primary function will generate the IDs that link the child elements and pass this information for use in the helper functions. These helper functions are listed below.

\n
    \n
  1. list_toggle: I will create a function that renders the markup for the <button>. This includes the text element that will display the selected option and an SVG icon that visually indicates the button can be clicked.
    2. \n
  2. input_list_item: Each option should be generated individually. This function generates a single list item that has an SVG icon (that will be visible when the option is selected) and an inner text label that displays the value of the option. Several attributes are also needed for good web accessibility practices and for communication between R and the JavaScript input binding (this will be discussed in a later section).
    3. \n
  3. input_list: This helper function dynamically generates a list (<ul>) of options based on the number of input values (via the input_list_item function).
    4. \n
  4. listbox: This the main function that will be used in your shiny app. This function runs the helper functions and generates the list of options. It also renders the title and description (if applicable).
    5. \n
\n

I will nest the helper functions (items 1 through 3) in list object.

\n
helpers <- list()
\n

The icons used in this package are available in rheroicons package. The rheroicons package is the R version of the heroicons library.

\n\n

Listbox toggle

\n

The first helper function is the list_toggle function. This function generates the markup for the <button> that open and closes the list of options. Inside the button, the function will render a text label (that displays the current value) and an SVG icon (that visually indicates the button can be opened or closed). For good web accessibility practices, we will add the ARIA attributes aria-haspopup, aria-expanded, and aria-labelledby. I will also add a custom data-* attribute which may be useful selecting the button in CSS or JavaScript.

\n
helpers$list_toggle <- function(inputId, titleId) {\n    buttonId <- paste0(inputId, \"__\", \"toggle\")\n    buttonLabelId <- paste0(buttonId, \"_label\")\n\n    tags$button(\n        id = buttonId,\n        class = \"listbox-toggle\",\n        `data-group` = inputId,\n        `aria-haspopup` = \"listbox\",\n        `aria-expanded` = \"false\",\n        `aria-labelledby` = paste0(titleId, \" \", buttonLabelId),\n\n        # text element for current selected item\n        tags$span(\n            id = buttonLabelId,\n            class = \"toggle-text\"\n        ),\n\n        # icon\n        rheroicons::icons$chevron_down(\n            type = \"solid\",\n            aria_hidden = TRUE,\n            class = \"toggle-icon\"\n        )\n    )\n}
\n

The values for the arguments inputId and titleId are defined by the primary function. These values are used to link the legend and selected option label. The aria-expanded attribute informs users who use assistive web technologies if the list is visible or not (this attribute will be updated in the input binding).

\n\n

Listbox options

\n

Next, I will write the input_list_item function that generates each option. The returned element will have a label the displays the option and an SVG icon that will be visible when an option is selected. In addition, each option must have the attribute role = \"option\".

\n
helpers$input_list_item <- function(inputId, option, value) {\n    forId <- paste0(inputId, \"__\", option)\n\n    # generate html\n    tags$li(\n        id = forId,\n        class = \"listbox-option\",\n        role = \"option\",\n        `data-value` = value,\n        `data-group` = inputId,\n        `aria-labelledby` = forId,\n\n        # selected icon\n        rheroicons::icons$check_circle(\n            type = \"solid\",\n            aria_hidden = TRUE,\n            class = \"option-icon\"\n        ),\n        # label\n        tags$span(\n            id = paste0(forId, \"-input-label\"),\n            class = \"option-text\",\n            option\n        )\n    )\n}
\n

The values for the arguments inputId, option, and value are passed down via the input_list function. I have also added a few custom data attributes that will be useful for selecting elements in CSS or the input binding.

\n\n

Listbox list

\n

The input_list_item function can then create be used in the input_list function to dynamically generate options. The returned element is an unordered list (<ul>). This element must have the attribute role = \"listbox\" and the attribute tabindex = \"0\" (as it will make the element focusable via the input binding). The ARIA attribute aria-labelledby is used to link the label and the list of options.

\n
helpers$input_list <- function(inputId, titleId, data) {\n\n    # generate markup for parent element\n    parent <- tags$ul(\n        id = paste0(inputId, \"__input_list\"),\n        class = \"listbox-list hidden\",\n        `data-group` = inputId,\n        `aria-labelledby` = titleId,\n        role = \"listbox\",\n        tabindex = \"-1\"\n    )\n\n    # generate markup for child (<li>) elements\n    children <- lapply(seq_len(length(data$options)), function(i) {\n        helpers$input_list_item(\n            inputId = inputId,\n            option = data$options[[i]],\n            value = data$values[[i]]\n        )\n    })\n\n    # bind to parent (you can add blank option here)\n    parent$children <- children\n\n    # return\n    return(parent)\n}
\n

Input values for the input_list function are passed down from the main listbox function.

\n\n

Main listbox function

\n

Now that the helper functions are defined, we can use them in the main function. To align the function with other Shiny input elements, I will use the following arguments.

\n
listbox(inputId, title, label = NULL, options, values = NULL)
\n

By default, the label and values arguments are optional. If values is missing, then the input for options is used. Inputs for options and values should be a character array (i.e., options = c(...)).

\n
listbox <- function(inputId, title, label = NULL, options, values = NULL) {\n\n    # validate\n    stopifnot(is.character(inputId))\n    stopifnot(is.character(title))\n    stopifnot(!is.null(options))\n\n    # process options + values\n    data <- list(options = options, values = options)\n    if (!is.null(values)) data$values <- values\n\n    # set ID of text elements (for aria attributes)\n    titleId <- paste0(inputId, \"__title\")\n    labelId <- paste0(inputId, \"__label\")\n\n    # build component\n    el <- tags$fieldset(\n        id = inputId,\n        class = \"listbox-group hidden\",\n        `data-group` = inputId,\n        `data-value` = \"NULL\",\n\n        # define title for the input group\n        tags$legend(\n            id = titleId,\n            class = \"listbox-title\",\n            title\n        ),\n\n        # generate menu toggle\n        helpers$list_toggle(\n            inputId = inputId,\n            titleId = titleId\n        ),\n\n        # generate options list\n        helpers$input_list(\n            inputId = inputId,\n            data = data,\n            titleId = titleId\n        )\n    )\n\n    # append label if present\n    if (!is.null(label)) {\n        stopifnot(is.character(label))\n        el$children <- tagList(\n            el$children[1],\n            tags$span(\n                id = labelId,\n                class = \"listbox-label\",\n                lab\n            ),\n            el$children[2],\n            el$children[3],\n        )\n    }\n\n    # return\n    return(el)\n}
\n

The label for the listbox widget is added only if a string is supplied. If present, the label is inserted after the title and before the button.

\n

That is it for the R function. Load the CSS file into your app or add it to your existing CSS file. If you were to run the app at this point, it would return a simple button that does nothing when it is clicked. In the next section, we will create a custom input binding to define the behavior of the listbox widget.

\n\n

Creating the JavaScript input binding

\n

In this section, we will be working in www/js/listbox.js.

\n

Shiny input bindings consist of a series of methods that define what happens when the listbox widget is rendered, when the user clicks the button or presses the down arrow key. There are several methods available (by Shiny.js) and are further detailed in RStudio's Shiny input bindings guide. The listbox widget will use the initialize (at render), getValue (how to set the value of widget), and subscribe (the events; buttons, key presses, etc.) methods.

\n

The basic structure of the listbox input binding is in the following code block. New input bindings are created using new Shiny.InputBinding(). Use jQuery's extend to define the methods specific to the component (i.e., events, values to return, receive messages from R, etc.). Bindings must be registered with Shiny using Shiny.inputBindings.register(...). Here is the basic structure for the listbox widget. I have already written the find and unsubscribe methods. find returns all instances of the listbox widget using the CSS class name (listbox-group; defined by the listbox function) and unsubcribe removes events created by the subscribe method.

\n
// init binding\nvar listbox = new Shiny.InputBinding();\n\n\n// define methods\n$.extend(listbox, {\n\n    // find: locate all instances of the listbox widget\n    find: function(scope) {\n        return $(scope).find(\".listbox-group\");\n    },\n\n    // on render\n    initialize: function(el) {\n\n    },\n\n    // returns the value of the listbox to be accessed in R via input$...\n    getValue: function(el) {\n\n    },\n\n    // events\n    subscribe: function(el, callback) {\n\n    },\n\n    // off: remove events defined in subscribe\n    unsubscribe: function(el) {\n        $(el).off(\".listbox\");\n    }\n});\n\n// register binding\nShiny.inputBindings.register(listbox);
\n\n

initialize

\n

The purpose of the initialize method is to define what happens to the listbox widget as soon as it is rendered. By default, the widget sets the first option as the starting value. The value of the first option will be used to update the text display of the widget and made available in the Shiny server (via input$...). In this example, I set the value of the selected option to the custom data attribute data-value (found in the <fieldset> element). This step is not really relevant, but it could be useful if you would like to customize the appearance of the widget based on its current value.

\n

There are also a few ARIA attributes that need to be set in this step. First, the list element (i.e., <ul>) needs to have the property aria-activedescendant. This attribute is updated when a new option is selected and the value is always the ID of the selected option. Second, the first option — and any selected option — must have the aria-selected attribute added. When this property is used, the value must be set to true. Remove this attribute entirely when an option is deselected rather than using false.

\n
$.extend(listbox, {\n    // ...\n\n    initialize: function(el) {\n\n        // select list (ul) and first item in the list (li)\n        var list = $(el).find(\"ul[role='listbox']\");\n        var first = $(el).find(\"li[role='option']\").first();\n\n        // update ARIA attributes\n        list.attr(\"aria-activedescendant\", first.attr(\"id\"))\n        first.attr(\"aria-selected\", \"true\");\n\n        // add the value of the first item to the parent container (i.e., <fieldset>)\n        // to a custom data attribute\n        $(el).attr(\"data-value\", first.attr(\"id\"));\n\n        // update displayed text\n        $(el).find(\".toggle-text\").text(first.attr(\"data-value\"));\n    },\n\n    /// ...\n})
\n\n

getValue

\n

The getValue method will return the value of select option and make it available in the Shiny server. This method finds the option with the ARIA attribute aria-selected and extract its value.

\n
$.extend(listbox, {\n    // ...\n\n    getValue: function(el) {\n        return $(el).find(\"li[aria-selected='true']\").attr(\"data-value\");\n    },\n\n    // ...\n})
\n\n

subscribe

\n

The subscribe method is used to define the behaviors of the listbox component in response to an event (e.g., mouse clicks, key presses, etc.). To ensure good web accessibility practices, the listbox widget must respond to several keyboard events. In The Web Accessibility Initiative (WAI) Authoring Practices collapsible listbox widget example, it is recommended to use the following events: enter, escape, up and down arrow, home, and end. These keys will handle the opening and closing of the listbox, navigation within the list of options, and the selection of new items. Since we need to attach these behaviors based on mouse and keyboard clicks, I will write a few helper functions that will open, close, and toggle the list of options, as well as a function that updates the component when a new option is selected.

\n

The open and close functions are fairly straightforward. These functions either add or remove the CSS class hidden from the list, which toggles the CSS property display: none. Both functions will also update the ARIA attribute aria-expanded assigned to the listbox button. For visual purposes, the CSS class rotated will be added to the SVG icon. This will rotate the toggle icon (downward pointing chevron) by 180 degrees. The closeMenu and openMenu functions are wrapped in the toggleMenu function.

\n
// define function that closes menu\nfunction closeMenu() {\n\n    // find elements that will be modified on close\n    var menu = $(el).find(\"ul[role='listbox']\");\n    var toggle = $(el).find(\"button.listbox-toggle\");\n\n    // modify attributes\n    menu.addClass(\"hidden\");\n    toggle.attr(\"aria-expanded\", \"false\");\n    toggle.find(\".toggle-icon\").removeClass(\"rotated\");\n}\n\n// define function that opens menu\nfunction openMenu() {\n\n    // find elements that will be modified on open\n    var menu = $(el).find(\"ul[role='listbox']\");\n    var toggle = $(el).find(\"button.listbox-toggle\");\n    \n    // modify attributes\n    menu.removeClass(\"hidden\");\n    toggle.attr(\"aria-expanded\", \"false\");\n    toggle.find(\".toggle-icon\").addClass(\"rotated\");\n    \n    // focus menu and scroll to selected element\n    menu.focus();\n}\n\n// define function that toggles menu state\nfunction toggleMenu() {\n    var menu = $(el).find(\"ul[role='listbox']\");\n    if (menu.hasClass(\"hidden\")) {\n        openMenu();\n    } else {\n        closeMenu();\n    }\n}
\n

Next, we will need a function that updates the value of the listbox widget whenever an option is selected. This function will update the aria-selected attribute of the new option and update the displayed text with the new value. The function will also extract the ID of the new option and update the attribute aria-activedescendant assigned to the unordered list element. The last step runs a callback function — which is the getValue method — to update the value in the Shiny server.

\n
// update component and selected item\nfunction updateInput(elem) {\n    // focus new element\n    var newElem = elem;\n    newElem.attr(\"aria-selected\", \"true\");\n    newElem.addClass(\"focus\");\n\n    // update menu attribute\n    var menu = $(el).find(\"ul[role='listbox']\");\n    menu.attr(\"aria-activedescendant\", elem.attr(\"id\"));\n\n    // update component value + display text\n    $(el).attr(\"data-value\", elem.attr(\"data-value\"));\n    $(el).find(\".toggle-text\").text(elem.attr(\"data-value\"));\n\n    // run callback (i.e., getValue)\n    callback();\n    \n}
\n

Using these functions, we can define the events for the listbox widget. There are three events: what happens when the button is clicked, when an option is clicked, and when a key is pressed. The first event, is attached to the listbox button and it will either open or close the listbox via toggleMenu.

\n
// event: when menu toggle is clicked\n$(el).on(\"click\", \"button.listbox-toggle\", function(e) {\n    toggleMenu();\n});
\n

The keydown event is a bit more involved than the click event as each key will results in a different action. Key codes can be accessed through keyCode data available from event (e for short) interface. The keys that are used in this binding are listed in the following table.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
keybehaviorcode
up arrowfocus previous option38
down arrowfocus next option40
homefocus first option36
endfocus last option35
escapeclose menu27
enterselect current option13
\n

All key presses — except escape — will update the listbox's value automatically.

\n

I will use switch statement to define the action for each key. The escape key is the simplest case as it closes the listbox (i.e., runs closeMenu()). When the enter key is pressed, the listbox is closed and the current option is selected. Behaviors for the up arrow, down arrow, home, and end are similar to enter, but these actions use jQuery's prev, next, first or last functions —along with length— to determine if there are any sibling elements. For example, if the first option is focused and the down arrow key is pressed, then the second option is selected. If the last option is focused and the down arrow is pressed, then nothing happens as there are no more options to select.

\n
// event: watch for keydowns\n$(el).on(\"keydown\", \"ul[role='listbox']\", function(e) {\n    switch(e.keyCode) {\n\n        // on keydown: ArrowUp - code 38\n        case 38:\n            var current = $(el).find(\"li[aria-selected='true']\");\n            if (current.prev().length) {\n                var newElem = current.prev();\n                current.removeAttr(\"aria-selected\");\n                updateInput(newElem);\n            }\n            break;\n\n        // on keydown: ArrowDown - code 40\n        case 40:\n            var current = $(el).find(\"li[aria-selected='true']\");\n            if (current.next().length) {\n                var newElem = current.next();\n                current.removeAttr(\"aria-selected\");\n                updateInput(newElem);\n            }\n            break;\n\n        // on keydown: Home - code 36\n        case 36:\n            var current = $(el).find(\"li[aria-selected='true']\");\n            var first = $(el).find(\"li[role='option']\").first();\n            current.removeAttr(\"aria-selected\");\n            updateInput(first);\n            break;\n\n        // on keydown: End - code 35\n        case 35:\n            var current = $(el).find(\"li[aria-selected='true']\");\n            var last = $(el).find(\"li[role='option']\").last();\n            current.removeAttr(\"aria-selected\");\n            updateInput(last);\n            break;\n        \n        // on keydown: Escape - code 27\n        case 27:\n            closeMenu();\n            break;\n\n        // on keydown: Enter - code 13\n        case 13:\n            var selected = $(e.target);\n            updateInput(selected);\n            closeMenu();\n            break;\n    }\n});
\n

The last event is a click event that will be attached to each list item. This event will update the component using the value of the clicked item. Like the previous events, the ARIA attribute of the previously select option will be removed.

\n
// on event: when option clicked\n$(el).on(\"click\", \"li[role='option']\", function(e) {\n\n    // make sure the <li> element is selected\n    // this will handle situations when <span> or <icon> is\n    // clicked\n    $(el).find(\"li[role='option'][aria-selected='true']\").removeAttr(\"aria-selected\");\n    var elem = $(e.target).closest(\"li[role='option']\");\n    updateInput(elem);\n    closeMenu();\n});
\n

JQuery's closest() function is used to ignore the child elements (text and SVG icon) inside the selection option and return the list item.

\n

The full input binding can be found on GitHub in the file listbox.js

\n\n

What do I need to know before I integrate this into my app?

\n

At the moment, the listbox component is fairly basic and the functionality of the widget could be improved. Initial accessibility checks were run using the Web Accessibility Evaluation Tool (WAVE), but I would recommend further testing and review before using the listbox widget in any production application.

\n

The code discussed in this post, provide a starting point for creating the listbox component. The functionality is fairly limited as only one option can be selected at a time. It is possible to add a multiple selection feature, but more key press events are required. It is likely that other input elements (checkbox groups, radio groups, etc.) are better options as some behaviors created for the listbox widget are already browser-ready. Semantic HTML elements are always better than custom components. Expanding this example to include multiple selections would take more thought and planning, and I wanted to keep this post relatively simple.

\n

The listbox widget will also be included in accessibleshiny package, so keep an eye out for a new version!

\n\n

How do I run the example?

\n

The full code for the demo is available on GitHub in the Listbox subfolder. Alternatively, you can run the app directly from the R console using the following command.

\n
shiny::runGitHub(\n    repo = \"shinyAppTutorials\",\n    username = \"davidruvolo51\",\n    subdir = \"shiny-listbox\"\n)
\n\n

Further reading

\n

For more information about the concepts and resources mentioned in this post, please visit the following links.

\n","frontmatter":{"title":"Listbox Widget","subtitle":"Creating a customizable dropdown menu component for Shiny","abstract":"Select inputs are commonly used in Shiny for creating dropdown menus. Select inputs are easy to use, but they are not easy to style using CSS. An alternative solution is the listbox widget.","date":"2020-09-03","updated":"2020-09-03","keywords":["html","javascript"]},"fields":{"readingTime":{"minutes":19.625}}}},"pageContext":{"slug":"/tutorials/listbox-widget/"}},"staticQueryHashes":["63159454"]}