Nighttime Peanut Migrations

    a11y-disabled-modifier

    1.0.0 • Public • Published

    a11y-disabled-modifier

    Implement accessible and usable button-disabling (inspired by this fantastic post on CSS Tricks) with a modifier:

    <form {{on "submit" this.submit}}>
      <label>some text: <input type='text' /></label>
      <button type='submit' {{disabled when=this.isInvalid}}></button>
    </form>

    When the modifier is enabled with the required when named argument:

    • the target element has aria-disabled="true"
    • clicks on the button do not propagate
    • form submission does not trigger

    Compatibility

    • Ember.js v3.16 or above
    • Ember CLI v2.13 or above
    • Node.js v12 or above

    TypeScript

    This project follows the current draft of the Semantic Versioning for TypeScript Types pro posal.

    • Currently supported TypeScript versions: v4.1 and v4.2
    • Compiler support policy: simple majors
    • Public API: all published types not in a -private module are public

    -majors

    Note: for the moment, the types provided here are basically inert. Glint users can see the implementation for types to use there.

    Installation

    ember install a11y-disabled-modifier
    

    Usage

    Use this modifier in place of the disabled attribute, which causes a variety of usability problems, when you absolutely must disable a button programmatically. Most of the time, you shouldn't use this at all: prefer to provide feedback on form submission instead!

    For custom styling for disabled elements, you can use the [aria-disabled="true"] and [aria-disabled="false"] selectors. This guarantees that your styles will stay in sync with the runtime behavior of the app:

    .my-button {
      /* default styles... */
    }
    
    .my-button[aria-disabled="true"] {
      cursor: not-allowed;
    }

    Contributing

    See the Contributing guide for details.

    License

    This project is licensed under the MIT License.

    Keywords

    Install

    npm i a11y-disabled-modifier

    DownloadsWeekly Downloads

    572

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    12.7 kB

    Total Files

    15

    Last publish

    Collaborators

    • chriskrycho