Piccalilli - Front-End Challenges Club topic archive

Front-End solution: Eyebrow heading dots

Andy Bell — Wed, 10 Jul 2024 12:20:49 GMT

In the challenge I was stuck with a suboptimal solution to little decorative dots. If you haven’t already read that, do that first. I’ll wait.

Right, you’re up to speed, let’s dig in.

A call to arms

I was really impressed with the efforts folks contributed to this challenge, so I’ll list a couple of my favourites.

Thank you, as always, to the folks who contributed.

The secret is in the newest CSS

Roma linked me up with an article about the shrink-wrap problem they wrote. The solution was right there, in these further examples.

It’s a really clever solution because the anchor positioning system allows us to stick the start or the end of the dots to each side of the text, providing that much sought-after effect that I was after in the original challenge.

I’ve not read up much anchor position stuff quite yet because in my mind, it was a popover thing. How wrong was I?!

I riffed off Roma’s approach for the solution to this Front-End Challenges Club

We’re using slightly different HTML this time. I wanted no extra elements, but that seems like an impossibility at this point. That’s cool because you gotta let go of these things to progress. It’s better to be flexible when working with the web.


  Some reasonably long text goes here

One less at least and most importantly, no empty elements, which I did have in my last attempt in the challenge.

Let’s now move on to CSS and start on the .eyebrow block.

.eyebrow {
  --eyebrow-decoration-gutter: 1ch;

  font-size: var(--size-step-0);
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  font-feature-settings: "cpsp" on;
  max-width: unset;

  /* This is the relative parent for the dots */
  position: relative;
}

We start by determining what the gap between dots and text should be. I’ve opted for a nice 1ch but it can be whatever you like.

Skipping past the visual typography settings, we set the position as relative. The dots will use this as their relative parent where anchor support is available later.

.eyebrow > span {
  position: relative;
  display: inline-block;
}

To handle browsers with no anchor support, we are building with progressive enhancement. By setting the as a relative parent, we can fake anchoring with absolute positioning later.

.eyebrow > span::before,
.eyebrow > span::after {
  content: "";
  display: block;
  aspect-ratio: 1;
  height: 0.7ex;
  background-color: currentColor;
  border-radius: 100%;
  position: absolute;

  /* Attach to the anchor */
  position-anchor: --eyebrow-target;
  
  inset-block-start: 50%;
  transform: translateY(-50%);
}

This is very similar to my original shot at this pattern. We’re creating dots using aspect ratio and border radius, making them the same colour as the rendered text.

The next part, we create an anchor for our dots. We’re not doing this in a @supports because there’s no point. The browser will ignore and carry on because CSS is a declarative programming language.

The last bit I’m not overly enthused about. I wish translate had some logical versions because this pattern would work regardless of writing mode. A refactoring target, I guess.

.eyebrow > span::before {
  inset-inline-start: calc(var(--eyebrow-decoration-gutter) * -2);
}

.eyebrow > span::after {
  inset-inline-end: calc(var(--eyebrow-decoration-gutter) * -2);
}

Again, for browsers with no anchor support, we’re using only absolute positioning to position our anchors. There’s not enough space with the --eyebrow-decoration-gutter, so I’ve multiplied it by minus two to get a double negative version of our custom property. I can live with that, but you might instead prefer to create an --eyebrow-fallback-decoration-gutter or something instead.

@supports (position-anchor: --eyebrow-target) {
  /* Not a relative parent, but an anchoring parent instead */
  .eyebrow > span {
    anchor-name: --eyebrow-target;

    /* Undo the default experience */
    display: revert;
    position: revert;
  }

  /* Anchor the end of the dot to the anchor. Margin inline provides the gutter */
  .eyebrow > span::before {
    inset-inline-start: auto;
    inset-inline-end: anchor(start);
    margin-inline-end: var(--eyebrow-decoration-gutter);
  }

  /* Anchor the start of the dot to the anchor. Margin inline provides the gutter */
  .eyebrow > span::after {
    inset-inline-end: auto;
    inset-inline-start: anchor(end);
    margin-inline-start: var(--eyebrow-decoration-gutter);
  }
}

This is where the fun starts. We first check to see if anchor positioning is available to us. A quick note on @supports: I like to test the actual value we are trying to apply. Feels like a good idea and improves readability as I see it.

The next thing we do is target the span and attach it to the anchor we created earlier with anchor-name: --eyebrow-target;. Following this, we revert the positioning and display rules to the user agent stylesheet value.

Finally, because we have anchor support, we can now utilise it. For the ::before element, we change the positioning values to stitch the end of the dot to the start of the anchor. We do the opposite for the ::after element and stitch the start to the end of the anchor. We re-apply the gutter value with margin too, as it was set with positioning before.

See the Pen My final solution to this challenge by Andy Bell (@piccalilli) on CodePen.

Wrapping up

It’s been a bit of a different challenge this time around on Front-End Challenges Club. I hope you’ve enjoyed it! Next time, I promise it’ll be a simpler one.

Again, thank you to everyone who had a go at it!

Front-End challenge: Eyebrow heading dots

Andy Bell — Thu, 27 Jun 2024 11:19:18 GMT

I’m going to do this thing a little differently and start with my solution and ask for folks to come up with a better solution.

The context is a little “eyebrow” heading, but the complexity is there are decorative dots each side. I’m close — with the help of magic numbers — but I want something extremely scalable and intrinsic, ideally.

View full size image" />

When the content breaks on to two lines, I want those dots to sit right up to edges of the text with a nice gap to cushion that.

Starting with a pretty standard grid layout

My first idea was to allow the content to naturally wrap, only specifying the size of the decorative columns as 1fr each. It works great on large viewports, but on small viewports, those dots were pushed out to the edges.

.eyebrow {
  font-size: var(--size-step-0);
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  max-width: unset; 
  font-feature-settings: "cpsp" on;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 var(--space-s);
}

.eyebrow span::before {
  content: "";
  display: block;
  aspect-ratio: 1;
  height: 0.7ex;
  background-color: currentColor;
  border-radius: 100%;
}

.eyebrow span:first-child::before {
  margin-inline-start: auto;
}

See the Pen Eyebrow: standard grid by Andy Bell (@piccalilli) on CodePen.

As far as I can tell, using min-content, max-content and fit-content to size the content isn’t going to do the job because where space allows the text needs to flow nicely on a single line. But, fit-content with some control in place works ok.

.eyebrow {
  font-size: var(--size-step-0);
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  max-width: unset;
  font-feature-settings: "cpsp" on;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr fit-content(30ch) 1fr;
  gap: 0 var(--space-s);
}

.eyebrow span::before {
  content: "";
  display: block;
  aspect-ratio: 1;
  height: 0.7ex;
  background-color: currentColor;
  border-radius: 100%;
}

.eyebrow span:first-child::before {
  margin-inline-start: auto;
}

See the Pen Eyebrow: fit content by Andy Bell (@piccalilli) on CodePen.

Where I’ve ended

I’m using minmax to size the decorative columns based on either a viewport width or 1fr. This allows the decorative columns to nicely fill space where there is space to fill, but on small screens, push everything in enough to give the effect we’re after.

.eyebrow {
  font-size: var(--size-step-0);
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  max-width: unset; 
  font-feature-settings: "cpsp" on;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(13vi, 1fr) auto minmax(13vi, 1fr);
  gap: 0 var(--space-s);
}

.eyebrow span::before {
  content: "";
  display: block;
  aspect-ratio: 1;
  height: 0.7ex;
  background-color: currentColor;
  border-radius: 100%;
}

.eyebrow span:first-child::before {
  margin-inline-start: auto;
}

See the Pen Eyebrow: my approach by Andy Bell (@piccalilli) on CodePen.

What I’d love to achieve

No magic numbers
No extra elements in the heading

I’m sure it’s possible to do the above and based on previous editions of Front-End Challenges Club, there’s some seriously smart people giving them a go.

Fancy your chances with this little challenge? Go ahead and fork this CodePen (or grab the code and do what you want) and let us know how you did it! You can catch me at the following locations too.

For the solution to this challenge, I’ll pick my favourite attempt, apply it in the actual context and show you all how it does, while hopefully breaking it down into something easy for you all to understand.

A closing note: it doesn’t have to use grid either. That’s just the route I chose 🙂

Front-End solution: progress indicator

Andy Bell — Wed, 13 Mar 2024 08:55:00 GMT

This is the solution to Front-End Challenge #009, so check that out first if you haven’t already.

I knew when I set this challenge, there were multiple ways to solve it and I was not disappointed by the diversity in approaches that folks kindly sent to me.

Here’s how I did it.

See the Pen The finished demo by Andy Bell (@piccalilli) on CodePen.

Starting with markup

I’ve opted for a little web component that progressively enhances a loading statement, so most of the markup lives in that component. But, it’s important that the default experience is acceptable and informative.


  
    Loading, please wait…

We’re calling on a custom element and inside that, there’s some default markup. It’s a statement that lets the user know that something is loading. Using the role="alert" attribute along with aria-live="polite" gives a screen reader the right message too without interrupting their flow.

The web component

The first thing to do is create the component and add it to the registered custom elements:

class ProgressIndicator extends HTMLElement {
}

customElements.define("progress-indicator", ProgressIndicator);

What’s going on here is we’re creating a class that extends the base HTMLElement object and then assigning that to any element that is found on a page.

FYI

Everything I add in this section is going to be a method of the ProgressIndicator class, so if you’re coding along, keep that in mind!

Next, let’s add our constructor method. This method runs as soon as the element is registered. I use constructor instead of connectedCallback() because I want to replace that default HTML that we added earlier as quickly as possible.

constructor() {
  super();

  // Calculate the circle radius and the normalised version which is radius minus the stroke width
  const radius = this.viewBox / 2;
  const normalisedRadius = radius - this.stroke;
  this.calculatedCircumference = normalisedRadius * 2 * Math.PI;

  // Set the custom property viewbox value for our CSS to latch on to
  this.style.setProperty("--progress-indicator-viewbox", `${this.viewBox}px`);

  // Set the default aria role states
  this.setAttribute("aria-label", this.label);
  this.setAttribute("role", "progressbar");
  this.setAttribute("aria-valuemax", "100");

  // Render the component with all the data ready
  this.innerHTML = `
  
    
      
      
      
    
  
`;
}

Let’s break down what’s going on here. First up, we’re running super();. This instructs the parent class — HTMLElement — to construct. This is required.

FYI

Before I move on, let me just touch on a couple of bits. We’re rendering an SVG which has a couple of circles and a check icon. What we’re doing next in the constructor is calculating some properties for those SVG elements.

The first thing to do is calculate a radius, which is the viewBox property, halved. We get that data later in the component code.

The normalisedRadius is that radius value, minus the width of the stroke — also covered later in the component. This means the circles wont exceed the bounds of the viewBox.

The next bit is where the heat increases a touch — especially for a professional rectangle drawer that happens to code, in my case 😅. For displaying the progress, visually, we need to calculate the circumference of the circle using PI — y’know, from maths class at school. Unfortunately, I did not like maths at school, so I can’t really teach you how it works. What I can do though is tell you we calculate that circumference by doubling the normalised radius, then multiplying that by PI.

Next up, it’s time to set up some attributes on our component, and we start by setting a CSS Custom Property — --progress-indicator-viewbox — which we’ll hook on to later in our CSS. Following that, we need to make sure this isn’t a exclusionary, visual-only component, so we’ve got some aria roles to set:

aria-label allows us to provide a descriptive label, which is populated via a property of the web component
The progressbar role gives the right type of information to assistive tech
The aria-valuemax works alongside the progressbar role to let an assistive tech user know what the max progress value will be

Last up in the constructor, we’re populating a template literal by stitching markup with all of the data we gathered and calculated. A lot of it is self explanatory, but I want to point out the bit that shows progress.

Now, stand back as I attempt to explain the stroke-dasharray attribute…

The idea is to add a series of numbers like this: stroke-dasharray="10 5". These numbers specify the length of alternating dashes and gaps between those dashes. So, for our example, the dashes will be 10 units long with a gap of 5 units. The units represent the length of the stroke, which in our case is the circumference of the circle.

We set our attribute as the following: stroke-dasharray="${this.calculatedCircumference} ${this.calculatedCircumference}". This means each dash is the circumference of our circle and so is each gap. This allows us to reveal portions of this using stroke-dashoffset. We do that in the next part.

Monitoring and displaying progress

The core of our component is in, so now let’s add a method that updates the progress state, both visually and auditorily.

setProgress(percent) {
  // Always make sure the percentage passed never exceeds the max
  if (percent > 100) {
    percent = 100;
  }

  // Set the aria role value for screen readers
  this.setAttribute("aria-valuenow", percent);

  const circle = this.querySelector("[data-progress-circle]");
  const progressCount = this.querySelector("[data-progress-count]");

  // Calculate a dash offset value based on the calculated circumference and the current percentage
  circle.style.strokeDashoffset =
    this.calculatedCircumference -
    (percent / 100) * this.calculatedCircumference;

  // A human readable version for the text label
  progressCount.innerText = `${percent}%`;

  // Set a complete or pending state based on progress
  if (percent == 100) {
    this.setAttribute("data-progress-state", "complete");
  } else {
    this.setAttribute("data-progress-state", "pending");
  }
}

What’s happening here in a nutshell is we’re first checking that the progress doesn’t exceed 100%. If that’s all good, we move on to setting the aria-valuenow value to the current percentage value.

After grabbing the correct circle and text label elements, we populate the number value on the text label and then, the dash array magic happens. By multiplying the circumference by the point value of the percentage, we get a dash offset value that reveals only the right amount of stroke to visually show progress on the indicator.

If they had shown me stuff like this in school, I might have actually paid attention in maths lessons…

Lastly, we set some data attributes that we can hook on to CSS. Using the CUBE exception approach, we’re setting either a progress or complete state on the data-progress-state attribute.

Getters and observed attributes

Right, these are the last few parts of our web component before we can move on to the fun part: CSS.

The first thing to do is observe the progress attribute on our custom element with the following snippet:

static get observedAttributes() {
  return ["progress"];
}

This is a property that’s available on all web components and it does exactly what it says on the tin. You can observe as many attributes as you like. All you’ve got to do is pop them in the return array.

Let’s hook on to those attribute changes now.

attributeChangedCallback(name, oldValue, newValue) {
  if (name === "progress") {
    this.setProgress(newValue);
  }
}

It’s pretty straightforward, really. We’re checking if the progress attribute is the one that triggered this lifecycle callback then popping the new value in our setProgress method. Now, any outside JS can update this progress indicator by changing the progress attribute value.

This is the last part of the JS now, we need to set our getters for the various bits of data we need from the component’s attributes:

get viewBox() {
  return this.getAttribute("viewbox") || 100;
}

get stroke() {
  return this.getAttribute("stroke") || 5;
}

get label() {
  return this.getAttribute("label") || "Current progress";
}

All we’re doing here is attempting to grab data from those attributes and if there’s nothing, setting some sensible defaults. Lovely.

Styling it up

Finally, it’s time to get into some CSS. First up, I’ve modified and added to the Custom Properties I provided in the challenge:

:root {
  --font-base: "Space Mono", monospace;
  --transition: 200ms linear;
  --color-dark: #1f1a38;
  --color-dark-glare: #989ea9;
  --color-success: #76f7bf;

  --progress-indicator-color-complete: var(--color-success);
  --progress-indicator-progress-stroke: var(--color-dark);
  --progress-indicator-bg-stroke: var(--color-dark-glare);

All I’ve done is add some more specific theming properties that hook on to the more constant design tokens.

.progress-indicator {
  font-family: var(--font-base);
  line-height: 1.1;
  color: var(--color-dark);
  container-type: inline-size;
  width: var(--progress-indicator-viewbox);
  height: auto;
}

This is the start of our component (block) styles. The two bits I want to touch on are the following:

container-type is being set to inline-size because we’re going to be using container units to size the text and icon
The --progress-indicator-viewbox property — if you remember — is set by our web component’s code. This is where our CSS hooks on to it by setting the width

.progress-indicator__progress-circle {
  stroke: var(--progress-indicator-progress-stroke, currentColor);
  transition: stroke-dashoffset var(--transition);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

This is the circle that holds our progress indicator stroke. The important part to touch on here is that the dash array starts from 90 degrees on our circle, so we need to transform it back to the top by rotating -90deg. The transform origin is from the center too.

.progress-indicator__background-circle {
  stroke: var(--progress-indicator-bg-stroke, grey);
}

This part is pretty straightforward. If there’s a Custom Property value for the background circle’s stroke — the grey one — we use that. Otherwise, we default to the grey (or gray if you’re American) system colour.

.progress-indicator__check {
  width: var(--progress-indicator-check-size, 60cqw);
  height: auto;
  display: none;
}

This part is our little check icon which shows up when progress reaches 100%. The reason we set the .progress-indicator to be a container earlier is because we’re using cqw units to size the checkbox, relative to the component’s width. Pretty handy, right?

.progress-indicator__count {
  font-size: var(--progress-indicator-count-size, max(25cqw, 1rem));
  z-index: 1;
}

Sticking with that theme, we’re doing the same for the text too. The difference in our fallback value is we’re making sure the text is at least 1rem with max(). Please make sure when you’re using container or viewport units to size text that it doesn’t fail the WCAG 1.4.4 guideline: Resize text.

Right, we need all the inner parts of the indicator to stack on top of each other nicely. Let me teach you a CSS grid party trick:

.progress-indicator__visual {
  display: grid;
  grid-template-areas: "stack";
  align-items: center;
  place-items: center;
}

.progress-indicator__visual > * {
  grid-area: stack;
}

The .progress-indicator__visual element houses both the text label and the icon, so what’s happening here is we’ve got a grid layout with one named area: stack. By putting both icon and label in the same area, they stack on top of each other. We don’t need to worry about z-index because they’re never shown together. Cool right?

Finally, let’s add some state exceptions to wrap this thing up. Remember us modifying data-progress-state in our JS code? We’re going to respond to those changes now:

[data-progress-state="complete"] .progress-indicator__progress-circle {
  fill: var(--progress-indicator-color-complete);
}

[data-progress-state="complete"] .progress-indicator__count {
  display: none;
}

[data-progress-state="complete"] .progress-indicator__check {
  display: revert;
}

The first rule changes the fill colour of our circle to the complete colour. There’s no fallback here because the icon is demonstrating completeness too.

The second rule hides the text label, followed by the third rule which reverts the display state of the icon, allowing its default to shine through, showing it visually.

And with all of that done, that’s a wrap!

See the Pen The finished demo by Andy Bell (@piccalilli) on CodePen.

Wrapping up

I was blown away by how many of you attempted this challenge. I honestly thought no one would be interested in Front-End Challenges Club with it being idle for years at this point, but I’m glad I was completely wrong in that assumption.

My favourite attempt was by Noah, because they also shared some good notes about their build too. I’m a sucker for a blog post!

I deliberately didn’t add a rounded line cap to the indicator’s stroke because I wanted to free up people to use more CSS-based approaches. Props to Noah and folks like Mayank who really pushed the boat out in that sense.

Finally, Amit and Kevin both recorded videos of their solutions. I love to see that and you should also check them out. There’s many ways to build this component and I’m really happy that the front-end community stepped up to demonstrate that 🙌

Front-End challenge: progress indicator

Andy Bell — Mon, 26 Feb 2024 08:23:09 GMT

Ooof it’s been a while since there was a Front-End Challenges Club. Just [checks notes] 3 and a half years…

This is a handy little component that visually shows progress on a circular path. On the surface, it looks simple, but there’s lots to consider with state and how assistive technology can understand it.

Here’s the default and completed state:

Points to consider

What is the experience going to be like when someone doesn’t have JavaScript enabled?
What technology is best suited for this component?
How can JavaScript and CSS communicate well?

Assets

I create a Figma composition for this challenge, which you can view either with a free account or anonymously. Here’s some links:

Here’s some CSS Custom Properties you might find useful too:

:root {
  --font-base: 'Space Mono', monospace;
  --color-dark: #1f1a38;
  --color-dark-glare: #989ea9;
  --color-success: #76f7bf;
}

Wrapping up

I’ll publish my solution to this challenge soon. Until then, have fun building it!

If you share your version, make sure you let me know and as always, I’ll pick my favourite and share it with you in my solution post.

Solution: Progress Stepper

Andy Bell — Thu, 29 Oct 2020 00:00:00 GMT

This is the solution for Challenge #008.

You’d be forgiven for thinking that this challenge is going to require a lot of HTML elements to get it working, because when you scratch under the surface, there’s a lot going on and plenty to consider. Those of you that are not new to Front-End Challenges Club will be all too aware of this theme by now.

Luckily, we can actually build this challenge with a pretty darn slim and semantic HTML base. The CSS does admittedly take the brunt of the work, though, but let’s dive in and learn some cool stuff regardless.

This solution has the following code files:

index.html
css/global.css

You can see a live demo or download a complete version of what we’re making in this solution, here.

HTML

As always, let’s start with a nice HTML shell. Open up your index.html file and add the following:



  
    
    
    
    Front-End Challenges Club #008

This is our core structure and as you can see, it’s pretty simple. We’re pulling in our CSS, along with a CDN version of my modern reset that I use. We’re also pulling in some fonts directly from Google Fonts.

Now we have our HTML shell, let’s add our main stepper component markup. We’ll add it all in one chunk and go through it afterwards. Open up index.html and add the following to it, between the opening and closing tags:


  
    
      Step one
      Your basket
    
    
      Step two
      Your details
    
    
      Step three
      Payment
    
    
      Step four
      Order complete

Is that it?? Hell yeh it is. Let’s break it down:

We use an ordered list, because this stepper has specifically ordered content
We add an aria-label to describe what this list is. We only do this because of what we implement in the next point, so it’s helpful to provide some more context to screen readers.
Inside each list, we hide Step X from screen readers with aria-hidden="true". Because we use an
1. We’re using aria-current="step" which tells assistive technology, such as screen readers that this item is the current step. We’re using data-status to hook onto finite state in our CSS too, which we will get into more detail with later on
That’s our lot for HTML. Importantly, if no CSS manages to load, this list will work perfectly well as our stepper. Good ol’ progressive enhancement in action.

CSS

Let’s start off by extending the root custom properties that I provided in the challenge post.

Add the following to css/global.css:
```
:root {
  --color-light: #fdfdfd;
  --color-dark: #27474e;
  --color-mid: #496970;
  --color-primary: #f3344a;
  --color-primary-glare: #f4d7da;
  --color-secondary: #678c94;
  --color-secondary-glare: #ebf0f1;
  --font-condensed: 'Saira Condensed', sans-serif;
  --font-sans: 'Asap', sans-serif;
  --shadow: 0px 0px 40px rgba(39, 71, 78, 0.1);
  --size-300: 0.88rem;
  --size-400: 1rem;
  --size-500: 1.44rem;
  --size-600: 2rem;
  --size-700: 2.5rem;
}
```
The colours and treatments are the same. All I added here is some fonts and a low-key size scale for keeping things consistent.

Let’s add the following global styles to our CSS next:
```
body {
  font-family: sans-serif;
  background: var(--color-light);
  color: var(--color-dark);
  display: grid;
  place-items: center;
}
```
There’s not much to talk about here as it’s all straightforward. We’re using the ol’ place-items CSS Grid trick purely for demo purposes to frame the finished stepper nicely.

Now, let’s start on the stepper component itself. Add the following to your CSS:
```
.stepper {
  --stepper-y-space: var(--size-500);
  --stepper-x-space: var(--size-700);
  --stepper-modifier: 1.5ex;

  border: 1px solid var(--color-secondary-glare);
  padding: var(--size-600);
  box-shadow: var(--shadow);
  border-radius: var(--size-400);
  min-width: 20rem;
  counter-reset: steps;
}
```
The first thing to note is that we are setting some specific custom properties for this component. These will make spacing and positioning nice and consistent, without having magic numbers in our calculations.

The --stepper-modifier is a handy property that we are going to use for more fine-grained control. We use an ex unit, which is the height of the x character (x-height) in your chosen font and size. This helps us position things flush with our text with a unit that’s designed for exactly that.

Lastly, we’re using CSS counters in this solution. We’re resetting the steps counter which means that each instance of .stepper on a page starts at 1.

Next up: list styles. Add the following to your CSS:
```
.stepper [role='list'] {
  font-family: var(--font-condensed);
  line-height: 1.1;
  text-transform: uppercase;
  margin: calc(var(--stepper-y-space) * -1) 0 0 0;
  padding: 0;
  list-style: none;
}

.stepper li {
  padding-left: var(--stepper-x-space);
  padding-top: var(--stepper-y-space);
  position: relative;
  counter-increment: steps;
}
```
You might notice that we are using [role="list"] as a selector. Something I was made aware of recently is that if you remove list styles from a list, VoiceOver will sometimes not announce it as a list, which is…well…incredibly frustrating. We could select the