profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/MartijnCuppens/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Martijn Cuppens MartijnCuppens Belgium

Intracto/buildozer 18

🚜 Build tool which simplify your buildprocess. Built with Gulp.js 🥤

Johann-S/bs-customizer 16

Create a custom Bootstrap 4.x build

MartijnCuppens/11ty-website 0

Documentation site for the Eleventy static site generator.

MartijnCuppens/anchorjs 0

Add deep anchor links to your docs.

MartijnCuppens/anonaddy 0

Anonymous email forwarding

MartijnCuppens/anonaddy.com 0

The source code for anonaddy.com.

MartijnCuppens/array-initial 0

Get all but the last element or last n elements of an array.

MartijnCuppens/bootstrap 0

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

MartijnCuppens/bs-custom-file-input 0

A little plugin for Bootstrap 4 custom file input

MartijnCuppens/buildozer 0

🚜 Build tool which simplify your buildprocess. Built with Gulp.js 🥤

issue commenttailwindlabs/tailwindcss

var(--tw-empty,/*!*/ /*!*/) could be wrongly processed by externals preprocessors

For those in need for a temporary fix, this 'll do the trick in Drupal:

function YOUR_THEME_preprocess_html(&$variables) {
  $filters = [
    'blur',
    'brightness',
    'contrast',
    'grayscale',
    'hue-rotate',
    'invert',
    'saturate',
    'sepia',
    'drop-shadow',
  ];
  $css = '*, ::before, ::after {';
  foreach ($filters as $value) {
    $css .= "--tw-{$value}: var(--tw-empty,/*!*/ /*!*/);";
  }
  $css .= '}';

  $variables['#attached']['html_head'][] = [
    [
      '#type' => 'html_tag',
      '#tag' => 'style',
      '#value' => $css,
    ],
    'tailwind-custom-properties',
  ];
}

Please note this is a workaround which just adds additional CSS.

hanoii

comment created time in a month

PullRequestReviewEvent

Pull request review commentfocus-trap/tabbable

[#413] Form elements in disabled fieldsets are not tabbable/focusable

 const isHidden = function (node, displayCheck) {   return false; }; +// form fields (nested) inside a disabled fieldset are not focusable/tabbable+//  unless they are in the _first_ <legend> element of the top-most disabled+//  fieldset+const isDisabledFromFieldset = function (node) {+  if (+    isInput(node) ||+    node.tagName === 'SELECT' ||+    node.tagName === 'TEXTAREA' ||+    node.tagName === 'BUTTON'+  ) {+    let parentNode = node.parentElement;+    while (parentNode) {+      if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {+        // look for the first <legend> as an immediate child of the disabled+        //  <fieldset>: if the node is in that legend, it'll be enabled even+        //  though the fieldset is disabled; otherwise, the node is in a+        //  secondary/subsequent legend, or somewhere else within the fieldset+        //  (however deep nested) and it'll be disabled+        for (let i = 0; i < parentNode.children.length; i++) {+          const child = parentNode.children.item(i);+          if (child.tagName === 'LEGEND') {

You're right, I can't find a more performant way either!

stefcameron

comment created time in a month

PullRequestReviewEvent

Pull request review commentfocus-trap/tabbable

[#413] Form elements in disabled fieldsets are not tabbable/focusable

 const isHidden = function (node, displayCheck) {   return false; }; +// form fields (nested) inside a disabled fieldset are not focusable/tabbable+//  unless they are in the _first_ <legend> element of the top-most disabled+//  fieldset+const isDisabledFromFieldset = function (node) {+  if (+    isInput(node) ||+    node.tagName === 'SELECT' ||+    node.tagName === 'TEXTAREA' ||+    node.tagName === 'BUTTON'+  ) {+    let parentNode = node.parentElement;+    while (parentNode) {+      if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {+        // look for the first <legend> as an immediate child of the disabled+        //  <fieldset>: if the node is in that legend, it'll be enabled even+        //  though the fieldset is disabled; otherwise, the node is in a+        //  secondary/subsequent legend, or somewhere else within the fieldset+        //  (however deep nested) and it'll be disabled+        for (let i = 0; i < parentNode.children.length; i++) {+          const child = parentNode.children.item(i);+          if (child.tagName === 'LEGEND') {

I don't think it is necessary to loop over all elements since it's only valid to use the legend as first element of the fieldset: https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element

Apart from that minor thing, this looks good!

stefcameron

comment created time in a month

PullRequestReviewEvent

pull request commentfocus-trap/tabbable

[#413] Form elements in disabled fieldsets are not tabbable/focusable

@MartijnCuppens FYI. If you have a moment, please check it out and see if it covers your use case. Maybe there's some other form element I'm not thinking of, or some other scenario I'm not thinking of...?

LGTM

I only bumped into an edge case while reading the specs:

A form control is disabled if its disabled attribute is set, or if it is a descendant of a fieldset element whose disabled attribute is set and is not a descendant of that fieldset element's first legend element child, if any.

Source: https://www.w3.org/TR/2014/REC-html5-20141028/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute

I've updated the codepen with some extra edge cases: https://codepen.io/MartijnCuppens/pen/abWRZNY?editors=1011

stefcameron

comment created time in 2 months

issue openedfocus-trap/tabbable

Exclude form elements in `:disabled` fieldset

A form element in a <fieldset disabled> should not be focusable:

https://codepen.io/MartijnCuppens/pen/abWRZNY?editors=1011

created time in 2 months