From 36a9f884b35dcb4b65b168a0bc70ef9a2cc1350b Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Tue, 5 Jan 2021 12:21:12 +0100
Subject: [PATCH] feat: display tooltips for some elements
---
package-lock.json | 16 ++++++++++++++++
package.json | 1 +
src/App.jsx | 2 ++
src/components/Navbar.jsx | 7 +++++--
src/components/modals/ModalWithActions.jsx | 7 ++++++-
src/components/posts/Post.jsx | 10 +++++-----
src/components/posts/PostScore.jsx | 5 ++++-
src/containers/JitsiInviteCard.jsx | 7 ++++++-
8 files changed, 45 insertions(+), 10 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 33f2bb3..b55c5d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15073,6 +15073,22 @@
}
}
},
+ "react-tooltip": {
+ "version": "4.2.11",
+ "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.11.tgz",
+ "integrity": "sha512-exREte3mK/qbeuQpFbEL3ImdF5/TSAb+x/T7pkVfKmgVcfQLZKHSgLN+Msv7ZOHxaWNJwuCrSsCAy/iTGoPigg==",
+ "requires": {
+ "prop-types": "^15.7.2",
+ "uuid": "^7.0.3"
+ },
+ "dependencies": {
+ "uuid": {
+ "version": "7.0.3",
+ "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
+ "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
+ }
+ }
+ },
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
diff --git a/package.json b/package.json
index 0330bd1..5f7e6bd 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"react-player": "^2.7.2",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
+ "react-tooltip": "^4.2.11",
"showdown": "^1.9.1",
"unfetch": "^4.2.0",
"wait-queue": "^1.1.4",
diff --git a/src/App.jsx b/src/App.jsx
index 9062d07..6cde1d3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,7 @@
import React, { Suspense, useEffect } from "react";
import { Helmet, HelmetProvider } from "react-helmet-async";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import ReactTooltip from "react-tooltip";
import { KeycloakProvider } from "@react-keycloak/web";
import { ExtraErrorData } from "@sentry/integrations/dist/extraerrordata";
import * as Sentry from "@sentry/react";
@@ -118,6 +119,7 @@ const BaseApp = () => {
</Switch>
<Footer />
</Router>
+ <ReactTooltip effect="solid" className="tooltip tooltip--default" />
</HelmetProvider>
);
};
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 34a8dc6..8e154aa 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -39,7 +39,8 @@ const Navbar = () => {
<div className="inline-flex items-center order-first md:order-last md:ml-8 lg:order-first lg:mr-8 lg:ml-0">
<span
className="relative inline-flex h-4 w-4 mr-4"
- title={connectionStateCaption}
+ data-tip={connectionStateCaption}
+ aria-label={connectionStateCaption}
>
<span
className={classNames(
@@ -126,7 +127,9 @@ const Navbar = () => {
<button
onClick={logout}
className="text-grey-200 hover:text-white"
- title="Odhlásit se"
+ aria-label="Odhlásit se"
+ data-tip="Odhlásit se"
+ data-place="bottom"
>
<i className="ico--log-out"></i>
</button>
diff --git a/src/components/modals/ModalWithActions.jsx b/src/components/modals/ModalWithActions.jsx
index 242fd67..acc861b 100644
--- a/src/components/modals/ModalWithActions.jsx
+++ b/src/components/modals/ModalWithActions.jsx
@@ -25,7 +25,12 @@ const ModalConfirm = ({
<CardBody>
<div className="flex items-center justify-between mb-4">
<CardHeadline>{title}</CardHeadline>
- <button onClick={onClose} type="button">
+ <button
+ onClick={onClose}
+ type="button"
+ data-tip="ZavĹ™Ăt"
+ aria-label="ZavĹ™Ăt"
+ >
<i className="ico--cross"></i>
</button>
</div>
diff --git a/src/components/posts/Post.jsx b/src/components/posts/Post.jsx
index 08ec124..763e221 100644
--- a/src/components/posts/Post.jsx
+++ b/src/components/posts/Post.jsx
@@ -89,7 +89,7 @@ const Post = ({
key="state__pending"
condensed
color="grey-500"
- title="Návrh ÄŤekajĂcĂ na zpracovánĂ"
+ aria-label="Návrh ÄŤekajĂcĂ na zpracovánĂ"
>
ÄŚeká na zpracovánĂ
</Chip>
@@ -99,7 +99,7 @@ const Post = ({
key="state__announced"
condensed
color="blue-300"
- title="Návrh k hlasovánĂ"
+ aria-label="Návrh k hlasovánĂ"
>
K hlasovánĂ
</Chip>
@@ -109,7 +109,7 @@ const Post = ({
key="state__accepted"
condensed
color="green-400"
- title="Schválený návrh"
+ aria-label="Schválený návrh"
>
Schválený
</Chip>
@@ -119,7 +119,7 @@ const Post = ({
key="state__rejected"
condensed
color="red-600"
- title="ZamĂtnutĂ˝ návrh"
+ aria-label="ZamĂtnutĂ˝ návrh"
>
ZamĂtnutĂ˝
</Chip>
@@ -129,7 +129,7 @@ const Post = ({
key="state__rejected-by-chairmen"
condensed
color="red-600"
- title="Návrh zamĂtnutĂ˝ pĹ™edsedajĂcĂm"
+ aria-label="Návrh zamĂtnutĂ˝ pĹ™edsedajĂcĂm"
>
ZamĂtnutĂ˝ pĹ™eds.
</Chip>
diff --git a/src/components/posts/PostScore.jsx b/src/components/posts/PostScore.jsx
index b249173..a5cd102 100644
--- a/src/components/posts/PostScore.jsx
+++ b/src/components/posts/PostScore.jsx
@@ -49,7 +49,10 @@ const PostScore = ({
className
)}
style={{ cursor: "help" }}
- title={title}
+ aria-label={title}
+ data-tip={title}
+ data-type="dark"
+ data-place="top"
>
<i className="ico--power" />
<span className="font-bold">{score}</span>
diff --git a/src/containers/JitsiInviteCard.jsx b/src/containers/JitsiInviteCard.jsx
index c298876..b89b4a4 100644
--- a/src/containers/JitsiInviteCard.jsx
+++ b/src/containers/JitsiInviteCard.jsx
@@ -55,7 +55,12 @@ const JitsiInviteCard = () => {
<h2 className="head-heavy-xs">
<span>Pozvánka do Jitsi</span>
</h2>
- <button type="button" onClick={dismissPopup}>
+ <button
+ type="button"
+ onClick={dismissPopup}
+ aria-label="ZavĹ™Ăt"
+ data-tip="ZavĹ™Ăt"
+ >
<i className="ico--cross"></i>
</button>
</div>
--
GitLab