Carousel Mobile

[jlisilva]

Goal

Garantir que o componente Carousel funcione corretamente em mobile, permitindo edição completa dos slides, visualização expandida e comportamento consistente em diferentes contextos.

Padronização no Design System, evitando variações e retrabalho.
Suporte à acessibilidade, viabilizando a criação de specs completas e garantindo navegação inclusiva.
Melhoria da experiência da pessoa usuária, assegurando interações previsíveis, editáveis e funcionais em qualquer dispositivo.

Context

Atualmente, o Carousel mobile não atende aos requisitos básicos de edição e acessibilidade, gerando retrabalho para designers e risco de inconsistência na entrega para usuários finais.
O objetivo principal desta proposta é corrigir falhas de comportamento, padronizar a edição de instâncias e garantir acessibilidade, permitindo que o componente seja usado de forma confiável em qualquer dispositivo.

Impact

No Design System
Aumento da consistência visual e funcional entre os componentes.
Redução de inconsistências de uso em diferentes contextos (desktop x mobile).
Facilitação da manutenção e evolução, já que nested instances reduzem retrabalho.

Em Acessibilidade
Possibilitar a correta documentação e validação das specs de acessibilidade.
Garantir que o usuário final consiga navegar entre os slides sem perda de contexto.
Melhorar a experiência de pessoas usuárias que dependem de leitores de tela ou navegação assistida.

Na Experiência da Pessoa Usuária
Fluxos mais fluidos e intuitivos em carrosséis, sem falhas de visualização.
Garantia de edição e consistência, evitando bloqueios em jornadas críticas.

Discussion Questions

Nested Instances
Quais seriam os impactos de aplicar nested instances nos assets e ícones em termos de manutenção e flexibilidade?
Há riscos de aumentar a complexidade para os times que consomem o componente?
Esse ajuste poderia facilitar a escalabilidade para outros componentes além do Carousel?

Numeração do Current Slide
A remoção do # no número do Current Slide traria algum impacto em documentação ou no código?
Há alguma regra já definida para numeração de slides no carrousel que devemos seguir?

Comportamento do Carousel em Mobile
O que seria necessário para garantir que todos os slides (1, 2, 3, 4…) sejam editáveis e visualizáveis corretamente?

Documentação e Tutorial no BrandFactory
Vale a pena criar um tutorial no BrandFactory para orientar sobre o uso correto do Carousel?
Que formato seria mais útil: guia rápido, vídeo curto ou passo a passo com capturas de tela?
Quais pontos principais não podem faltar nesse material para reduzir dúvidas e retrabalho?

Additional considerations

Foi solicitado suporte para equipe de OPS e tivemos essa resposta:
opção 1:
Desabilitar clip content do figma para ajustar o comportamento do Carousel em mobile para permitir edição e visualização completa dos slides.

opção 2:
Adicionar os um do lado do outro (do ladinho do Carousel mesmo) informando que os mesmos fazem parte do Carousel

slides:

Do you have a visual proposal?

https://www.figma.com/design/pxsuayTkqlHeQXuAkFd2pS/Handoff-%7C-Unicom----Portabilidade?node-id=24512-92629&t=YDvBk4JkXMF1utPz-4

[aweell]

Hey @jlisilva,

If I'm understanding correctly your need is the ability to "unroll" the carousel so its possible at the same time to see all carousel slides?

Example:

If this is the case is not possible right now due to how the component is built in Figma.

To give you more context: it was possible before https://github.com/Telefonica/mistica-design/blob/production/changelog-versions/18.0.0.md but with the carousel controls we also add this #1993, and forece us to change component structure.

If what i show you as an example is what you're trying to accomplish we can add a property to show the carousel in that way when needed, but we should keep the current format as well.

[jlisilva]

Hey, @aweell,
Yes, it would be ideal to add a property to display the carousel this way when needed, while also maintaining the current format. If you can implement it this way, it would be perfect, Alex!
Thanks for the reply :)

[aweell]

Understood, we've created #2311 to work on this topic.