Merge pull request #27 from datopian/fix/accesbility-pages

Fix/accesbility pages

ckanext/nhs/fanstatic/css/nhs.css

@@ -763,6 +763,11 @@ a.btn-primary.active.focus {
   border-top-color: #027f3a !important;
 }
 
+
+.hero-wrapper {
+  background-color: black;
+}
+
 .hero {
   position: relative;
   color: #fff;
@@ -2361,4 +2366,8 @@ blockquote {
     padding-top: 20px;
     align-content: flex-start !important;
   }
+}
+
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
+  color: #404040 !important;
 }

ckanext/nhs/fanstatic/css/nhsuk.css

@@ -2584,6 +2584,10 @@ strong {
     color: #4c6272!important
 }
 
+.nhsuk-text__search {
+    font-size: 16px; /* Set >10px to avoid accebility alerts */
+}
+
 .nhsuk-u-visually-hidden {
     border: 0;
     clip: rect(0 0 0 0);
@@ -4604,6 +4608,14 @@ strong {
     }
 }
 
+@media (max-width: 768px) {
+    .nhsuk-header__logo .nhsuk-logo {
+        width: 200px;
+    }
+}
+
+
+
 @media (max-width:450px) {
     .nhsuk-header__logo {
         max-width: 50%
@@ -7310,3 +7322,7 @@ strong {
         top: 0
     }
 }
+
+.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus {
+    color: #206b82 !important;
+}

ckanext/nhs/plugin.py

@@ -272,7 +272,6 @@ def configure(self, config_):
         self.config = config_
         self.backend.configure(config_)
 
-
 def _notifications_for_nhs_activities(
     activities, new_package_activity, new_resource_activity, user_dict
 ):

ckanext/nhs/templates/header.html

@@ -44,7 +44,7 @@
                 </li>
                 {% endblock %} {% block header_account_log_out_link %}
                 <li>
-                    <a href="{{ h.url_for('/user/_logout') }}" title="{{ _('Log out') }}">
+                    <a href="{{ h.url_for('/user/_logout') }}">
                         <i class="fa fa-sign-out" aria-hidden="true"></i>
                         <span class="text">{{ _('Log out') }}</span>
                     </a>
@@ -83,7 +83,7 @@
             {% block header_site_navigation %}
             <nav class="section navigation" role="navigation" aria-label="Main Menu">
                 <ul class="nav nav-pills">
-                    <li><a href={{h.url_for( 'home.index')}} title="Go to Home">Home</a></li>
+                    <li><a href="{{ h.url_for('home.index') }}#home-page" title="Go to Home">Home</a></li>
                     <li><a href={{h.url_for( 'search')}} title="Go to Data">Data</a></li>
                     <li><a href={{h.url_for( 'foi-responses')}} title="FOI DATA">FOI Responses</a></li>
                     <li><a href="/news" title="Go to News">News</a></li>

ckanext/nhs/templates/home/layout1.html

@@ -1,10 +1,13 @@
-<main>
+<main id="home-page">
     <div class="survey" id="survey">
         {% block survey%} {% snippet 'home/snippets/feedback.html' %} {% endblock %}
     </div>
-    <div class="hero" role="search">
-        {% block hero%} {% snippet 'home/snippets/hero.html' %} {% endblock %}
+    <div class="hero-wrapper">
+        <div class="hero" id="content" role="search">
+            {% block hero%} {% snippet 'home/snippets/hero.html' %} {% endblock %}
+        </div>
     </div>
+
 
     <div class="themes">
         {%block themes %} {% snippet 'home/snippets/themes.html' %} {% endblock %}

ckanext/nhs/templates/home/snippets/feedback.html

@@ -1,4 +1,4 @@
 <div class="nhsuk-width-container feedback">
     <strong class="nhsuk-tag">BETA</strong>
-    <span class="nhsuk-u-font-size-24">Your feedback is important to us! Help us serve you better by filling out our <u><a href="https://online1.snapsurveys.com/ODP" target="_blank" title="Short Survey on what you think about NHS Open Data Portal" class="nhsuk-u-font-size-24">short survey</a></u>!</span>
+    <span class="nhsuk-u-font-size-24">Your feedback is important to us! Help us serve you better by filling out our <a href="https://online1.snapsurveys.com/ODP" target="_blank" title="Short Survey on what you think about NHS Open Data Portal" class="nhsuk-u-font-size-24">short survey!</a></span>
 </div>

ckanext/nhs/templates/home/snippets/search.html

@@ -1,16 +1,15 @@
 {% set tags = h.get_facet_items_dict('tags', limit=4) %} {% set placeholder = _('Search datasets') %}
 <form class="search-form" method="get" action="{% url_for controller='package', action='search' %}" role="search">
-    <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS Open Data Portal</label>
     <div class="input-group search-input-group nhsuk-u-width-three-quarters">
-        <input class="search_input" aria-label="{% block header_site_search_label %}{{ _('Search datasets') }}{% endblock %}" id="field-main-search" type="text" name="q" value="" autocomplete="off" placeholder="{% block search_placeholder %}{{ placeholder }}{% endblock %}"
+        <input class="search_input" aria-label="{% block header_site_search_label %}{{ _('Search datasets') }}{% endblock %}" id="field-main-search" type="text" name="q" value="" autocomplete="on" placeholder="{% block search_placeholder %}{{ placeholder }}{% endblock %}"
         />
 
         <span class="input-group-btn">
             <button class="search_submit" type="submit">
                 <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
                   <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
                 </svg>
-                <span class="nhsuk-u-visually-hidden">Search</span>
+                <span class="nhsuk-u-visually-hidden nhsuk-text__search">Search</span>
         </button>
         </span>
     </div>

ckanext/nhs/templates/home/snippets/themes.html

@@ -4,10 +4,14 @@
     <ul class="nhsuk-grid-row nhsuk-card-group" role="list">
         {% for theme in themes %} {% set url = h.url_for('theme_read', action='read', id=theme.name) %}
         <li class="nhsuk-grid-column-one-third nhsuk-card-group__item" role="listitem">
-            <div class="nhsuk-card nhsuk-card--clickable" onclick="location.href='{{url}}'">
+            <div class="nhsuk-card nhsuk-card--clickable"
+                 tabindex="0" 
+                 role="button" 
+                 onkeydown="if (event.key === 'Enter' || event.key === ' ') { location.href='{{url}}' }"
+                 onclick="location.href='{{url}}'">
                 <div class="nhsuk-card__content">
                     <h2 class="nhsuk-card__heading">
-                        <a class="nhsuk-card__link nhsuk-u-font-size-32" href={{url}} title="{{ _('View {theme_name}').format(theme_name=theme.display_name) }}">{{theme.title}}</a>
+                        <a class="nhsuk-card__link nhsuk-u-font-size-32" title="{{ _('View {theme_name}').format(theme_name=theme.display_name) }}">{{theme.title}}</a>
                     </h2>
                     <p class="nhsuk-card__description nhsuk-u-font-size-22">{{h.markdown_extract(theme.description, extract_length=80)}}</p>
                 </div>

ckanext/nhs/templates/organization/snippets/organization_item.html

@@ -20,7 +20,7 @@
   <img src="{{ organization.image_display_url or h.url_for_static('images/placeholder-theme.png') }}" alt="{{ organization.name }}" class="img-responsive media-image">
   {% endblock %}
   {% block title %}
-    <h3 class="media-heading">{{ organization.display_name }}</h3>
+    <h2 class="media-heading">{{ organization.display_name }}</h2>
   {% endblock %}
   {% block description %}
     {% if organization.description %}
@@ -40,7 +40,7 @@ <h3 class="media-heading">{{ organization.display_name }}</h3>
     {% endif %}
   {% endblock %}
   {% block link %}
-  <a href="{{ url }}" title="{{ _('View {organization_name}').format(organization_name=organization.display_name) }}" class="media-view">
+  <a href="{{ url }}" class="media-view">
     <span>{{ _('View {organization_name}').format(organization_name=organization.display_name) }}</span>
   </a>
   {% endblock %}

ckanext/nhs/templates/snippets/organization.html

@@ -27,9 +27,7 @@ <h2 class="module-heading"><i class="fa fa-building-o"></i> {{ _('Theme') }}</h2
       {% block inner %}
       {% block image %}
         <div class="image">
-          <a href="{{ url }}">
             <img src="{{ organization.image_display_url or h.url_for_static('/base/images/placeholder-organization.png') }}" width="200" alt="{{ organization.name }}" />
-          </a>
         </div>
       {% endblock %}
       {% block heading %}

ckanext/nhs/templates/snippets/organization_item.html

@@ -10,7 +10,7 @@
         </a>
         {% endblock %}
         {% block organization_item_header_title %}
-          <h3 class="media-heading"><a href={{ url }}>{{ organization.title or organization.name }}</a></h3>
+          <h2 class="media-heading"><a href={{ url }}>{{ organization.title or organization.name }}</a></h2>
         {% endblock %}
         {% block organization_item_header_description %}
           {% if organization.description %}
@@ -29,4 +29,4 @@ <h3 class="media-heading"><a href={{ url }}>{{ organization.title or organizatio
       {% snippet 'snippets/package_list.html', packages=organization.packages, list_class=list_class, item_class=item_class, truncate=120 %}
     {% endblock %}
   </section>
-{% endblock %}
+{% endblock %}

ckanext/nhs/templates/snippets/package_item.html

@@ -9,7 +9,7 @@
                 {% snippet 'snippets/local_friendly_datetime.html', datetime_obj=package.metadata_created %}
               {% endif %}
             </small> {% block heading %}
-        <h2 class="dataset-heading">
+        <h2 class="dataset-heading" aria-label="Go to the Dataset {{ title }}">
             {% block heading_private %} {% if package.private %}
             <span class="dataset-private label label-inverse">
                       <i class="fa fa-lock"></i>
@@ -23,7 +23,7 @@ <h2 class="dataset-heading">
         <ul class="dataset-resources list-unstyled">
             {% block resources_inner %} {% for resource in h.dict_list_reduce(package.resources, 'format') %}
             <li>
-                <a href="{{ h.url_for(controller='package', action='read', id=package.name) }}" class="label label-default" aria-label="Go to the Dataset {{ title }}">{{ resource }}</a>
+                <a class="label label-default">{{ resource }}</a>
             </li>
             {% endfor %} {% endblock %}
         </ul>
@@ -34,15 +34,15 @@ <h2 class="dataset-heading">
         <p class="empty nhsuk-u-font-size-24">{{ _("This dataset has no description") }}</p>
         {% endif %} {% endblock %}
 
-        <div class="nhsuk-action-link small">
+        <!-- <div class="nhsuk-action-link small">
             <a class="nhsuk-action-link__link" href="{{ h.url_for(package.type + '_read', controller='package', action='read', id=package.name) }}">
                 <svg class="nhsuk-icon nhsuk-icon__arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
                     <path d="M0 0h24v24H0z" fill="none"></path>
                     <path d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z"></path>
                     </svg>
                 <span class="nhsuk-action-link__text" aria-label="Read More about the Dataset {{ title }}">Read More</span>
             </a>
-        </div>
+        </div> -->
     </div>
 
     {% endblock %}

ckanext/nhs/templates/snippets/search_form.html

@@ -10,7 +10,7 @@
 
   {% block search_input %}
     <div class="input-group search-input-group">
-      <input aria-label="{% block header_site_search_label %}{{ placeholder }}{% endblock %}" id="field-giant-search" type="text" class="form-control input-lg" name="q" value="{{ query }}" autocomplete="off" placeholder="{{ placeholder }}">
+      <input aria-label="{% block header_site_search_label %}{{ placeholder }}{% endblock %}" id="field-giant-search" type="text" class="form-control input-lg" name="q" value="{{ query }}" autocomplete="on" placeholder="{{ placeholder }}">
       {% block search_input_button %}
       <span class="input-group-btn">
         <button class="btn btn-default btn-lg" type="submit" value="search" aria-label="Search">