{"action":"created","issue":{"url":"https://api.github.com/repos/ckeditor/ckeditor5/issues/1098","repository_url":"https://api.github.com/repos/ckeditor/ckeditor5","labels_url":"https://api.github.com/repos/ckeditor/ckeditor5/issues/1098/labels{/name}","comments_url":"https://api.github.com/repos/ckeditor/ckeditor5/issues/1098/comments","events_url":"https://api.github.com/repos/ckeditor/ckeditor5/issues/1098/events","html_url":"https://github.com/ckeditor/ckeditor5/issues/1098","id":334539748,"node_id":"MDU6SXNzdWUzMzQ1Mzk3NDg=","number":1098,"title":"Inaccessible input for link's URL","user":{"login":"Comandeer","id":1078728,"node_id":"MDQ6VXNlcjEwNzg3Mjg=","avatar_url":"https://avatars3.githubusercontent.com/u/1078728?v=4","gravatar_id":"","url":"https://api.github.com/users/Comandeer","html_url":"https://github.com/Comandeer","followers_url":"https://api.github.com/users/Comandeer/followers","following_url":"https://api.github.com/users/Comandeer/following{/other_user}","gists_url":"https://api.github.com/users/Comandeer/gists{/gist_id}","starred_url":"https://api.github.com/users/Comandeer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Comandeer/subscriptions","organizations_url":"https://api.github.com/users/Comandeer/orgs","repos_url":"https://api.github.com/users/Comandeer/repos","events_url":"https://api.github.com/users/Comandeer/events{/privacy}","received_events_url":"https://api.github.com/users/Comandeer/received_events","type":"User","site_admin":false},"labels":[{"id":1447810404,"node_id":"MDU6TGFiZWwxNDQ3ODEwNDA0","url":"https://api.github.com/repos/ckeditor/ckeditor5/labels/feature:accessibility","name":"feature:accessibility","color":"fef2c0","default":false},{"id":1157637893,"node_id":"MDU6TGFiZWwxMTU3NjM3ODkz","url":"https://api.github.com/repos/ckeditor/ckeditor5/labels/module:ux","name":"module:ux","color":"fef2c0","default":false},{"id":631576958,"node_id":"MDU6TGFiZWw2MzE1NzY5NTg=","url":"https://api.github.com/repos/ckeditor/ckeditor5/labels/package:link","name":"package:link","color":"fef2c0","default":false},{"id":631577327,"node_id":"MDU6TGFiZWw2MzE1NzczMjc=","url":"https://api.github.com/repos/ckeditor/ckeditor5/labels/package:ui","name":"package:ui","color":"fef2c0","default":false},{"id":167749396,"node_id":"MDU6TGFiZWwxNjc3NDkzOTY=","url":"https://api.github.com/repos/ckeditor/ckeditor5/labels/status:discussion","name":"status:discussion","color":"e6e6e6","default":false},{"id":164194247,"node_id":"MDU6TGFiZWwxNjQxOTQyNDc=","url":"https://api.github.com/repos/ckeditor/ckeditor5/labels/type:bug","name":"type:bug","color":"dd4444","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/ckeditor/ckeditor5/milestones/17","html_url":"https://github.com/ckeditor/ckeditor5/milestone/17","labels_url":"https://api.github.com/repos/ckeditor/ckeditor5/milestones/17/labels","id":3245147,"node_id":"MDk6TWlsZXN0b25lMzI0NTE0Nw==","number":17,"title":"next","description":null,"creator":{"login":"Reinmar","id":156149,"node_id":"MDQ6VXNlcjE1NjE0OQ==","avatar_url":"https://avatars2.githubusercontent.com/u/156149?v=4","gravatar_id":"","url":"https://api.github.com/users/Reinmar","html_url":"https://github.com/Reinmar","followers_url":"https://api.github.com/users/Reinmar/followers","following_url":"https://api.github.com/users/Reinmar/following{/other_user}","gists_url":"https://api.github.com/users/Reinmar/gists{/gist_id}","starred_url":"https://api.github.com/users/Reinmar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Reinmar/subscriptions","organizations_url":"https://api.github.com/users/Reinmar/orgs","repos_url":"https://api.github.com/users/Reinmar/repos","events_url":"https://api.github.com/users/Reinmar/events{/privacy}","received_events_url":"https://api.github.com/users/Reinmar/received_events","type":"User","site_admin":false},"open_issues":73,"closed_issues":0,"state":"open","created_at":"2018-04-05T13:15:25Z","updated_at":"2019-07-22T12:37:35Z","due_on":null,"closed_at":null},"comments":25,"created_at":"2018-06-21T15:13:56Z","updated_at":"2019-07-25T14:32:04Z","closed_at":null,"author_association":"MEMBER","body":"## Is this a bug report or feature request? (choose one)\r\n\r\n🐞 Bug report\r\n\r\n## 💻 Version of CKEditor\r\n\r\nVersion from [docs](https://docs.ckeditor.com/ckeditor5/latest/examples/builds/classic-editor.html).\r\n\r\n## 📋 Steps to reproduce\r\n\r\n1. Select some text.\r\n2. Click link button.\r\n\r\n## ✅ Expected result\r\n\r\nShown `input` has proper label that is announced by screen reader.\r\n\r\n## ❎ Actual result\r\n\r\nOnly `[placeholder]` value is announced by VoiceOver, which is confusing as placeholder is set to a URL.\r\n\r\nChrome devtools Accessibility Inspector shows that current label is empty:\r\n<img width=\"312\" alt=\"\" src=\"https://user-images.githubusercontent.com/1078728/41727594-ff2ca3ac-7574-11e8-9f1d-21fe88c5c46a.png\">\r\n\r\n## 📃 Other details that might be useful\r\n\r\nThe issue is caused by the fact that `label` for the input is hidden with `display: none`. It should be hidden with more accessible technique, e.g. [one proposed by H5BP](https://github.com/h5bp/html5-boilerplate/blob/7e74f27208ef6e62cda92057dfb853b51d3649dd/dist/css/main.css#L128-L147).\r\n\r\nIn the ideal situation, link dialog would display both `label` and hint outside the `input` itself:\r\n\r\n<img width=\"489\" alt=\"Super ugly visualisation of input with label above and hint below\" src=\"https://user-images.githubusercontent.com/1078728/41727943-e5ebe5f0-7575-11e8-919e-026fe3f57c5f.png\">\r\n\r\nIf the hint is present, then it should be bound to the `input` with `[aria-describedby]` attribute.\r\n\r\nSome context:\r\n\r\n* https://www.smashingmagazine.com/2018/06/placeholder-attribute/\r\n* https://www.filamentgroup.com/lab/a11y-form-labels.html\r\n* https://www.scottohara.me/blog/2018/05/24/keep-labels-clean.html\r\n"},"comment":{"url":"https://api.github.com/repos/ckeditor/ckeditor5/issues/comments/515068034","html_url":"https://github.com/ckeditor/ckeditor5/issues/1098#issuecomment-515068034","issue_url":"https://api.github.com/repos/ckeditor/ckeditor5/issues/1098","id":515068034,"node_id":"MDEyOklzc3VlQ29tbWVudDUxNTA2ODAzNA==","user":{"login":"mlewand","id":5353898,"node_id":"MDQ6VXNlcjUzNTM4OTg=","avatar_url":"https://avatars0.githubusercontent.com/u/5353898?v=4","gravatar_id":"","url":"https://api.github.com/users/mlewand","html_url":"https://github.com/mlewand","followers_url":"https://api.github.com/users/mlewand/followers","following_url":"https://api.github.com/users/mlewand/following{/other_user}","gists_url":"https://api.github.com/users/mlewand/gists{/gist_id}","starred_url":"https://api.github.com/users/mlewand/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mlewand/subscriptions","organizations_url":"https://api.github.com/users/mlewand/orgs","repos_url":"https://api.github.com/users/mlewand/repos","events_url":"https://api.github.com/users/mlewand/events{/privacy}","received_events_url":"https://api.github.com/users/mlewand/received_events","type":"User","site_admin":false},"created_at":"2019-07-25T14:32:04Z","updated_at":"2019-07-25T14:32:04Z","author_association":"MEMBER","body":"IMHO the proposal looks great. The thick border looks fine.\r\n\r\nI'm not concerned about \r\n\r\n> * It doesn't look like a placeholder. I think it should be greyish.\r\n\r\n👍\r\n\r\n@dkonopka when reading slower movement proposal I sounded like I want to second to slower transition. But once I applied it, .2 and .1 make a perceivable difference. Actually `.1` feels much more zippy and smooth. `.2` while allows you to better see what's happening, it might be annoying in a long run. And let's not forget this is just an eye-candy, the most important thing is that the end user can effectively use the field and finish the job."}}
{"actor":{"display_login":"mlewand"}}