Button active and focus state needs more distinct styling #127

ellatrix · 2017-02-23T16:51:02Z

Why? Accessibility. Some people don't see well. 👓

The contrast difference between active state and normal state is not big enough. Ideally it needs something like a border, inverted colours, underline...

http://webaim.org/resources/contrastchecker/

This is the style in core:

mapk · 2017-02-23T18:04:20Z

Current view of hover state:

Proposed revision:
I know there was discussion about the UI being heavy, so I tried to keep this as light as possible. I'm basing it all from the sketch file.

The contrast on the active states is compliant for WCAG 2 AA (18pt+). Does that work in relation to our icons there?

ellatrix · 2017-02-23T18:56:51Z

Trying something as well:

http://webaim.org/resources/contrastchecker/?fcolor=12181e&bcolor=e0e5e9

ellatrix · 2017-02-23T18:59:36Z

ellatrix · 2017-02-23T19:05:05Z

Maybe contrast between two backgrounds is allowed to we smaller though, worth checking.

afercia · 2017-02-23T19:41:42Z

Contrast ratio can be just 3:1 instead of the usual 4.5:1 for "Large-scale" text, which is text "with at least 18 point or 14 point bold or font size". I'm not sure how to apply this to svg icons :) THey look bold to me, not sure about the font-size.

Adding a shape, even a subtle one, can surely help.

Just as a reminder: controls need also a focus style.

ellatrix · 2017-02-23T19:44:40Z

The contrast between the white background and the grey background is 1.27:1.

afercia · 2017-02-23T20:10:33Z

Ah well that. The difference between the two states should be perceivable. That reminds me of https://core.trac.wordpress.org/ticket/28599 where our recommendation is to use an additional indicator, like a shape.

afercia · 2017-02-23T20:13:56Z

Reference about font-size for contrast ratio:
https://www.w3.org/TR/WCAG20-TECHS/G18.html

The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px.

Still not clear how to apply that to svg icons 😬

mapk · 2017-02-23T20:52:28Z

I believe the svg icons are 24px, so we should be ok. But the lighter grey against the white non-active state is still an issue.

afercia · 2017-02-23T21:37:56Z

Well, the icons rect is 24px. The glyphs inside the rect are smaller :) But as long as they're bold and they don't go under a corresponding font-size of 18.5px they should be ok.

ellatrix · 2017-02-23T21:58:44Z

The issue is not really the contrast between the icons and the background. That is 👌. The issue's the difference between the normal and active state, the white and light grey background. Which may be enough, I'm not entirely sure about that.

The difference between the two states should be perceivable. That reminds me of https://core.trac.wordpress.org/ticket/28599 where our recommendation is to use an additional indicator, like a shape.

So it sound like an extra indicator is good, but it hard to know what contrast between backgrounds is actually enough.

jasmussen · 2017-02-24T08:59:33Z

Good explorations so far. Keep the thoughts coming.

Let's expand our minds, as Ella suggests, and think beyond just color as something that can add contrast. Some other ideas:

Neither of 👆 feel juuust right to me, but we're making progress here. @mapk importantly noted that the blocks were mentioned as feeling heavy, and as soon as we lightened the block borders and used the light white floaty chrome everywhere, the critique subsided. This is important to keep in mind, so we don't regress here.

We have to find a balance between the light UI and proper accessability, and we are on the cusp of it. Keep thinking folks! 🌟 work so far.

jasmussen · 2017-02-24T09:01:59Z

Also — this is a UI that has been solved in the past. Let's look at what others have been doing, like Google Docs, Word, Pages, Keynote, any other app or web-app that uses formatting controls like this.

jasmussen · 2017-02-24T09:07:02Z

Here's yet another attempt, which still doesn't feel right, but hopefully inspires more experiments:

ellatrix · 2017-02-24T09:45:28Z

Also — this is a UI that has been solved in the past. Let's look at what others have been doing, like Google Docs, Word, Pages, Keynote, any other app or web-app that uses formatting controls like this.

And WordPress 😉

Google Docs ^

Apple Pages ^

ellatrix · 2017-02-24T09:48:17Z

Anyway, let's not dig too deep into this issue, there are larger problems to solve. :)

jasmussen · 2017-02-24T10:19:03Z

The old TinyMCE look is very dated at this point, and very heavy looking. This on its own is not a reason to change it, but since we are doing a lot of modernization elsewhere in the UI, the time to modernize is now, make sure it fits the "language" of the rest of the optimizations we are making.

The splash of color that Pages adds seems worth exploring! There's a lot of gray in the UI already. The best color person I know in the whole world is @hugobaeta — if I may borrow a minute of your time (please ❤️ ) — is this a place where we can introduce an accent color to the default blue? I know you have some accent colors in your codepen...

jasmussen · 2017-02-24T10:42:32Z

More inspiration. Note, my posting these is not an endorsement — some of these are terrible.

Here's what Adobe Spark does:

Here's what Dropbox Paper does:

Here's what Facebook notes does:

Here's what Google Sites does:

Here's what LivingDocs does:

This is what Medium does:

This is what notion does:

Quip:

Squarespace:

Weebly:

Wix, sort of:

melchoyce · 2017-03-02T02:24:58Z

Some more ideas:

afercia · 2017-03-02T07:44:14Z

Inversion of colors ^^ could help :) Noting the active state should be clear for all controls, so maybe this issue should be extended to other parts of the UI?

jasmussen · 2017-03-06T10:22:18Z

Quick attempt at color inversion:

Feels like it's getting a little busy. But let's keep thinking about this.

jasmussen · 2017-03-06T11:10:23Z

Another shot at contrast:

This one looks good to me. The gray is a little darker, but the UI still feels light. The white boundary around the active one adds contrast too.

melchoyce · 2017-03-06T15:39:19Z

That last one's a winner.

afercia · 2017-03-06T15:46:05Z

I'm sorry to bring bad news 😬 but can't be done with color alone, especially it the difference between non-active/active is so light. It needs an additional indicator, e.g. a shape.

ellatrix · 2017-03-06T15:46:59Z

Also wanted to point out that the white border doesn't make a difference here. :/

melchoyce · 2017-03-06T15:48:40Z

Would a box shadow inside the selected button count?

mapk · 2017-03-06T15:48:51Z

The white boundaries around the active states works really well. My only concern is the contrast between the grey background on active states (I realize its darker) and the white background of the toolbar. In the last one posted by @jasmussen its contrast ration is 1.21.

Really good work.

afercia · 2017-03-06T15:57:48Z

I see this issue as very similar to the one discussed for the admin menu in https://core.trac.wordpress.org/ticket/28599 (still to be solved).
From an accessibility perspective there was consensus to add a border (actually a box-shadow) and recently the same pattern was introduced in the Customizer. Not to mention Press This always used that "border".
Not saying the same "border" should be added here, but the active state is a relevant information that shouldn't rely on color alone. Really needs a shape :)

jasmussen · 2017-03-07T08:21:00Z

To throw another idea into the pool: what we've ended up with in https://textbox.io is a border on hover, switching to filled on active. It means you don't get a distinct "hover+active" state but we think it works quite well.

Screenshots, active:

Hover:

I like this a lot.

But is it sufficient with regards to contrast, @afercia? Also, can you refer to any editors with formatting toolbars you've used that pass the WordPress contrast standards? I'd like to look at a few for inspiration. As a reminder, here are a bunch of screenshots.

afercia · 2017-03-07T10:00:08Z

can you refer to any editors with formatting toolbars you've used that pass the WordPress contrast standards

I'm not sure I've used so many editors :) Many of them use a shape, or a combination of background color + shape (e.g. TinyMCE) so they pass the requirement.

As for the spec, the WCAG don't mention the "active" state (or at least I haven't been able to find anything specifically related to it) but have a lot of recommendations about the focus state, which we should take care of anyways. We can extend what it's recommended for the focus state to the active state too.

Understanding the "Focus visible" requirement:
https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html

Specifically, about colors, see Example 3: Menus:
https://www.w3.org/TR/WCAG20-TECHS/G195.html

... the currently focused menu item changes its background to a different color, which has a 3:1 contrast ratio with the surrouding [sic] items and a 4.5:1 contrast ratio with its own text.

So, if you want to use only color, the active/focused button background should have a contrast ratio of at least 3:1 with the other buttons. Otherwise, it needs an additional indicator, like a shape.

I'd say the current implementation in WordPress passes the requirement because it uses a shape (rounded border) together with a slight background color change (which wouldn't be sufficient alone).

In the screenshot above, the Bold button is focused and the Italic one is active. Both slightly change the background color but that alone wouldn't be sufficient. Luckily, there's a border. If the new editor is going to have an implementation that doesn't allow to clearly distinguish the different states, I'd consider that an accessibility regression.

I'd encourage everyone to make a little effort and try to change the usual approach to design. There are accessibility requirements to satisfy. When designing with accessibility in mind, "design" should have a broader meaning: solving issues and yes, also try to make things look pretty as much as possible :)

afercia · 2017-03-07T10:02:12Z

To throw another idea into the pool: what we've ended up with in https://textbox.io is a border on hover, switching to filled on active.

@TheSpyder interesting. Aside: I love how in textbox.io all the controls are properly grouped and the toolbars are properly labeled :)

jasmussen · 2017-03-07T10:25:18Z

Thank you @afercia, this is very helpful.

I'd say the current implementation in WordPress passes the requirement because it uses a shape (rounded border) together with a slight background color change (which wouldn't be sufficient alone).

This was the 🔑 bit of clarity needed. The high contrast border ensures that the button (as a whole) has sufficient contrast with the surrounding items.

I got the vibe from the previous core trac ticket that the current core-bundled TinyMCE (as shown in your screenshots) did not solve the accessibility requirements, which made me confused.

Incidentally here's another shot at the color inversion:

Afraithe · 2017-03-07T10:58:04Z

Ppl that have contrast issues should be running their OS in contrast mode? So needs to work in that setting more than anything right?

jasmussen · 2017-03-07T11:03:24Z

Ppl that have contrast issues should be running their OS in contrast mode? So needs to work in that setting more than anything right?

Can we detect that OS level setting inside TinyMCE?

afercia · 2017-03-07T11:43:46Z

Ppl that have contrast issues should be running their OS in contrast mode?

Our goal here should be making it accessible out of the box.

TheSpyder · 2017-03-07T13:42:03Z

@afercia thanks! We have put a lot of effort into making sure the editor passes ainspector validation, including all dialogs ;)

@Afraithe the standards have contrast requirements even when not running in high contrast mode :(

@jasmussen you can, we have detection in textbox.io to activate our high contrast stylesheet. Chrome has an easy way to do it, other browsers need a bit of CSS trickery to detect that the browser isn't rendering backgrounds.

jasmussen · 2017-03-07T15:56:00Z

@afercia I'm digging the active/inactive design that Sketch uses:

Would this design pass accessibility requirements? If no, why not? Thanks much for letting me ask you these questions.

joyously · 2017-03-07T16:50:16Z

@jasmussen When I first saw that, my eye went to the larger boxes and I thought brighter meant selected (or active). Then I looked at the smaller ones and realized it was the other way around. I see this kind of confusion on a lot of mobile apps that just have a toggle. It's difficult to tell which way it is set to.

afercia · 2017-03-07T17:11:26Z

@jasmussen it's simple :) there are several tools to pick colors and calculate the contrast ratio. We often refer, improperly, to "color contrast" but actually it's about the luminosity contrast ratio.

About Sketch, pick the color of the active and inactive buttons, they're white and approximately #e5e5e5 right? For quick checks I often use this online tool our friend Joe Dolson made available for us: https://www.joedolson.com/tools/color-contrast.php

Enter the two colors and the ratio is 1.26:1. Instead, it must be at least 3:1, unless we're going to use some additional indicator to distinguish the different states.

Additionally, the contrast between the buttons text (icons) and their background must always be at least 4.5:1. Only for text with a font size of at least 18 point or 14 point bold (equivalent to approximately 24px and 18.5px bold) the minimum contrast ratio is 3:1.

anna-harrison · 2017-03-08T06:34:55Z

Great discussion with some really interesting insights, which I think distill down to three (+1) key points:

Accessibility should be designed into the product from the start, not added in later
It's quite challenging to meet accessibility requirements using colour alone - especially in the context of wanting a "light and modern" aesthetic
If colour alone is not enough, we need to use something else - like shape
[optional bonus] The interaction is a little fun :)

So today we had a crack at playing around with something that meets the above criteria: you can interact with it here http://codepen.io/napy84/pen/LWbBrv

It's possibly too much/not the right kind of animation ( discussion on animation style guide here #15 ) to be used on every button, but perhaps if used selectively, like on the block level controls, could be both elegant and provide differentiation from the [selection]-toolbars

jasmussen · 2017-03-08T08:31:14Z

Thank you for your endless patience here, @afercia. This is important to get right. It sounds like the following would pass:

But by those rules put out alone it sounds like Google Docs, Office 365, Apple Pages, Sketch would all fail:

That last one is Apple Pages, which achieves a 2.6:1 contrast ratio, the most of them all. But it's still not 3:1.

Can you confirm that all those above fail the accessibility bar, or do they pass through other means? If so, what makes them pass? You mention:

unless we're going to use some additional indicator to distinguish the different states

To me this sounds like a border, or an inset shadow on the active item. But in all of those above, the border itself does not have enough contrast either. Is it the very dark border around the active item in current TinyMCE that makes the current iteration of the editor pass?

I am very grateful for your time here.

ellatrix · 2017-03-08T08:59:26Z

Is it the very dark border around the active item in current TinyMCE that makes the current iteration of the editor pass?

Yes, it is. :) Here's the most recent commit for that: WordPress/wordpress-develop@e9f1903

Would be good to know which others pass or not. It sounds like inverse colours make it so that appearance is distinct enough from the other buttons.

Even if the others do not pass, it doesn't mean our editor shouldn't, and this is a great area where the WordPress editor can shine, together with all the other improvements we're doing. Like @afercia mentioned, it's a really interesting design challenge, where alternative creative solutions are welcome. Maybe there's a whole new way to design active states. :)

jasmussen · 2017-03-08T09:01:44Z

Even if the others do not pass, it doesn't mean our editor shouldn't

Absolutely, did not mean to imply otherwise. 😉

Afraithe · 2017-03-08T09:46:33Z

Googles Material Design could also be a source of inspiration around this I guess.

https://material.io/guidelines/components/buttons.html

jasmussen · 2017-03-08T09:57:29Z

How's this?

That's a 4.8:1 on the contrasts, as far as I can tell.

mapk · 2017-03-08T15:42:01Z

According to @afercia:

Enter the two colors and the ratio is 1.26:1. Instead, it must be at least 3:1, unless we're going to use some additional indicator to distinguish the different states.

So that means this ones fails:

Luminosity Contrast is 1.46:1

The gradient in this one might be a bit more tricky?

Lighter top Lum Contrast is 2.15:1
Darker bottom Lum Contrast is 3.1:1
But it's also inverting the color, which is more than just changing the background.

I do like this one below the best. But we still need a HOVER state designed.

Maybe something like this?

afercia · 2017-03-08T20:19:04Z

I think the one with the subtle dark border, the last one posted by @jasmussen would pass 🙂 Also the last one by @mapk 🙂

by those rules put out alone it sounds like Google Docs, Office 365, Apple Pages, Sketch would all fail

I'm really not sure what are their accessibility requirements 🙂

it's a really interesting design challenge, where alternative creative solutions are welcome. Maybe there's a whole new way to design active states. :)

Yay! +1

TheSpyder · 2017-03-08T21:45:52Z

There's a tool to help you know if it passes - a Firefox addon called ainspector. It will likely complain about a lot more than contrast, but if you're diving into accessibility that's a good tool to use in general. It's very picky but so are the standards 😉

The last one by @mapk is what we do in textbox.io which definitely passes.

jasmussen · 2017-03-29T07:47:48Z

Closing as this is solved by the inverted version in the mockups: https://wpcoredesign.mystagingwebsite.com/gutenberg/

Feel free to reopen if this issue surfaces again.

@rmccue

* camelCase for readme variable names * update hook and `vendor/plugin/function` wording, removing `Name` * complte namespace shortening to `vendor/plugin/function` * Publish - @wordpress/a11y@0.1.0-beta.2 - @wordpress/dom-ready@0.1.0-beta.2 - @wordpress/hooks@0.1.0-beta.0 - @wordpress/url@0.1.0-beta.2 * add publishConfig->access:public for hooks * Publish - @wordpress/hooks@0.1.0-beta.1 * correctly enable dashes in regexes in validateNamespace * Export a hooks function enabling adding hooks via composition * test hooks can be instantiated * Run test on objects instead of globally * correct data return for Hooks * Rework the Hooks object, use a local HOOKS instead of global * use object based hooks throughout testing * remove unused global HOOKS * remove some logging * remove extra parts from namespace in tests * remov vendor/plugin prefix requirement for namespaces * update docs * Add a test for “Can add filters with dashes in namespaces” * a11y: Apply .screen-reader-text styles to container * a11y: Update tests per updated style Questionable value of the test assertions, which are specific to the implementation and not the expected intent of the test case * update readme, add some tests * switch naming to `createHooks` and correct tests * remove extraneous single quotes * remove the HOOKS global abstraction * update test beforeEach cleanup to match new object structure * use export defaults * Clean up readme for new approach * url - add built files * hooks - add built files * dom-ready - add built files * a11y - add built files * remove build filders from gitignore * Publish - @wordpress/a11y@0.1.0-beta.3 - @wordpress/dom-ready@0.1.0-beta.3 - @wordpress/hooks@0.1.0-beta.2 - @wordpress/url@0.1.0-beta.3 * re-ignore build files; didn’t resolve publishing issue * Simplify dom-ready package.json, add a license field * Publish - @wordpress/a11y@0.1.0-beta.4 - @wordpress/dom-ready@0.1.0-beta.4 - @wordpress/hooks@0.1.0-beta.3 * Update readmes to include `@next` in npm install line Since our packages are still in pre-release, the @next tag is required to install the latest published version. We can remove this instruction once the packages are past pre-release. * Publish - @wordpress/a11y@0.1.0-beta.5 - @wordpress/dom-ready@0.1.0-beta.5 - @wordpress/hooks@0.1.0-beta.4 - @wordpress/url@0.1.0-beta.4 * remove the built files which were added by mistake * Publish - @wordpress/a11y@0.1.0-beta.6 - @wordpress/dom-ready@0.1.0-beta.6 - @wordpress/hooks@0.1.0-beta.5 - @wordpress/url@0.1.0-beta.5 * Hooks: Update hooks public API to make it possible to apply to wp.hooks directly (#45) * Development: Improve onboarding experience for new contributors (#46) * Update screen-reader-text CSS. * Hooks: Allow slashes in the namespace (#47) * Hooks: Allow slashes in the namespace * Hooks: Add test ensuring backlash is not allowed inside namespace * Publish - @wordpress/a11y@1.0.0 - @wordpress/hooks@1.0.0 * a11y & hooks: remove ‘@next’ from install instructions * tag a11y and hooks at 1.0.1 * Trigger actions when adding or removing hooks * add tests for expected hookAdded and hookRemoved events * these are hooks not hoods (typo) * Tests: Refactor tests to use Jest mocks * Standardize format of package.json files (#54) * Add tests for addFilter/removeFilter * whitespace * Docs update for hooks added/removed events * Hooks: Final touches for the add/remove actions * Publish - @wordpress/a11y@1.0.2 - @wordpress/dom-ready@0.1.0-beta.7 - @wordpress/hooks@1.1.0 - @wordpress/url@0.1.0-beta.6 * Update Lerna and Jest to the latest version (#56) * Implement autop package * Port PHP wpautop faithfully to JS * docs: Update Lerna docs to use `npx` * Update license in `package.json` to adhere to SPDX v3.0 specification * Update license in `package.json` to adhere to SPDX v3.0 specification * Enforce using the latest LTS version (8.x) of Node and up * Move node version check to prebuild run script * Remove superfluous `a` and use full Node.js name * Jest-console: Add new package with console object matchers for Jest * Jest-console: Add package documentation * Jest-console: Integrate test matchers with packages repository * Jest-console: Fix typos in README file * Jest-console: Whitelist folders published to npm * Update install instruction in README files that use beta releases (#63) * Publish - @wordpress/a11y@1.0.3 - @wordpress/autop@1.0.1 - @wordpress/dom-ready@1.0.0 - @wordpress/hooks@1.1.1 - @wordpress/jest-console@1.0.0 - @wordpress/url@1.0.0 * chore: Update `.editorconfig` to match WordPress' upstream * chore: Use tabs for indentaion in `lerna.json` * chore: Use tabs for indentaion in _root_ `package.json` and `package-lock.json` files * chore: Use tabs for indentaion in _url_ package `package.json` and `package-lock.json` files * chore: Use tabs for indentaion in _jest-console_ package `package.json` and `package-lock.json` files * chore: Use tabs for indentaion in _hooks_ package `package.json` and add missing `package-lock.json` file * chore: Use tabs for indentaion in _dom-ready_ package `package.json` and `package-lock.json` files * chore: Use tabs for indentaion in _autop_ package `package.json` and `package-lock.json` files * chore: Use tabs for indentaion in _a11y_ package `package.json` and `package-lock.json` files * chore: Update _autop_ `package.json` fields * Babel-preset-default: Add new package containing the default Babel configuration (#66) * Publish (#67) - @wordpress/a11y@1.0.4 - @wordpress/autop@1.0.2 - @wordpress/babel-preset-default@1.0.1-0 - @wordpress/dom-ready@1.0.1 - @wordpress/hooks@1.1.2 - @wordpress/jest-console@1.0.1 - @wordpress/url@1.0.1 * Scripts: New scripts package containing test command (#62) * Scripts: initial commit with scripts package containing test command * Publish - @wordpress/scripts@1.0.1-0 * Scripts: Minor changes before publishing to npm * Publish - @wordpress/a11y@1.0.5 - @wordpress/autop@1.0.3 - @wordpress/babel-preset-default@1.0.0 - @wordpress/dom-ready@1.0.2 - @wordpress/hooks@1.1.3 - @wordpress/jest-console@1.0.2 - @wordpress/scripts@1.0.0 - @wordpress/url@1.0.2 * feat: Add `@wordpress/browserslist-config` package * docs: fix spelling in CHANGELOG.md and consistent formatting * chore: remove `browserslist` from `peerDependencies` * tests(browserslist-config): refactor test per coding standards * Packages: Make sure dependencies are properly exposed for external usage (#71) * Publish - @wordpress/babel-preset-default@1.0.1 - @wordpress/browserslist-config@2.0.0 - @wordpress/jest-console@1.0.3 - @wordpress/scripts@1.0.1 * Babel-preset-default: Makre sure transform runtime plugin is not loaded in test env (#73) * Publish - @wordpress/babel-preset-default@1.0.2 * 📦 NEW: Update Lerna to 2.8.0 * chore: use tabs for indentation in `lerna.json` * build: use `browserslist-config-wordpress` Browserslist shared config (#68) * build: use `browserslist-config-wordpress` Browserslist shared config * chore(babel-preset-default): switch to `@wordpress/browserslist-config` * chore: fix merge conflict * chore: regenerate `package-lock.json` * Browserslit config: Add devDependency in the root repository * Babel preset default: Add missing spaces around square brackets * Jest preset: Add default jest preset for WordPress development (#74) * Jest preset: Add default jest preset for WordPress developmnent * Jest preset: Use path to jest preset relative to root directory * Publish - @wordpress/babel-preset-default@1.0.3 - @wordpress/jest-preset-default@1.0.0 - @wordpress/scripts@1.0.2 * Tests: Fix wrongly configured dependencies for Jest preset (#75) * Publish - @wordpress/jest-preset-default@1.0.1 * Dependencies: Update Jest preset dependencies version (#76) * Build: Symlink all child packages instead of using versions published to npm (#77) * docs: add link to browserslist usage examples docs (#80) * docs: update browserslist readme example usage * docs (browserslist): Link to external configuration examples * Update README.md * chore(browserslist): update Browserslist to v3.0.0 * chore(browserslist): update Browserslist to v3.1.0 * Publish - @wordpress/babel-preset-default@1.1.0 - @wordpress/browserslist-config@2.1.0 - @wordpress/jest-console@1.0.4 - @wordpress/jest-preset-default@1.0.2 * chore: update Lerna to 2.9.0 * Build: Use node script to symlink local npm dependencies (#79) * Build: Use node script to symlink local npm dependencies * Chore: Update symlink-or-copy to v1.2.0 * Chore: Added npm-run-all to simplify npm scripts * docs: ❤️ Code is Poetry * docs: use canonical _Code is Poetry_ image and center image using HTML Props @rmccue. * Scripts: Provide the default configuration for the `test` command (#83) * Scripts: Provide the default configuration for the `test` command It is used in the case when the project does not have a config for Jest or Babel * Scripts: Add tests for utils to ensure they work properly * Add back end-of-file new line * fix(scripts): rename script from `test-unit` to `test-unit-js` (#86) * Chore: Update Jest dependencies (#87) * Publish - @wordpress/a11y@1.0.6 - @wordpress/autop@1.0.4 - @wordpress/babel-preset-default@1.1.1 - @wordpress/browserslist-config@2.1.1 - @wordpress/dom-ready@1.0.3 - @wordpress/hooks@1.1.4 - @wordpress/jest-console@1.0.5 - @wordpress/jest-preset-default@1.0.3 - @wordpress/scripts@1.1.0 - @wordpress/url@1.0.3 * chore: remove `package-lock.json` files, lockfiles for apps, but not for packages * chore: add `package-lock.json` to `gitignore` * chore: add `package-lock=false` in new `.npmrc` files for each package * chore: add `"npmClientArgs": ["--no-package-lock"]` to Lerna `bootstrap` command See lerna/lerna#1235 (comment) * Remove Lerna `npmClientArgs` option * Hooks: Avoid validating namespace in runHooks Unnecessary because a hook cannot be registered with an invalid hook name, so it would not pass the subsequent condition to check that a hookset with corresponding name exists. * Hooks: Use null prototype object with truthy access https://jsperf.com/object-create-null-vs-hasownproperty * Hooks: Simplify return first arg logic Even if we don't intend to return value, no harm in assigning to args[ 0 ] * Hooks: Assign hooks current initial value in creation * Hooks: Avoid initializing hook history if not run * Hooks: Add baseline benchmark * Publish - @wordpress/a11y@1.0.7 - @wordpress/autop@1.0.5 - @wordpress/babel-preset-default@1.1.2 - @wordpress/browserslist-config@2.1.2 - @wordpress/dom-ready@1.0.4 - @wordpress/hooks@1.1.5 - @wordpress/jest-console@1.0.6 - @wordpress/jest-preset-default@1.0.4 - @wordpress/scripts@1.1.1 - @wordpress/url@1.0.4 * Wrap filename in backticks * Package: Add `@wordpress/custom-templated-path-webpack-plugin` package * chore: add` jest-preset` keyword to `jest-preset-default` * Hooks: Fix undefined arguments on consecutive action callbacks * Hooks: Correct CHANGELOG version to 1.1.6 * Publish - @wordpress/hooks@1.1.6 - @wordpress/jest-preset-default@1.0.5 - @wordpress/scripts@1.1.2 * Custom Templated Path Plugin: Remove debugging statement from tests 😬 * docs: updated handbook URL * docs: update the Browserslist example repo URL (#98) * WordPress i18n package: Initial commit (#96) * docs(i18n): Standardize `README.md` format * Publish - @wordpress/babel-plugin-makepot@1.0.0 - @wordpress/babel-preset-default@1.1.3 - @wordpress/browserslist-config@2.1.3 - @wordpress/custom-templated-path-webpack-plugin@1.0.1 - @wordpress/i18n@1.0.0 - @wordpress/scripts@1.1.3 * return a boolean from `hasHook` not the hook count * simplify logic * update tests to expect booleans from hasFilter/Action * Clean up docs and return * Add `publish:check` script to run `lerna updated` * babel-preset-default: Remove babel-plugin-lodash (#109) * Publish - @wordpress/babel-preset-default@1.2.0 - @wordpress/hooks@1.1.7 - @wordpress/scripts@1.1.4 * i18n: Support accumulatively registering additional locale data for domain (#105) * allow for setting additional locale data for a domain accumulatively * woops wrong object reference * add test for accumulation of localeData * repackage additional tests * use more performant “in” check instead of lodash `_.has` * use hasOwnProperty instead of in * fix formatting for code style * fix formatting * use Object.assign instead of lodash.merge * add new plural strings to tests * simplify merging * indent, indent * i18n: Fix indentation * i18n: Memoize dcnpgettext (#101) * i18n: Memoize dcnpgettext * i18n: Export dcnpgettext inline * Publish - @wordpress/i18n@1.1.0 * Add WordCounter package (#10) * Adding WordCounter package * Simplifying test syntax * export the count as default * Creating a simpler API * Refactor into a single function export * Modification based on review notes * Complete refactor based on suggestions from @omarreiss * Remove conditional check * Moving each function into a new file. Exporting an object so we can use a single settings property and make the calls a little more sane * Only importing the lodash method we need * Using flow to chain the matchWords/matchCharacters inner function calls * Adding readme * Addressing some feedback on the PR * Move to a simplier API * Updates the README to match API changes * Updates per review by @youknowriad * Adds missing dockblock param * Spacing issues * Adds correct docblocks and fixes some whitespace issues * Adding some whitespace as per review comment * Add prependHTTP() to @wordpress/url (#112) * Publish - @wordpress/url@1.1.0 - @wordpress/wordcount@1.0.0 * Add a publishConfig setting to wordcount's package.json, and fix the indenting. (#114) * Improve the publishing process documentation and error checking (#115) * Add package: @wordpress/is-shallow-equal (#110) * Add package: @wordpress/is-shallow-equal * Ignore benchmark for codecov No need to affect the codecoverage stats with a benchmarking script * Define benchmark dependencies as devDependencies Otherwise considered a proper required dependency from perspective of consuming project * Add test for arrays being completely equal (#117) * Add test for arrays being completely equal It's a nearly useless test, but it does get is-shallow-equal to 100% test coverage See https://codecov.io/gh/WordPress/packages/src/master/packages/is-shallow-equal/index.js#L48 for the one piece of code not currently tested. * fix spacing * add test for object copies * is-shallow-equal: Fall back to strict equality for non-object-like (#116) * Ensure inverse argument order has same test result * is-shallow-equal: Fall back to strict equality for non-object-like * is-shallow-equal: De-snark README.md * is-shallow-equal: Add changelog entry for 1.0.1 * wordcount: Add changelog entry for 1.0.1 * Publish - @wordpress/is-shallow-equal@1.0.1 - @wordpress/wordcount@1.0.1 * Improve hooks docs (#121) * Add a missing `p` in the docs remove -> removep (#120) * Fix/wordcount whitespace only error (#123) * Addresses error thrown when the results of matchWord or matchCharacters returns null. Includes test for the case * Changes as per @tofumatt * Going full ternary * is-shallow-equal: Use implicit index.js for main entry (#124) * Add autop@1.0.5 CHANGELOG entry * Add hooks@1.1.7 CHANGELOG entry * Add is-shallow-equal@1.0.2 CHANGELOG entry * Add wordcount@1.0.2 CHANGELOG entry * Correct autop, hooks latest CHANGELOG versions * Publish - @wordpress/autop@1.0.6 - @wordpress/hooks@1.1.8 - @wordpress/is-shallow-equal@1.0.2 - @wordpress/wordcount@1.0.2 * Add `@wordpress/npm-package-json-lint-config` package (#119) * Add `@wordpress/npm-package-json-lint-config` package * Standardize packages `package.json` format per `@wordpress/npm-package-json-lint` * Add unused `npm-package-json-lint` rules for reference * Update `npm-package-json-lint` to `3.0.0-alpha3` * Add `valid-values-publishConfig` rule with `{"access": "public"}` option for _packages_ repo * use tabs for indentation * Update npm-package-json-lint to v3 * Update npmPackageJsonLintConfig config formatting * Use latest `3.0.1` npm-package-json-lint release and remove `.npmpackagejsonlintrc.json` * Use `lint:pkg-json` as the npmPkgJsonLint script task name * fix `pretest` test script command * Npm package.json lint config: address my own comments * Add is-plain-object as devDependency * Add wordcount@1.0.3 CHANGELOG entry * Add scripts@1.1.5 CHANGELOG entry * Add npm-package-json-lint-config@1.0.0 CHANGELOG entry * Add jest-preset-default@1.0.5 CHANGELOG entry * Add jest-console@1.0.6 CHANGELOG entry * Add i18n@1.1.1 CHANGELOG entry * Add custom-templated-path-webpack-plugin@1.0.2 CHANGELOG entry * Add browserslist-config@2.1.3 CHANGELOG entry * Add babel-preset-default@1.2.1 CHANGELOG entry * Add babel-plugin-makepot@1.0.1 CHANGELOG entry * Add browserslist-config@2.1.4 CHANGELOG entry * Add jest-preset-default@1.0.6 CHANGELOG entry * Add jest-console@1.0.7 CHANGELOG entry * Add a custom Lerna publish commit message (#125) * chore(release): publish - @wordpress/babel-plugin-makepot@1.0.1 - @wordpress/babel-preset-default@1.2.1 - @wordpress/browserslist-config@2.1.4 - @wordpress/custom-templated-path-webpack-plugin@1.0.2 - @wordpress/i18n@1.1.1 - @wordpress/jest-console@1.0.7 - @wordpress/jest-preset-default@1.0.6 - @wordpress/npm-package-json-lint-config@1.0.0 - @wordpress/scripts@1.1.5 - @wordpress/wordcount@1.0.3 * Babel preset: Enable support for async generator functions (#126) * Babel preset: Enabled support for async generator functions * Babel preset: Add unit tests for async generator functions * Babel preset: Update changelog * chore(release): publish - @wordpress/babel-preset-default@1.3.0 - @wordpress/scripts@1.1.6 * chore: update `codecov` to v3, resolves all `npm audit` issues. (#127) * Scripts: Add support for lint-pkg-json script (#128) * Scripts: Add support for lint-pkg-json script * Scripts: Update documentation for `lint-pkg-json` command * Scripts: Update changelog * chore(release): publish - @wordpress/scripts@1.2.0 * Count when a hook that doesn't have any handlers is run. (#134) Fixes #133. * chore(release): publish - @wordpress/hooks@1.2.0 * Jest Console: Add new matchers for console.log and console.info (#137) * Jest Console: Add new matchers for console.log and console.info * Jest-console: Update CHANGELOG with braking changes details * Move packages from temporary directory to packages/ * Remove all the obsolete files from the old packages * Synchronize package.json with the one from packages. * Synchronize lerna.json with the one from packages * Remove old packages build script * Add `is-shallow-equal/benchmark` to codecov ignore * Remove npm-run-all * Packages: Synchronize dependencie to avoid having copies of the same libraries * Tests: Update test config to work with local packages * ESLint initial fixes via --fix * Build: Make Webpack build work again :) * Build: Fix the issue with babel makepot plugin * Packages: Fix all linter errors * Build: Use Lerna 3 for managing packages It folows the setup of Lerna itself which demonstrates "the golden path of local file: specifiers at scale". See: lerna/lerna#1307. * Packages: Fix configuration with newly introduced packages * Testing: Try to fix jest-console tests * Testing: Try to fix jest-console tests * jest-preset-default: Alphabetize dependencies * Testing: Use toThrowError matcher for jest-console

@else

* chore(package): update stylelint to version 7.0.0 (#83) * fix: Deprecated `no-missing-eof-newline` rule. Use the new `no-missing-end-of-source-newline` rule instead. (#84) * fix: Fixed font-family-name-quotes` test warning message in `values.js`. (#85) * feat: Add `property-no-unknown` rule. (#86) * Update install instructions to add `--save-dev` * chore(package): update stylelint to version 7.2.0 (#87) * chore(package): update AVA to version 0.16.0 (#88) * chore(package): update eslint-config-stylelint to version 4.0.0 (#89) * chore(package): update ESLint to version 3.0.0 (#90) * feat: Add `at-rule-no-unknown` rule. (#91) * feat: Add `selector-class-pattern` and `selector-id-pattern` rules. (#92) * Prepare 9.0.0 * Merge branch 'master' of github.com:ntwb/stylelint-config-wordpress * feat: Add SCSS preset config (#96) * feat: Add SCSS preset config * fix: Include README.md and scss.js in package.json files list * test: Add initial SCSS tests * Prepare 9.1.0 * Prepare 9.1.1 * refactor: Use ECMAScript 8/2017, use async/await instead of returning a promise and move css code out of tests to individual files * feat: Use ECMAScript 8/2017 * refactor: Use async/await instead of returning a promise and move css code out of tests to individual files * chore(package): update dependencies (#100) https://greenkeeper.io/ * chore: Add NodeJS 7 to Travis & AppVeyor CI test matrix's (#102) * chore(package): update stylelint to version 7.5.0 (#103) * chore: Add NodeJS 7.x changelog note * feat: Add `selector-no-empty` rule. (#104) * chore(package): Update `eslint-plugin-ava` to version 4.0.0 (#105) * fix: SCSS: Dissalow `@debug` at-rules. * fix: SCSS: Add `scss/selector-no-redundant-nesting-selector` rule. * Update ava to the latest version 🚀 (#109) * chore(package): update ava to version 0.17.0 * refactor: Include path to test fixtures https://greenkeeper.io/ * chore(package): update npm-run-all to version 4.0.0 (#111) https://greenkeeper.io/ * Update eslint-config-stylelint to the latest version 🚀 (#110) * chore(package): update eslint-config-stylelint to version 6.0.0 * refactor: Update tests per latest `eslint-config-stylelint` * chore: bump minimum NodeJS requirement to 6.9.1 and drop NodeJS 4.x (#118) * chore: Drop NodeJS from Travis CI * chore: Drop NodeJS from AppVeyor * chore: Bump minimum NodeJS requirement to 6.9.1 * chore: Update remark and remark plugin packages (#120) * Update ava to the latest version 🚀 (#112) * chore(package): update ava to version 0.18.0 https://greenkeeper.io/ * chore: update ava to version 0.19.1 * Updated and removed deprecated stylelint rules for 8.0 (#116) * Updated and removed deprecated stylelint rules * Removed deprecated unit test * chore: Add require NodeJS 6.x LTS changelog note * chore: Update changelog for changes made in #116 * refactor: Switch from AVA to Jest for tests. (#122) * tests: Fix `media-query-list-comma-space-before` tests * refactor: Switch from AVA to Jest for tests. * chore(package): update stylelint to version 7.10.1 (#123) * chore(package): update stylelint-scss to version 1.4.4 (#124) * chore(package): update eslint to version 3.19.0 (#125) * refactor: Switch from eslint-plugin-ava to eslint-plugin-jest. (#126) * refactor: Switch from eslint-plugin-ava to eslint-plugin-jest. * docs: Add changelog entry for switch from eslint-plugin-ava to eslint-plugin-jest * Fixed: Added `stylelint-scss` plugin @if/@else placement rules. (#127) * fix: Ignore proprietary `DXImageTransform.Microsoft` MS filters (#128) * docs: Update CHANEGLOG * Merge branch 'master' of github.com:ntwb/stylelint-config-wordpress * feat: Prepare `10.0.0` release. * fix: Remove stylelint v8 deprecated rule `rule-non-nested-empty-line-before` from SCSS config. (#130) * feat: Prepare `10.0.1` release. * fix: Add `@import` to `ignoreAtRules` option in `at-rule-empty-line-before` rule for SCSS config (#131) * feat: Prepare `10.0.2` release. * chore(package): update eslint-plugin-jest to version 20.0.0 (#134) * chore(package): update jest to version 20.0.0 (#135) * docs: Update docs to reflect the new repository home * docs: Update docs to reflect the new repository home at https://github.com/WordPress-Coding-Standards * chore: Update changelog noting repo location change * fix: Add `declaration-property-unit-whitelist` rule to enforce unitless `line-height` values. (#133) * fix: Include CSS config `at-rule-empty-line-before` options in SCSS config. (#139) * Fix: Allow `px` units in `line-height` values for the `declaration-property-unit-whitelist` rule. (#140) * feat: Prepare `11.0.0` release. * Updated README section links (#141) * chore: Add NodeJS v8 to Travis CI build matrix (#143) * chore: Switch from Node.js "current v7.x branch to v8.x for AppVeyor CI (#145) * chore: Drop Node.js v7.x branch from Travis CI (#146) * refactor: Switch to shared `recommended` config from `eslint-plugin-wordpress` for ESLint configuration. (#147) * refactor: Switch to shared `recommended` config from `eslint-plugin-wordpress` for ESLint configuration. * chore: Use `git://` protocol * chore: Include a commit hash * chore: Update ESLint to version 4.1.0 * chore: Update ESLint to version 4.x * refactor: Update indentation per updated ESLint version 4.x `indent` rule. * chore: Add a `dry-release` npm task (#149) * chore: Move ESLint config from `package.json` to `.eslintrc.json` file. (#152) * chore: Use the latest npm for all Node.js Travis CI jobs * chore: Add npm 5's `package-lock.json` file * chore: Add Greenkeeper support for npm 5.x's `package-lock.json` file. * tests: Add Jest snapshot tests * tests: Update Jest snapshots * chore(package): update stylelint to version 8.0.0 * fix: Add initial support for long comments in headers of WordPress theme `style.css` files. (#151) This change allows for longer comments in themes header: • URLs longer than 80 characters • Descriptions longer than 80 characters • Tags longer than 80 characters Fixes #150. * tests: Add some bbPress Jest snapshot tests. * tests: Update Jest SCSS tests to use SCSS config * tests: Update Jest SCSS test snapshots * tests: Add some BuddyPress Jest snapshot tests. * chore: Use the `runInBand` flag for Jest Travis CI jonbs * tests: Update snapshots * tests: Update tests to account for new rules introduced in `stylelint-config-recommended`. * chore: Add `stylelint-config-recommended` extend base configuration from it. * docs: Update CHANGELOG with `stylelint-config-recommended` changes * docs: Remove the styleguide from the repo. We should have one canonical source of truth and not try to maintain two instances. https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/ * refactor: Use `scss/at-rule-no-unknown` in `scss` shared config. * feat: Prepare `12.0.0` release. * chore(package): update remark-cli to version 4.0.0 * chore: Update `package-lock.json` * chore(package): update remark-preset-lint-recommended to version 3.0.0 * chore: Update `package-lock.json` * fix(package): update stylelint-scss to version 2.0.0 * chore: Update `package-lock.json` * chore: Add `stylelint-find-rules` * chore(package): update stylelint-find-rules to version 1.0.1 Closes #168 * chore: Update package-lock.json * chore: Updated `stylelint` peer dependency version to `^8.0.0`. * chore(package): update jest to version 21.0.0 * chore: Update `package-lock.json` * chore(package): update eslint-plugin-jest to version 21.0.0 * chore: Update `package-lock.json` * tests: Remove Jest snapshots (#176) * docs: Update CHANGELOG * Use toHaveLength() in tests Not only does it check the length of something is exactly a certain integer, it also checks that the length property exists in the first place. Addresses lint issues identified at https://www.bithound.io/github/WordPress-Coding-Standards/stylelint-config-wordpress/e2bbe0d9c867cc95da6de5b3bff2a73742135fb6/files#failing * chore: Remove Greenkeeper lock file configuration from `.travis.yml` * chore: Remove `package-lock.json` * chore: Add `package-lock.json` to `.gitignore` * chore: Add `.npmrc` file to prevent npm creating a `packake-lock.json` file. * chore(package): update jest to version 22.0.0 * chore: update `.editorconfig` per upstream WordPress' `.eitorconfig` See https://core.trac.wordpress.org/browser/trunk/.editorconfig * chore: use tabs for indentaion in `package.json` per WordPress coding standards * chore: use tabs for indentaion in `.eslintrc.json` per WordPress coding standards * chore: use `* text=auto` in `.gitattributes` * chore(package): update remark-cli to version 5.0.0 * chore: standardize Jest tests * chore: add commitlint * chore: bump minimum Nod.js required version to `8.9.3` * test: improved `no-duplicate-selectors` tests * feat: update `stylelint` to `9.1.3` * chore: updated `stylelint-config-recommended` to `2.1.0` * chore: updated: `stylelint-scss` to `2.1.0` * feat: update `selector-pseudo-element-colon-notation` to use `double` * feat: prepare `13.0.0` release * fix(package): update stylelint-scss to version 3.0.0 * docs: update changelog * test: add SCSS tests for _extends_ shared configs This test ensures that the rules included in the _shared configs_ inherited by this SCSS _shared config_ via the `extends` option are in actual fact included. The `stylelint-config-wordpress/scss` shared config _extends_ the `stylelint-config-wordpress` shared config, which in turn _extends_ the `stylelint-config-recommended` shared config. * docs: update changelog * test: standardize invalid tests warnings test name verbiage * test: use Jest snapshots for invalid tests This change simplifies the maintainence of the invalid CSS and SCSS tests * feat: the `/scss` config now extends `stylelint-config-recommended-scss` * feat: update `stylelint` to `9.2.0` * docs: add basic _extends_ shared config references * Update to node 10 in .travis.yml * Drop Node.js v9.x * Update appveyor.yml * chore(package): update @commitlint/cli to version 7.0.0 * chore(package): update @commitlint/config-conventional to version 7.0.1 (#203) Closes #201 * chore(package): update npmpub to version 4.0.1 Closes #204 * feat: update stylelint to `9.5.0` * chore: update ESLint to `5.4.0` * chore: update Jest to `23.5.0` * chore: update `eslint-plugin-jest` to `21.21.0` * chore: update `npmpub` to `4.1.0` * chore: update `npm-run-all` to `4.1.3` * chore: update `stylelint-find-rules` to `1.1.1` * chore: update remark presets: • `remark-preset-lint-consistent` to `2.0.2` • `remark-preset-lint-recommended` to `3.0.2` * feat: update `stylelint-scss` to `3.3.0` * chore: add `npm-package-json-lint` * chore: add `@wordpress/npm-package-json-lint-config` * chore: update `package.json` property order * feat: Prepare `13.1.0` release (#208) * chore(package): update husky to version 1.1.2 (#210) Closes #209 * chore(package): update remark-cli to version 6.0.0 (#211) * chore(package): update eslint-plugin-jest to version 22.0.0 (#212) * Update stylelint-find-rules to the latest version 🚀 (#213) ## The devDependency [stylelint-find-rules](https://github.com/alexilyaev/stylelint-find-rules) was updated from `1.1.1` to `2.0.0`. This version is **not covered** by your **current version range**. If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update. * chore(package): update stylelint to version 10.0.1 (#215) Closes #214 * chore: update @commitlint * chore: update `stylelint-config-recommended` to v2.2.0 * chore: update `stylelint-scss` to v3.6.0 * chore: update devDependencies * feat: prepare `14.0.0` release * chore(package): update husky to version 2.2.0 Closes #219 * chore: update `husky.hooks` config in `package.json` * chore(package): update @wordpress/npm-package-json-lint-config to version 2.0.0 * chore(package): update husky to version 3.0.1 Closes #227 * test: fix type in snapshot test * chore(package): update @commitlint/cli to version 8.0.0 * chore(package): update @commitlint/config-conventional to version 8.0.0 * chore(package): update remark-cli to version 7.0.0 * chore(package): update packages to latest versions * chore(package): restore peerDependencies stylelint versions * chore(node): bump minimum Node.JS to LTS version 10.x * ci: use `npm test` to include lint tasks in CI jobs * docs: nocapital_S_dangit * chore(package): update npmpub to version 5.0.0 * fix(package): update stylelint-config-recommended to version 3.0.0 * chore(package): update stylelint to version 11.0.0 * chore: update `peerDependencies` for stylelint 11.0.0 * docs: update changelog * docs: fix stylelint removed compat version * Update stylelint-config-recommended-scss to the latest version 🚀 (#238) * Update eslint to the latest version 🚀 (#233) * chore(package): update eslint to version 6.3.0 * chore: add `ecmaVersion: 2015,` to `parserOptions` ESLint config * docs: update changelog * chore: bump dependencies * chore: add Node.js v12 to Travis CI test matrix, remove 8.x, min 10.x chore: add Node.js v12 to Travis CI test matrix * feat: prepare `15.0.0` release * Merge pull request #241 from WordPress-Coding-Standards/update/find-rules chore: update `stylelint-find-rules` to 2.2.0 * Update npm-package-json-lint to the latest version 🚀 (#242) Update npm-package-json-lint to the latest version 🚀 * Use `@wordpress/scripts` (#231) Use `@wordpress/scripts` * chore: update `stylelint` to 12.0.0 * chore: update `stylelint-scss` to 3.13.0 * chore: update `stylelint-config-recommended-scss` to 4.1.0 * chore: update `husky` to 3.1.0 * chore: update `remark-cli` to 7.0.1 * chore: update `@wordpress/scripts` to 6.0.0 * Fixed: `selector-class-*` regex to account for numerals, case de… (#247) Fixed: `selector-class-*` regex to account for numerals, case detection, and ensure kebab-case * ci: add Windows to Travis CI (#248) ci: add Windows to Travis CI * chore: remove AppVeyor (#249) chore: remove AppVeyor * feat: prepare `16.0.0` release * test: update comment fof scss-invalid test to eslint-jsdoc warnings * feat: prepare `16.0.0` release * fix: npm script temp workaround * Merge pull request #251 from WordPress-Coding-Standards/greenkeeper/@wordpress/scripts-6.1.1 chore(package): update @wordpress/scripts to version 6.1.1 * Revert "fix: npm script temp workaround" This reverts commit e409112e0e8f3965993e3f1b3a6ecc3c8ffdc8e0. * Update husky to the latest version 🚀 (#252) Update husky to the latest version 🚀 * Merge pull request #255 from WordPress-Coding-Standards/greenkeeper/stylelint-13.1.0 Update stylelint to the latest version 🚀 * Merge pull request #254 from WordPress-Coding-Standards/greenkeeper/@wordpress/scripts-7.0.0 Update @wordpress/scripts to the latest version 🚀 * chore(package): update @wordpress/scripts to version 7.1.2 * chore(package): update stylelint-scss to version 3.14.2 * chore(package): update stylelint-config-recommended-scss to version 4.2.0 * chore(package): update husky to version 4.2.3 * chore(package): update @commitlint/cli to version 8.3.5 * chore(package): update @commitlint/config-conventional to version 8.3.4 * Merge pull request #256 from WordPress-Coding-Standards/greenkeeper/remark-cli-8.0.0 Update remark-cli to the latest version 🚀 * Merge pull request #258 from WordPress-Coding-Standards/greenkeeper/remark-preset-lint-recommended-4.0.0 Update remark-preset-lint-recommended to the latest version 🚀 * Merge pull request #257 from WordPress-Coding-Standards/greenkeeper/remark-preset-lint-consistent-3.0.0 Update remark-preset-lint-consistent to the latest version 🚀 * Merge pull request #260 from WordPress-Coding-Standards/greenkeeper/@wordpress/scripts-8.0.1 * Merge pull request #264 from WordPress-Coding-Standards/greenkeeper/@wordpress/scripts-10.0.0 chore(package): update @wordpress/scripts to version 10.0.0 * chore: update `stylelint-scss` to 3.17.2 * feat: prepare `17.0.0` release * refactor: rename `stylelint-config-wordpress` to `stylelint-config` * refactor: rename `stylelint-config-wordpress` to `@wordpress/stylelint-config` in `package.json` * refactor: remove `@commitlint` from `@wordpress/stylelint-config` * refactor: remove `husky` from `@wordpress/stylelint-config` * refactor: trim npm package keywords from `@wordpress/stylelint-config` * refactor: remove `.editorconfig` from `@wordpress/stylelint-config` * refactor: remove `npmpub` from `@wordpress/stylelint-config` * refactor: remove `eslintConfig` from `@wordpress/stylelint-config` * refactor: remove `remarkConfig` from `@wordpress/stylelint-config` * refactor: remove `remark` from `@wordpress/stylelint-config` * refactor: remove `engines` from `@wordpress/stylelint-config` * refactor: remove `prettier.config.js` from `@wordpress/stylelint-config` * refactor: remove `.gitattributes` from `@wordpress/stylelint-config` * refactor: remove `.gitignore` from `@wordpress/stylelint-config` * refactor: remove `.travis.yml` from `@wordpress/stylelint-config` * tests: refactor tests in `@wordpress/stylelint-config` * chore: add `.stylelintignore` for _invalid_ scss test fixtures in `@wordpress/stylelint-config` * Revert "chore: add `.stylelintignore` for _invalid_ scss test fixtures in `@wordpress/stylelint-config`" This reverts commit 05ab441. * chore: add `.stylelintrc.json` for test fixtures in `@wordpress/stylelint-config` * tests: update Jest snapshots in `@wordpress/stylelint-config` * docs: update `docs/manifest.json` for `@wordpress/stylelint-config` * chore: update `@wordpress/stylelint-config` package description * chore: remove `devDependencies` from `@wordpress/stylelint-config` * chore: remove package `scripts` from `@wordpress/stylelint-config` * chore: remove superfluous `.stylelintignore` from `@wordpress/stylelint-config` * chore: add Lerna `publishConfig` to `@wordpress/stylelint-config` * Update Jest snapshots * Backfill release dates in changelog * Update package author * Update readme * Update comment to use renamed package name * Rename tests to match other packages * Remove stylelint `^10.1.0`, `^11.0.0`, and `^12.0.0` as peer dependency. Co-authored-by: greenkeeper[bot] <greenkeeper[bot]@users.noreply.github.com> Co-authored-by: Harley Oliver <harleyoliver@users.noreply.github.com> Co-authored-by: Heather B <heatherbrokmeier@gmail.com> Co-authored-by: Gary Jones <gary@gamajo.com> Co-authored-by: greenkeeper[bot] <23040076+greenkeeper[bot]@users.noreply.github.com> Co-authored-by: Dominik Schilling <dominikschilling+git@gmail.com>

ellatrix added the Design label Feb 23, 2017

ellatrix added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Feb 23, 2017

jasmussen closed this as completed Mar 29, 2017

afercia mentioned this issue Apr 29, 2017

Focus style for any keyboard operable control #574

Closed

jasmussen mentioned this issue Oct 17, 2017

Adjust and redesign neutral, hover, active and focus states #3039

Closed

omarreiss pushed a commit that referenced this issue Jun 26, 2018

chore: update codecov to v3, resolves all npm audit issues. (#127)

4beeb1a

ntwb added a commit that referenced this issue May 31, 2020

Fixed: Added stylelint-scss plugin @if/@else placement rules. (#127)

7e7624d

snyk-bot mentioned this issue Apr 27, 2021

[Snyk] Security upgrade npm-package-json-lint from 3.7.0 to 4.0.0 makbarGroup/gutenberg#39

Open

monzerfoda mentioned this issue Dec 1, 2023

[Snyk] Fix for 1 vulnerabilities monzerfoda/gutenberg#20

Open

Button active and focus state needs more distinct styling #127

Button active and focus state needs more distinct styling #127

Comments

ellatrix commented Feb 23, 2017

mapk commented Feb 23, 2017

ellatrix commented Feb 23, 2017 • edited Loading

ellatrix commented Feb 23, 2017

ellatrix commented Feb 23, 2017

afercia commented Feb 23, 2017

ellatrix commented Feb 23, 2017

afercia commented Feb 23, 2017

afercia commented Feb 23, 2017

mapk commented Feb 23, 2017

afercia commented Feb 23, 2017

ellatrix commented Feb 23, 2017

jasmussen commented Feb 24, 2017

jasmussen commented Feb 24, 2017

jasmussen commented Feb 24, 2017

ellatrix commented Feb 24, 2017

ellatrix commented Feb 24, 2017

jasmussen commented Feb 24, 2017

jasmussen commented Feb 24, 2017

melchoyce commented Mar 2, 2017

afercia commented Mar 2, 2017

jasmussen commented Mar 6, 2017

jasmussen commented Mar 6, 2017

melchoyce commented Mar 6, 2017

afercia commented Mar 6, 2017

ellatrix commented Mar 6, 2017

melchoyce commented Mar 6, 2017

mapk commented Mar 6, 2017

afercia commented Mar 6, 2017

jasmussen commented Mar 7, 2017

afercia commented Mar 7, 2017

afercia commented Mar 7, 2017

jasmussen commented Mar 7, 2017

Afraithe commented Mar 7, 2017

jasmussen commented Mar 7, 2017

afercia commented Mar 7, 2017

TheSpyder commented Mar 7, 2017

jasmussen commented Mar 7, 2017

joyously commented Mar 7, 2017

afercia commented Mar 7, 2017

anna-harrison commented Mar 8, 2017 • edited Loading

jasmussen commented Mar 8, 2017

ellatrix commented Mar 8, 2017

jasmussen commented Mar 8, 2017

Afraithe commented Mar 8, 2017

jasmussen commented Mar 8, 2017 • edited Loading

mapk commented Mar 8, 2017 • edited Loading

afercia commented Mar 8, 2017

TheSpyder commented Mar 8, 2017

jasmussen commented Mar 29, 2017

ellatrix commented Feb 23, 2017 •

edited

Loading

anna-harrison commented Mar 8, 2017 •

edited

Loading

jasmussen commented Mar 8, 2017 •

edited

Loading

mapk commented Mar 8, 2017 •

edited

Loading