From f120f97556fcd1edc8e59650080d484c9800d334 Mon Sep 17 00:00:00 2001 From: Valerie Young Date: Thu, 17 Dec 2020 18:03:08 -0800 Subject: [PATCH 1/4] Update link example to use SVG and inline SVG for the CSS:before example --- examples/link/css/link.css | 2 +- examples/link/images/w3c-logo.png | Bin 2304 -> 0 bytes examples/link/images/w3c-logo.svg | 6 ++++++ examples/link/link.html | 2 +- 4 files changed, 8 insertions(+), 2 deletions(-) delete mode 100644 examples/link/images/w3c-logo.png create mode 100644 examples/link/images/w3c-logo.svg diff --git a/examples/link/css/link.css b/examples/link/css/link.css index 920a8343d1..5dff32d739 100644 --- a/examples/link/css/link.css +++ b/examples/link/css/link.css @@ -21,7 +21,7 @@ [role="link"].link3::before { display: block; - content: url("../images/w3c-logo.png"); + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' height='143px' width='210px' version='1.1'%3E%3Cpath d='m52.352 24.412l16.955 57.643 16.953-57.643h45.964v5.73l-17.307 29.816c6.08 1.949 10.678 5.498 13.795 10.641 3.119 5.146 4.68 11.184 4.68 18.121 0 8.578-2.283 15.787-6.844 21.631s-10.465 8.768-17.713 8.768c-5.458 0-10.211-1.732-14.262-5.201-4.054-3.469-7.054-8.164-9.002-14.09l9.585-3.975c1.404 3.586 3.256 6.412 5.556 8.475 2.299 2.066 5.008 3.1 8.125 3.1 3.271 0 6.041-1.832 8.301-5.494 2.262-3.664 3.393-8.066 3.393-13.215 0-5.691-1.209-10.096-3.623-13.213-2.811-3.662-7.215-5.496-13.216-5.496h-4.674v-5.611l16.367-28.297h-19.755l-1.124 1.914-24.031 81.088h-1.169l-17.54-58.691-17.536 58.691h-1.168l-28.056-94.696h12.276l16.953 57.643 11.46-38.815-5.611-18.826h12.273v-0.004z' fill='%23005A9C'/%3E%3Cpath d='m196.02 24.412c-2.41 0-4.574 0.869-6.215 2.535-1.74 1.768-2.709 4.051-2.709 6.412s0.922 4.549 2.611 6.266c1.717 1.74 3.928 2.686 6.314 2.686 2.334 0 4.6-0.945 6.361-2.658 1.689-1.641 2.611-3.828 2.611-6.289 0-2.387-0.945-4.623-2.584-6.289-1.7-1.745-3.94-2.663-6.38-2.663zm7.78 9.024c0 2.064-0.799 3.979-2.26 5.393-1.543 1.494-3.457 2.289-5.57 2.289-1.986 0-3.949-0.818-5.418-2.311-1.465-1.494-2.287-3.406-2.287-5.443 0-2.039 0.846-4.027 2.361-5.566 1.416-1.443 3.328-2.211 5.416-2.211 2.139 0 4.051 0.799 5.543 2.311 1.45 1.438 2.22 3.373 2.22 5.538zm-7.53-5.321h-3.826v10.143h1.914v-4.324h1.891l2.063 4.324h2.137l-2.264-4.621c1.465-0.301 2.313-1.293 2.313-2.734 0.01-1.84-1.39-2.788-4.22-2.788zm-0.35 1.244c1.789 0 2.609 0.498 2.609 1.74 0 1.191-0.82 1.617-2.563 1.617h-1.617v-3.357h1.57z'/%3E%3Cpath d='m180.97 23.881l1.988 12.09-7.039 13.469s-2.701-5.715-7.191-8.875c-3.781-2.664-6.246-3.244-10.1-2.449-4.949 1.021-10.561 6.938-13.01 14.234-2.93 8.727-2.959 12.953-3.063 16.832-0.164 6.223 0.816 9.896 0.816 9.896s-4.275-7.906-4.234-19.486c0.027-8.268 1.328-15.764 5.152-23.16 3.365-6.504 8.367-10.408 12.807-10.867 4.59-0.473 8.215 1.738 11.02 4.131 2.941 2.516 5.916 8.01 5.916 8.01l6.92-13.825z'/%3E%3Cpath d='m181.84 92.289s-3.111 5.563-5.049 7.705c-1.939 2.145-5.408 5.918-9.691 7.807-4.283 1.887-6.529 2.24-10.764 1.836-4.229-0.406-8.16-2.855-9.537-3.877s-4.898-4.029-6.889-6.836c-1.992-2.807-5.102-8.416-5.102-8.416s1.732 5.623 2.82 8.01c0.623 1.375 2.541 5.576 5.266 9.232 2.541 3.41 7.475 9.283 14.973 10.609 7.498 1.328 12.65-2.041 13.926-2.855 1.273-0.814 3.961-3.066 5.664-4.889 1.775-1.896 3.457-4.32 4.385-5.773 0.682-1.063 1.789-3.215 1.789-3.215l-1.79-9.331z'/%3E%3C/svg%3E"); width: 153px; height: 104px; } diff --git a/examples/link/images/w3c-logo.png b/examples/link/images/w3c-logo.png deleted file mode 100644 index 681f5b8dd8a70ef0313dcceb59bd6e9437eb3ab3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2304 zcmV+b3IFzqP);`aFZ*4EYlL6PzC z@osKzp`oGS=kJ-BnRhJZby3#jmr9M7B)!ylzvd(3Pv`KTRy1Kepe6D0ue<;M&s`uh$)sTY-Y)0GT_fZ$e_n9=S;M=J zx^`h_^phmR?+*EDIO3m+pHZvTTMx+4DX3&%^Nlud)yoGe{=v=*#|z=9yn4TGj#W>5 z)pYsaNiTNd^w)!~{Q1`Bcd6-)?AL);)y}KJUg6bQy8;P1Z0P1hdIM*%T&~vN&SE4k z*!;m=Zu-PPnC+~z`u+o2m59>%btxubE_a!Ij#Gx~)LL%S8OvvZ=Vlds=3B@Ig1(K{ z@sS&SnlMY(HHi(=Khlry0q6Cd@*1|pB^W269!FEpGJ(KXaGzFiCO__KwA_6sHt4!OD93+FOSn(LqR zm%WR;idh~|F-gNhYgz+Z^V1gv(h5)Vx1E*A%WZY?kJN{gZpO=Lxv38mq9P|AN0qiN zRNDvwcxv*x1*Tatx|j_$5|lj)Eq9-r%guQFcAW0sarTMR+0%PP1##4eln9Mfb>cbr z_^N!pK|j)RPr}-aOBC+aE4T!8@vv6bNc1^ACY5NPeI@@(5mO8%j}yk-9R{2g|FT-*XOYa`#R`%$1_q z{Yf#T)^cPV)peyf)CyA7xq>Bk%A>#oswvbQb6U#vaZYS0qrB5(@4G@`#ob0eqrL#WdCDdE>z)n_Jks|9TQxW<3 z3?HJct^k9K*JB2DU>qxPvYE!0w}Uty#T zv!Tap!i{Hb%N7JA`iCE=Y6jfkKs$6NQ@sR?-bOYd1Ut)n9}rPI(6NSR^2#{FW;4B2d|@_Ovwq5}4>F!hKF9`N$Ax4# zvLv+ZDbvBKC_z|=_DnwXBbHnFiUaE%h$%F7G9ks1(6{Wtv*!_k=Aqz>K8yR53#L^c zt0~5~7Tjd8;Z~$xaFZFXl#GGFnxE-}T&UCHu+L}5eIRt4GT-5%c`drjwuTXgCBUbC z#KI={!YU6XJ@&Zy=CUbO)TNfyx9BrYK3N|#oJ6YewOV!x@&5yK36(NYgD7+TCpH#O z0q+=sN9E22N*jNRVsG!c=7=%E3R2^B^h2B#q+dun> z($-XYVSJsP_Zt8j$lkxMI_oA!+IQV3ayK>W#b^_1c(&HqioDaKmW({`4?bHe%gqP# zPM+;RZA2L9l8(E7x(uW^n5pTZ-lu`EZW+TAiFgS|l*F$=A+jH9x10i+Z zEIUECH(Aepy2!?3MN@plNDT>8YiT`iR6M9C%y+VO_#IEST=(fsT;FWgAPsHVn?>CQtIhg4A+`2CFufFW4W@p5P|RFaEn_Q3%EPA<^>LB8|Jj zd_6#(E8__E;u_SGvc88qTngHlaLV@dCXTDMt$ycwH+lAhhcT3xXyVI;=H9g(AT;@r z+W1*oPMjBqk)?j;jw2&zuu9_!_1M%C`$u8ciLD`xN2Slogafs_ejt=16HG>q=jGZI z_~+wvx;@J(ts&Q{jKfm#Why|tIBIX3;K}=o`^qew?ITB@>2Eh(YmaH!-&A;b`l#d3D5~H4^}raZ*7f&?!a!eI z9m^XhuXiotvwjSEcVs$`2s0KmPS*15qP(KBdUz&k!R@bTr21zuetg_{evq{?Ss1aa z#aKByy}fYZ=&hE;)OaHXF)JtuXUDI35Cps1)}Anc)@86*3@$H-X^9dgN|Y#3qC|=R aG5!P2v4lnYs_nl30000 + + + + + diff --git a/examples/link/link.html b/examples/link/link.html index 5b1a8d6087..110060d952 100644 --- a/examples/link/link.html +++ b/examples/link/link.html @@ -78,7 +78,7 @@

Examples

role="link" onclick="goToLink(event, 'http://www.w3.org/')" onkeydown="goToLink(event, 'http://www.w3.org/')" - src="images/w3c-logo.png" + src="images/w3c-logo.svg" alt="W3C Website"> From 9bb38c001473c53c8483f5a810abb0b4a4f87ac3 Mon Sep 17 00:00:00 2001 From: Valerie Young Date: Fri, 18 Dec 2020 14:06:50 -0800 Subject: [PATCH 2/4] Update size of SVG --- examples/link/css/link.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/link/css/link.css b/examples/link/css/link.css index 5dff32d739..0ee3827095 100644 --- a/examples/link/css/link.css +++ b/examples/link/css/link.css @@ -22,6 +22,6 @@ [role="link"].link3::before { display: block; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' height='143px' width='210px' version='1.1'%3E%3Cpath d='m52.352 24.412l16.955 57.643 16.953-57.643h45.964v5.73l-17.307 29.816c6.08 1.949 10.678 5.498 13.795 10.641 3.119 5.146 4.68 11.184 4.68 18.121 0 8.578-2.283 15.787-6.844 21.631s-10.465 8.768-17.713 8.768c-5.458 0-10.211-1.732-14.262-5.201-4.054-3.469-7.054-8.164-9.002-14.09l9.585-3.975c1.404 3.586 3.256 6.412 5.556 8.475 2.299 2.066 5.008 3.1 8.125 3.1 3.271 0 6.041-1.832 8.301-5.494 2.262-3.664 3.393-8.066 3.393-13.215 0-5.691-1.209-10.096-3.623-13.213-2.811-3.662-7.215-5.496-13.216-5.496h-4.674v-5.611l16.367-28.297h-19.755l-1.124 1.914-24.031 81.088h-1.169l-17.54-58.691-17.536 58.691h-1.168l-28.056-94.696h12.276l16.953 57.643 11.46-38.815-5.611-18.826h12.273v-0.004z' fill='%23005A9C'/%3E%3Cpath d='m196.02 24.412c-2.41 0-4.574 0.869-6.215 2.535-1.74 1.768-2.709 4.051-2.709 6.412s0.922 4.549 2.611 6.266c1.717 1.74 3.928 2.686 6.314 2.686 2.334 0 4.6-0.945 6.361-2.658 1.689-1.641 2.611-3.828 2.611-6.289 0-2.387-0.945-4.623-2.584-6.289-1.7-1.745-3.94-2.663-6.38-2.663zm7.78 9.024c0 2.064-0.799 3.979-2.26 5.393-1.543 1.494-3.457 2.289-5.57 2.289-1.986 0-3.949-0.818-5.418-2.311-1.465-1.494-2.287-3.406-2.287-5.443 0-2.039 0.846-4.027 2.361-5.566 1.416-1.443 3.328-2.211 5.416-2.211 2.139 0 4.051 0.799 5.543 2.311 1.45 1.438 2.22 3.373 2.22 5.538zm-7.53-5.321h-3.826v10.143h1.914v-4.324h1.891l2.063 4.324h2.137l-2.264-4.621c1.465-0.301 2.313-1.293 2.313-2.734 0.01-1.84-1.39-2.788-4.22-2.788zm-0.35 1.244c1.789 0 2.609 0.498 2.609 1.74 0 1.191-0.82 1.617-2.563 1.617h-1.617v-3.357h1.57z'/%3E%3Cpath d='m180.97 23.881l1.988 12.09-7.039 13.469s-2.701-5.715-7.191-8.875c-3.781-2.664-6.246-3.244-10.1-2.449-4.949 1.021-10.561 6.938-13.01 14.234-2.93 8.727-2.959 12.953-3.063 16.832-0.164 6.223 0.816 9.896 0.816 9.896s-4.275-7.906-4.234-19.486c0.027-8.268 1.328-15.764 5.152-23.16 3.365-6.504 8.367-10.408 12.807-10.867 4.59-0.473 8.215 1.738 11.02 4.131 2.941 2.516 5.916 8.01 5.916 8.01l6.92-13.825z'/%3E%3Cpath d='m181.84 92.289s-3.111 5.563-5.049 7.705c-1.939 2.145-5.408 5.918-9.691 7.807-4.283 1.887-6.529 2.24-10.764 1.836-4.229-0.406-8.16-2.855-9.537-3.877s-4.898-4.029-6.889-6.836c-1.992-2.807-5.102-8.416-5.102-8.416s1.732 5.623 2.82 8.01c0.623 1.375 2.541 5.576 5.266 9.232 2.541 3.41 7.475 9.283 14.973 10.609 7.498 1.328 12.65-2.041 13.926-2.855 1.273-0.814 3.961-3.066 5.664-4.889 1.775-1.896 3.457-4.32 4.385-5.773 0.682-1.063 1.789-3.215 1.789-3.215l-1.79-9.331z'/%3E%3C/svg%3E"); - width: 153px; - height: 104px; + width: 210px; + height: 143px; } From 86a5f525a033e9c37f0717373eca9bebd72c2d42 Mon Sep 17 00:00:00 2001 From: Valerie Young Date: Fri, 18 Dec 2020 14:07:28 -0800 Subject: [PATCH 3/4] Add codepen button to link example --- examples/css/core.css | 6 ++++++ examples/link/link.html | 14 +++++++------- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/examples/css/core.css b/examples/css/core.css index 83204eb086..f3501bc367 100644 --- a/examples/css/core.css +++ b/examples/css/core.css @@ -55,6 +55,12 @@ table.data.attributes tbody td { hyphens: manual; } +/* We need to override the top margin for the link example */ + +th .example-header { + margin-top: 1em; +} + .example-header > :first-child { margin: 0; } diff --git a/examples/link/link.html b/examples/link/link.html index 110060d952..d229e7a76a 100644 --- a/examples/link/link.html +++ b/examples/link/link.html @@ -50,7 +50,7 @@

Examples

- 1 +
1
span element with text content. @@ -67,7 +67,7 @@

Examples

- 2 +
2
img element with alt attribute. @@ -84,7 +84,7 @@

Examples

- 3 +
3
CSS :before content property on a span element. @@ -175,7 +175,7 @@

Role, Property, State, and Tabindex Attributes

Javascript and CSS Source Code

-
    +
    • CSS: link.css @@ -202,9 +202,9 @@

      Link 3

From d2cdc70f73daa03afecedbcd6072446dade72c7e Mon Sep 17 00:00:00 2001 From: Valerie Young Date: Fri, 18 Dec 2020 14:09:23 -0800 Subject: [PATCH 4/4] Update link example ot use https --- examples/link/link.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/link/link.html b/examples/link/link.html index d229e7a76a..c4f0fab8b6 100644 --- a/examples/link/link.html +++ b/examples/link/link.html @@ -59,8 +59,8 @@

Examples

+ onclick="goToLink(event, 'https://www.w3.org/')" + onkeydown="goToLink(event, 'https://www.w3.org/')"> W3C website @@ -76,8 +76,8 @@

Examples

W3C Website @@ -94,8 +94,8 @@

Examples

tabindex="0" role="link" class="link3" - onclick="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')" - onkeydown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')" + onclick="goToLink(event, 'https://www.w3.org/TR/wai-aria-practices/')" + onkeydown="goToLink(event, 'https://www.w3.org/TR/wai-aria-practices/')" aria-label="W3C website">