Skip to content

Commit

Permalink
Merge pull request #593 from luniki/a11y/enhanced-tooltips
Browse files Browse the repository at this point in the history 
Use @mui/material's Tooltip instead of `title` attributes.
  • Loading branch information
@lkiesow
lkiesow authored Jun 7, 2024
2 parents 289455f + 7214f06 commit 94e21d2
Show file tree
Hide file tree
Showing 26 changed files with 502 additions and 374 deletions.
120 changes: 64 additions & 56 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { useHotkeys } from "react-hotkeys-hook";
import { useAppDispatch, useAppSelector } from "../store";
import { HealthStatus, fetchHealthStatus } from "../slices/healthSlice";
import { UserInfoState } from "../slices/userInfoSlice";
import { Tooltip } from "./shared/Tooltip";

// Get code, flag and name of the current language
const currentLanguage = getCurrentLanguageInformation();
Expand Down Expand Up @@ -161,13 +162,14 @@ const Header = ({
<nav className="header-nav nav-dd-container" id="nav-dd-container">
{/* Select language */}
<div className="nav-dd lang-dd" id="lang-dd" ref={containerLang}>
<Tooltip title={t("LANGUAGE")}>
<div
className="lang"
title={t("LANGUAGE")}
onClick={() => setMenuLang(!displayMenuLang)}
>
<img src={currentLanguage?.flag} alt={currentLanguage?.code} />
</div>
</Tooltip>
{/* Click on the flag icon, a dropdown menu with all available languages opens */}
{displayMenuLang && <MenuLang />}
</div>
Expand All @@ -178,51 +180,56 @@ const Header = ({
otherwise the app crashes */}
{!!orgProperties &&
!!orgProperties["org.opencastproject.admin.mediamodule.url"] && (
<div className="nav-dd" title={t("MEDIAMODULE")}>
<a
href={
orgProperties["org.opencastproject.admin.mediamodule.url"]
}
target="_blank" rel="noreferrer"
>
<span className="fa fa-play-circle" />
</a>
</div>
<Tooltip title={t("MEDIAMODULE")}>
<div className="nav-dd">
<a
href={
orgProperties["org.opencastproject.admin.mediamodule.url"]
}
target="_blank" rel="noreferrer"
>
<span className="fa fa-play-circle" />
</a>
</div>
</Tooltip>
)}

{/* Opencast Studio */}
{hasAccess("ROLE_STUDIO", user) && (
<div className="nav-dd" title="Studio">
<a href={studioURL} target="_blank" rel="noreferrer">
<span className="fa fa-video-camera" />
</a>
</div>
<Tooltip title="Studio">
<div className="nav-dd">
<a href={studioURL} target="_blank" rel="noreferrer">
<span className="fa fa-video-camera" />
</a>
</div>
</Tooltip>
)}

{/* System warnings and notifications */}
{hasAccess("ROLE_ADMIN", user) && (
<div
className="nav-dd info-dd"
id="info-dd"
title={t("SYSTEM_NOTIFICATIONS")}
ref={containerNotify}
>
<div onClick={() => setMenuNotify(!displayMenuNotify)}>
<i className="fa fa-bell" aria-hidden="true" />
{errorCounter !== 0 && (
<span id="error-count" className="badge">
{errorCounter}
</span>
)}
{/* Click on the bell icon, a dropdown menu with all services in serviceList and their status opens */}
{displayMenuNotify && (
<MenuNotify
healthStatus={healthStatus}
redirectToServices={redirectToServices}
/>
)}
<Tooltip title={t("SYSTEM_NOTIFICATIONS")}>
<div
className="nav-dd info-dd"
id="info-dd"
ref={containerNotify}
>
<div onClick={() => setMenuNotify(!displayMenuNotify)}>
<i className="fa fa-bell" aria-hidden="true" />
{errorCounter !== 0 && (
<span id="error-count" className="badge">
{errorCounter}
</span>
)}
{/* Click on the bell icon, a dropdown menu with all services in serviceList and their status opens */}
{displayMenuNotify && (
<MenuNotify
healthStatus={healthStatus}
redirectToServices={redirectToServices}
/>
)}
</div>
</div>
</div>
</Tooltip>
)}

{/* Help */}
Expand All @@ -236,27 +243,28 @@ const Header = ({
!!orgProperties[
"org.opencastproject.admin.help.restdocs.url"
]) && (
<div
title="Help"
className="nav-dd"
id="help-dd"
ref={containerHelp}
>
<Tooltip title="Help">
<div
className="fa fa-question-circle"
onClick={() => setMenuHelp(!displayMenuHelp)}
/>
{/* Click on the help icon, a dropdown menu with documentation, REST-docs and shortcuts (if available) opens */}
{displayMenuHelp && (
<MenuHelp
hideMenuHelp={hideMenuHelp}
showRegistrationModal={showRegistrationModal}
showHotKeyCheatSheet={showHotKeyCheatSheet}
orgProperties={orgProperties}
user={user}
className="nav-dd"
id="help-dd"
ref={containerHelp}
>
<div
className="fa fa-question-circle"
onClick={() => setMenuHelp(!displayMenuHelp)}
/>
)}
</div>
{/* Click on the help icon, a dropdown menu with documentation, REST-docs and shortcuts (if available) opens */}
{displayMenuHelp && (
<MenuHelp
hideMenuHelp={hideMenuHelp}
showRegistrationModal={showRegistrationModal}
showHotKeyCheatSheet={showHotKeyCheatSheet}
orgProperties={orgProperties}
user={user}
/>
)}
</div>
</Tooltip>
)}

{/* Username */}
Expand Down
23 changes: 13 additions & 10 deletions src/components/configuration/partials/ThemesActionsCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { getUserInformation } from "../../../selectors/userInfoSelectors";
import { hasAccess } from "../../../utils/utils";
import { useAppDispatch, useAppSelector } from "../../../store";
import { deleteTheme } from "../../../slices/themeSlice";
import { Tooltip } from "../../shared/Tooltip";

/**
* This component renders the action cells of themes in the table view
Expand Down Expand Up @@ -49,11 +50,12 @@ const ThemesActionsCell = ({
<>
{/* edit themes */}
{hasAccess("ROLE_UI_THEMES_EDIT", user) && (
<button
onClick={() => showThemeDetails()}
className="button-like-anchor more"
title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS")}
/>
<Tooltip title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS")}>
<button
onClick={() => showThemeDetails()}
className="button-like-anchor more"
/>
</Tooltip>
)}

{displayThemeDetails && (
Expand All @@ -66,11 +68,12 @@ const ThemesActionsCell = ({

{/* delete themes */}
{hasAccess("ROLE_UI_THEMES_DELETE", user) && (
<button
onClick={() => setDeleteConfirmation(true)}
className="button-like-anchor remove ng-scope ng-isolate-scope"
title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE")}
/>
<Tooltip title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE")}>
<button
onClick={() => setDeleteConfirmation(true)}
className="button-like-anchor remove ng-scope ng-isolate-scope"
/>
</Tooltip>
)}

{displayDeleteConfirmation && (
Expand Down
104 changes: 58 additions & 46 deletions src/components/events/partials/EventActionCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
fetchSeriesDetailsTheme,
} from "../../../slices/seriesDetailsSlice";
import { deleteEvent } from "../../../slices/eventSlice";
import { Tooltip } from "../../shared/Tooltip";

/**
* This component renders the action cells of events in the table view
Expand Down Expand Up @@ -119,30 +120,33 @@ const EventActionCell = ({

{/* Open event details */}
{hasAccess("ROLE_UI_EVENTS_DETAILS_VIEW", user) && (
<button
onClick={() => onClickEventDetails()}
className="button-like-anchor more"
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS")}
/>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS")}>
<button
onClick={() => onClickEventDetails()}
className="button-like-anchor more"
/>
</Tooltip>
)}

{/* If event belongs to a series then the corresponding series details can be opened */}
{!!row.series && hasAccess("ROLE_UI_SERIES_DETAILS_VIEW", user) && (
<button
onClick={() => onClickSeriesDetails()}
className="button-like-anchor more-series"
title={t("EVENTS.SERIES.TABLE.TOOLTIP.DETAILS")}
/>
<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.DETAILS")}>
<button
onClick={() => onClickSeriesDetails()}
className="button-like-anchor more-series"
/>
</Tooltip>
)}

{/* Delete an event */}
{/*TODO: needs to be checked if event is published */}
{hasAccess("ROLE_UI_EVENTS_DELETE", user) && (
<button
onClick={() => setDeleteConfirmation(true)}
className="button-like-anchor remove"
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DELETE")}
/>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DELETE")}>
<button
onClick={() => setDeleteConfirmation(true)}
className="button-like-anchor remove"
/>
</Tooltip>
)}

{/* Confirmation for deleting an event*/}
Expand All @@ -158,64 +162,72 @@ const EventActionCell = ({

{/* If the event has an preview then the editor can be opened and status if it needs to be cut is shown */}
{!!row.has_preview && hasAccess("ROLE_UI_EVENTS_EDITOR_VIEW", user) && (
<a
href={`/editor-ui/index.html?id=${row.id}`}
className="cut"
<Tooltip
title={
row.needs_cutting
? t("EVENTS.EVENTS.TABLE.TOOLTIP.EDITOR_NEEDS_CUTTING")
: t("EVENTS.EVENTS.TABLE.TOOLTIP.EDITOR")
}
target="_blank" rel="noreferrer"
>
{row.needs_cutting && <span id="badge" className="badge" />}
</a>
<a
href={`/editor-ui/index.html?id=${row.id}`}
className="cut"
target="_blank" rel="noreferrer"
>
{row.needs_cutting && <span id="badge" className="badge" />}
</a>
</Tooltip>
)}

{/* If the event has comments and no open comments then the comment tab of event details can be opened directly */}
{row.has_comments && !row.has_open_comments && (
<button
onClick={() => onClickComments()}
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS")}
className="button-like-anchor comments"
/>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS")}>
<button
onClick={() => onClickComments()}
className="button-like-anchor comments"
/>
</Tooltip>
)}

{/* If the event has comments and open comments then the comment tab of event details can be opened directly */}
{row.has_comments && row.has_open_comments && (
<button
onClick={() => onClickComments()}
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS")}
className="button-like-anchor comments-open"
/>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS")}>
<button
onClick={() => onClickComments()}
className="button-like-anchor comments-open"
/>
</Tooltip>
)}

{/*If the event is in in a paused workflow state then a warning icon is shown and workflow tab of event
details can be opened directly */}
{row.workflow_state === "PAUSED" &&
hasAccess("ROLE_UI_EVENTS_DETAILS_WORKFLOWS_EDIT", user) && (
<button
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW")}
onClick={() => onClickWorkflow()}
className="button-like-anchor fa fa-warning"
/>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW")}>
<button
onClick={() => onClickWorkflow()}
className="button-like-anchor fa fa-warning"
/>
</Tooltip>
)}

{/* Open assets tab of event details directly*/}
{hasAccess("ROLE_UI_EVENTS_DETAILS_ASSETS_VIEW", user) && (
<button
onClick={() => onClickAssets()}
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS")}
className="button-like-anchor fa fa-folder-open"
/>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS")}>
<button
onClick={() => onClickAssets()}
className="button-like-anchor fa fa-folder-open"
/>
</Tooltip>
)}
{/* Open dialog for embedded code*/}
{hasAccess("ROLE_UI_EVENTS_EMBEDDING_CODE_VIEW", user) && (
<button
onClick={() => showEmbeddingCodeModal()}
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE")}
className="button-like-anchor fa fa-link"
/>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE")}>
<button
onClick={() => showEmbeddingCodeModal()}
className="button-like-anchor fa fa-link"
/>
</Tooltip>
)}

{displayEmbeddingCodeModal && (
Expand Down
16 changes: 9 additions & 7 deletions src/components/events/partials/EventsDateCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { connect } from "react-redux";
import { useAppDispatch, useAppSelector } from "../../../store";
import { fetchEvents } from "../../../slices/eventSlice";
import { renderValidDate } from "../../../utils/dateUtils";
import { Tooltip } from "../../shared/Tooltip";

/**
* This component renders the start date cells of events in the table view
Expand Down Expand Up @@ -35,13 +36,14 @@ const EventsDateCell = ({

return (
// Link template for start date of event
<button
className="button-like-anchor crosslink"
title={t("EVENTS.EVENTS.TABLE.TOOLTIP.START")}
onClick={() => addFilter(row.date)}
>
{t("dateFormats.date.short", { date: renderValidDate(row.date) })}
</button>
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.START")}>
<button
className="button-like-anchor crosslink"
onClick={() => addFilter(row.date)}
>
{t("dateFormats.date.short", { date: renderValidDate(row.date) })}
</button>
</Tooltip>
);
};

Expand Down
Loading

0 comments on commit 94e21d2

Please sign in to comment.