[4.0] Modify display and tip for Edit Article in Frontend

[infograf768]

Summary of Changes

Since Email to a friend and Print article have been taken off from J4, we do not need the anymore the Cog and dropdown to choose among actions. We now need only the Edit Article when authorised to do so.
Use of role="tooltip"] instead of bootstrap tips.
Cassiopea [role="tooltip"] is modified for the look. Placement of tip specific to the article edit id.

Should also be OK for a11y. TO CHECK please as I'm not a specialist.

Testing Instructions

3 situations:

1. Edit Article when article published // simplified tip
2. Edit Article when article is unpublished // simplified tip
3. Article is checked out by another user

In each case, hover the icon to see the tip.

patch, run NPM

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Note

If this is OK, will do for Contact

[brianteeman]

I have tested this item 🔴 unsuccessfully on 741f9ca

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30588.}

[brianteeman]

The accessibility changes you made are completely wrong

1. never add role=button to a link
2. incorrect usage of aria-live (and not needed)

[infograf768]

The accessibility changes you made are completely wrong
never add role=button to a link
incorrect usage of aria-live (and not needed)

It was useless to set unsuccessful as I noted in the description TO CHECK please as I'm not a specialist.

Thank you for your comment. Getting rid of these 2 aspects. Is there anything else?

[brianteeman]

I cannot replicate your screenshots - looks like you might be missing a class on the "tooltip" div

[brianteeman]

Also because the link is called edit and the tooltip begins with edit it is announced by a screenreader as
Edit Edit ....

[infograf768]

NPM ci is necessary.

Class is not missing, role tooltip is a class de facto

// set up hidden tooltip
[role="tooltip"]:not(.show) {
  z-index: $zindex-tooltip;
  display: none;
  max-width: 100%;
  padding: .5em;
  margin: .5em;
  color: $black;
  background: $white-offset;
  border: 1px solid $gray-600;
  border-radius: $border-radius;
  box-shadow: 0 0 .5rem rgba(0,0,0,.8);

  &[id^=editarticle-] {
    margin-inline-start: -10em;
  }

  [dir=ltr] & {
    text-align: left;
  }

  [dir=rtl] & {
    text-align: right;
  }
}

but it looks like I can't apply anymore this .diff in eclipse for the 3 layouts files
Checking that aspect now here.

Can you explain

Also because the link is called edit and the tooltip begins with edit it is announced by a screenreader as

Not sure what you mean by the link is called edit. Can you explain? And what it should be?

[infograf768]

I see now why this PR does ot apply anymore here..
#30543 was merged

[infograf768]

The git apply issue solved itself here.. :)

[infograf768]

Also because the link is called edit and the tooltip begins with edit it is announced by a screenreader as Edit Edit ....

Got it now. I don't think it is a big deal.

[brianteeman]

That would be a decision by the accessibility team

[infograf768]

Stefan made suggestions. Will modify stuff shortly.

[infograf768]

Modified with various improvements. aria-hidden true. Simplified tooltips.
Now we get:

[hans2103]

I have tested this item ✅ successfully on f9fd8ed

I see the simplified tip in all three situations

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30588.}

[brianteeman]

Don't know why but the role=tooltip css is present in my unminified css file but NOR in the minified one

[chmst]

@brianteeman did you use the patchtester? I have the same effect, but think that this not related to the PR. The PR looks great I will test as soon as required the changes are comitted.

[brianteeman]

@chmst I did but I cant see how that would make a difference. If the code is present in the non-minified css then the patch has worked

[brianteeman]

found the problem - its not related to patchtester - creating a seperate issue for it

[brianteeman]

I have tested this item ✅ successfully on f9fd8ed

Marking as successful as the minification issue is unrelated to the actual pr

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30588.}

[infograf768]

Don't know why but the role=tooltip css is present in my unminified css file but NOR in the minified one

[infograf768]

RTC as last changes were small cs corrections.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30588.}

[laoneo]

Thanks!

@wilsonge do we need to document the change that the helper function got removed in the upgrade guide?

[infograf768]

Will now make similar changes for the Edit Contact.

[wilsonge]

@laoneo I guess it can't hurt to document it although I suspect it's a touch overkill