microsoft
Make the Designer more accessible
There's a good amount of accessibility work that can be done on the designer. This issue is intended to track that work.
To start, the "drag" and "remove" controls need to be accessible and actually usable. See https://github.com/microsoft/AdaptiveCards/issues/7067 for more details.
Unfortunately, the work required to do that is no small task. Pankaj and I wrote a proposal for a designer overhaul. That can be found here. For simplicity, I've copied the summary below...
Designer Overhaul Summary
- There are various aspects of the designer that are only available to mouse users
- Making these features available to keyboard users will require a refactor of the designer, which should involve
- Rendering every element of the card upon initialization, even if the element is initially hidden
- In designer mode, only the peers should be focusable whereas the elements themselves should be not-focusable
- Furthermore, all commands available to the peer should be invokable via keyboard (general commands like drag/drop, remove; as well as specific commands like 'Add a column')
- When new elements are added to the card, or when existing elements are moved around, the elements should be inserted into the html tree in such a way as to mimic their order in the card itself
- If this requires a complete re-rendering of the card every time such an action is invoked, then extra steps must be taken to ensure focus does not get lost
- Aside from the preview card itself, the other panes in the designer (i.e. 'Card Elements', 'Card Structure' and 'Element Properties') also need to be improved to support keyboard users
- Since these panes are quite linked with each other, in particular the 'Card Structure' and 'Element Properties' panes, there should exist an easy way for keyboard users to switch between these panes
- All elements in these panes should be accessible/activatable by keyboard
- i.e. inserting an element into the preview card from the 'Card Elements' pane should be possible via keyboard instead of only via dragging onto the preview card
- i.e. all elements in the 'Card Structure' pane should be accessible via keyboard
As a bonus, I strongly suggest that whoever begins to work on making the designer more accessible also keep an eye on the following queries:
Action Items
- [x] When adding new elements to the card or move existing elements, peers need to be inserted in the correct place in the html tree to maintain focus
- [ ] Render the entire card (even if a portion of it is hidden) on the initial load - https://github.com/microsoft/AdaptiveCards/issues/7792
- [ ] Incorporate the fixes from pull request #7159
- [x] focus should be able to land on a peer
- [x] remove control should be keyboard activatable - https://github.com/microsoft/AdaptiveCards/issues/7793
- [ ] bind control should be keyboard activatable - https://github.com/microsoft/AdaptiveCards/issues/7794
- [x] if the peer is wrapping an action, the action should still be invokable
- [ ] Drag control should be keyboard accessible - https://github.com/microsoft/AdaptiveCards/issues/7795
- [ ] [Feature] Add new key binding to switch between different panes of the designer easily - https://github.com/microsoft/AdaptiveCards/issues/7796
Labels removed as this issue was broken down into smaller ones in the previous comment
