♿ [#1604] Fixed aria-labels, contrast, label-nesting for survey and file-input

Author: jiromaykin

src/open_inwoner/accounts/templates/django_registration/registration_form.html

@@ -8,8 +8,8 @@
    {% if digit_url %}
     {% render_column start=5 span=5 %}
         {% render_card direction='horizontal' tinted=True %}
-            <a href="{% url 'digid:login' %}" class="link digid-logo" aria-describedby="Digid logo" title="Digid logo">
-                <img class="digid-logo__image" src="{% static 'accounts/digid_logo.svg' %}" alt="Digid logo">
+            <a href="{% url 'digid:login' %}" class="link digid-logo">
+                <img class="digid-logo__image" src="{% static 'accounts/digid_logo.svg' %}" alt="{% trans "DigiD inlogpagina" %}">
             </a>
             {% link bold=True href=digit_url text=_('Registreren met DigiD') secondary=True icon='arrow_forward' %}
         {% endrender_card %}

src/open_inwoner/accounts/templates/registration/login.html

@@ -17,8 +17,8 @@ <h1 class="h1">{% trans 'Welkom' %}</h1>
                 <br>
 		{% if settings.DIGID_ENABLED %}
                     {% render_card direction='horizontal' tinted=True %}
-                        <a href="{% url 'digid:login' %}" class="link digid-logo" aria-describedby="Digid logo" title="Digid logo">
-                            <img class="digid-logo__image" src="{% static 'accounts/digid_logo.svg' %}" alt="Digid logo">
+                        <a href="{% url 'digid:login' %}" class="link digid-logo">
+                            <img class="digid-logo__image" src="{% static 'accounts/digid_logo.svg' %}" alt="{% trans "DigiD inlogpagina" %}">
                         </a>
                         {% url 'digid:login' as href %}
                         {% with href|addnexturl:next as href_with_next %}
@@ -32,7 +32,7 @@ <h1 class="h1">{% trans 'Welkom' %}</h1>
                 {% if oidc_config.enabled and site_config.openid_enabled_for_regular_users %}
                     {% render_card tinted=True direction='horizontal' %}
                     {% if site_config.openid_connect_logo %}
-                        <a href="{% url 'oidc_authentication_init' %}" class="link digid-logo" aria-describedby="{{ site_config.openid_connect_logo.default_alt_text }}" title="{{ site_config.openid_connect_logo.default_alt_text }}">
+                        <a href="{% url 'oidc_authentication_init' %}" class="link digid-logo">
                             <img class="digid-logo__image" src="{{ site_config.openid_connect_logo.url }}" alt="{{ site_config.openid_connect_logo.default_alt_text }}">
                         </a>
                     {% else %}

src/open_inwoner/components/templates/components/Dropdown/Dropdown.html

@@ -1,7 +1,7 @@
 {% load i18n button_tags %}
 
 <div class="dropdown">
-    {% button href="#" icon=icon|default:'expand_more' text_icon=text_icon icon_position='after' class=class bordered=False text=text icon_outlined=True transparent=True single=True disabled=disabled secondary=secondary size="small" %}
+    {% button href="#" icon=icon|default:'expand_more' text_icon=text_icon icon_position='after' class=class bordered=False text=text title=_("Keuzemenu") icon_outlined=True transparent=True single=True disabled=disabled secondary=secondary size="small" %}
     <div class="dropdown__content">
         {{ contents }}
     </div>

src/open_inwoner/components/templates/components/Form/FileInput.html

@@ -6,11 +6,11 @@
             <span class="input-file">
             {{ field|addclass:"inputfile" }}
 
-            <label class="label__label" for="{{ field.auto_id }}">
-            {% icon icon="cloud_upload" icon_position="before" outlined=True %}
-                {{ text }}
+                <span class="label__label" for="{{ field.auto_id }}">
+                {% icon icon="cloud_upload" icon_position="before" outlined=True %}
+                    {{ text }}
 
-            </label>{% if field.field.required %}<span class="label__label--required"> * </span>{% endif %}
+                </span>{% if field.field.required %}<span class="label__label--required"> * </span>{% endif %}
             </span>
 
             {% if field.errors %}

src/open_inwoner/components/templates/components/Header/AccessibilityHeader.html

@@ -1,7 +1,7 @@
 {% load i18n link_tags %}
 
-<div class="accessibility-header">
-    <ul class="accessibility-header__list" role="complementary" aria-label="{% trans "Toegankelijkheidshulp" %}">
+<div class="accessibility-header" role="complementary">
+    <ul class="accessibility-header__list" aria-label="{% trans "Toegankelijkheidshulp" %}">
         <li class="accessibility-header__list-item">
             {% trans "Doorgaan naar hoofdinhoud" as link_text %}
             {% link href="#content" icon="south" text=link_text extra_classes="skip-link" %}

src/open_inwoner/scss/components/Card/Card.scss

@@ -61,6 +61,11 @@
 
   &--tinted {
     --card-color-background: var(--color-gray-lightest);
+
+    // contrast for accessibility
+    .form .caption__content {
+      color: var(--color-tinted-mute);
+    }
   }
 
   &__img {

src/open_inwoner/scss/components/Form/DocumentUpload.scss

@@ -1,5 +1,6 @@
 #document-upload {
   gap: var(--spacing-tiny);
+  max-width: var(--mobile-xs-width);
 
   .button[type='submit']:disabled {
     background-color: var(--color-gray) !important;
@@ -17,10 +18,6 @@
     }
   }
 
-  input[type='text'] {
-    max-width: var(--mobile-xs-width);
-  }
-
   .inputfile-group {
     display: block;
 
@@ -48,10 +45,11 @@
 /// File-input site wide
 input[type='file'] {
   background-color: var(--color-white);
-  color: var(--color-primary-lighter);
+  color: var(--color-primary);
   border: 1px solid var(--color-mute);
   border-radius: var(--border-radius);
   display: inline-block;
+  filter: saturate(70%);
   min-width: 100%;
   max-width: var(--form-width);
   padding: 0;
@@ -129,7 +127,8 @@ input[type='file']::file-selector-button {
       z-index: 200;
     }
 
-    .inputfile + label {
+    .inputfile + .label,
+    .inputfile + .label__label {
       display: inline-block;
       position: absolute;
       top: 5px;
@@ -145,28 +144,36 @@ input[type='file']::file-selector-button {
       z-index: -1;
     }
 
-    .inputfile:focus + label,
-    .inputfile.has-focus + label,
-    .inputfile:hover + label,
-    .inputfile + label:hover {
+    .inputfile:focus + .label__label,
+    .inputfile.has-focus + .label__label,
+    .inputfile:hover + .label__label,
+    .inputfile + .label__label:hover,
+    .inputfile:focus + .label,
+    .inputfile.has-focus + .label,
+    .inputfile:hover + .label,
+    .inputfile + .label:hover {
       background-color: var(--color-primary-darker);
       top: 4px;
       transition: all 0.3s, background-color 0.3s;
     }
 
-    .inputfile + label *[class*='icons'] {
+    .inputfile + .label__label *[class*='icons'],
+    .inputfile + .label *[class*='icons'] {
       width: 1.3em;
       vertical-align: middle;
       color: white;
       margin-left: var(--spacing-medium);
     }
 
-    .inputfile + label {
+    .inputfile + .label__label {
       cursor: pointer; /* "hand" cursor */
     }
 
-    .inputfile:focus + label {
-      outline: 2px solid orange;
+    .inputfile:focus + .label,
+    .inputfile:focus-visible + .label,
+    .inputfile:focus + .label__label,
+    .inputfile:focus-visible + .label__label {
+      outline: var(--border-width) solid var(--color-secondary);
       outline: -webkit-focus-ring-color auto 5px;
     }
   }
@@ -198,7 +205,6 @@ input[type='file']::file-selector-button {
     justify-content: space-around;
     border: 1px solid lightgray;
     border-radius: 4px;
-    max-width: var(--mobile-xs-width);
     height: 80px;
     padding-top: var(--spacing-large);
     margin-bottom: 20px;

src/open_inwoner/scss/components/Notification/_Notification.scss

@@ -57,6 +57,7 @@
     position: absolute;
     top: var(--spacing-small);
     right: var(--spacing-small);
+    color: var(--color-black);
     cursor: pointer;
   }
 

src/open_inwoner/scss/views/App.scss

@@ -179,6 +179,8 @@
   --color-body: var(--color-gray-dark);
   // changed to #949494 to get the required 3:1 contrast ratio - in case of decorative border use var(--color-gray).
   --color-mute: #949494;
+  // text-color for muted text inside tinted cards
+  --color-tinted-mute: #696969;
 
   /// Font.
 

src/open_inwoner/templates/pages/search.html

@@ -60,19 +60,19 @@ <h3 class="search-results__item-title">{{ hit.name }}</h3>
                 <div class="grid">
                     <aside class="feedback" aria-label="{% trans "Pagina feedback" %}">
                         <h4 class="h4">{% trans "Feedback" %}</h4>
-                        <p class="p">{% trans "Heeft u gevonden wat u zocht?" %}</p>
+                        <p class="p" id="feedback__survey">{% trans "Heeft u gevonden wat u zocht?" %}</p>
                         {% render_form form=feedback_form method="POST" form_action=request.get_full_path id="feedback_form" show_notifications=True %}
                             {% csrf_token %}
                             {{ feedback_form.errors }}
                             <div class="feedback__options">
                                 {% spaceless %}
                                 <label class="button-radio" for="positive">
                                     <input class="button-radio__input" type="radio" name="positive" id="positive" value="true" aria-label="{{ _('Ik heb gevonden wat ik zocht.') }}"/>
-                                    <label class="button-radio__button" for="positive">{% icon icon="thumb_up" outlined=True %}</label>
+                                    <span class="button-radio__button">{% icon icon="thumb_up" outlined=True %}</span>
                                 </label>
                                 <label class="button-radio" for="negative">
                                     <input class="button-radio__input" type="radio" name="positive" id="negative" value="false" aria-label="{{ _('Ik heb niet gevonden wat ik zocht.') }}" />
-                                    <label class="button-radio__button" for="negative">{% icon icon="thumb_down" outlined=True %}</label>
+                                    <span class="button-radio__button">{% icon icon="thumb_down" outlined=True %}</span>
                                 </label>
                                 {% endspaceless %}
                             </div>