Change Safari 10.1 to Safari 11 in Grade C browser example

querkmachine commented 5 months ago

The summary of browser grades include Safari 10.1 (macOS) and 10.3 (iOS) as examples of Grade C browsers.

However in the Grade C section of the document it's mentioned that Safari 10.1 will not run our JavaScript as (although it technically supports type="module") it fails the prerequisite support tests present in Frontend. That section also (confusingly) lists Safari 11 (macOS) as being the minimum for Grade C, not 10.1.

This is confusing, as different parts of the document use different Safari versions as the minimum supported version for Grade C. It also does not mention that Safari 10.3 (iOS) is subject to the same issues as Safari 10.1 (macOS).

Changes

Update the summary at the top of the document to list Safari 11 as the minimum supported Grade C version.
- Although Safari 11 isn't the first version to support modules, it is the earliest version that doesn't fail Frontend's support checks, which is the information most people viewing the document will actually be looking for.
Likewise, updates the Grade C section to list Safari 11 as the minimum supported version.
Updates the Grade C footnote to clarify that Safari 10.1 (macOS) and Safari 10.3 (iOS) both support modules, but not nomodule, and consequentially will not run any Frontend component JavaScript.

Thoughts

Are there other browsers that support modules but not nomodule? Maybe there's room for a Grade D in here... 🤔

github-actions[bot] commented 5 months ago

:clipboard: Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	113.34 KiB
dist/govuk-frontend-development.min.js	41.88 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	87.42 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	82.11 KiB
packages/govuk-frontend/dist/govuk/all.mjs	981 B
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	113.33 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	41.87 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	4.86 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	79.24 KiB	39.84 KiB
accordion.mjs	23.5 KiB	12.39 KiB
button.mjs	5.98 KiB	2.69 KiB
character-count.mjs	22.4 KiB	9.92 KiB
checkboxes.mjs	5.83 KiB	2.83 KiB
error-summary.mjs	7.89 KiB	3.46 KiB
exit-this-page.mjs	17.1 KiB	9.26 KiB
header.mjs	4.46 KiB	2.6 KiB
notification-banner.mjs	6.26 KiB	2.62 KiB
password-input.mjs	15.15 KiB	7.25 KiB
radios.mjs	4.83 KiB	2.38 KiB
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.13 KiB	6.11 KiB

View stats and visualisations on the review app

Action run for 1099d1cbe44dd4a35f5aa8f42625f7d6096a2443

domoscargin commented 5 months ago

The problem is we've defined Grade C as everything not in A or B that supports <script type="module">, which includes Safari 10.1, even if we do the noModule check before it can do anything.

Because the type attribute is present but has a value older browsers (Grade X) don't understand, they should not process the <script> block. Safari 10.1, however, will process the <script> block, and thus we have to ensure our script runs and doesn't break anything.

querkmachine commented 5 months ago

Truuuuue. I suppose Safari 10.1 is just an annoying special case. From our perspective, it's JS enabled but subsequently has everything turned off (including "necessary enhancements"), whereas from a user perspective it just doesn't appear to run JS at all.

I still think the documentation is a little confusing as-is, as the Grade C section appears to list Safari 11 as the minimum version that's in Grade C, contrary to the summary at the top of the page. It tripped me up, at least!

domoscargin commented 5 months ago

I wonder if we should add some kind of link to documentation in this error message: https://github.com/alphagov/govuk-frontend/blob/56094f0efbcf316dce42f377cecb08463b6ea002/packages/govuk-frontend/src/govuk/errors/index.mjs#L40

But not sure how many people who get into this specific case will be checking the console.

As for the documentation, maybe we can add a "special cases" heading or something in the Grade C section so that it's clearer there's some niche case?

romaricpascal commented 5 months ago

Thinking the issue might be with the definition of what we're supporting. We document that we run in browsers that support <script type="module"> where actually, we make the cut at browser that support <script nomodule>. I think that if we clarify the feature we base the support on, we could clarify to Safari 11 without ambiguity.

Maybe with either:

'browsers that support <script nomodule>', but that's a bit cryptic
'browsers that fully support ES6 Modules'

domoscargin commented 5 months ago

I like the second option for simplicity. Then we could simplify the Grade C section documentation as well:

Grade C

This grade covers browsers not in Grade A or B which fully support Githubissues.

Githubissues is a development platform for aggregating issues.

alphagov / govuk-frontend