Skip to main content

Disabling elements

Supported products
  • Central CMS
  • Central Forms
  • Central Connect

Disabling an element requires adding the appropriate attribute for the browser and any assistive device to recognise the element as being disabled, as well as a class to toggle the disabled styling of a given element.

note

Pulsar helpers will automatically use the correct attribute to use when you add 'disabled': true to your helper options

The disabled attribute

The following elements are the only ones which support the disabled attribute. You do not need to add aria-diasbled for these.

  • <button>
  • <fieldset>
  • <input>
  • <optgroup>
  • <option>
  • <select>
  • <textarea>

The aria-disabled attribute

If an element doesn’t support disabled, you should use aria-disabled="true" to indicate to assistive technologies that an element is no longer interactive.

Disabled visual style

Elements consistently use the .is-disabled class to visually represent the disabled state of the element.

Disabling on load

Add the 'disabled': true option to most helpers to disable the element, the required attributes and class should be added automatically.

{{
html.button({
'label': 'Button',
'disabled': true
})
}}

{{
html.link({
'href': 'http://www.jadu.net',
'label': 'Jadu',
'disabled': true
})
}}

Disabling with JavaScript

If you’re writing javascript to disable/enable an element you must toggle both the correct attribute and class to maintain the support for assistive devices as well as compliance with relevant accessibility guidelines.

if ($elementSupportsDisable) {
$('#elementToDisable')
.prop('disabled', true)
.addClass('.is-disabled');
} else {
$('#elementToDisable')
.attr('aria-disabled', 'true')
.addClass('.is-disabled');
}

Tooltips on disabled elements

If an element is disabled, you will need to use a wrapper element (<span> or <div> ) made focuseable with tabindex="0" , and attach the tooltip to that element. Elements with the disabled attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a Tooltip.

danger

The tooltip will not be read by screenreaders and therefore this pattern should be avoided

<div data-tippy-content="Can’t touch this" tabindex="0" class="u-display-inline-block">
{{
html.button({
'label': 'Disabled Button',
'disabled': true
})
}}
</div>