[WIP] Global accessibility awareness day #26
Conversation
Updates for style add installed style addon small tweaks another minor fix Update simple component to display styles, and to toggle image size style addon published to npm display maps properly make tomster a background image, so that it comes with the style addon Ember Rentals -> Super Rentals
| @@ -1,2 +1,4 @@ | |||
| City: {{input value=value key-up=(action 'handleFilterEntry')}} | |||
| <label for="filterByCity" class="screen-reader">Filter By City</label> | |||
| {{input id="filterByCity" value=value key-up=(action 'handleFilterEntry') class="light" placeholder="Filter By City" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="rental-list"}} | |||
There was a problem hiding this comment.
Is it possible for us to instead just use an input tag? Much simpler implementation, and is literally what the DOM already provides no abstraction.
There was a problem hiding this comment.
yeah, as long was we can provide an action for key-up.
There was a problem hiding this comment.
https://developer.mozilla.org/en-US/docs/Web/Events/keyup is part of the DOM, so it would just work
There was a problem hiding this comment.
so implement a keyUp event handler in the component. Can do. Sorry, its late :-P
There was a problem hiding this comment.
no just <input onkeyup={{action ... no component needed
There was a problem hiding this comment.
I thought that too and tried with initial lack of success. will take another look. thx
There was a problem hiding this comment.
without the input helper, what is the best way to provide the value to the action?
There was a problem hiding this comment.
http://miguelcamba.com/blog/2016/01/24/ember-closure-actions-in-depth/ should provide the required info
There was a problem hiding this comment.
thx, got it onkeyup={{action "handleFilterEntry" value="target.value"}}
toddjordan
force-pushed
the
global-accessibility-awareness-day
branch
4 times, most recently
from
52f17e1
to
0020012
Compare
simpler input remove console.logs remove another console log fix role for options couple of more improvements
toddjordan
force-pushed
the
global-accessibility-awareness-day
branch
from
0020012
to
ba31fc1
Compare
|
Closing this due to significant overhaul in the following PRs/issues: Based on Slack discussion, we're paring this down to the bare minimum changes - enough to introduce a11y to users and give them pointers to the right places to keep learning. |
Install ember-a11y-testing
Install ember-a11y for focusing-outlet
clean up axe errors
decorate filter behavior with aria labels to help with screen readers
This is the start to an accessibility section in the tutorial.
excuse the messy diff, dependent on 2 prs in front of it. (acceptance test, style)