Prefers reduced motion with transitions

[christopherreay]

I looked this up on google, I couldnt find any pages with preferes reduced motion and iconify-icon.

is there a thing for that?

[christopherreay]

WOOP I AM THE THREE HUNDRED :)

[cyberalien]

There is nothing to do in icon component.

Browsers natively don't change icons for reduced motion setting. For icon component removing animations from icons is not possible without adding extensive icon parser.

It is possible to swap icon, but then you need to define an alternative icon. It should be done in your code, not in icon component.

[christopherreay]

Yeah makes sense, in terms of icon parsing, which is clearly not within scope of iconify-icon.

Is there a space for it in documentation?
In general, I think very clear documentation about aria / accessibility is a "good thing"

This project is one of better things that exists on the developer's internet, so its nice to see that side of things promoted in a space like this.

Bootstrap do a great job of it... almost everything else (not everything, but a majority), just sort of... ignores it, or tries to hide it and gets it half done, imae

Have you considered / is there a space for accessibility documentation (there may be some i havent noticed).

If not Id be willing to contribute if you want.

thanks again for the great product. Will donate when I can

[cyberalien]

I don't think it belongs to documentation. Just like it doesn't belong to SVG docs.

Animations are not part of icon component. It only displays icons. Some icons just happen to be animated.

Methods of dealing with reduced motion heavily depends on implementation. In CSS it is easy, but for icon component it is not. Code for querying state depends on framework used, which has nothing to do with icon component.

Code is not icon component specific, just like code with dealing with SVGs. It would be something like this (not tested, but probably it would work):

<script setup lang="ts">
const reducedMotion = window.matchMedia('prefers-reduced-motion').matches;
</script>
<template>
 <iconify-icon :icon="reducedMotion ? 'basic:icon' : 'animated:icon'" />
</template>

However that doesn't account for SSR - it would throw error in Nuxt because window does not exist. For React code would be similar and again should account for SSR.... and so on. There are many frameworks out there, many ways to deal with it.

That code has nothing to do with icon component. It would be identical when using basic SVG or any other element that can be changed depending on prefers-reduced-motion setting. Therefore it does not belong to icon component docs.

[christopherreay]

it seems quite that you understand very clearly the how's and why's of this, as an expert in components, displaying stuff, and the interaction of the web component with frameworks. that, my friend, is worth documenting. i accept your point as to the formal relationship. reaching out for accessibility is good

…

On Thu, 25 Apr 2024, 01:18 Vjacheslav Trushkin, ***@***.***> wrote: I don't think it belongs to documentation. Just like it doesn't belong to SVG docs. Animations are not part of icon component. It only displays icons. Some icons just happen to be animated. Methods of dealing with reduced motion heavily depends on implementation. In CSS it is easy, but for icon component it is not. Code for querying state depends on framework used, which has nothing to do with icon component. Code is not icon component specific, just like code with dealing with SVGs. It would be something like this (not tested, but probably it would work): <script setup lang="ts">const reducedMotion = window.matchMedia('prefers-reduced-motion').matches;</script> <template> <iconify-icon :icon="reducedMotion ? 'basic:icon' : 'animated:icon'" /> </template> However that doesn't account for SSR - it would throw error in Nuxt because window does not exist. For React code would be similar and again should account for SSR.... and so on. There are many frameworks out there, many ways to deal with it. That code has nothing to do with icon component. It would be identical when using basic SVG or any other element that can be changed depending on prefers-reduced-motion setting. Therefore it does not belong to icon component docs. — Reply to this email directly, view it on GitHub <#300 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAB2PPXDHMXQMLI2KIN6ZNTY7CU33AVCNFSM6AAAAABGXCQQD6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANZWGUZTANBZHE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[cyberalien]

Hm, that makes sense. Maybe as a blog post or something.