RE: long url reflow technique

Hi Alastair / Jim,

Thanks for the info and yes I’m aware of the issue!

For the examples my first idea was to keep it as basic as possible and not add all needed for full working sites.
In this case I’m not a fan of solving issues deeper that needed, specifically with a * selector for multiple reasons, this is more of a hack than a proper fix.

We can solve it with core grid CSS and that is in my opinion where we need to add it.
For consistency, as I’m using the example page for multiple Techniques, we might want to add it to all examples… agree?

I will do an update on grid  and sticky (and all which will come soon…) if agreed.

The core fix looks like:

.grid,
.subgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media all and (min-width: 576px) {
  .subgrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    ...
  }
  ...
}

@media all and (min-width: 992px) {
  .grid {
    ...
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

Cheers!
Jake

From: Alastair Campbell [mailto:acampbell@nomensa.com]
Sent: woensdag 26 september 2018 16:44
To: Jim Allan <jimallan@tsbvi.edu>
Cc: Abma, J.D. (Jake) <Jake.Abma@ing.com>
Subject: Re: long url reflow technique

Ah, cool, I hadn’t thought of that: The content-width algorithm of grid uses min-width: auto, rather than 0.
Therefore content is allowed to expand without causing scrolling.

Jake would probably be interested in that to, assuming he didn’t know already.

-Alastair

From: Jim Allan <jimallan@tsbvi.edu<mailto:jimallan@tsbvi.edu>>
Date: Wednesday, 26 September 2018 at 15:33
To: Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>>, Eric Eggert <ee@w3.org<mailto:ee@w3.org>>
Cc: LVTF - low-vision-a11y <public-low-vision-a11y-tf@w3.org<mailto:public-low-vision-a11y-tf@w3.org>>
Subject: Re: long url reflow technique

Cool, thanks!

FWIW this was the bit I had to add for the grid to maintain with the long URLS, I discovered in when working on the table scrolling
the default width on grids min-width:auto. the following resets the min-width and allows children to be constrained.
https://daverupert.com/2017/09/breaking-the-grid/


.grid > * {
min-width: 0;
}
.subgrid > * {
min-width: 0;
}

On Tue, Sep 25, 2018 at 6:15 PM Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>> wrote:
Excellent, I ported that over to the WCAG repo and created a PR request:
https://github.com/w3c/wcag/pull/486


I suspect we can simplify the test procedure somewhat, but I’ll have a look at some point when it isn’t after midnight.

Cheers,

-Alastair

From: Jim Allan <jimallan@tsbvi.edu<mailto:jimallan@tsbvi.edu>>
Sent: 25 September 2018 20:45
To: public-low-vision-a11y-tf <public-low-vision-a11y-tf@w3.org<mailto:public-low-vision-a11y-tf@w3.org>>
Subject: long url reflow technique

fixed the grid problem.
comments please.
technique - https://rawgit.com/allanj-uaag/wcag21/tech-reflow/tech-reflow-url.html


example document - https://rawgit.com/allanj-uaag/wcag21/example-reflow-url/example-reflow-url.html



--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315    fax: 512.206.9452 http://www.tsbvi.edu/

"We shape our tools and thereafter our tools shape us." McLuhan, 1964


--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315    fax: 512.206.9452 http://www.tsbvi.edu/

"We shape our tools and thereafter our tools shape us." McLuhan, 1964

-----------------------------------------------------------------
ATTENTION:
The information in this e-mail is confidential and only meant for the intended recipient. If you are not the intended recipient, don't use or disclose it in any way. Please let the sender know and delete the message immediately.
-----------------------------------------------------------------