Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add SSR transformer which adds noscript > style[amp-noscript] with base styles #349

Open
westonruter opened this issue Sep 13, 2021 · 2 comments
Labels
Blocked Cannot be worked because of upstream reasons Optimizer SSR Related to the serverside rendering of the Optimizer

Comments

@westonruter
Copy link
Member

As of ampproject/amphtml#20609, AMP now supports a noscript > style[amp-noscript] element to include styles specifically targeting pages on which JS is disabled. This is particularly important to ensure that certain AMP components have all their information accessible to such users. For example, in ampproject/amphtml#20609 (comment) there is the example of amp-accordion where all accordion sections should be forcibly expanded in no-JS context, which can be achieved with this CSS:

amp-accordion > section:not([expanded]) > :last-child {
	display: block !important;
}

(Disregard the use of !important not being allowed in AMP, for which I've opened ampproject/amphtml#36051.)

In the same way as there is an AmpRuntimeCss transformer to inline style[amp-custom] there should also be a transformer to populate noscript > style[amp-noscript] with styles that ensure AMP components are able to be rendered accessibly to users with JS disabled. Part of this effort should include contributing base noscript styles to each component which we can then be downloaded from the AMP CDN.

@schlessera
Copy link
Collaborator

What is the next step here? Does the responsibility to define these accessible styles lie with the AMP team? Do we want to provide a test implementation right away that can later be ported to the AMP infrastructure?

@westonruter
Copy link
Member Author

I think it can be done either way, yes. We could come up with an initial draft of styles that can be used to provide the initial no-JS compatibility and then add them to the noscript > style[amp-noscript], and then surface those styles back up to the AMP team to be incorporated into each component's as a new *.noscript.css stylesheet.

In any case, this is blocked by ampproject/amphtml#36051, since we'd need to be able to override !important styles.

@westonruter westonruter added the Blocked Cannot be worked because of upstream reasons label Oct 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Blocked Cannot be worked because of upstream reasons Optimizer SSR Related to the serverside rendering of the Optimizer
Projects
None yet
Development

No branches or pull requests

2 participants