fixing accessability issues

wri · Dec 5, 2024 · 3dd6b6d · 3dd6b6d
1 parent 1ba170a
commit 3dd6b6d
Show file tree

Hide file tree

Showing 20 changed files with 42 additions and 19 deletions.
diff --git a/components/database/table.js b/components/database/table.js
@@ -115,6 +115,7 @@ function DatabaseTable({
               target="_blank"
               rel="noopener noreferrer"
               className="report-item"
+              aria-label="Download document"
             >
               <Icon className="" name="icon-file-empty" />
             </a>
@@ -213,6 +214,7 @@ function DatabaseTable({
                 target="_blank"
                 rel="noopener noreferrer"
                 className="evidence-item"
+                aria-label="Download evidence document"
               >
                 <Icon className="" name="icon-file-empty" />
               </a>

diff --git a/components/help/overview/gallery-1.js b/components/help/overview/gallery-1.js
@@ -34,6 +34,7 @@ function Gallery1(props) {
                 description={tutorial.description}
                 link={{
                   label: props.intl.formatMessage({ id: 'Read more' }),
+                  "aria-label": tutorial.name,
                   href: `/help/how-otp-works?article=tutorial-article-${tutorial.id}`
                 }}
               />

diff --git a/components/help/overview/gallery-2.js b/components/help/overview/gallery-2.js
@@ -34,6 +34,7 @@ function Gallery2(props) {
                 description={tutorial.description}
                 link={{
                   label: props.intl.formatMessage({ id: 'Read more' }),
+                  "aria-label": tutorial.name,
                   href: `/help/legislation-and-regulations?article=tutorial-article-${tutorial.id}`
                 }}
               />

diff --git a/components/help/overview/gallery-3.js b/components/help/overview/gallery-3.js
@@ -32,6 +32,7 @@ function Gallery3(props) {
                 description={faq.answer}
                 link={{
                   label: props.intl.formatMessage({ id: 'Read more' }),
+                  "aria-label": faq.question,
                   href: `/help/faqs?article=faq-article-${faq.id}`
                 }}
               />

diff --git a/components/help/overview/gallery-4.js b/components/help/overview/gallery-4.js
@@ -34,6 +34,7 @@ function Gallery1(props) {
                 description={tutorial.description}
                 link={{
                   label: props.intl.formatMessage({ id: 'Read more' }),
+                  "aria-label": tutorial.name,
                   href: `/help/tutorials?article=tutorial-article-${tutorial.id}`
                 }}
               />

diff --git a/components/map/controls/zoom-control.js b/components/map/controls/zoom-control.js
@@ -43,10 +43,10 @@ export default class ZoomControl extends React.Component {
 
     return (
       <div className="c-zoom-control">
-        <button className={zoomInClass} type="button" onClick={this.increaseZoom}>
+        <button className={zoomInClass} type="button" onClick={this.increaseZoom} aria-label="Zoom in">
           <Icon name="icon-plus" />
         </button>
-        <button className={zoomOutClass} type="button" onClick={this.decreaseZoom}>
+        <button className={zoomOutClass} type="button" onClick={this.decreaseZoom} aria-label="Zoom out">
           <Icon name="icon-minus" />
         </button>
       </div>

diff --git a/components/operators-detail/overview/gallery-1.js b/components/operators-detail/overview/gallery-1.js
@@ -127,6 +127,7 @@ function Gallery({
               label: intl.formatMessage({
                 id: 'operator-detail.overview.card3.link.label',
               }),
+              "aria-label": "Check operator FMUs",
               href: `/operators/${router.query.id}/fmus`,
             }}
           />

diff --git a/components/operators/filters.js b/components/operators/filters.js
@@ -92,15 +92,16 @@ class OperatorsFilters extends React.Component {
         <div key={f.key} className={`columns medium-${f.columns} small-12`}>
           <div className="field">
             <div className="c-select">
-              <h3 className="title">
+              <label className="title">
                 {this.props.intl.formatMessage({ id: f.name })}
-              </h3>
+              </label>
 
               {f.type === 'select' &&
                 <Select
                   isMulti
                   instanceId={f.key}
                   name={f.key}
+                  aria-label={this.props.intl.formatMessage({ id: f.name })}
                   options={sortedOptions}
                   className='react-select-container'
                   classNamePrefix='react-select'
@@ -114,6 +115,7 @@ class OperatorsFilters extends React.Component {
                 <div className="search">
                   <input
                     type="search"
+                    aria-label={this.props.intl.formatMessage({ id: f.name })}
                     placeholder={this.props.intl.formatMessage({ id: f.placeholder })}
                     className="search-input"
                     data-test-id={`search-input-${f.key}`}
@@ -127,6 +129,7 @@ class OperatorsFilters extends React.Component {
                       onClick={() => {
                         this.setSearch('', f.key);
                       }}
+                      aria-label="Clear search"
                     >
                       <Icon name="icon-cross" className="-smaller" />
                     </button>
@@ -151,11 +154,12 @@ class OperatorsFilters extends React.Component {
       <aside className={`c-filters-operators ${classNames}`}>
         <div className="filters-container">
 
-          <h3 className="c-title -big -light">
+          <h1 className="c-title -big -light">
             {this.props.intl.formatMessage({ id: 'transparency_ranking' })}
 
             <button
               className="c-button -clean"
+              aria-label="Learn more about the ranking"
               onClick={() => {
                 modal.toggleModal(true, {
                   children: RankingModal
@@ -164,7 +168,7 @@ class OperatorsFilters extends React.Component {
             >
               <Icon name="icon-info" className="-small" />
             </button>
-          </h3>
+          </h1>
 
           <div className="filters-content">
             <div className="l-row row">

diff --git a/components/operators/table.js b/components/operators/table.js
@@ -115,7 +115,7 @@ class OperatorsTable extends React.Component {
                     }
                     overlayClassName="c-tooltip no-pointer-events"
                   >
-                    <button className="c-button -icon -primary">
+                    <button className="c-button -icon -primary" aria-label="Show observation per visit explanation">
                       <Icon name="icon-info" className="-smaller" />
                     </button>
                   </Tooltip>
@@ -177,6 +177,7 @@ class OperatorsTable extends React.Component {
                         <button
                           className={`expand-row-btn${expanded ? ' -green' : ''
                             }`}
+                          aria-label="Expand row and show details"
                           onClick={() => this.handleRowToggle(r.id)}
                         >
                           {expanded ? (

diff --git a/components/ui/chart-legend.js b/components/ui/chart-legend.js
@@ -17,20 +17,21 @@ function ChartLegend({ title, list, className, intl }) {
   return (
     <div className={`c-chart-legend ${classNames}`}>
       {title &&
-        <h4 className="c-title -default -proximanova chart-legend-title">
+        <div className="c-title -default -proximanova chart-legend-title">
           <Link
             href={{
               pathname: '/help',
               query: { tab: 'how-otp-works', article: 'assessing-severity-of-observations' }
             }}
             as={'/help/how-otp-works?article=assessing-severity-of-observations'}
             prefetch={false}
+            aria-label="Learn more about assessing the severity of observations"
           >
             <Icon name="icon-info" className="-smaller" />
           </Link>
 
           {intl.formatMessage({ id: 'legend.title' })}:
-        </h4>
+        </div>
       }
 
       <ul className="chart-legend-list">

diff --git a/components/ui/country-doc-card.js b/components/ui/country-doc-card.js
@@ -79,7 +79,7 @@ class CountryDocCard extends React.Component {
       <div className={`c-doc-card ${classNames} country`}>
         {explanation && (
           <div className="doc-card-info">
-            <button className="c-button -clean -icon" onClick={this.triggerDocInfo}>
+            <button className="c-button -clean -icon" aria-label="Show document information" onClick={this.triggerDocInfo}>
               <Icon
                 name="icon-info"
                 className="-smaller"

diff --git a/components/ui/database-filters.js b/components/ui/database-filters.js
@@ -80,9 +80,9 @@ class DatabaseFilters extends Filters {
       return (
         <div key={f.key} className="field">
           <div className="c-select">
-            <h3 className="title">
+            <label className="title">
               {this.props.intl.formatMessage({ id: `filter.${f.key}` })}
-            </h3>
+            </label>
 
             <Select
               instanceId={f.key}
@@ -92,6 +92,7 @@ class DatabaseFilters extends Filters {
               className='react-select-container'
               classNamePrefix='react-select'
               value={value}
+              aria-label={this.props.intl.formatMessage({ id: `filter.${f.key}` })}
               placeholder={this.props.intl.formatMessage({
                 id: `filter.${f.key}.placeholder`,
               })}
@@ -124,6 +125,7 @@ class DatabaseFilters extends Filters {
                     className={`filters-toggle-btn${
                       this.state.open ? ' -green' : ''
                     }`}
+                    aria-label="Toggle filters"
                     onClick={() => this.setState({ open: !this.state.open })}
                   >
                     {this.state.open ? (

diff --git a/components/ui/doc-card.js b/components/ui/doc-card.js
@@ -162,7 +162,7 @@ class DocCard extends React.Component {
 
         {layout.info &&
           <div className="doc-card-info">
-            <button className="c-button -clean -icon" onClick={this.triggerDocInfo}>
+            <button className="c-button -clean -icon" aria-label="Show document information" onClick={this.triggerDocInfo}>
               <Icon
                 name="icon-info"
                 className="-smaller"

diff --git a/components/ui/observation-filters.js b/components/ui/observation-filters.js
@@ -53,9 +53,9 @@ class ObservationFilters extends Filters {
     return (
       <div className="c-select">
         {title && (
-          <h3 className="title">
+          <label className="title">
             {title}
-          </h3>
+          </label>
         )}
         <Select
           instanceId={f.key}
@@ -65,6 +65,7 @@ class ObservationFilters extends Filters {
           className='react-select-container'
           classNamePrefix='react-select'
           value={value}
+          aria-label={title}
           placeholder={this.props.intl.formatMessage({
             id: `filter.${f.key}.placeholder`,
             defaultMessage: f.placeholder
@@ -84,9 +85,9 @@ class ObservationFilters extends Filters {
     return (
       <div className="filter-checkbox">
         {title && (
-          <h3 className="title">
+          <label className="title">
             {title}
-          </h3>
+          </label>
         )}
         <Checkbox
           properties={{ title: description, className: '-white' }}

diff --git a/components/ui/search.js b/components/ui/search.js
@@ -200,6 +200,7 @@ class Search extends React.Component {
           {!!active &&
             <button
               className="c-button -clean"
+              aria-label="Clear search"
               onClick={this.onClose}
             >
               <Icon name="icon-cross" />

diff --git a/constants/observations-column-headers.js b/constants/observations-column-headers.js
@@ -60,7 +60,7 @@ export function getColumnHeaders(intl) {
               }
               overlayClassName="c-tooltip no-pointer-events"
             >
-              <button className="c-button -icon -primary">
+              <button className="c-button -icon -primary" aria-label="Show information about the status">
                 <Icon name="icon-info" className="-smaller" />
               </button>
             </Tooltip>

diff --git a/css/components/ui/_filters-observations.scss b/css/components/ui/_filters-observations.scss
@@ -9,8 +9,10 @@
 
   .field {
     .title {
+      display: block;
       font-family: $font-family-georgia;
       color: $color-white;
+      margin-top: 1em;
       margin-bottom: 2px;
       font-size: $font-size-big;
       line-height: 26px;

diff --git a/css/components/ui/_filters-operators.scss b/css/components/ui/_filters-operators.scss
@@ -37,9 +37,11 @@
     }
 
     .title {
+      display: block;
       font-family: $font-family-georgia;
       color: $color-white;
       text-transform: capitalize;
+      margin-top: 1em;
       margin-bottom: 2px;
       font-size: $font-size-default;
       line-height: 26px;

diff --git a/css/components/ui/_filters.scss b/css/components/ui/_filters.scss
@@ -59,6 +59,8 @@
           font-family: $font-family-georgia;
           color: $color-white;
           text-transform: capitalize;
+          display: block;
+          margin-top: 1em;
           margin-bottom: 2px;
           font-size: $font-size-big;
           line-height: 26px;

diff --git a/pages/newsletter.js b/pages/newsletter.js
@@ -43,7 +43,7 @@ const Newsletter = ({ newsletters, language }) => {
             {newsletters.map(newsletter => (
               // genereate newsletter card with image on top and title and description below
               <div key={newsletter.id} className="newsletter-card">
-                <a href={newsletter.attachment.url}>
+                <a href={newsletter.attachment.url} aria-label={newsletter.title}>
                   <div className="newsletter-card__image" style={{ backgroundImage: `url(${newsletter.image.url})` }} />
                 </a>
                 <div className="newsletter-card__content">