How does filter return error string to user?

[rouilj]

I have a filter and I return "" to prevent the current string from being used as a tag. How do I notify the
user of the issue? Do I create a <span role="status"></span> after the input and set the innerText in
the filter?

[jcubic]

Filtering out tags is not an error. But you can create a span if you want.

[jcubic]

If you have particular API in mind on how the error/warning should be added that will be fully customized you can contribute with this feature. But first try to create a demo how it would work.

[rouilj]

Filtering out tags is not an error. But you can create a span if you want.

While true, it leaves the user with an input that is not turning into a tag when they hit return. So it looks
like the tagger isn't working. So it's bad UI at the very least.

[jcubic]

I'm all ears if you have a proposal on how it should work.

[rouilj]

As I see it three things have to happen:

1. tagger needs to accept/handle an error from filter().
2. the user needs to provide a place for the error message to be reported.
3. tagger needs to be able to find #2 so it can put the error message from #1 into it. Also it
   needs to empty #2 if there was no error.

Error Implementation 1:

filter returns string or object

"IamATag", { "error": "Tag must start with a capital letter".}

Value of the error attribute in object is used as error message. I am not sure if that should be used
innerText/textContent or innerHtml. A this point I think innerText/textContent to reduce security
surface. In the future a type property "html|text" could be added to insert error as innerHtml.

Error Implemementation 2

filter returns string or throws() an Error

caller of filter puts filter call in a try/catch/finally/else block and filter calls:

  throw new Error("Tag must start with a capital letter")

and the message of the exception is the error. Other considerations same as in implementation 1.

User inserts html to contain the error mesage. Probably written like:

<div role="alert" id="tagger-propname-error"></div>

Tagger will need a "filter_error" parameter for tagger that accepts string|node. If string, find the node using document.querySelector (assumes filter_error is either an id, or a unique selector otherwise the first match will be used.). If node, just use it directly.

Tagger than inserts the error text using a_node.innerText/textContent.

Thoughts?

[jcubic]

Thanks for the suggestion. I think that it's way overcomplicated. I would just add:

tagger.error('error message');

method that the user needs to call in order to show the error:

filter(str) {
   if (invalid.includes(str)) {
       tagger.error('Invalid tag');
       return false;
   }
   tagger.error();
   return str;
}

[rouilj]

How does tagger know where to put the error message? A second argument to tagger.error?

[jcubic]

What do you mean? There will be one place for error messages. I've never heard of components that have more than one place for errors.

[rouilj]

Oh you are planning on adding your own error display location? I was expecting that to be under the control of the user so they can place it below, above, next to the control and style it as they want. It would probably be good to add a class to the component when there is an error so the user
can style the component correctly.

[jcubic]

If you have an idea how to implement tagger::error() and add a container for the error next to the input and so it remains in the same position when tagger is initialized, you can create a PR. If not, I will need to wait a bit when I will have time to work on this.

Also note that changing position of two elements with CSS is relatively easy.

[jcubic]

I think that the best solution is using this structure:

<div class="tagger wrap">
  <div class="tagger-container">
    <!-- the rest of the component -->
  <div>
  <div class="tagger-error">
    Invalid Tag
  </div>
</div>

and the tagger class can be a flexbox. With it, you can change the position of the error with flex-direction.

And while we at it, we can change the wrap class into tagger-wrap, so there are no conflict with other CSS on the page.

[jcubic]

Take a look at this proposal: (type a tag with f word).

https://codepen.io/jcubic/pen/WNqxPjY?editors=0110

In CSS panel, you can use commented out CSS to make the error above the component.

[rouilj]

Hi Jacob: Thanks for taking a shot at this. In message ***@***.***>, "Jakub T. Jankiewicz" writes:

Take a look at this proposal: https://codepen.io/jcubic/pen/WNqxPjY?editors=0110 In CSS panel, you can use commented out CSS to make the error above the component.

I wonder how the div.tagger-error that you create will work with role="alert". It might not get picked up by screen readers or other Assistive Technologies (AT) depending on how it's created. https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/ It's nice that flex alows me to move the error before or to the left/right of the pane where the tagger chips are. This is probably good enough for a first pass. I assume if I have multiple tagger's you will have some way to update the div.tagger-error that is associated with each tagger individually. Since you can't use querySelector('.tagger-error') to find it and it doesn't have an id. Now that I am looking at the structure, I noticed you have nested the A tag for closing/removing the chip inside the A tag for the chip. Nesting A tags isn't allowed. https://html.spec.whatwg.org/#the-a-element Since the .close element doesn't change the page, it shouldn't be a link at all. IIUC it should be a button. Also the "x" on the chip reports "times link" in NVDA. Reporting something like "remove tag emil" would probably be more useful. Also where is the link coming from? There is no "link" function defined in the tagger() call, but the chip is a link and has a url. I can remove the link on the chip by adding: link: () => {return false;}, to tagger(), but I expect the default to be no link. Also is there a way to open the link in a new tab rather than replacing the current page (where you are entering data)? Just to give you a little background, I am looking for a replacement for select2 for simple tagging where the name of the item is unique. For more involved searches I will stay with select2 as described here https://wiki.roundup-tracker.org/UseSelect2andRestForIssueMultilink or a helper window (https://roundup-tracker.org/docs/user_guide.html#using-the-classhelper). Have a great day.

…

-- -- rouilj John Rouillard =========================================================================== My employers don't acknowledge my existence much less my opinions.

[jcubic]

Please create a separate issue for each question or concern, so we can handle each issue individually.

If the error part is ok for you, I can commit the changes. I used Browser dev tools to overwrite and copy/paste the result into Codepen, it was faster to test this way.

[jcubic]

Ok, if you don't gonna test if the update works and not gonna create issue for features you want. I'm gonna close this one.