{"action":"created","issue":{"url":"https://api.github.com/repos/wet-boew/GCWeb/issues/1408","repository_url":"https://api.github.com/repos/wet-boew/GCWeb","labels_url":"https://api.github.com/repos/wet-boew/GCWeb/issues/1408/labels{/name}","comments_url":"https://api.github.com/repos/wet-boew/GCWeb/issues/1408/comments","events_url":"https://api.github.com/repos/wet-boew/GCWeb/issues/1408/events","html_url":"https://github.com/wet-boew/GCWeb/issues/1408","id":368358570,"node_id":"MDU6SXNzdWUzNjgzNTg1NzA=","number":1408,"title":"Incorrect use of <figure> code in Features section, etc","user":{"login":"MichaelDalrymple","id":22506440,"node_id":"MDQ6VXNlcjIyNTA2NDQw","avatar_url":"https://avatars0.githubusercontent.com/u/22506440?v=4","gravatar_id":"","url":"https://api.github.com/users/MichaelDalrymple","html_url":"https://github.com/MichaelDalrymple","followers_url":"https://api.github.com/users/MichaelDalrymple/followers","following_url":"https://api.github.com/users/MichaelDalrymple/following{/other_user}","gists_url":"https://api.github.com/users/MichaelDalrymple/gists{/gist_id}","starred_url":"https://api.github.com/users/MichaelDalrymple/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MichaelDalrymple/subscriptions","organizations_url":"https://api.github.com/users/MichaelDalrymple/orgs","repos_url":"https://api.github.com/users/MichaelDalrymple/repos","events_url":"https://api.github.com/users/MichaelDalrymple/events{/privacy}","received_events_url":"https://api.github.com/users/MichaelDalrymple/received_events","type":"User","site_admin":false},"labels":[{"id":898421697,"node_id":"MDU6TGFiZWw4OTg0MjE2OTc=","url":"https://api.github.com/repos/wet-boew/GCWeb/labels/Meta","name":"Meta","color":"e102d8","default":false},{"id":876478624,"node_id":"MDU6TGFiZWw4NzY0Nzg2MjQ=","url":"https://api.github.com/repos/wet-boew/GCWeb/labels/State:%20Information%20passed%20on","name":"State: Information passed on","color":"ee8310","default":false},{"id":941525274,"node_id":"MDU6TGFiZWw5NDE1MjUyNzQ=","url":"https://api.github.com/repos/wet-boew/GCWeb/labels/State:%20Resolved","name":"State: Resolved","color":"EE8310","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-10-09T19:20:37Z","updated_at":"2018-10-11T19:14:40Z","closed_at":null,"author_association":"NONE","body":"I've recently noticed that the HTML code being used in the WET/AEM templates for the \"Features\" section/component on various pages may be incorrectly coded. Currently, the code being used in the templates is coded as follows:\r\n\r\n```\r\n<figure>\r\n<figcaption>[Feature hyperlink text]</figcaption>\r\n<img src=\"./img/360x203.png\" alt=\"\" class=\"img-responsive thumbnail mrgn-bttm-sm\">\r\n<p>Brief description of the feature being promoted.</p>\r\n</figure>\r\n````\r\n\r\nHowever, the <figcapture> tag by definition is supposed to display captioned text that explains or describes the image, table, or chart contained within the <figure> element. It's purpose is very similar to that of an \"alt tag\", although the <figcapture> would make this captioned text viewable to visitors. \r\n\r\nSee examples here:\r\nhttps://html.com/tags/figcaption/\r\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption\r\nhttps://www.w3.org/Style/Examples/007/figures.en.html\r\n\r\nConsequently, the way that the \"Features\" code is coded currently, the [Feature hyperlink text] is not at all a description/explanation of the figure itself, but instead it’s simply a promotional text link.\r\n\r\nSee examples here:\r\nhttps://www.canada.ca/en/employment-social-development.html\r\nhttps://www.canada.ca/en/treasury-board-secretariat.html\r\nhttps://www.canada.ca/en.html\r\n\r\nMoreover, as it stands right now, when the link text length is inconsistent from one feature to the next (e.g. 1 line vs 2 lines), the image placement misaligns in desktop and tablet view. I would therefore suggest that the image be placed above the text components to resolve this.\r\n\r\nHere is some sample code of a better way to code the \"Features\" boxes that would resolve both issues and which would be similar to how the topic tiles are already being coded:\r\n\r\n```\r\n<div class=\"mwsfeatureimage textimage parbase mrgn-bttm-md col-md-6 col-lg-4\">\r\n<a href=\"\"><img src=\"./img/360x203.png\" alt=\"\" class=\"img-responsive thumbnail mrgn-bttm-sm\">\r\n<h3 class=\"h5\">[Feature hyperlink text]</h3></a>                        \r\n<p>Brief description of the feature being promoted.</p>\r\n</div>\r\n```\r\n\r\n![features - after](https://user-images.githubusercontent.com/22506440/46693068-d1e9cb00-cbd6-11e8-80db-499e773dc3e3.jpg)\r\n![features - before](https://user-images.githubusercontent.com/22506440/46693069-d1e9cb00-cbd6-11e8-82bf-d2a4e92ca69c.jpg)\r\n"},"comment":{"url":"https://api.github.com/repos/wet-boew/GCWeb/issues/comments/429083852","html_url":"https://github.com/wet-boew/GCWeb/issues/1408#issuecomment-429083852","issue_url":"https://api.github.com/repos/wet-boew/GCWeb/issues/1408","id":429083852,"node_id":"MDEyOklzc3VlQ29tbWVudDQyOTA4Mzg1Mg==","user":{"login":"MichaelDalrymple","id":22506440,"node_id":"MDQ6VXNlcjIyNTA2NDQw","avatar_url":"https://avatars0.githubusercontent.com/u/22506440?v=4","gravatar_id":"","url":"https://api.github.com/users/MichaelDalrymple","html_url":"https://github.com/MichaelDalrymple","followers_url":"https://api.github.com/users/MichaelDalrymple/followers","following_url":"https://api.github.com/users/MichaelDalrymple/following{/other_user}","gists_url":"https://api.github.com/users/MichaelDalrymple/gists{/gist_id}","starred_url":"https://api.github.com/users/MichaelDalrymple/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MichaelDalrymple/subscriptions","organizations_url":"https://api.github.com/users/MichaelDalrymple/orgs","repos_url":"https://api.github.com/users/MichaelDalrymple/repos","events_url":"https://api.github.com/users/MichaelDalrymple/events{/privacy}","received_events_url":"https://api.github.com/users/MichaelDalrymple/received_events","type":"User","site_admin":false},"created_at":"2018-10-11T19:14:40Z","updated_at":"2018-10-11T19:14:40Z","author_association":"NONE","body":"Well, in these cases, when used as part of the \"Features\", these images are always going to be decorative and mostly likely wouldn't have a text alternative assigned to them. That said, the figcaption is still not being used correctly since the figcaption is supposed to be linked directly to the fig image. The way it's being used now, it is not."}}
{"actor":{"display_login":"MichaelDalrymple"}}