plans/FilterRadio//FilterSecondary: refactor to ensure keyboard acces…

…sibilty and screen reader legibility and style
liqd · Feb 24, 2022 · d624e5f · d624e5f
1 parent 29e9a53
commit d624e5f
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 94 deletions.
diff --git a/meinberlin/apps/plans/assets/FilterRadio.jsx b/meinberlin/apps/plans/assets/FilterRadio.jsx
@@ -32,41 +32,43 @@ class FilterRadio extends React.Component {
 
   render () {
     return (
-      <fieldset className="u-no-border u-no-margin u-no-padding">
-        <legend><h2 className="u-no-margin">{this.props.question}</h2></legend>
-        <div className="btn-group " role="group">
-          <label
-            className={this.getClassNameInput(-1)}
-            key={this.props.filterId + 'all'}
-            htmlFor={'id_choice-' + this.props.filterId + '-all'}
-          >
+      <fieldset className={'filter-bar__menu-radio-' + this.props.filterId} role="group" aria-labelledby={this.props.filterId}>
+        <legend><h2 id={this.props.filterId} className="u-no-margin">{this.props.question}</h2></legend>
+        <div className="btn-group">
+          <div key={this.props.filterId + 'all'} className={this.getClassNameInput(-1)}>
             <input
-              className="radio__input"
-              type="radio"
               id={'id_choice-' + this.props.filterId + '-all'}
+              type="radio"
               value="-1"
+              name={this.props.filterId + '-' + allStr}
+              className="radio__input"
               checked={this.isChecked(-1)}
               onChange={this.handleOnChange.bind(this)}
             />
-            <span>{allStr}</span>
-          </label>
+            <label
+              htmlFor={'id_choice-' + this.props.filterId + '-all'}
+            >
+              <span>{allStr}</span>
+            </label>
+          </div>
           {this.props.choiceNames.map((choice, i) => {
             return (
-              <label
-                className={this.getClassNameInput(i)}
-                key={this.props.filterId + i}
-                htmlFor={'id_choice-' + this.props.filterId + '-' + i}
-              >
+              <div key={this.props.filterId + i} className={this.getClassNameInput(i)}>
                 <input
-                  className="radio__input"
-                  type="radio"
                   id={'id_choice-' + this.props.filterId + '-' + i}
+                  type="radio"
                   value={i}
+                  name={choice}
+                  className="radio__input"
                   checked={this.isChecked(i)}
                   onChange={this.handleOnChange.bind(this)}
                 />
-                <span>{choice}</span>
-              </label>
+                <label
+                  htmlFor={'id_choice-' + this.props.filterId + '-' + i}
+                >
+                  <span>{choice}</span>
+                </label>
+              </div>
             )
           })}
         </div>

diff --git a/meinberlin/apps/plans/assets/FilterSecondary.jsx b/meinberlin/apps/plans/assets/FilterSecondary.jsx
@@ -4,6 +4,7 @@ const FilterRadio = require('./FilterRadio')
 const React = require('react')
 
 const searchTitleStr = django.gettext('Search title')
+const performSearchStr = django.gettext('Perform search')
 const orgaStr = django.gettext('Organisation')
 const enterOrgaNameStr = django.gettext('Enter the name of the organisation')
 const participationStr = django.gettext('Level of participation')
@@ -80,7 +81,8 @@ class FilterSecondary extends React.Component {
   render () {
     return (
       <form className="filter-bar__menu">
-        <label htmlFor="id-title-search">
+        <div role="search">
+          <label htmlFor="id-title-search"><span className="visually-hidden">{searchTitleStr}</span></label>
           <input
             className="input-group__input filter-bar__search"
             type="text"
@@ -95,18 +97,18 @@ class FilterSecondary extends React.Component {
             onClick={this.submitSecondaryFilters.bind(this)}
           >
             <i className="fa fa-search" aria-hidden="true" />
+            <span className="visually-hidden">{performSearchStr}</span>
           </button>
-          <span className="visually-hidden">{searchTitleStr}
-          </span>
-        </label>
+
+        </div>
         {this.props.organisationFilterOnTop &&
-          <div className="form-group">
-            <div className="typeahead__input-label">
+          <div className="form-group filter-bar__typeahead">
+            <label htmlFor="organisation-typeahead-id" className="typeahead__input-label">
               <h2 className="u-no-margin">{orgaStr}</h2>
-            </div>
+            </label>
             <span className="typeahead__input-group">
               <span className="typeahead__input-group-prepend">
-                <span className="typeahead__input-group-text">
+                <span className="typeahead__input-group-text input-group__before">
                   <i className="fas fa-sort-alpha-down" />
                 </span>
               </span>
@@ -122,49 +124,47 @@ class FilterSecondary extends React.Component {
               />
             </span>
           </div>}
-        <div className="filter-bar__menu-radio-group">
-          <div className="filter-bar__menu-radio-part">
-            <FilterRadio
-              filterId="par"
-              question={participationStr}
-              chosen={this.state.participationChoice}
-              choiceNames={this.props.participationNames}
-              onSelect={this.clickParticipation.bind(this)}
-            />
-          </div>
-          <div className="filter-bar__menu-radio-proj">
-            <FilterRadio
-              filterId="sta"
-              question={projectStatStr}
-              chosen={this.state.statusChoice}
-              choiceNames={this.props.statusNames}
-              onSelect={this.clickStatus.bind(this)}
-            />
-          </div>
-        </div>
-        {!this.props.organisationFilterOnTop &&
-          <div className="form-group">
-            <div className="typeahead__input-label">
-              <h2 className="u-no-margin">{orgaStr}</h2>
-            </div>
-            <span className="typeahead__input-group">
-              <span className="typeahead__input-group-prepend">
-                <span className="typeahead__input-group-text">
-                  <i className="fas fa-sort-alpha-down" />
+        <FilterRadio
+          className="filter-bar__menu-radio-part"
+          filterId="par"
+          question={participationStr}
+          chosen={this.state.participationChoice}
+          choiceNames={this.props.participationNames}
+          onSelect={this.clickParticipation.bind(this)}
+        />
+        <div className="u-flex">
+          <FilterRadio
+            className="filter-bar__menu-radio-proj"
+            filterId="sta"
+            question={projectStatStr}
+            chosen={this.state.statusChoice}
+            choiceNames={this.props.statusNames}
+            onSelect={this.clickStatus.bind(this)}
+          />
+          {!this.props.organisationFilterOnTop &&
+            <div className="form-group filter-bar__typeahead u-spacer-left">
+              <label htmlFor="organisation-typeahead-id" className="typeahead__input-label">
+                <h2 className="u-no-margin">{orgaStr}</h2>
+              </label>
+              <span className="typeahead__input-group">
+                <span className="typeahead__input-group-prepend">
+                  <span className="typeahead__input-group-text input-group__before">
+                    <i className="fas fa-sort-alpha-down" />
+                  </span>
                 </span>
+                <Typeahead
+                  id="organisation-typeahead-id"
+                  className="typeahead__input-group-append"
+                  onChange={this.clickOrganisation.bind(this)}
+                  labelKey="name"
+                  multiple={false}
+                  options={this.props.organisations}
+                  selected={this.state.organisationChoice}
+                  placeholder={enterOrgaNameStr}
+                />
               </span>
-              <Typeahead
-                id="organisation-typeahead-id"
-                className="typeahead__input-group-append"
-                onChange={this.clickOrganisation.bind(this)}
-                labelKey="name"
-                multiple={false}
-                options={this.props.organisations}
-                selected={this.state.organisationChoice}
-                placeholder={enterOrgaNameStr}
-              />
-            </span>
-          </div>}
+            </div>}
+        </div>
         <button
           className="btn btn--primary filter-secondary__btn"
           type="submit"

diff --git a/meinberlin/assets/scss/components/_filter_bar.scss b/meinberlin/assets/scss/components/_filter_bar.scss
@@ -244,59 +244,81 @@ $divider-margin: 1.25rem;
 }
 
 // secondary radio group
-.filter-bar__menu-radio-group {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
 
-.filter-bar__menu-radio-part,
-.filter-bar__menu-radio-proj {
-    width: 100%;
-    margin-bottom: 2 * $spacer;
+.filter-bar__menu-radio-par,
+.filter-bar__menu-radio-sta {
+    border: none;
+    padding: 0;
 
     .btn-group {
         margin-top: $spacer;
         display: flex;
         justify-content: flex-start;
-        flex-direction: row;
+        flex-flow: row wrap;
     }
 
     .switch--btn {
         font-weight: normal;
+        position: relative;
         padding-left: 0.5 * $padding;
         padding-right: 0.5 * $padding;
     }
 }
 
-.filter-bar__menu-radio-part {
+.filter-bar__menu-radio-par {
+    width: 100%;
+    margin-bottom: 2 * $spacer;
+
     .switch--btn {
-        min-width: 15%;
         flex-grow: 1;
     }
 }
 
-.filter-bar__menu-radio-proj {
-    margin-bottom: 2 * $spacer;
+.filter-bar__menu-radio-sta {
+    display: inline-block;
+    flex-grow: 1;
 
     .switch--btn {
-        min-width: 20%;
         flex-grow: 1;
     }
 }
 
-@media screen and (min-width: $breakpoint-md) {
-    .filter-bar__menu-radio-part {
-        width: 56%;
+.filter-bar__typeahead {
+    flex-grow: 2;
+
+    div:first-of-type {
+        flex-grow: 1;
+    }
+
+    .form-control {
+        line-height: 1.8;
+    }
+}
+
+@media screen and (max-width: $breakpoint-down) {
+    .filter-bar__menu-radio-par,
+    .filter-bar__menu-radio-sta {
+        .btn-group {
+            > :first-child {
+                border-top-left-radius: 0.3em;
+                border-top-right-radius: 0.3em;
+                border-bottom-left-radius: 0;
+            }
+
+            > :last-child {
+                border-bottom-left-radius: 0.3em;
+                border-bottom-right-radius: 0.3em;
+                border-top-right-radius: 0;
+            }
+        }
 
         .switch--btn {
-            width: 25%;
+            width: 100%;
         }
     }
 
-    .filter-bar__menu-radio-proj {
-        width: 39%;
-        margin-left: 2 * $spacer;
+    .filter-bar__typeahead {
+        margin-left: 0;
     }
 }
 

diff --git a/meinberlin/assets/scss/components/_radio.scss b/meinberlin/assets/scss/components/_radio.scss
@@ -1,5 +1,6 @@
 .radio__input {
-    @include visually-hidden;
+    appearance: none;
+    position: absolute;
 }
 
 // use pixels here because otherwise the icon in the :after

diff --git a/meinberlin/assets/scss/components/_typeahead.scss b/meinberlin/assets/scss/components/_typeahead.scss
@@ -26,7 +26,7 @@
 .typeahead__input-group-text {
     display: flex;
     align-items: center;
-    padding: $input-padding-y $input-padding-x;
+    padding: $input-padding-y $spacer;
     margin-bottom: 0;
     text-align: center;
     white-space: nowrap;

diff --git a/meinberlin/assets/scss/utility.scss b/meinberlin/assets/scss/utility.scss
@@ -77,6 +77,10 @@
     display: inline-flex;
 }
 
+.u-flex {
+    display: flex;
+}
+
 .u-align-right {
     text-align: right;
 }