Disabling elements

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.

Twig

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

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

React

<Button 
  disabled="disabled" 
  className="btn is-disabled">Button</Button>

<Link 
  href="http://www.jadu.net" 
  aria-disabled="true" 
  className="is-disabled">Jadu</Link>

HTML

<button disabled="disabled" className="btn is-disabled">Button</button>

<a href="http://www.jadu.net" aria-disabled="true" class="is-disabled">Jadu</a>

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

Twig

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

React

<div data-tippy-content="Can’t touch this" tabindex="0" class="u-display-inline-block">
  <Button 
    disabled="disabled" 
    className="btn is-disabled">Button</Button>
</div>

HTML

<div data-tippy-content="Can’t touch this" tabindex="0" class="u-display-inline-block">
  <button disabled  class="btn is-disabled">Disabled Button</button>
</div>