BlueBeka
BlueBeka
Explore posts from servers
KPCKevin Powell - CommunityTTCTheo's Typesafe Cult
PostsComments
KPCKevin Powell - Community
Created by BlueBeka on 1/2/2025 in #front-end
Is there anyway to make overflow in x visible while y is scrollable?
.foo {
  overflow-x: visible;
  overflow-y: auto;
}
.foo {
  overflow-x: visible;
  overflow-y: auto;
}
From https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Setting overflow to visible in one direction (i.e. overflow-x or overflow-y) when it isn't set to visible or clip in the other direction results in the visible value behaving as auto.
Is there anyway to get around this?
4 replies
KPCKevin Powell - Community
Created by BlueBeka on 1/2/2025 in #front-end
Is it possible to access computed aria values from JS
No description
8 replies
KPCKevin Powell - Community
Created by BlueBeka on 1/1/2025 in #front-end
Dropdown component made from popover
I'm trying to make a dropdown component using the new html popover and css anchor positioning apis. I was wounding if anyone could help me with the semantics and accessibility side of things. I think I've got it going pretty good but would love a second opinion from others. In terms of keyboard accessibility, do I just need to add support for the up and down arrow, as well as page up and down? I think everything else should be handle by the button elements. Do I just add this as an onkeydown event listener to the popover element? Here's the html: 
<div class="dropdown">
  <input type="hidden" name="dropdown-1" value="option-1" />

  <button
    role="combobox"
    type="button"
    popovertarget="dropdown-1"
    popovertargetaction="toggle"
  >
    <span>Select an item...</span>
  </button>

  <div role="group" popover="auto" id="dropdown-1">
    <div role="listbox">
      <div role="listitem">
        <button
          role="option"
          aria-selected="true"
          type="button"
          popovertarget="dropdown-1"
          popovertargetaction="hide"
        >
          Option 1
        </button>
      </div>
      <div role="listitem">
        <button
          role="option"
          aria-selected="false"
          type="button"
          popovertarget="dropdown-1"
          popovertargetaction="hide"
        >
          Option 2
        </button>
      </div>
      <div role="listitem">
        <button
          role="option"
          aria-selected="false"
          type="button"
          popovertarget="dropdown-1"
          popovertargetaction="hide"
        >
          Option 3
        </button>
      </div>
    </div>
  </div>
</div>
<div class="dropdown">
  <input type="hidden" name="dropdown-1" value="option-1" />

  <button
    role="combobox"
    type="button"
    popovertarget="dropdown-1"
    popovertargetaction="toggle"
  >
    <span>Select an item...</span>
  </button>

  <div role="group" popover="auto" id="dropdown-1">
    <div role="listbox">
      <div role="listitem">
        <button
          role="option"
          aria-selected="true"
          type="button"
          popovertarget="dropdown-1"
          popovertargetaction="hide"
        >
          Option 1
        </button>
      </div>
      <div role="listitem">
        <button
          role="option"
          aria-selected="false"
          type="button"
          popovertarget="dropdown-1"
          popovertargetaction="hide"
        >
          Option 2
        </button>
      </div>
      <div role="listitem">
        <button
          role="option"
          aria-selected="false"
          type="button"
          popovertarget="dropdown-1"
          popovertargetaction="hide"
        >
          Option 3
        </button>
      </div>
    </div>
  </div>
</div>
4 replies
TTCTheo's Typesafe Cult
Created by BlueBeka on 12/31/2024 in #questions
combobox popover component
I'm playing around with the html popover and css anchor positioning apis to create a dropdown menu. I was just wondering if anyone could have a look at this stripped down code (almost all styling has been removed) and let me know how you could improve it (not looking for adding customization, just semantics, performance, accessibility type stuff). One thing that doesn't quite seem right to be is the use of a button for each option in the drop down, but I don't want to just use a div with click and key-press events on it. I'm pretty sure I don't need to add aria-controls and aria-expanded as the popover api controls that. 
import { useId, useRef, useState } from "react";

type Option = { name: string; value: string };

export const Dropdown = ({ name, value, options }: { name: string; value: string; options: Option[] }) => {
  const [selectedOption, setSelectedOption] = useState<Option | null>(null);
  const popoverId = useId();
  const anchorName = `--anchor-${popoverId.replaceAll(":", "-")}`;

  const popoverRef = useRef<HTMLDivElement>(null);

  return (
    <div>
      <input type="hidden" name={name} value={value} />

      <button
        role="combobox"
        type="button"
        popoverTarget={popoverId}
        popoverTargetAction="toggle"
        style={{
          anchorName,
        }}
      >
        {selectedOption?.name}
      </button>

      <div
        role="group"
        popover="auto"
        id={popoverId}
        ref={popoverRef}
        style={{
          positionAnchor: anchorName,
        }}
      >
        <div role="listbox">
          {options.map((option) => (
<div key={option.value} role="listitem">
  <button
    role="option"
    aria-selected={selectedItem === item}
    onClick={() => {
      setSelectedOption(option);
      popoverRef.current!.hidePopover();
    }}
  >
    <div>{option.name}</div>
  </button>
</div>
          ))}
        </div>
      </div>
    </div>
  );
};
import { useId, useRef, useState } from "react";

type Option = { name: string; value: string };

export const Dropdown = ({ name, value, options }: { name: string; value: string; options: Option[] }) => {
  const [selectedOption, setSelectedOption] = useState<Option | null>(null);
  const popoverId = useId();
  const anchorName = `--anchor-${popoverId.replaceAll(":", "-")}`;

  const popoverRef = useRef<HTMLDivElement>(null);

  return (
    <div>
      <input type="hidden" name={name} value={value} />

      <button
        role="combobox"
        type="button"
        popoverTarget={popoverId}
        popoverTargetAction="toggle"
        style={{
          anchorName,
        }}
      >
        {selectedOption?.name}
      </button>

      <div
        role="group"
        popover="auto"
        id={popoverId}
        ref={popoverRef}
        style={{
          positionAnchor: anchorName,
        }}
      >
        <div role="listbox">
          {options.map((option) => (
<div key={option.value} role="listitem">
  <button
    role="option"
    aria-selected={selectedItem === item}
    onClick={() => {
      setSelectedOption(option);
      popoverRef.current!.hidePopover();
    }}
  >
    <div>{option.name}</div>
  </button>
</div>
          ))}
        </div>
      </div>
    </div>
  );
};
3 replies
TTCTheo's Typesafe Cult
Created by BlueBeka on 12/29/2024 in #questions
Is this a safe use of reading a ref during render?
I'm creating a popover component. I want it call a template function provided by a parent component, giving it a call back that updates some state and closes the popover. This is the basic of how I've set it up but I'm getting an eslint error about reading a ref during render. 
<div ref={popoverRef} role="group" popover="auto" id={id}>
  <div role="listbox">
    {options.map((option) =>
      optionTemplate(option, () => {
        setSelectedOption(option);
        popoverRef.current!.hidePopover();
      }),
    )}
  </div>
</div>
<div ref={popoverRef} role="group" popover="auto" id={id}>
  <div role="listbox">
    {options.map((option) =>
      optionTemplate(option, () => {
        setSelectedOption(option);
        popoverRef.current!.hidePopover();
      }),
    )}
  </div>
</div>
Is there a better way to call hidePopover on the popover element?
9 replies
TTCTheo's Typesafe Cult
Created by BlueBeka on 8/7/2024 in #questions
Tailwind alias/rename utility?
I've got a theme color config that looks a little like this: 
theme: {
  colors: {
    text: {
      vivid: "...",
      muted: "...",
    },
  }
}
theme: {
  colors: {
    text: {
      vivid: "...",
      muted: "...",
    },
  }
}
Is it possible to make it so I can just use text-vivid instead of text-text-vivid? Non-text utilities should be unaffected, so bg-text-valid if for some reason I want to color the background with the text-vivid color. I assume this can probably been done with a plugin, but I'm not sure. Is it possible? Are there any existing solutions? Thanks 🙂
4 replies
TTCTheo's Typesafe Cult
Created by BlueBeka on 8/7/2024 in #questions
How to webpack? (in nextjs)
I can do what I want to do super easy in rollup but I can't for the life of me figure out how to do it in webpack. Essentially all I want to do is run my source code through a tool to transform it before it's compiled. My source code is in TypeScript but my tool only works with JavaScript, so I need to add the transformation after the the TypeScript transpilation. I created a webpack loader that seem to work fine for js file, but I don't know how to get it to work for ts files too. This is what I've got so far: 
// next.config.js
export default {
  // ...

  webpack: (webpackConfig, { dev }) => {
    if (!dev) {
      webpackConfig.module.rules.push({
        test: /\.js/,
        exclude: /node_modules/,
        loader: fileURLToPath(import.meta.resolve("deassert/webpack-loader")),
      });
    }
    return webpackConfig;
  },
};
// next.config.js
export default {
  // ...

  webpack: (webpackConfig, { dev }) => {
    if (!dev) {
      webpackConfig.module.rules.push({
        test: /\.js/,
        exclude: /node_modules/,
        loader: fileURLToPath(import.meta.resolve("deassert/webpack-loader")),
      });
    }
    return webpackConfig;
  },
};
Is this something that can be done in webpack, hopefully somewhat easily?
4 replies
KPCKevin Powell - Community
Created by BlueBeka on 2/10/2024 in #front-end
Is using `aria-labelledby` redundant on an `input` element if already has an associated `label`?
Is there any point of the former over the latter? 
<label for="foo" id="bar">Label</label>
<input id="foo" aria-labelledby="bar" />
<label for="foo" id="bar">Label</label>
<input id="foo" aria-labelledby="bar" />
vs. 
<label for="foo">Label</label>
<input id="foo" />
<label for="foo">Label</label>
<input id="foo" />
Or is that relationship automatically inferred?
3 replies
KPCKevin Powell - Community
Created by BlueBeka on 12/10/2023 in #front-end
Can `@supports` be used to detect support for an at rule?
I want detect if the browser supports @starting-style. So i need something like: 
@supports (@starting-style) {
  /* ... */
}
@supports (@starting-style) {
  /* ... */
}
What's the valid syntax for this? assuming there is one.
2 replies
KPCKevin Powell - Community
Created by BlueBeka on 10/30/2023 in #front-end
css `color-mix` not working with paint api.
For some reason I can't seem to use color-mix to set a color for houdini's paint api. Setting a simple color or even a relative color works fine. Any Idea why color-mix isn't working for me? 
/* working */
--squiggly-line-color: red;
/* working */
--squiggly-line-color: oklch(
    from red calc(l * 7 / 8) calc(c * 3 / 4) h
  );
/* not working */
--squiggly-line-color: color-mix(
    in oklab,
    white 75%,
    black
  );

background: paint(squiggly-line);
/* working */
--squiggly-line-color: red;
/* working */
--squiggly-line-color: oklch(
    from red calc(l * 7 / 8) calc(c * 3 / 4) h
  );
/* not working */
--squiggly-line-color: color-mix(
    in oklab,
    white 75%,
    black
  );

background: paint(squiggly-line);
6 replies
KPCKevin Powell - Community
Created by BlueBeka on 10/23/2023 in #front-end
Is it possible to scale an element by a fixed about using only css
I have a style that display a scale effect when a focusable elements is focused. Here's the rough css for applied to an anchor tag: 
a {
  display: inline-block;
  scale: 1;
  transition: scale 0.3s ease;
  /* other styles */
}
a:focus-visible {
  scale: 1.05; /* can I make this an absolute amount, rather than relative */
  /* other styles */
}
a {
  display: inline-block;
  scale: 1;
  transition: scale 0.3s ease;
  /* other styles */
}
a:focus-visible {
  scale: 1.05; /* can I make this an absolute amount, rather than relative */
  /* other styles */
}
I'm also applying this effect to buttons, inputs, etc. Is there anyway I can modify this code to scale the element by a set about (say 1rem) rather than a relative amount? My issue with the relative amount is that is doesn't look good with elements that have quite different sizes.
4 replies
KPCKevin Powell - Community
Created by BlueBeka on 10/20/2023 in #front-end
Tabindex for Button inside Link
I've got this html 
<a href="example.com">
  <button>Label</button>
</a>
<a href="example.com">
  <button>Label</button>
</a>
The button is styled with css while the link has no styles/all the styles have been removed. The issue I have is when tabbing through the site, focus first goes to the link, and then to the button. However, I only need one of these to be tabbed to as they are essentially a single component. What's the best way to fix this? If I add tabindex="-1" to the button, functionally everything is good, but the focus styling on the button don't display. While if I add it to the link, I'm worried this will effect accessibility. Will it? or this the proper solution?
29 replies
KPCKevin Powell - Community
Created by BlueBeka on 6/23/2023 in #front-end
Container Query units - vertical unit all evaluate to zero
I think I've fallen into a pitfall with container query units. 100cqb and 100cqh are evaluating to zero, but 100cqi and 100cqw are working as expected. Here's a simplified version I want I believe is all my relevant css: 
.parent {
  container-name: foo;
  container-type: size;
  min-height: 500px;
  display: block;
}
.child {
  height: 200px;
  min-height: 100px;
  max-height: calc(100cqh - 64px);
  resize: vertical;
}
.parent {
  container-name: foo;
  container-type: size;
  min-height: 500px;
  display: block;
}
.child {
  height: 200px;
  min-height: 100px;
  max-height: calc(100cqh - 64px);
  resize: vertical;
}
Any ideas to the cause of why my max-height is coming out as 0px instead of >= 436px?
4 replies