What Is the Tag Parameter in Button Widget?

1

There is a tag parameter in $button widget. official documentation says:

tag: An optional html tag to use instead of the default “button”

What is it?

I see it has been used in Editor Toolbar Buttons, like in

$:/core/ui/EditorToolbar/opacity-dropdown

<$button tooltip="""$(opacity)$"""tag=a>

<$action-setfield $tiddler="$:/config/BitmapEditor/Opacity"$value="$(opacity)$"/>
.
.
.

I believe it is confusing.

2

The button widget can create any DOM node instead of the default button. For example, a DIV.

This is also how you can have actions are invoked when clicking on a DIV (or any other DOM node).

<$button tag="div" actions=<<myactions>> >
Hello There
</$button>

tag="a" creates an <a> tag, i.e. a link

3

Thank you for clarification Saq.

4

I think, the confusing “thing” here is the name. With TW we use the name “tag” when we refer to our tagging mechanism.

In the context of HTML a tag is an element like DIV, P, SPAN and so on. See: Tag - Glossary | MDN and in more detail: HTML elements reference - HTML | MDN

5

Right. The TW specific “tag” terminology is a “category/classification system” that we USUALLY initiate through a Tiddler’s tags field. The general HTML terminology refers to “elements” (usually in pairs) that appear in code as <TAGS>.

I think you are right to indicate the two different usages can get confused in practice sometimes?

Just a simple comment, TT

6

@saqimtiaz, I thought this a very interesting reply!
And a real testament to the power of Tiddlywiki.

BUT there is a saying in British English that might also apply :upside_down_face: … “That could confuse a stupid person!” Lol!

Best, TT

7

Hi @saqimtiaz I do slightly wonder on that if this might be “clearer” … ???

<$button html-tag="div" actions=<<myactions>> >
Hello There
</$button>

Just a comment
TT

8

From an accessibility perspective I am still confused. Why would you ever want a div to behave like a button? Or why create a link (<a> tag) using a button widget if you could use a link widget instead?

And if there was any good reason to use a div, shouldn’t there be an aria-role attribute as well we could set to “button”? – And then again, why not use a button tag in the first place?

9

There are lots of reasons, but first. Lets all step back and point out tiddlywiki’s final result is html. We have widgets and more to access most standard html features, onclick is one. Because we need javascript functionality to do things the widgets and macros allow us to do this in a tiddlywiki structured way to ensure changes are propergated and displayed correctly and tiddlers and fields are updated etc…

  • As a result widgets will always provide a subset of that which is possible in HTML/Javascript.
  • There are various places such as tag or type on the button or edit-text widgets where parameters allow us to pass through attribute value pairs to the resulting html.
  • In cases where you don’t use functions or Javascript you can often use HTML directly.
<button disabled>Dummy button</button>
<button title="tooltip">Dummy button</button>

The “button widget” is the way to access most if not all functionality that the onclick “operation/function” does in HTML/JS.

Examples of using tag on the button;

  • div/span - To add a tooltip to a block of text
  • To allow one to click to edit or navigate elsewhere
  • to conceal a button as regular wiki text
  • more that don’t come to mind immediately, but is basically providing on click services.
10

There are many ways to do things in TW – like in many other software. Sometimes I feel that there are too many ways so it gets harder to choose the best one.

You could use <div title="titles are not a recommended accessibility feature">some text</div> to achieve this, no need to use a widget. (Thanks for the reminder that we always can use HTML directly.)

I would recommend a button tag for a button that changes the state to edit and a link to navigate elsewhere. We have button and link widgets for this and I still don’t see a reason to modify the tags.

An example of wrong use of span (in my eyes – there might be reasons I do not see) are the tag pills. The tag pill is a span that triggers a menu when you click it. Why is this not a button? A span is not accessible via keyboard, while a button is by nature. (Tag pills are not created using the button widget as far as I know.)

There might be other useful cases for using the button widget with other tags and I would really like to see some of them.

11

This is another example where I would suggest to use buttons instead of links:

grafik
grafik1036×688 68.5 KB

Why is this a series of links (they don’t take you anywhere*) when we could have a list of buttons (they set a value) or a select menu where you select an option?

*anchor links are designed for URLs: <a>: The Anchor element - HTML | MDN

12

That’s what’s recommended now.

TLDR; Conclusion

The button-widget, was probably one of the first and one of the most important widgets to start with … In the context described below it should be clearer, why there are some “sins” in the widget attributes. .. We simply needed that flexibility.

more context

The main problems with native HTML elements like select is, that they are really hard to style in way that also looks good on all browsers. It’s probably better now, but TW5 is an “early contender” in terms of HTML 5 standards.

Most of the functions like dropdowns where needed from the beginning and the basic concepts where developed back then.

The HTML-5 standard was introduced in Jan. 2008 and reached “W3C Recommendation” status in Oct. 2014. So the standard itself was still in its infancy when TW5 development started.

The first usable TiddlyWiki5 alpha was published in Nov. 2013 where Chrome was version 31, Safari v7, FireFox v26 and IE 11 was just introduced.

TW public development started Nov. 2011 with the initial commit at GitHub

IE 11 rests in peace and TiddlyWiki has the strongest community ever :wink:

Conclusion

See: TLDR;

13

Thank you, @pmario, for the historic context. Very much appreciated.