I wanted to discuss a few things and see if it's worth while to open an issue and PR for these items:
Right now if you activate a tab, and hit the tab key you move to the next tab. I think it's best if you activate a tab, and use the tab key to move through the properties in the pane. This video shows the current UX.
Right now there doesn't appear to be many keyboard shortcuts for editors. (I know this is something that's been addressed to some extent in v8.) I think we should add some for the editing experience by enabling ALT + [First Unique Character] to swap between tabs. The idea is captured here in this video.
Right now checkboxes (among other property editors as well) don't have a focus state. We should take a moment and make sure all fields have a focus state (many do not) but this one in particular would be very easy to do. The idea is captured here in this video.
I think it's nice that you bring up the topic about accessibility in the back office. It's certainly something that can be improved and I do believe that HQ as well as the community are being aware of that too :-)
I'm not sure about this one - I think that what it currently does
makes sense. You tab to the next tab and you can then hit enter to
access the tab you want to see - But I don't know. I just think it
would feel weird that changing the tab immediately showed the
content before I decided that I wanted to see it by hitting the
enter key. But it might just be me and I have not looked at any WCAG
guidelines and best practices for this one. This is just my gut
feeling :) - And I do believe that how it currently works is a best
practice. But otherwise using some :focus-within pseudo selector
should probably make it behave like you suggest.
Something in the back of my mind tells me that there should be a
shortcut available listing the keyboard options for navigating the
back office using shortcuts etc. - But can't remember how to trigger
that overlay. But that does of course not mean that it can't be
improved. I think this is a good idea but it might be a challenge to
make sure the shortcuts don't conflict with browser shortcuts,
system shortcuts etc.
Just want to let you know that I'm currently working on some
smaller UI improvements for the checkbox in
https://github.com/umbraco/Umbraco-CMS/pull/3188 - It's still a
little work in progress. Not so much because of adding the :focus
state but fixing the label requires some investigation because it
appears that in some scenarioes it might require display:
inline-block, which is messing up the label alignment. Small detail
and also a bit of topic - Sorry :)
I have added a box-shadow arund the toggle so one can see that it's active and I think that should be enough and what is really needed since highlighting the states using outlines to me does not make sense, since they're already differing visually when changing the state. So adding outlines around them does not improve the accessibility as far as I know. But highlighting the one being in focus does I believe. :)
In the video I show what it's going to be like tabbing through the setup of the checkbox where the foucs style now appears on the checkbox toggle. I also mark that the label has been adjusted - But just wanted to show what the focus style I'm working on is going to be like if my PR is accepted of course.
I like that you have brought up this discussion Mark and I'm looking forward to see what other suggestions you might have and I'll try to post my own thoughts on this too :)
Thanks for the response - glad the Umbraco community is always listening to feedback from the community and are so helpful.
Real quick - about number 1 above I may have not done the best job describing the change I'd like to make. What you described makes complete sense to me and I wouldn't want to change the behavior while tabbing through the document. To break it down:
User clicks (or pushes enter on a tab) to set the active tab.
User then uses the tab key.
I think it would make sense if I just activated the tab (not focus but actually engage) that the "tab" key would begin focusing on the properties inside the content editing window.
Sorry for the confusion on that.
Yes! Saw your recent PR about it and it got me to thinking about how some of the other core property editors are missing a focus state! I'd like to come up with something for the remaining editors soon and give you feedback on those?
Let's say we have 3 tabs on a document type called "Content", "Media" and "Lists".
Then Let's say I'm standing on a tab named "Content". Using the mouse I click another tab called "Media" and when I'm on media I then decide to use the tab key to tab between...well the tabs :) (So confusing that the keyboard key is named the same as the UI concept) then instead of immediately put focus on the "Lists" tab focus should start at "Media", which is the one we're currently on.
Did I get it right? If ao I think it makes sense what you're suggesting :)
Nitpicking some Accessibility in the Back Office
I wanted to discuss a few things and see if it's worth while to open an issue and PR for these items:
Right now if you activate a tab, and hit the tab key you move to the next tab. I think it's best if you activate a tab, and use the tab key to move through the properties in the pane. This video shows the current UX.
Right now there doesn't appear to be many keyboard shortcuts for editors. (I know this is something that's been addressed to some extent in v8.) I think we should add some for the editing experience by enabling ALT + [First Unique Character] to swap between tabs. The idea is captured here in this video.
Right now checkboxes (among other property editors as well) don't have a focus state. We should take a moment and make sure all fields have a focus state (many do not) but this one in particular would be very easy to do. The idea is captured here in this video.
If you are interested, here is a video of me tabbing through all of the property editors.
I have more, but wanted to get these out in the open and start discussing them.
Hi Mark
I think it's nice that you bring up the topic about accessibility in the back office. It's certainly something that can be improved and I do believe that HQ as well as the community are being aware of that too :-)
I'm not sure about this one - I think that what it currently does makes sense. You tab to the next tab and you can then hit enter to access the tab you want to see - But I don't know. I just think it would feel weird that changing the tab immediately showed the content before I decided that I wanted to see it by hitting the enter key. But it might just be me and I have not looked at any WCAG guidelines and best practices for this one. This is just my gut feeling :) - And I do believe that how it currently works is a best practice. But otherwise using some :focus-within pseudo selector should probably make it behave like you suggest.
Something in the back of my mind tells me that there should be a shortcut available listing the keyboard options for navigating the back office using shortcuts etc. - But can't remember how to trigger that overlay. But that does of course not mean that it can't be improved. I think this is a good idea but it might be a challenge to make sure the shortcuts don't conflict with browser shortcuts, system shortcuts etc.
Just want to let you know that I'm currently working on some smaller UI improvements for the checkbox in https://github.com/umbraco/Umbraco-CMS/pull/3188 - It's still a little work in progress. Not so much because of adding the :focus state but fixing the label requires some investigation because it appears that in some scenarioes it might require display: inline-block, which is messing up the label alignment. Small detail and also a bit of topic - Sorry :)
I have added a box-shadow arund the toggle so one can see that it's active and I think that should be enough and what is really needed since highlighting the states using outlines to me does not make sense, since they're already differing visually when changing the state. So adding outlines around them does not improve the accessibility as far as I know. But highlighting the one being in focus does I believe. :)
In the video I show what it's going to be like tabbing through the setup of the checkbox where the foucs style now appears on the checkbox toggle. I also mark that the label has been adjusted - But just wanted to show what the focus style I'm working on is going to be like if my PR is accepted of course.
I like that you have brought up this discussion Mark and I'm looking forward to see what other suggestions you might have and I'll try to post my own thoughts on this too :)
/Jan
Jan,
Thanks for the response - glad the Umbraco community is always listening to feedback from the community and are so helpful.
Real quick - about number 1 above I may have not done the best job describing the change I'd like to make. What you described makes complete sense to me and I wouldn't want to change the behavior while tabbing through the document. To break it down:
I think it would make sense if I just activated the tab (not focus but actually engage) that the "tab" key would begin focusing on the properties inside the content editing window.
Sorry for the confusion on that.
Yes! Saw your recent PR about it and it got me to thinking about how some of the other core property editors are missing a focus state! I'd like to come up with something for the remaining editors soon and give you feedback on those?
Hi Mark
You're welcome :-)
Ah, yes I think I get it now. Let's test me.
Let's say we have 3 tabs on a document type called "Content", "Media" and "Lists".
Then Let's say I'm standing on a tab named "Content". Using the mouse I click another tab called "Media" and when I'm on media I then decide to use the tab key to tab between...well the tabs :) (So confusing that the keyboard key is named the same as the UI concept) then instead of immediately put focus on the "Lists" tab focus should start at "Media", which is the one we're currently on.
Did I get it right? If ao I think it makes sense what you're suggesting :)
/Jan
is working on a reply...