postcss / postcss.org

Official website for PostCSS
https://postcss.org
MIT License
80 stars 49 forks source link

Solve a11y issue on highlighted code #206

Closed janriemer closed 8 years ago

janriemer commented 8 years ago

Before this change, when JavaScript is disabled, the font-color of elements with class highlight was white on yellow background, which was hard to read. With this change it inherits parent color which is a black-ish color and therefore easier to read (see screenshots attached). Before: postcss-a11y-issue-before After: postcss-a11y-issue_after

thangngoc89 commented 8 years ago

Nice catch. LGTM

mxstbr commented 8 years ago

Awesome, thanks!

marcustisater commented 8 years ago

+1

Great catch, thanks for the PR.

janriemer commented 8 years ago

Wow, that was fast! :rocket: You're welcome! :wink:

thangngoc89 commented 8 years ago

@marcustisater I think you guys should some how prerender the highlighted code. It would eliminate this case. And smaller JS bundle size.

okonet commented 8 years ago

I agree. It wasn't possible before. Not sure it is now.

thangngoc89 commented 8 years ago

@okonet I have no idea how to do it either. Maybe this would solve this issue ? https://github.com/MoOx/statinamic/issues/347

thangngoc89 commented 8 years ago

I think I know how to do this. A dead simple webpack loader will help. Do you guys accept a PR for this ?

poke @okonet

okonet commented 8 years ago

@thangngoc89 I'd like to see it but I'm not sure that having such complexity in the build step (special loader for code samples) is worth it. But I agree the size penalty of highlight.js is way too big for such a use case.

okonet commented 8 years ago

Also there is https://github.com/postcss/postcss.org/issues/167

thangngoc89 commented 8 years ago

The same case apply for midas too. It requires both PostCSS and Midas to render homepage (which needs to be fast). And I agree. It isn't worth it to write a loader just for this.

marcustisater commented 8 years ago

I agree. We need to refactor this, that's why we mentioned Midas before. PR is welcome, try combined it with #167