GithubHelp home page GithubHelp logo

makeup / makeup-js Goto Github PK

View Code? Open in Web Editor NEW
38.0 2.0 7.0 6.85 MB

Mono-repo for all vanilla JavaScript utility modules and headless ui

Home Page: https://makeup.github.io/makeup-js

JavaScript 99.64% HTML 0.33% Shell 0.03%
accessibility a11y javascript common-js headless-ui

makeup-js's Introduction

makeup-js

Coverage Status

A suite of vanilla JavaScript modules for building accessible user interfaces.

All modules support import (i.e. ES Modules) and require (i.e. CommonJS) syntax. When using require on a default export, be sure to include .default. For example, const Switch = require('makeup-switch').default;.

Core Modules

The following modules assist with common accessibility logic (e.g. maintaining a roving tabindex).

UI Modules

The following modules create the model and behaviour for "headless" user interface components (i.e. they come with no styles or branding out of the box). They are fully compatible with Skin CSS.

We are currently in the process of converting all eBay MIND Patterns "example quality" code to "reference level" vanilla JavaScript.

makeup-js's People

Contributors

agliga avatar austingardner avatar dependabot[bot] avatar ianmcburnie avatar patricknelson avatar pcanella avatar saiponnada 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

Watchers

avatar avatar

Forkers

ievauk scttdavs pcanella okannivadikubendran walihassankhan lulavalva patricknelson

makeup-js's Issues

Menu-Button, Listbox-button: clean up the configuration

I think one thing we might need to do is make it clearer that some of these options are only valid for the single select (i.e. role=menuitemradio) variant. Maybe we could move those into a sub mapping? Or any other ideas?

const defaultOptions = {
customElementMode: false,
expandedClass: "menu-button--expanded",
menuSelector: ".menu-button__menu",
buttonTextSelector: .btn__text,
singleSelect: {
buttonValueType: "text", // ["text", "icon", "both"],
menuItemIconSelector: ".icon",
menuItemButtonAriaLabelSelector: null,
}
};

Support ES6 Modules

With the deprecation of IE11, it is now time to move the makeup-js repo over to ES6 modules.

Coding and contribution guidelines

Would love really quick to have some quick guidelines documented explaining various things, like:

  • Coding style guide (e.g. Airbnb? use prettier? etc)
  • If/when to submit a pull request vs. an issue or both. e.g. Some projects require all PR's to be associated with an issue (in case PR is closed), some do not. This may not matter yet for this project.
  • Commit message guidelines; are there any? Should they exist? e.g. Always suffix/prefix with issue number?
  • Pull request commits: To squash or not to squash?

And potentially anything else I may have missed (this was just off the top of the head).

Edit: Can potentially roll these things into https://github.com/makeup/makeup-js/blob/master/CONTRIBUTING.md

Screenreader-trap: aria-hidden elements inside aria-labelled elements being announced in Talkback

Recently we've discovered that Chrome/Talkback is still announcing elements that are under aria-hidden=true elements. Fatih Kose made an interesting discovery that it seems to be only elements with an aria-label that are being announced. He temporarily removed the aria-label during trap, and then restored the aria-label again on untrap as a workaround for this issue. I need to investigate whether this discovery is true, and if so maybe add this logic to our screenreader-trap.

Menu-button: add custom aria-label selector.

Add an ability to set custom aria-label for menu buttons. E.g. Phone Input has menu items with both country and country code. In this case, we need the ability to exclude the country code as the country code is added on the textbox.

makeup-expander: ReferenceError: event is not defined

I'm running into ReferenceError: event is not defined error when I'm running my tests.

ref_error

The following code appears to be the problem. After adding event parameter, my tests started passing and my page is still working fine.

makeup-js/packages/makeup-expander/index.js

Lines 83 to 87 in 7a4df73

function _onDocumentClick() {
if (this.el.contains(event.target) === false) {
this.expanded = false;
}
}

It looks like the same problem also exists here, but I didn't encounter this issue:

makeup-js/packages/makeup-expander/index.js

Lines 97 to 105 in 7a4df73

function _onDocumentTouchEnd() {
if (this.documentClick === true) {
this.documentClick = false;
if (this.el.contains(event.target) === false) {
this.expanded = false;
}
}
}

Webpack peer dependency issues when performing install in repo root

Quick heads up. Just tried npm i/npm ci and got some peer dependency conflicts from deeply nested packages.

Recommend locking down minor versions on istanbul-instrumenter-loader, karma-coverage-istanbul-reporter and karma-webpack (which are just pointing to major versions) and/or maybe committing npm-shrinkwrap.json.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.88.2" from the root project
npm ERR!   peer webpack@"5.x.x" from @webpack-cli/[email protected]
npm ERR!   node_modules/@webpack-cli/configtest
npm ERR!     @webpack-cli/configtest@"^2.1.1" from [email protected]
npm ERR!     node_modules/webpack-cli
npm ERR!       dev webpack-cli@"^5.1.4" from the root project
npm ERR!       3 more (@webpack-cli/configtest, @webpack-cli/info, @webpack-cli/serve)
npm ERR!   8 more (@webpack-cli/info, @webpack-cli/serve, css-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^2.0.0 || ^3.0.0 || ^4.0.0" from [email protected]
npm ERR! node_modules/istanbul-instrumenter-loader
npm ERR!   dev istanbul-instrumenter-loader@"^3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^2.0.0 || ^3.0.0 || ^4.0.0" from [email protected]
npm ERR!   node_modules/istanbul-instrumenter-loader
npm ERR!     dev istanbul-instrumenter-loader@"^3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /home/patnelson/.npm/_logs/2024-03-19T03_41_23_072Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/patnelson/.npm/_logs/2024-03-19T03_41_23_072Z-debug-0.log

Screenreader-trap: ignore SVG tags when useHiddenProperty is true

We recently ran into an edge case with the useHiddenProperty setting. SVG tags do not respect the hidden property and problems ensue when the screen reader trap logic encounters an SVG tag with the hidden property.

Simplest proposal is to hardcode it so that SVG tags are ignored when useHiddenProperty is true. Or, we could get fancy and make it configurable.

makeup-menu-button: SR announces value twice in list items with Icons

For menu button with value type icon, SR announces text twice when selected. This is because the attribute changes were directly applied on the list item instead of creating a cloned copy.

const icon = e.detail.el.querySelector(this._options.iconSelector);

case "icon":
        icon.setAttribute("aria-label", content);
        icon.removeAttribute("aria-hidden");

Screenreader-trap: allow hidden instead of aria-hidden

Feature request:

For cases where the dialog is fullscreen, such as on mobile, allow the plugin to apply display: none or the hidden attribute instead of aria-hidden. This will solve an issue where Android/Talkback is not honouring the aria-hidden attribute in these cases, plus hidden is really a better choice in this scenario anyway.

Move ui modules to their own project

Related issue: #138

The UI modules (vanilla js implementations of MIND/Skin patterns) have always been in a more experimental state than the core modules, and even besides that I think organizationally it makes sense to separate them.

So the organization could look like this:

makeup-a11y -> core a11y modules
makeup-ui -> implementations of MIND/Skin
makeup-web-components -> web component wrappers around makeup-ui

We could possibly also have:

makeup-web-components-php -> php wrappers around SSR web components

(using PHP just as an example, but could be Marko, JSP, anything really)

Remove IE11 support

Remove all polyfills, workarounds, hacks etc for IE11. Bump all major versions.

Modal: idea for simpler/reduced DOM manipulation

For cases where the trapped element (usually a dialog) is buried deep in the dom, the current screenreader trap can end up touching a LOT of dom nodes. A more performant solution might be to:

  1. detect the dialog element
  2. move it to be direct descendant of body in DOM
  3. create a temp div container around everything else
  4. add aria-hidden (or hidden if fullscreen dialog) to temp container (i.e. call trap())
  5. restore everything back to how it was when trap is removed (i.e. call untrap())

The DOM find/move/wrap logic may even be worthy of being its own utility module, i.e. makeup-find-move-wrap or makeup-hoist-element

Consistent whitespace

Will open a PR soon with the changes, but opening as an issue for discussion, in case that PR would need to change or be rejected.

Two major things:

  1. Propose adding .editorconfig and ensuring consistent whitespace indentation. From the looks of it, this is repo seems to primarily use 2 spaces for indentation, end files with a newline, etc (aligns well with Airbnb style guide)
  2. Fix root package.json which is using 4 spaces for indentation.

Anything else?

Migrate to npm workspaces

Investigate and migrate to npm workspaces to take care of nested packages and symlinking. Further check if Lerna is still needed along with npm workspaces.

makeup-floating-label: refresh() method has no effect on select element

  1. visit https://makeup.github.io/makeup-js/makeup-floating-label/index.html
  2. Enter values in textboxes and make a selection in select
  3. Click reset button
  4. Click refresh button
  5. Notice select label does not go back to inline position

Looks like floating-label__label--inline is not being applied to the label of the select. Maybe due to this line: https://github.com/makeup/makeup-js/blob/master/packages/makeup-floating-label/src/index.js#L178

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.