signup page: improve styling, small a11y fixes overall

zenodo · Sep 26, 2023 · f47c0ae · f47c0ae
1 parent b6afa62
commit f47c0ae
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 25 deletions.
diff --git a/assets/less/zenodo-rdm/elements/header.overrides b/assets/less/zenodo-rdm/elements/header.overrides
@@ -0,0 +1,3 @@
+.ui.tiny.header {
+  font-weight: @semibold;
+}
diff --git a/assets/less/zenodo-rdm/elements/header.variables b/assets/less/zenodo-rdm/elements/header.variables
diff --git a/assets/less/zenodo-rdm/elements/list.overrides b/assets/less/zenodo-rdm/elements/list.overrides
@@ -8,6 +8,11 @@
   }
 }
 
+dl.features-list {
+  dd {
+    color: @invertedTextColorLight;
+  }
+}
 
 footer  {
   ul.ui.link.list {

diff --git a/assets/less/zenodo-rdm/globals/site.overrides b/assets/less/zenodo-rdm/globals/site.overrides
@@ -17,7 +17,7 @@ body {
   h2, h2.ui.header, .ui.large.header,
   h3, h3.ui.header, .ui.medium.header,
   h4, h4.ui.header, .ui.small.header,
-  h5, h5.ui.header, .ui.tiny.header {
+  h5, h5.ui.header, .ui.tiny.header:not(dt) {
     font-weight: @semibold !important;
   }
 }

diff --git a/assets/less/zenodo-rdm/globals/site.variables b/assets/less/zenodo-rdm/globals/site.variables
@@ -12,6 +12,7 @@
 @primaryColor: #2F6FA7;
 
 @invertedTextColor: #FFF;
+@invertedTextColorLight: #dbeaff;
 @mutedTextColor: #696969;
 @linkColor: @primaryColor;
 
@@ -37,4 +38,4 @@
 @h1 : unit((36 / 14), rem);
 @h2 : unit((30 / 14), rem);
 @h3 : unit((24 / 14), rem);
-@h4 : unit((16 / 14), rem);
+@h4 : unit((18 / 14), rem);
diff --git a/templates/semantic-ui/invenio_accounts/login_user.html b/templates/semantic-ui/invenio_accounts/login_user.html
@@ -25,7 +25,7 @@ <h1 class="ui medium primary header rel-mb-1">{{_('Log in to account') }}</h1>
                 {{ render_field(form.email, icon="icon user", autofocus=True, errormsg=False) }}
                 {{ render_field(form.password, icon="icon lock", errormsg=False) }}
                 <button type="submit" class="ui fluid large labeled icon primary button">
-                  <i class="icon sign-in"></i> {{_('Log in')}}
+                  <i class="icon sign-in" aria-hidden="true"></i> {{_('Log in')}}
                 </button>
               </form>
             {%- endwith %}
@@ -36,12 +36,12 @@ <h1 class="ui medium primary header rel-mb-1">{{_('Log in to account') }}</h1>
       <div class="ui secondary segment rel-pt-2 rel-pb-2">
         {%- block registerable %}
           {%- if security.registerable %}
-            <h2 class="ui small header text-muted">
+            <p class="ui small header text-muted">
               {% trans sitename=config.ACCOUNTS_SITENAME %}
                 New to {{sitename}}?
               {% endtrans %} 
                 <a href="{{url_for('security.register')}}">{{_('Sign up')}}</a>
-            </h2>
+            </p>
             <a href="https://about.zenodo.org/privacy-policy/">Privacy notice</a>
           {%- endif %}
         {%- endblock %}

diff --git a/templates/semantic-ui/invenio_accounts/register_user.html b/templates/semantic-ui/invenio_accounts/register_user.html
@@ -10,35 +10,39 @@ <h1 class="ui inverted header text-center">Research. Shared! Sign up today</h1>
 
 <div class="ui grid">
   <div class="sixteen wide mobile eight wide tablet eight wide computer left aligned column">
-    <dl class="mt-0">
-      <dt class="ui small inverted header"><b>Citeable. Discoverable</b></dt>
+    <dl class="features-list mt-0">
+      <dt class="ui small inverted header">Citeable. Discoverable</dt>
       <dd>Uploads get a Digital Object Identifier (DOI) to make them easily and uniquely citeable.</dd>
 
-      <dt class="ui small inverted header"><b>Communities</b></dt>
+      <dt class="ui small inverted header">Communities</dt>
       <dd>Accept or reject uploads to your own community (e.g workshops, EU projects, institutions or entire
         disciplines).</dd>
 
-      <dt class="ui small inverted header"><b>Trusted Research Data Management</b></dt>
+      <dt class="ui small inverted header">Trusted Research Data Management</dt>
       <dd>Built on top of CERN's expertise in managing 100s of petabytes of research data from the Large Hadron Collider.
       </dd>
     </dl>
   </div>
 
   <div class="sixteen wide mobile eight wide tablet eight wide computer column">
     <div class="signup-social">
-      <a href="{{url_for('invenio_oauthclient.login', remote_app='github')}}" class="ui button fluid">
-        <i class="github icon"></i>
+      <a href="{{url_for('invenio_oauthclient.login', remote_app='github')}}" class="ui button fluid mb-5">
+        <i class="github icon" aria-hidden="true"></i>
         {{_('Sign up with GitHub')}}
       </a>
-      <a href="{{url_for('invenio_oauthclient.login', remote_app='orcid')}}" class="ui button fluid">
-        <i class="icon"><img id="signup-orcid-logo" src="{{ url_for('static', filename='images/orcid.svg')}}"></i>
+      <a href="{{url_for('invenio_oauthclient.login', remote_app='orcid')}}" class="ui button fluid mb-5">
+        <i class="icon" aria-hidden="true">
+          <img id="signup-orcid-logo" src="{{ url_for('static', filename='images/orcid.svg')}}" alt="">
+        </i>
         {{_('Sign up with ORCID')}}
       </a>
       <a href="{{url_for('invenio_oauthclient.login', remote_app='openaire_aai')}}" class="ui button fluid">
-        <i class="icon"><img id="signup-openaire-logo" src="{{ url_for('static', filename='images/openaire.svg')}}"></i>
+        <i class="icon" aria-hidden="true">
+          <img id="signup-openaire-logo" src="{{ url_for('static', filename='images/openaire.svg')}}" alt="">
+        </i>
         {{_('Sign up with OpenAIRE')}}
       </a>
-      <h3 class="ui header" id="testheader">— OR —</h3>
+      <p class="ui medium inverted header rel-mt-1 rel-mb-1" id="testheader">— OR —</p>
     </div>
     {%- with form = register_user_form %}
     <form class="credentials-form" action="{{ url_for_security('register') }}" method="POST" name="register_user_form">
@@ -59,16 +63,16 @@ <h3 class="ui header" id="testheader">— OR —</h3>
       {%- endif %}
 
       <button type="submit" class="ui left labeled icon fluid button warning">
-        <i class="icon edit"></i>
+        <i class="icon edit" aria-hidden="true"></i>
         {{ _('Sign up') }}
       </button>
     </form>
 
     <div class="ui centered container rel-mt-2">
-      <h2 class="ui small inverted header">
+      <p class="ui small inverted header">
         {{ _('Already have an account?') }}
         <a href="{{ url_for_security('login') }}" class="inverted">{{ _('Log in') }}</a>
-      </h2>
+      </p>
       <a href="https://about.zenodo.org/privacy-policy/" class="inverted">Privacy notice</a>
     </div>
     {%- endwith %}

diff --git a/templates/semantic-ui/invenio_communities/frontpage.html b/templates/semantic-ui/invenio_communities/frontpage.html
@@ -47,7 +47,7 @@ <h1 class="ui header mr-10">{{ _('Communities') }}</h1>
         </div>
         <div class="three wide mobile five wide tablet three wide computer stretched column">
           <a href="{{ config.COMMUNITIES_ROUTES['new'] }}" class="ui icon left labeled positive button" role="button">
-            <i class="icon plus"></i>
+            <i class="icon plus" aria-hidden="true"></i>
             {{_('New community')}}
           </a>
         </div>

diff --git a/templates/semantic-ui/zenodo_rdm/footer.html b/templates/semantic-ui/zenodo_rdm/footer.html
@@ -27,7 +27,7 @@
 {%- block footer_top_left %}
 <div class="ui equal width stackable grid">
   <div class="column">
-    <h2 class="ui inverted small header">{{_('About')}}</h2>
+    <h2 class="ui inverted tiny header">{{_('About')}}</h2>
     <ul class="ui inverted link list">
       <li class="item">
         <a href="https://about.zenodo.org">{{_('About')}}</a>
@@ -53,15 +53,15 @@ <h2 class="ui inverted small header">{{_('About')}}</h2>
     </ul>
   </div>
   <div class="column">
-    <h2 class="ui inverted small header">{{_('Blog')}}</h2>
+    <h2 class="ui inverted tiny header">{{_('Blog')}}</h2>
     <ul class="ui inverted link list">
       <li class="item">
         <a href="https://blog.zenodo.org">{{_('Blog')}}</a>
       </li>
     </ul>
   </div>
   <div class="column">
-    <h2 class="ui inverted small header">{{_('Help')}}</h2>
+    <h2 class="ui inverted tiny header">{{_('Help')}}</h2>
     <ul class="ui inverted link list">
       <li class="item">
         <a href="https://help.zenodo.org">{{_('FAQ')}}</a>
@@ -78,7 +78,7 @@ <h2 class="ui inverted small header">{{_('Help')}}</h2>
     </ul>
   </div>
   <div class="column">
-    <h2 class="ui inverted small header">{{_('Developers')}}</h2>
+    <h2 class="ui inverted tiny header">{{_('Developers')}}</h2>
     <ul class="ui inverted link list">
       <li class="item">
         <a href="https://developers.zenodo.org">{{_('REST API')}}</a>
@@ -89,7 +89,7 @@ <h2 class="ui inverted small header">{{_('Developers')}}</h2>
     </ul>
   </div>
   <div class="column">
-    <h2 class="ui inverted small header">{{_('Contribute')}}</h2>
+    <h2 class="ui inverted tiny header">{{_('Contribute')}}</h2>
     <ul class="ui inverted link list">
       <li class="item">
         <a href="https://github.com/zenodo/zenodo">
@@ -108,7 +108,7 @@ <h2 class="ui inverted small header">{{_('Contribute')}}</h2>
 {%- endblock footer_top_left %}
 
 {%- block footer_top_right %}
-  <h2 class="ui inverted small header">{{_('Funded by')}}</h2>
+  <h2 class="ui inverted tiny header">{{_('Funded by')}}</h2>
   <ul class="ui horizontal link list">
     <li class="item">
       <a href="https://home.cern" aria-label="CERN">