Repository: wagtail/wagtail

Issue:
Replace human-readable-date hover switcheroo pattern with accessible tooltips
We have a well-established pattern in the admin interface, to show relative times by default ("3 months ago"), with a switch to absolute date-times on hover:

![human-readable-date](https://user-images.githubusercontent.com/877585/169317860-806cf880-3dc4-4082-8caa-8bd6d79ebaa7.gif)

Here is the markup:

```html
<div class="human-readable-date" title="May 19, 2022, 1:31 p.m.">Just now</div>
```

This feels a bit basic, and there are a number of issues stemming from this approach:

- There is no affordance of this capability – you have to have stumbled upon it once to become aware of the pattern.
- Since this isn’t applied on interactive HTML elements, it’s impossible for keyboard users to see the date-times.
- Changing the text on hover is a bit inelegant – makes it hard to read text under the mouse, and the hover target moves upon activation

---

## Proposed solution

We’d like to refactor this to use our new tooltip styles, similarly to #8565.

- We can use a `button` so this can be triggered by keyboard users
- We can still style this very minimally – potentially with a `border-bottom: 1px dotted grey` similarly to the `<abbr>` element to convey there is a tooltip
- A tooltip will mean the interactive target won’t move around upon activation
- Our Tippy.js implementation means the text within the tooltip will still be available to screen reader users, like `title` is.
Update human-readable-date with accessible tooltip
Fixes #8566

<!--
Thanks for contributing to Wagtail! 🎉

Before submitting, please review the [contributor guidelines](https://docs.wagtail.org/en/latest/contributing/index.html).
-->

_Please check the following:_

-   [x] Do the tests still pass?[^1]
-   [x] Does the code comply with the style guide?
    -   [x] Run `make lint` from the Wagtail root.
-   [ ] For Python changes: Have you added tests to cover the new/fixed behaviour?
-   [ ] For front-end changes: Did you test on all of Wagtail’s supported environments?[^2]
    -   [x] **Please list the exact browser and operating system versions you tested**:
    -  Google Chrome 102 & Safari 15.4 on Mac
    -   [x] **Please list which assistive technologies [^3] you tested**:
    - VoiceOver on macOS with Safari
-   [ ] For new features: Has the documentation been updated accordingly?

**Please describe additional details for testing this change**.

<img width="386" alt="Screenshot 2022-06-16 at 16 19 04" src="https://user-images.githubusercontent.com/49147147/174090910-03ca3759-407b-4719-a27f-46e8bbec0159.png">


[^1]: [Development Testing](https://docs.wagtail.org/en/latest/contributing/developing.html#testing)
[^2]: [Browser and device support](https://docs.wagtail.org/en/latest/contributing/developing.html#browser-and-device-support)
[^3]: [Accessibility Target](https://docs.wagtail.org/en/latest/contributing/developing.html#accessibility-targets)



Discussion:
We should also try to use the `time` element, it provides a more semantic approach and more accessible
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
I've made a PR replacing all human-readable-date elements https://github.com/wagtail/wagtail/pull/8697 :)
<h2>Manage this branch in <a href="https://app.squash.io/accounts/">Squash</a></h2>Test this branch here: <a href='https://berndfourdigits8566-replace-hu-txf5t.squash.io' target='_blank'>https://berndfourdigits8566-replace-hu-txf5t.squash.io</a><br/>
Thanks for the detailed feedback @lb- . I've updated the PR.

Resolving patch:
diff --git a/wagtail/admin/templatetags/wagtailadmin_tags.py b/wagtail/admin/templatetags/wagtailadmin_tags.py
--- a/wagtail/admin/templatetags/wagtailadmin_tags.py
+++ b/wagtail/admin/templatetags/wagtailadmin_tags.py
@@ -972,3 +972,11 @@ def workflow_status_with_date(workflow_state):
         return _("Sent to %(task_name)s %(started_at)s") % translation_context
 
     return _("%(status_display)s %(task_name)s %(started_at)s") % translation_context
+
+
+@register.inclusion_tag("wagtailadmin/shared/human_readable_date.html")
+def human_readable_date(date, description=None):
+    return {
+        "date": date,
+        "description": description,
+    }


Test patch:
diff --git a/wagtail/contrib/modeladmin/tests/test_simple_modeladmin.py b/wagtail/contrib/modeladmin/tests/test_simple_modeladmin.py
--- a/wagtail/contrib/modeladmin/tests/test_simple_modeladmin.py
+++ b/wagtail/contrib/modeladmin/tests/test_simple_modeladmin.py
@@ -999,7 +999,7 @@ def test_simple(self):
         self.assertContains(response, "<td>Created</td>", html=True)
         self.assertContains(
             response,
-            '<div class="human-readable-date" title="Sept. 30, 2021, 10:01 a.m.">',
+            'data-tippy-content="Sept. 30, 2021, 10:01 a.m."',
         )
 
 
diff --git a/wagtail/snippets/tests.py b/wagtail/snippets/tests.py
--- a/wagtail/snippets/tests.py
+++ b/wagtail/snippets/tests.py
@@ -1406,7 +1406,7 @@ def test_simple(self):
         self.assertContains(response, "<td>Created</td>", html=True)
         self.assertContains(
             response,
-            '<div class="human-readable-date" title="Sept. 30, 2021, 10:01 a.m.">',
+            'data-tippy-content="Sept. 30, 2021, 10:01 a.m."',
         )
 
     def test_filters(self):