diff --git a/package-lock.json b/package-lock.json index 33f2bb3c94766bb2e2d334d56c7e439e4b3164ce..b55c5d906b7f8ed361cad946b319d9167cf23826 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 0330bd180956d2bf32881f6e7fa027d637913347..5f7e6bd50ce79adb1d3bb2b5f28d46c081483325 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 9062d072371c0c47e5adb4a8e951bf550c9f0b6a..6cde1d32e58eba9cb7a69a9d827e63d8f78632bb 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 34a8dc67b5e4d68c074ffdb6fac0563a8c13b5af..8e154aafa9c06cda7575e657b44a4fc504cdbce0 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 242fd676a5bec498d1ea215aee4cd3df11ee1cc8..acc861bfb153b05c9e8b90eca79573cc0ed47639 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 08ec124d68c31add7ecce47e03de70fe9f9ce33a..763e221f5818fc6957d6d19239bccfad9bc184e4 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 b24917346497c1f642cdbb42480a09bf2103a4ab..a5cd1027e1b43353fb8a7e85fdc2e4859c93da23 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 c298876306572a345681d149e5c4c10707b525b9..b89b4a4d96ea8d37646738f73a997288e05c0c4a 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>