Problem

The Webform module for Drupal 8 provides support for basic, advanced, and composite inputs/elements. Developers can also create custom elements and composites via code. Sometimes end-users need an interactive visual mechanism to select a complex option like a map location. The Image select element is limited to allowing users to select horizontally-aligned images.

HTML5 and SVG allow designers and site builders to build visually rich and interactive elements. To convert rich interactive HTML/SVG elements into a form input, there needs to be some PHP and JavaScript glue code that captures a user’s selection and sets it as a webform submission value.

Besides capturing the end-users selection, the PHP and JavaScript code must also ensure that the interactive HTML/SVG element is accessible to users with disabilities.

Solution

Concept

The general concept for creating a custom ‘options’ element’ is to allow site builders to provide HTML/SVG markup that is dynamically converted into a select-able and accessible Webform element.

Below is a straightforward example of some HTML markup that can be enhanced.

SVG support requires the same data-id and data-name attributes being added to the HTML markup. Below is an example of a single clickable element in SVG.

Implementation

The HTML/SVG markup must provide an option value or text attribute that can be used to create a list of available options. The default recommended ‘value’ attribute names are ‘data-option-value’, ‘data-value’, ‘data-id’, or ‘id’. The default recommended ‘text’ attribute names are ‘data-option-text’, ‘data-text’, ‘data-name’, ‘name’, or ‘title’. The Webform module uses these value/text attribute names to parse and detect the custom element’s available…Read More