Skip to content
Snippets Groups Projects

Issue #3171726 by jenniferaube: Claro Shortcuts star fails WCAG Use of Color and Non-text contrast

Open Issue #3171726 by jenniferaube: Claro Shortcuts star fails WCAG Use of Color and Non-text contrast
3 files
+ 50
4
Compare changes
  • Side-by-side
  • Inline

Files

+ 2
2
@@ -61,11 +61,11 @@
width: 1.5rem;
height: 1.5rem;
vertical-align: -0.0625rem;
    • You're modifying the shortcut.pcss.css file here, but we should be modifying the shortcut.pcss.css file and then transpiling the CSS.

Please register or sign in to reply
background: transparent url("data:image/svg+xml,%3csvg height='24' width='96' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='%238e929c'%3e%3cpath d='m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z' fill='%23ffd23f'/%3e%3cg fill='none'%3e%3cpath d='m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z'/%3e%3cpath d='m42.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6' stroke-linecap='square' stroke-miterlimit='3'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") left top / 6rem 1.5rem no-repeat;
background: transparent url("data:image/svg+xml,%3csvg width='96' height='24' xmlns='http://www.w3.org/2000/svg'%3e %3cstyle type='text/css' %3e %3c!%5bCDATA%5b .svg-stroke, .svg-stroke--hover %7bstroke: %23003CC5;%7d .svg-stroke--default %7bstroke: %2355565B;%7d .svg-fill %7bfill: %23003CC5;%7d %40media (forced-colors: active) %7b .svg-stroke %7bstroke: LinkText;%7d .svg-stroke--hover %7bstroke: transparent; fill: LinkText;%7d .svg-stroke--default %7bstroke: LinkText;%7d .svg-fill %7bfill: LinkText;%7d %7d %5d%5d%3e %3c/style%3e %3cg fill='none' fill-rule='evenodd'%3e %3cpath class='svg-stroke' stroke-width='1.5' d='M84.402 18.655L84 18.4l-.402.255-5.89 3.743 1.576-7.116.094-.424-.32-.292-5.292-4.825 6.929-.62.457-.04.172-.426L84 2.008l2.676 6.647.172.426.457.04 6.93.62-5.292 4.825-.321.292.094.424 1.577 7.116z'/%3e %3cpath class='svg-fill' d='M84.236 15.981L84 15.843l-.236.138L80.311 18l.924-3.839.055-.228-.188-.158L78 11.172l4.062-.334.268-.022.101-.23L84 7l1.57 3.586.1.23.268.022 4.062.334-3.102 2.603-.188.158.055.228.924 3.839zM60.402 18.655L60 18.4l-.402.255-5.89 3.743 1.576-7.116.094-.424-.32-.292-5.292-4.825 6.929-.62.457-.04.172-.426L60 2.008l2.676 6.647.172.426.457.04 6.93.62-5.292 4.825-.321.292.094.424 1.577 7.116z'/%3e %3cg stroke-width='1.5'%3e %3cpath class='svg-stroke--hover' d='M36.402 18.655L36 18.4l-.402.255-5.89 3.743 1.576-7.116.094-.424-.32-.292-5.292-4.825 6.929-.62.457-.04.172-.426L36 2.008l2.676 6.647.172.426.457.04 6.93.62-5.292 4.825-.321.292.094.424 1.577 7.116z'/%3e %3cpath class='svg-stroke--default' d='M12.402 18.655L12 18.4l-.402.255-5.89 3.743 1.576-7.116.094-.424-.32-.292L1.765 9.74l6.929-.62.457-.04.172-.426L12 2.008l2.676 6.647.172.426.457.04 6.93.62-5.292 4.825-.321.292.094.424 1.577 7.116z'/%3e %3c/g%3e %3c/g%3e%3c/svg%3e") left top / 6rem 1.5rem no-repeat;
}
[dir="rtl"] .shortcut-action__icon {
background-image: url("data:image/svg+xml,%3csvg height='24' width='96' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='%238e929c'%3e%3cpath d='m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z' fill='%23ffd23f'/%3e%3cg fill='none'%3e%3cpath d='m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z'/%3e%3cpath d='m29.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6' stroke-linecap='square' stroke-miterlimit='3'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg width='96' height='24' xmlns='http://www.w3.org/2000/svg'%3e %3cstyle type='text/css' %3e %3c!%5bCDATA%5b .svg-stroke, .svg-stroke--hover %7bstroke: %23003CC5;%7d .svg-stroke--default %7bstroke: %2355565B;%7d .svg-fill %7bfill: %23003CC5;%7d %40media (forced-colors: active) %7b .svg-stroke %7bstroke: LinkText;%7d .svg-stroke--hover %7bstroke: transparent; fill: LinkText;%7d .svg-stroke--default %7bstroke: LinkText;%7d .svg-fill %7bfill: LinkText;%7d %7d %5d%5d%3e %3c/style%3e %3cg fill='none' fill-rule='evenodd'%3e %3cpath class='svg-stroke' stroke-width='1.5' d='M84.402 18.655L84 18.4l-.402.255-5.89 3.743 1.576-7.116.094-.424-.32-.292-5.292-4.825 6.929-.62.457-.04.172-.426L84 2.008l2.676 6.647.172.426.457.04 6.93.62-5.292 4.825-.321.292.094.424 1.577 7.116z'/%3e %3cpath class='svg-fill' d='M84.236 15.981L84 15.843l-.236.138L80.311 18l.924-3.839.055-.228-.188-.158L78 11.172l4.062-.334.268-.022.101-.23L84 7l1.57 3.586.1.23.268.022 4.062.334-3.102 2.603-.188.158.055.228.924 3.839zM60.402 18.655L60 18.4l-.402.255-5.89 3.743 1.576-7.116.094-.424-.32-.292-5.292-4.825 6.929-.62.457-.04.172-.426L60 2.008l2.676 6.647.172.426.457.04 6.93.62-5.292 4.825-.321.292.094.424 1.577 7.116z'/%3e %3cg stroke-width='1.5'%3e %3cpath class='svg-stroke--hover' d='M36.402 18.655L36 18.4l-.402.255-5.89 3.743 1.576-7.116.094-.424-.32-.292-5.292-4.825 6.929-.62.457-.04.172-.426L36 2.008l2.676 6.647.172.426.457.04 6.93.62-5.292 4.825-.321.292.094.424 1.577 7.116z'/%3e %3cpath class='svg-stroke--default' d='M12.402 18.655L12 18.4l-.402.255-5.89 3.743 1.576-7.116.094-.424-.32-.292L1.765 9.74l6.929-.62.457-.04.172-.426L12 2.008l2.676 6.647.172.426.457.04 6.93.62-5.292 4.825-.321.292.094.424 1.577 7.116z'/%3e %3c/g%3e %3c/g%3e%3c/svg%3e");
}
.shortcut-action--add:hover .shortcut-action__icon,
Loading