react-a11y/lib/rules/button-role-space.js

Warns about potential accessibility issues with your React elements.

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.description = exports.fail = exports.pass = undefined;

var _util = require('../util');

exports.default = {
    msg: 'You have an `onClick` handler but did not define an `onKeyDown`, `onKeyUp` or `onKeyPress` handler. ' + 'Add it, and have the "Space" key do the same thing as an `onClick` handler.',
    url: 'https://www.w3.org/WAI/GL/wiki/Making_actions_keyboard_accessible_by_using_keyboard_event_handlers_with_WAI-ARIA_controls',
    affects: [_util.devices.keyboardOnly],
    test: function test(tagName, props) {
        (0, _util.warnRuleDeprecated)('button-role-space', 'click-events-have-key-events');
        var hidden = (0, _util.hiddenFromAT)(props);
        var onClick = (0, _util.listensTo)(props, 'onClick');
        var onKeyDown = (0, _util.listensTo)(props, 'onKeyDown');
        var onKeyUp = (0, _util.listensTo)(props, 'onKeyUp');
        var onKeyPress = (0, _util.listensTo)(props, 'onKeyPress');

        // rule passes when element is hidden,
        // has onClick and has an onKeyDown, onKeyUp or onKeyPress prop
        return hidden || !onClick || onKeyDown || onKeyUp || onKeyPress;
    }
};
var pass = exports.pass = [{
    when: 'there is an onClick handler and there is an onKeyDown handler.',
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    render: function render(React) {
        return React.createElement('div', { onClick: _util.fn, onKeyDown: _util.fn });
    }
}, {
    when: 'there is an onClick handler and there is an onKeyUp handler.',
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    render: function render(React) {
        return React.createElement('div', { onClick: _util.fn, onKeyUp: _util.fn });
    }
}, {
    when: 'there is an onClick handler and there is an onKeyPress handler.',
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    render: function render(React) {
        return React.createElement('div', { onClick: _util.fn, onKeyPress: _util.fn });
    }
}, {
    when: 'there is no onClick',
    render: function render(React) {
        return React.createElement(
            'div',
            null,
            'derp'
        );
    }
}, {
    when: 'the element is aria-hidden',
    render: function render(React) {
        return React.createElement('div', { 'aria-hidden': true, role: 'button' });
    }
}];

var fail = exports.fail = [{
    when: 'there is an onClick handler but no `onKeyDown`, `onKeyUp` or `onKeyPress` is present',
    render: function render(React) {
        return React.createElement('div', { onClick: _util.fn });
    }
}];

var description = exports.description = '\nEnforce that elements which have the `role="button"`\nalso have an `onKeyDown` or `onKeyPress` handler that handles Space or Enter\n(this is isn\'t actually checked) for people that are using a\nkeyboard-only device.\n';