Commit 268e59e7 authored by Vincent's avatar Vincent

Merge branch '158-hover-text-on-plaudit-button-only-says-plaudit' into 'master'

Resolve "Hover text on "Plaudit" button only says "Plaudit""

Closes #158

See merge request !134
parents f55c3cd9 ac09fbf8
Pipeline #66169084 failed with stages
in 3 minutes and 13 seconds
......@@ -65,8 +65,8 @@ const renderSignInModal = (
) => (
<form onSubmit={handleSignin} className="Widget" data-iframe-height="data-iframe-height">
<span className="Widget__FlexContainer">
<span className="Widget__Brand">
<Logo role="img" aria-label="" className="Widget__logo"/>
<span aria-hidden={true} className="Widget__Brand">
<Logo role="img" className="Widget__logo"/>
</span>
<span className="Widget__Tagline">
<span className="Widget__TaglineContent">
......@@ -93,9 +93,9 @@ const renderNoEndorsements = (
{/* This is needed because <button> elements cannot be flex containers. */}
{/* See https://stackoverflow.com/a/35466231 */}
<span className="Widget__FlexContainer">
<span className="Widget__ButtonContainer">
<span aria-hidden={true} className="Widget__ButtonContainer">
<span className="Widget__Button">
<Logo role="img" aria-label="" className="Widget__logo"/>
<Logo role="img" className="Widget__logo"/>
</span>
</span>
<span className="Widget__Tagline">
......@@ -216,8 +216,8 @@ const renderWithEndorsements = (
const tagline = renderTagline(endorsements, workData, userOrcid);
const buttonOrBrand = (typeof userOrcid !== 'undefined' && Object.keys(endorsements).includes(userOrcid))
? (
<span className="Widget__Brand">
<Logo role="img" aria-label="Endorse" className="Widget__logo"/>
<span aria-hidden={true} className="Widget__Brand">
<Logo role="img" className="Widget__logo"/>
</span>
)
: (
......@@ -226,9 +226,14 @@ const renderWithEndorsements = (
onClick={handleEndorsement}
tabIndex={0}
title={`Endorse "${workData.title}"`}
aria-label={`Endorse "${workData.title}"`}
className="Widget__Button"
>
<Logo role="img" aria-label="" className="Widget__logo"/>
<Logo
role="img"
aria-label=""
className="Widget__logo"
/>
</button>
</span>
);
......
......@@ -134,6 +134,8 @@
svg.Widget__logo {
width: auto;
height: 30px;
// Prevent the SVG's embedded <title> element from being used as a tooltip:
pointer-events: none;
g {
fill: $primaryColour;
......
......@@ -10,10 +10,10 @@ exports[`The view, when not logged in, should render consistently when asked to
className="Widget__FlexContainer"
>
<span
aria-hidden={true}
className="Widget__Brand"
>
<svg
aria-label=""
className="Widget__logo"
role="img"
>
......@@ -52,6 +52,7 @@ exports[`The view, when not logged in, should render consistently when endorseme
className="Widget__ButtonContainer"
>
<button
aria-label="Endorse \\"Arbitrary title\\""
className="Widget__Button"
onClick={[Function]}
tabIndex={0}
......@@ -116,6 +117,7 @@ exports[`The view, when not logged in, should render consistently with one endor
className="Widget__ButtonContainer"
>
<button
aria-label="Endorse \\"Arbitrary title\\""
className="Widget__Button"
onClick={[Function]}
tabIndex={0}
......@@ -170,6 +172,7 @@ exports[`The view, when not logged in, should render consistently with two endor
className="Widget__ButtonContainer"
>
<button
aria-label="Endorse \\"Arbitrary title\\""
className="Widget__Button"
onClick={[Function]}
tabIndex={0}
......@@ -234,13 +237,13 @@ exports[`The view, when not logged in, should render consistently without endors
className="Widget__FlexContainer"
>
<span
aria-hidden={true}
className="Widget__ButtonContainer"
>
<span
className="Widget__Button"
>
<svg
aria-label=""
className="Widget__logo"
role="img"
>
......@@ -362,10 +365,10 @@ exports[`The view, when the user is logged in and has endorsed the work, should
className="Widget__FlexContainer"
>
<span
aria-hidden={true}
className="Widget__Brand"
>
<svg
aria-label="Endorse"
className="Widget__logo"
role="img"
>
......@@ -419,10 +422,10 @@ exports[`The view, when the user is logged in and has endorsed the work, should
className="Widget__FlexContainer"
>
<span
aria-hidden={true}
className="Widget__Brand"
>
<svg
aria-label="Endorse"
className="Widget__logo"
role="img"
>
......@@ -466,10 +469,10 @@ exports[`The view, when the user is logged in and has endorsed the work, should
className="Widget__FlexContainer"
>
<span
aria-hidden={true}
className="Widget__Brand"
>
<svg
aria-label="Endorse"
className="Widget__logo"
role="img"
>
......@@ -525,6 +528,7 @@ exports[`The view, when the user is logged in and has not endorsed the work, sho
className="Widget__ButtonContainer"
>
<button
aria-label="Endorse \\"Arbitrary title\\""
className="Widget__Button"
onClick={[Function]}
tabIndex={0}
......@@ -589,6 +593,7 @@ exports[`The view, when the user is logged in and has not endorsed the work, sho
className="Widget__ButtonContainer"
>
<button
aria-label="Endorse \\"Arbitrary title\\""
className="Widget__Button"
onClick={[Function]}
tabIndex={0}
......@@ -643,6 +648,7 @@ exports[`The view, when the user is logged in and has not endorsed the work, sho
className="Widget__ButtonContainer"
>
<button
aria-label="Endorse \\"Arbitrary title\\""
className="Widget__Button"
onClick={[Function]}
tabIndex={0}
......@@ -707,13 +713,13 @@ exports[`The view, when the user is logged in and has not endorsed the work, sho
className="Widget__FlexContainer"
>
<span
aria-hidden={true}
className="Widget__ButtonContainer"
>
<span
className="Widget__Button"
>
<svg
aria-label=""
className="Widget__logo"
role="img"
>
......
......@@ -2,7 +2,7 @@ import React from 'react'
import { Head } from 'react-static';
export default () => (
<div>
<div aria-busy="true">
<header className="hero is-primary is-medium">
<div className="hero-body">
<div className="container">
......
......@@ -2,7 +2,7 @@ import React from 'react'
import { Head } from 'react-static';
export default () => (
<div>
<div aria-busy="true">
<header className="hero is-primary is-medium">
<div className="hero-body">
<div className="container">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment