Code Monkey home page Code Monkey logo

no-mouse-days's Introduction

No Mouse Days

Ever wanted a package that disables the mouse cursor one day a week so you can test keyboard accessibility as a team? No? Well here you go anyway.

This package can be installed into a modern JavaScript app to inject a CSS styling developer tool that disables the mouse cursor, with a banner to notify developers of its use. It's intended to encourage development of better keyboard support through regular browser testing (you are testing, aren't you?).

Read about No Mouse Days on the Accessibility Project: https://www.a11yproject.com/posts/2020-10-15-no-mouse-days

Prerequisites

  • Node.js
  • npm

How to use

  1. Install the package
npm install no-mouse-days --save-dev
  1. Import the package into your project for all times
import "no-mouse-days"
  1. Import and conditionally apply it in development, if you want
if (process.env.NODE_ENV === 'development') {
    import("no-mouse-days")
        .then((data) => {
         // no-op
        })
}
  1. Or apply it one day of the week, e.g. on Mondays
let date = new Date()
let dayOfWeek = date.getDay()

if (dayOfWeek === 1) {
    import("no-mouse-days")
        .then((data) => {
         // no-op
        })
}

Example

This project includes a small example that you can use to test the No Mouse Days script locally in a browser.

Go into the example directory and install dependencies:

cd example
npm start

With a server successfully running, you can then visit the provided localhost URL such as http://localhost:1234.

You can also view the example on GitHub pages: https://marcysutton.github.io/no-mouse-days/example/index.html

no-mouse-days's People

Contributors

marcysutton avatar tom-bonnike avatar universse avatar vhoyer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

no-mouse-days's Issues

Inject a banner to indicate No Mouse Days is active

It would help users to know that this package is in use, so they don't think something is broken. I want to play with potentially adding a pseudo element on the body or something that mentions this package. Or maybe use JS to inject a more robust banner.

Marking the idea here so I don't forget!

Touch is disabled on mobile

The addition of pointer-events: none !important; disables touch. Submitting this as an issue because I wasn't sure if that was desired or not. We are using this on Mondays and I noticed it while testing on my mobile device.

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.