Ay11 community views

invenio_communities/assets/semantic-ui/js/invenio_communities/members/components/ActionDropdown.js

@@ -58,8 +58,15 @@
 
   render() {
     const { loading, actionSuccess, error } = this.state;
-    const { options, currentValue, optionsSerializer, disabled, direction, fluid } =
-      this.props;
+    const {
+      options,
+      currentValue,
+      optionsSerializer,
+      disabled,
+      direction,
+      fluid,
+      label,
+    } = this.props;
 
     return (
       <Overridable
@@ -79,6 +86,7 @@
             openOnFocus={false}
             selectOnBlur={false}
             onChange={this.handleOnChange}
+            aria-label={label}
             disabled={disabled}
             direction={direction}
             fluid={fluid}
@@ -102,6 +110,7 @@
   optionsSerializer: PropTypes.func,
   disabled: PropTypes.bool,
   direction: PropTypes.string,
+  label: PropTypes.string,
   resource: PropTypes.object.isRequired,
   fluid: PropTypes.bool,
 };

invenio_communities/assets/semantic-ui/js/invenio_communities/members/components/MembersSearchBarElement.js

@@ -34,6 +34,7 @@ export const MembersSearchBarElement = withState(
           icon: "search",
           onClick: onBtnSearchClick,
           className: "search",
+          title: i18next.t("Search"),
         }}
         fluid
         placeholder={placeholder}

invenio_communities/assets/semantic-ui/js/invenio_communities/members/components/RemoveMemberModal.js

@@ -80,7 +80,7 @@ class RemoveMemberModal extends Component {
         closeModal={this.onCloseHandler}
         contentMap={this.contentMap}
       >
-        <Modal open={modalOpen}>
+        <Modal open={modalOpen} role="dialog" aria-label={i18next.t("Remove user")}>
           <Modal.Header>{content?.headerText}</Modal.Header>
           <Modal.Content>
             {content?.bodyText} <br />

invenio_communities/assets/semantic-ui/js/invenio_communities/members/components/bulk_actions/RadioSelection.js

@@ -30,6 +30,7 @@ export class RadioSelection extends Component {
                     <Radio
                       onClick={this.handleOnChange}
                       label={option.title}
+                      aria-label={option.title}
                       value={option.name}
                       checked={selected === option.name}
                       name="membersRoles"

invenio_communities/assets/semantic-ui/js/invenio_communities/members/components/bulk_actions/SearchResultsBulkActions.js

@@ -66,6 +66,7 @@ export class SearchResultsBulkActions extends Component {
             className="align-self-center mr-10"
             onChange={this.handleOnChange}
             checked={allSelectedChecked && allSelected}
+            aria-label={i18next.t("Select all members")}
           />
           <Dropdown
             className="align-self-center fluid-responsive"

invenio_communities/assets/semantic-ui/js/invenio_communities/members/components/bulk_actions/SearchResultsRowCheckbox.js

@@ -2,6 +2,7 @@ import { BulkActionsContext } from "./context";
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Checkbox } from "semantic-ui-react";
+import { i18next } from "@translations/invenio_communities/i18next";
 import _hasIn from "lodash/hasIn";
 
 export class SearchResultsRowCheckbox extends Component {
@@ -52,6 +53,7 @@ export class SearchResultsRowCheckbox extends Component {
         className="mt-auto mb-auto "
         checked={this.isChecked(bulkActionContext, allSelected) || allSelected}
         onChange={this.handleOnChange}
+        aria-label={i18next.t("Select member")}
       />
     );
   }

invenio_communities/assets/semantic-ui/js/invenio_communities/members/components/dropdowns.js

@@ -52,6 +52,7 @@ export const RoleDropdown = ({
   disabled,
   currentValue,
   resource,
+  label,
 }) => {
   return (
     <ActionDropdown
@@ -64,6 +65,7 @@ export const RoleDropdown = ({
       resource={resource}
       direction="left"
       fluid
+      label={label}
     />
   );
 };
@@ -97,6 +99,7 @@ export const VisibilityDropdown = ({
   disabled,
   currentValue,
   resource,
+  label,
 }) => {
   return (
     <ActionDropdown
@@ -111,6 +114,7 @@ export const VisibilityDropdown = ({
       resource={resource}
       direction="left"
       fluid
+      label={label}
     />
   );
 };

invenio_communities/assets/semantic-ui/js/invenio_communities/members/invitations/InvitationResultItem.js

@@ -44,6 +44,7 @@ export class InvitationResultItem extends Component {
     } = this.state;
     const { api: invitationsApi } = this.context;
     const rolesCanInviteByType = rolesCanInvite[member.type];
+    const memberInvitationExpiration = formattedTime(request.expires_at);
     return (
       <Table.Row className="community-member-item">
         <Table.Cell>
@@ -70,8 +71,11 @@ export class InvitationResultItem extends Component {
         <Table.Cell data-label={i18next.t("Status")}>
           <RequestStatus status={request.status} />
         </Table.Cell>
-        <Table.Cell data-label={i18next.t("Expires")}>
-          {formattedTime(request.expires_at)}
+        <Table.Cell
+          aria-label={i18next.t("Expires") + " " + memberInvitationExpiration}
+          data-label={i18next.t("Expires")}
+        >
+          {memberInvitationExpiration}
         </Table.Cell>
         <Table.Cell data-label={i18next.t("Role")}>
           <RoleDropdown
@@ -81,6 +85,7 @@ export class InvitationResultItem extends Component {
             disabled={!invitation.permissions.can_update_role}
             currentValue={invitation.role}
             resource={invitation}
+            label={i18next.t("Role") + " " + invitation.role}
           />
         </Table.Cell>
         <Table.Cell>

invenio_communities/assets/semantic-ui/js/invenio_communities/members/invitations/InvitationsSearchBarElement.js

@@ -25,6 +25,7 @@ export const InvitationsSearchBarElement = ({
         icon: "search",
         onClick: onBtnSearchClick,
         className: "search",
+        title: i18next.t("Search"),
       }}
       fluid
       placeholder={i18next.t("Search in invitations...")}

invenio_communities/assets/semantic-ui/js/invenio_communities/members/invitations/invitationsModal/InvitationsMembersModal.js

@@ -129,6 +129,7 @@ export class InvitationsMembersModal extends Component {
         onOpen={this.handleOpenModal}
         closeOnDimmerClick={false}
         open={open}
+        aria-label={i18next.t("Invite members")}
         trigger={
           <Button
             className="fluid-responsive"
@@ -151,6 +152,7 @@ export class InvitationsMembersModal extends Component {
           menu={{
             className: "rel-pl-2 rel-pt-2",
             tabular: true,
+            role: "tablist",
           }}
           activeIndex={activeIndex}
           panes={this.getPanes()}

invenio_communities/assets/semantic-ui/js/invenio_communities/members/members/manager_view/ManagerMembersResultItem.js

@@ -61,7 +61,10 @@ export class ManagerMembersResultItem extends Component {
     const { config } = this.props;
     const { result } = this.state;
     const { api } = this.context;
-
+    const membershipRelativeTimestamp = timestampToRelativeTime(result.created);
+    const memberVisibility = result.visible
+      ? i18next.t(config.visibility[0].title)
+      : i18next.t(config.visibility[1].title);
     return (
       <Table.Row>
         <Table.Cell>
@@ -111,23 +114,28 @@ export class ManagerMembersResultItem extends Component {
           </Grid>
         </Table.Cell>
 
-        <Table.Cell data-label={i18next.t("Member since")}>
-          {timestampToRelativeTime(result.created)}
+        <Table.Cell
+          aria-label={i18next.t("Member since") + " " + membershipRelativeTimestamp}
+          data-label={i18next.t("Member since")}
+        >
+          {membershipRelativeTimestamp}
         </Table.Cell>
 
-        <Table.Cell data-label={i18next.t("Visibility")}>
+        <Table.Cell
+          aria-label={i18next.t("Visibility") + " " + memberVisibility}
+          data-label={i18next.t("Visibility")}
+        >
           {result.permissions.can_update_visible ? (
             <VisibilityDropdown
               visibilityTypes={config.visibility}
               successCallback={this.updateMemberVisibility}
               action={api.updateVisibility}
               currentValue={result.visible}
               resource={result}
+              label={i18next.t("Visibility") + " " + memberVisibility}
             />
-          ) : result.visible ? (
-            i18next.t("Public")
           ) : (
-            i18next.t("Hidden")
+            memberVisibility
           )}
         </Table.Cell>
 
@@ -139,6 +147,7 @@ export class ManagerMembersResultItem extends Component {
               action={api.updateRole}
               currentValue={result.role}
               resource={result}
+              label={i18next.t("Role") + " " + result.role}
             />
           ) : (
             _upperFirst(result.role)

invenio_communities/assets/semantic-ui/js/invenio_communities/settings/curationPolicy/CurationPolicyForm.js

@@ -32,6 +32,7 @@ const ReviewPolicyField = ({ label, formConfig, ...props }) => {
             key={item.value}
             fieldPath="access.review_policy"
             label={item.text}
+            aria-label={item.text}
             labelIcon={item.icon}
             checked={_get(field.value, "access.review_policy") === item.value}
             value={item.value}