Comments (12)
Agreed. I was planning on doing an accessibility review this week as part of the Prism exploration, and the fact that we are essentially waiting on feedback from Brigade before making any other UI changes.
from interactive-examples.
I have added the ability to move through the CSS examples using the cursor keys. With that, do you feel that we can close out this one? @wbamberg
from interactive-examples.
You can test it here for the time being:
https://interactive-examples.mdn.mozilla.net/pages/css/border-style.html
from interactive-examples.
This looks very nice: up/down works great to cycle through the choices. But tab is weird: it does cycle through the options, but the "selection indicator" (the blue border and arrow) is not updated.
from interactive-examples.
But tab is weird: it does cycle through the options, but the "selection indicator" (the blue border and arrow) is not updated.
Indeed. I noticed this yesterday as well while testing something else. I am going to fix that today, and will attach it to this bug. Once that is landed, I will go ahead and close out this issue. Thanks @wbamberg
from interactive-examples.
Sorry to reopen, but I saw another problem with this: where an item has multiple lines (e.g. https://developer.allizom.org/en-US/docs/Web/CSS/background-color) and the cursor is at line 1, then you down-arrow, then the cursor moves to the next item. It should move to the next line, and only move to the next item if it is on the last line.
from interactive-examples.
Hmmm, yeah, that is a nasty one. I will look into it.
from interactive-examples.
@wbamberg Ok so, I have looked at this from a bunch of different angles but, there just seems to be no way to know that you are at the start, or the end of the text inside the code
element. Because this is not actually a textfield
but simply a code
element with contenteditable
set to true, there is also no Selection
object so, no way to that to try and figure out the caret position.
Perhaps we should drop the up/down arrow functionality and just keep the tabbing. Thoughts?
from interactive-examples.
As much as I like the feature, I think it's more important that we allow and encourage people to edit the examples and that can mean adding a line, in which case keyboard navigation is not doing what most people would expect. I'd drop it for this first version.
from interactive-examples.
So, I do seem to be able to get a Selection
. Let me take another stab at this.
from interactive-examples.
Ok. @wbamberg have made some general interaction improvements to the CSS editor specifically. I removed the up/down arrow interaction because it is driving me up the wall currently, and while I would like to have the functionality, it needs to work as expected to be valuable.
Give this a spin and feel to reopen if you ruin into any problems. Thx
from interactive-examples.
Perhaps we should drop the up/down arrow functionality and just keep the tabbing. Thoughts?
I think this is fine :). I mean, we need keyboard access, but tab is totally sufficient IMO.
from interactive-examples.
Related Issues (20)
- can't change ime after using eyedropper HOT 2
- Incorrect syntax for JSON.stringify() demo HOT 2
- [meta] Should we archive the wiki? HOT 1
- [meta] Ci can skip more types of changes HOT 1
- whitespace-example without whitespace included in code HOT 1
- [meta] CI runs on forks
- `::marker` class showing XML error HOT 2
- Prettier config deviates from mdn/content HOT 2
- Article element in a wrong implementation HOT 5
- :nth-child - update example to be inclusive HOT 5
- `npm install` has `2 vulnerabilities (1 moderate, 1 high)` HOT 2
- `1 moderate severity vulnerability` when running `npm install` HOT 2
- `Array.prototype.reduce()` demo requires horizontal scrolling HOT 7
- Expected output is wrong HOT 2
- Live example on the groups and backreferences page has inconsistent name HOT 3
- try it confusion HOT 2
- css.properties.backdrop-filter - The Firefox WebDev tool says invalid property name although it is running latest edition HOT 1
- Create an interactive example for `HWB()` HOT 5
- Example HTML Dialog HOT 3
- unnecessary css property in an interactive element HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from interactive-examples.