Comments (4)
I like the syntax that you proposed, but is the lack of IDs on checkboxes a good idea? Seems like it could lead to accessibility issues. I know the docs don't have things like aria-labelledby
at this moment, but I intend to add them in the near future hopefully, so even if only for accessibility issues, you would still need an ID on a checkbox.
from halfmoon.
I couldn't figure the purpose of id for accessibility where there already exists name
, but upon reading about this accessibility tutorial on label for
, it seems it does indeed help. Funnily though before reading that, this was the workaround I implemented in my code 😄
<input
type=checkbox
bind:checked={todo.done}
id={`u0MVRY4-${i}`}
>
(I generated a random base64 string and prepended the id with it so that I don't accidentally give same id's even while trying to avoid that). I didn't know about the accessibility implications of course 🙂 . Now it's head-scratcher though: do I choose accessibility or maintainability? 😄
I'm not very knowledgable about the details, but if I understand correctly, aria-labelledby can be used with implicit labelling to achieve the same accessibility?
Edit: This example code is svelte's jsx syntax by the way for anyone wondering
from halfmoon.
I am no accessibility expert (trying to get better though), but from what I understand, aria-labelledby
is used to establish a relationship between an element and its label.
May I ask though, wouldn't you be better off using semantic IDs for your checkboxes? For example, a remember password checkbox could have a remember-password-checkbox
ID. Do you have a lot of checkboxes on your page that it becomes difficult to give them all semantic IDs?
from halfmoon.
I don't have any complicated projects right now, I'm just speculating. I can see it being a problem especially when using different components. Two different components could easily have a checkbox with similar functionality, but their id's are not scoped so they can easily clash.
Although now that I think, the id would be needed in vanilla js for app logic anyway so I can see this being a non-issue normally. But I guess this struck me as a problem because I'm thinking with component-based app mentality where with svelte I use bindings which are scoped inside each component instead of id's which are not scoped and hence can clash
from halfmoon.
Related Issues (20)
- Modal close event HOT 3
- Select does not work properly in mobile
- set color mode instead of toggle js HOT 2
- [Feature request] Put label before switch
- Sidebar, darkmode and modals are not automatically toggled as expected. HOT 5
- halfmoon doesn't support rtl? HOT 2
- require problem while using with sveltekit. HOT 1
- this.stickyAlerts is undefined HOT 1
- Will the project continue? HOT 2
- Text centering inside buttons
- Default sidebar with small screen results in offscreen content HOT 2
- Halfmoon documentation isn't available anymore HOT 37
- is this project dead? HOT 27
- Version update messed up page layout completely HOT 3
- Provide CSS only alternatives using Dialog and Popover API.
- CSS only form validation HOT 1
- Website is down HOT 1
- Typo in dropdowns page code snippet
- input type = date, just use this that way?
- Docs website for v1.x.x is down HOT 1
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 halfmoon.