Justoverclock ARIA is part of standard HTML5:
https://w3c.github.io/using-aria/
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1 (example of aria-describedby
)
You can use the code from my example linked above, or I can make a PR.
Keywords: A dynamic glossary for Flarum
tuxmain i will definitely make a try
Justoverclock very nice! the only thing I may suggest is for it to be displayed as a table, with keywords in one column and definitions in the other. I think it makes it easier to distinguish between them, and may at a later date provide the opportunity of some kind of filtering of the table.
ctml sure, I’m planning to do a search field and/or a a-z filter on top of the page
- Edited
[deleted]
Justoverclock i hope load more is a component built in in flarum
No, but there is an extension for this - not sure if it's compatible with 1.0 though
https://discuss.flarum.org/d/11961-auto-more
[deleted] mmmhhh thats could be a solution, or i need to write some code similar to my read more extension.
- Edited
Justoverclock looks pretty great. minor critique and suggestion
- switch search button to use fa icon (like header search)
- preferably have behaviour like flarums search where input triggers the search as opposed to pressing a button after typing
- I still kind of think the words and definitions should be in separate columns for readability, so you can quickly scan the page for the keywords. It could also allow for different styling of the keyword vs definition, if someone wanted to apply css to bold the term as an example. This is primarily why I had suggested a table view. I don't know if it's the best option for everyone else, but I personally prefer it
Perhaps a future feature idea, which may also play nice with that table display would be adding optional tags or a group to the keywords. So that you could then filter or sort by those. For example if you had some terms like
- flarum-cli
- mithril
- laravel
You could assign them or label them as 'development', and a table view would let you search/filter or sort by that column for development keywords. I know flarum team were talking about adding a table component during a 1.x.x release, but it is apparently implemented by @davwheat in the admin dashboard of user management page on 1.0.0 which sounds like it is perhaps the stepping stone to the future component.
Writing this made me think of another idea for your cool extension, which would be providing links in this terms/definitions. If it allows for markdown, then it would work. Or if takes raw html. In the above example, you could link flarum-cli to the discussion thread, or laravel to the laravel site.
ctml that's why i love partecipation from users. is this what u mean for the search?
now, for the table i need to think how could i split the result in 2 different part, but i think this is relatively simple
Justoverclock yes exactly, that's great!
For table, maybe @davwheat could provide a suggestion since he was the master behind the user mgmt feature. But this could also be a future thing to look at, perhaps if you consider the 'grouping/labelling' feature down the road it would make sense at that point. Not sure exactly, I am just thinking out loud
ctml that is a very nice feauture, honestly i don't know where to start for this , but i will definitely try to implement this feauture too
1.6 (for flarum 1.0 only)
- Glossary Page available
- Keys sorted alphabetically
- Live search through glossary keys
Installation
Install with composer:
composer require justoverclock/flarum-ext-keywords
Updating
composer update justoverclock/flarum-ext-keywords
php flarum cache:clear
[deleted]
This is your community and this extension is also yours see the screenshot below found a css optimization bug for mobile devices hope you will fix it soon.
Thanks,
Regards
@[deleted]
- Edited
Justoverclock I don't know how to explain better than in my previous messages
<style>
.ttt {
display: none;
position: absolute;
}
.tt:hover .ttt, .ttc:focus + .ttt, .ttt:focus {
display: block;
}
</style>
<span class="tt">
<span class="ttc" tabindex="0" aria-describedby="tt1" role="button">This has a tooltip.</span>
<span role="tooltip" id="tt1" class="ttt">This is a tooltip.</span>
</span>
The keyword can then be focused with tab or by clicking on it, and the screen readers knows that #tt1
describes it.
[deleted]
Hello @Justoverclock I don't know as I am not a developer but just a simple easy suggestion what If you show SweetAlert2 Pop up at the place of tooltip in mobile devices??
[deleted]
Justoverclock WOW It is super amazing waiting for it.
Hi, Doesn't work if the word contains a capital letter