Re: Focus-appearance flipped version

Hey Alastair,
The inspector shows in most browsers show multiple boxes. In Chrome, the
inner blue box is the content box. The box around it is green, which is the
padding, then the border box is yellow and outside that is the margin which
is orange. Which shows the problem right there. Which one of those is it?

I think what's missing is a definition of what that shape we're trying to
get the perimeter of actually is. I updated my proposal and added a
definition of "component box" (I'm not attached to that name). Here's what
I came up with:

Component box

The smallest rectangle, aligned on the X and Y-axis, that can be drawn
around the visible parts content of the 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 outline, 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 has a box-shadow
or outline the component box extends around the outline or shadow.
I think this addresses most of what we need from it. It uses what is
visible, so that we don't need the "fully obscured" case. Doing that also
ensures that what we have is not tied to anything specific in CSS. This
also addressed the "extended target size" which is just a transparent
padding. The one drawback I think this definition has is that if you have a
component with an outer shadow or glow that's much larger than the actual
component, that the entire shadow is included. Not sure that's something
worth worrying about.

Hope this helps!


On Wed, Mar 24, 2021 at 11:01 PM Alastair Campbell <acampbell@nomensa.com>
wrote:

> On the size measure:
>
>
>
> > Fair, I realise target isn't ideal. On the other hand, then what is it?
>
>
>
> The way we’ve talked about it so far: It is the component (i.e. whatever
> is in the DOM / code), which generally relates to the hit area, but if that
> hit-area is artificially expanded then we can ignore that expansion.
>
>
>
> You rattled off a few options for what it could mean technically, but
> which equates most closely to what you’d see when inspecting an element in
> the browser-inspector?
>
>
>
> [image: Screenshot of some text with a highlight showing the class name
> and size of a link.]
>
>
>
> If there is a more correct (and understandable) term for the component’s
> area, great, but otherwise I think it’s best to stick to what we’ve used
> elsewhere.
>
>
>
>
>
> > Diameter is the distance between two opposite points on the perimeter of
> a shape.
>
>
>
> Huh, I see, I’d just never come across it except in the context of a
> circle. Is it a problem that it has to go through the centre of the object?
> (That’s part of the official definition.)
>
>
>
> In that context I think calling it a ‘border’ seems wrong, so that
> sub-bullet would be:
> “Minimum area: The contrasting area is at least as large as:
>
> (bullet 1), or
>
> * a 4 CSS pixels thick line along the shortest diameter of the unfocused
> component, and no thinner than 2 CSS pixels”
>
>
>
> The term ‘diameter’ is really throwing me, is it just me?
>
>
>
> Previously we’ve tried language “bounding rectangle”, but that caused
> confusion.
>
>
>
> The three options I can see at the moment are:
>
>    1. a 4 CSS pixels border along the shortest side of the unfocused
>    component, and no thinner than 2 CSS pixels. [current]
>    2. a 4 CSS pixels thick line along the shortest diameter of the
>    unfocused component, and no thinner than 2 CSS pixels
>    3. a 4 CSS pixels border along the shortest side of the bounding
>    rectangle of the unfocused component, and no thinner than 2 CSS pixels.
>
>
>
> I think the first is the easiest to understand, and covers the vast
> majority of cases. We could even say that this option is unsuitable if you
> are not using a rectangle…
>
>
>
> Does anyone else have a preference (or can’t live-with) for these options?
>
>
>
> -Alastair
>
>
>
> PS. In progress updated version here:
>
>
> https://docs.google.com/document/d/1KAo-6ID3NlVwdGl7uyjnlM_c28kBoizkjIdC8GXLwn4/edit#heading=h.q1znckui8nn0
>


-- 
*Wilco Fiers*
Axe-core product owner - Facilitator ACT Task Force - Co-chair ACT-Rules