RE: Focus-appearance flipped version

>  I'm not sure I follow. It sounds like we are in agreement on what it should do; If you have two disconnected parts to a component, each part needs to have a focus indicator. I think that means treat them as though they're independent areas, no?
That wasn’t how we dealt with it previously. I know it’s tech-specific, but there’s a gotcha where applying a border as your focus-style because it leaves a gap for inline links: https://codepen.io/alastc/pen/abpmvNG

You can then have a situation where something passes/fails based on whether it wraps, which is not helpful.
I don’t think that’s the case for outline, so we might consider that a niche case.

> > I wonder if we can align the definition of perimeter with the CSS border box?

> My understanding is that you specifically didn't want to do that, to address the scenario where padding is used to extend the touch target size.
It wasn’t padding as such, it was where a script is used to make a wider hit-area. E.g. a ‘card’ where the heading is the link, but the whole card is clickable.
Overall, it makes sense to me as content + padding + border is generally what people expect is part of the component, and margin is not.

> On top of that, border-box is technology specific. SVG doesn't have an equivalent. Not sure about other tech, but I doubt they all work like HTML does.
Of course, but the core concept is “the component”. Different technologies will define that differently, so if anything that is an argument to keep it simple. We can provide informative text to cover different technologies.

> On top of that, there are lots of ways to clip a border-box. If we required the exact border-box, you'd have the requirement extend to clipped parts.
By clipping, do you mean chunks being removed visually and from the hit area? E.g. with border-radius?
In neither case had we required border-box, it was perimeter or shortest-side. You’d asked for the technical definition, which may not be the best path to go down.

> Component box
> The smallest rectangle, aligned on the X and Y-axis, that can be drawn around the visible parts content of the component. Shadows, highlights and other effects around a component that largely blend into the background are not considered to be part of a component. Where a component consists of disconnected parts, such as a link that wraps onto multiple lines, each part has its own component box.

> Note: In CSS the box of a component without border or background usually corresponds to the content box. If the element has a border or background, this is the border-box instead. If the element uses outline or box-shadow to simulate the effect of a border, the component box extends to the simulated border.

This feels more complex because it doesn’t align with the default for many cases - the outline.

E.g. for a flat-design button with no border/background, or a standard link, a box around the content is less than the outline would be. That doesn’t particularly affect the feasibility, but it means people scratching their heads trying to work it out more often.


> Thinking about minimum area a little more, I'm not sold on the idea of doing this using a bounding box yet. The perimeter of a bounding box on a circle is larger than the perimeter of a circle (8r > 2𝜋r). So a 1px outline on a square component would pass, but that same outline on a circular component or a square component with rounded corners would fail.

Indeed, I think it only makes sense for the second calculation, not the perimeter one. I notice your alternative suggestion removes the perimeter bullet, which I think would trigger many objections. Some on reducing the requirement, and many on complexity. I know what you’re getting at, but if it doesn’t align with something people can visualise easily, it seems random and that you’d have to calculate it every time.


> The opposite can also happen too. If you take the perimeter of all letters in a link, the length of that will usually be greater than that of a bounding box.

I don’t understand that, if the letters fit within the bounding box, they can’t have a greater perimeter? Unless you’re drawing around the letters?!


> The simplest fix to that would be to say the minimum area is shortest diameter times pi (instead of 4), and remove the 2px thickness requirement from it.

I’m assuming you are focused on the second bullet of min area? Pi is a constant, so we’re making it simpler by using 3.14 instead of 4?

Also, without the thickness element (which may be increased tomorrow), it is a far smaller area than the 1st bullet for most (non-square) elements. The thickness is there to make sure it is reasonably visible, without that aspect it would undermine the SC.

Kind regards,

-Alastair