superdesk · MarkLark86 · Feb 9, 2022 · Feb 8, 2022
diff --git a/assets/agenda/components/AgendaCoverages.jsx b/assets/agenda/components/AgendaCoverages.jsx
@@ -33,8 +33,8 @@ function AgendaCoveragesComponent({item, coverages, wireItems, actions, user, on
             {'coverage-item--clickable': onClick})} key={coverage.coverage_id} onClick={onClick}
         title={onClick ? gettext('Open Agenda in new tab') : onClick} >
             <div className='coverage-item__row'>
-                <span className='d-flex coverage-item--element-grow'>
-                    <i className={`icon-small--coverage-${getCoverageIcon(coverage.coverage_type)} ${WORKFLOW_COLORS[coverage.workflow_status]} mr-2`}></i>
+                <span className={classNames('coverage-item__coverage-icon', WORKFLOW_COLORS[coverage.workflow_status])}>                    
+                    <i className={`icon-small--coverage-${getCoverageIcon(coverage.coverage_type)} mr-2`}></i>
                     <span>{`${getCoverageDisplayName(coverage.coverage_type)}${getSlugline(coverage)}`}</span>
                 </span>
                 {coverage.workflow_status !== WORKFLOW_STATUS.COMPLETED && <span className='d-flex text-nowrap'>

diff --git a/assets/agenda/components/AgendaListCoverageItem.jsx b/assets/agenda/components/AgendaListCoverageItem.jsx
@@ -110,13 +110,13 @@ class AgendaListCoverageItem extends React.Component {
             (state.isCoverageForExtraDay && props.coverage.planning_id === get(props, 'planningItem.guid'))
         ) && (
             <span
-                className={classNames('wire-articles__item__icon', {'dashed-border': props.showBorder})}
+                className={classNames('wire-articles__item__icon', WORKFLOW_COLORS[props.coverage.workflow_status], {'dashed-border': props.showBorder})}
                 title={state.tooltip}
             >
-                <i className={`${state.coverageClass} ${WORKFLOW_COLORS[props.coverage.workflow_status]}`}>
+                <i className={`${state.coverageClass}`}>
                     {state.beingUpdated && <i className="blue-circle" />}
                     {state.isWatched &&
-                      <i className="blue-circle blue-circle--pale blue-circle--right" />}
+                      <i className="blue-circle blue-circle--pale blue-circle--left" />}
                 </i>
             </span>
         );

diff --git a/assets/agenda/utils.js b/assets/agenda/utils.js
@@ -86,11 +86,11 @@ export const WORKFLOW_STATUS_TEXTS = {
 };
 
 export const WORKFLOW_COLORS = {
-    [WORKFLOW_STATUS.DRAFT]: 'icon--gray-dark',
-    [WORKFLOW_STATUS.ASSIGNED]: 'icon--main-blue',
-    [WORKFLOW_STATUS.ACTIVE]: 'icon--purple',
-    [WORKFLOW_STATUS.COMPLETED]: 'icon--green',
-    [WORKFLOW_STATUS.CANCELLED]: 'icon--red',
+    [WORKFLOW_STATUS.DRAFT]: 'coverage--draft',
+    [WORKFLOW_STATUS.ASSIGNED]: 'coverage--assigned',
+    [WORKFLOW_STATUS.ACTIVE]: 'coverage--active',
+    [WORKFLOW_STATUS.COMPLETED]: 'coverage--completed',
+    [WORKFLOW_STATUS.CANCELLED]: 'coverage--cancelled',
 };
 
 export const SCHEDULE_TYPE = {

diff --git a/assets/components/NotificationList.jsx b/assets/components/NotificationList.jsx
@@ -41,6 +41,7 @@ class NotificationList extends React.Component {
     render() {
         return (
             <div className="badge--top-right">
+                <h3 className="a11y-only">Notification Bell</h3>
                 {this.props.notifications && this.props.notifications.length > 0 &&
                     <div className="badge badge-pill badge-info badge-secondary">
                         {this.props.notifications && this.props.notifications.length}
@@ -51,6 +52,7 @@ class NotificationList extends React.Component {
                     className="notif__circle"
                     ref={(elem) => this.elem = elem}
                     title={gettext('Notifications')}>
+                    <h3 className="a11y-only">Notification bell</h3>    
                     <i className='icon--alert icon--white' onClick={this.toggleDisplay} />
                 </span>
 

diff --git a/assets/styles/icon-font-small.scss b/assets/styles/icon-font-small.scss
@@ -66,6 +66,10 @@
     }
 }
 
+[class^="icon-small--coverage-"], [class*=" icon-small--coverage-"] {
+    color: $gray-dark;
+}
+
 .icon-small--arrow-down:before {
     content: "\e600";
 }

diff --git a/assets/styles/icon-font.scss b/assets/styles/icon-font.scss
@@ -18,7 +18,7 @@
     width: $width;
     height: $height;
     line-height: $line-height;
-    font-family: 'aap_newsroom_icons';
+    font-family: 'aap_newsroom_icons' !important;
     font-size: $font-size;
     color: $main_blue;
     speak: none;
@@ -30,14 +30,6 @@
 
 [class^="icon--"], [class*=" icon--"] {
     @include icon-base;
-    /* use !important to prevent issues with browser extensions that change fonts */
-    font-family: 'aap_newsroom_icons' !important;
-    speak: none;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
 
   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
@@ -83,6 +75,9 @@
         color: $purple;
     }
 }
+[class^="icon--coverage-"], [class*=" icon--coverage-"] {
+    color: $gray-dark;
+}
 
 .icon--rotate-90 {
     transform: rotate(90deg);

diff --git a/assets/styles/index.scss b/assets/styles/index.scss
@@ -1987,6 +1987,7 @@ article.list {
 
     @include md {
         display: flex;
+        gap: 5px;
     }
 
     &--dashed-border {
@@ -2017,6 +2018,52 @@ article.list {
         padding-right: 10px;
         border-right: 1px dotted #c4c4c4;
     }
+    &[class*=" coverage--"] {
+        &::after {
+            content: '';
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 999px;
+            height: 12px;
+            width: 12px;
+            position: absolute;
+            bottom: -4px;
+            right: -4px;
+            box-shadow: 0 0 0 2px hsl(0, 0%, 100%);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+    }
+    &.coverage--draft {
+        &::after {
+            display: none;
+        }
+    }
+    &.coverage--active {
+        &::after {
+            background-color: $purple;
+            background-image: url('/static/overlay_icon--active.svg');
+        }
+    }
+    &.coverage--assigned {
+        &::after {
+            background-color: $mid-blue;
+            background-image: url('/static/overlay_icon--assigned.svg');
+        }
+    }
+    &.coverage--cancelled {
+        &::after {
+            background-color: $red;
+            background-image: url('/static/overlay_icon--cancelled.svg');
+        }
+    }
+    &.coverage--completed {
+        &::after {
+            background-color: $green;
+            background-image: url('/static/overlay_icon--completed.svg');
+        }
+    }
 }
 
 .wire-articles__item__divider {
@@ -2670,6 +2717,9 @@ a.wire-articles__versions {
     &--gray {
         color: #747474 !important;
     }
+    .icon-coverage-status {
+        margin: 2px 2px 0;
+    }
 }
 .coverage-item__column {
     display: flex;
@@ -2691,6 +2741,59 @@ a.wire-articles__versions {
     margin-left: -6px  !important;
     display: inline !important;
 }
+.coverage-item__coverage-icon {
+    display: flex;
+    flex-grow: 1;
+    position: relative;
+    padding-left: 16px;
+
+    &[class*=" coverage--"] {
+        &::before {
+            content: '';
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 999px;
+            height: 12px;
+            width: 12px;
+            position: absolute;
+            top: 2px;
+            left: 0px;           
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+    }
+    &.coverage--draft {
+        padding-left: 0px;
+        &::before {
+            display: none;
+        }
+    }
+    &.coverage--active {
+        &::before {
+            background-color: $purple;
+            background-image: url('/static/overlay_icon--active.svg');
+        }
+    }
+    &.coverage--assigned {
+        &::before {
+            background-color: $mid-blue;
+            background-image: url('/static/overlay_icon--assigned.svg');
+        }
+    }
+    &.coverage--cancelled {
+        &::before {
+            background-color: $red;
+            background-image: url('/static/overlay_icon--cancelled.svg');
+        }
+    }
+    &.coverage--completed {
+        &::before {
+            background-color: $green;
+            background-image: url('/static/overlay_icon--completed.svg');
+        }
+    }
+}
 
 .column__preview__tags__column {
 
@@ -3490,7 +3593,7 @@ a.wire-articles__versions {
     }
 
     &--pale {
-        background-color: #00adec;
+        background-color: $main-blue;
     }
 
     &--right {
@@ -3500,6 +3603,9 @@ a.wire-articles__versions {
             right: -4px;
         }
     }
+    &--left {
+        left: 0;
+    }
 }
 
 .noselect {

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -27,6 +27,7 @@ services:
         volumes:
             - ./dump:/opt/newsroom/dump
             - ./newsroom/templates:/opt/newsroom/templates
+            - ./newsroom/static:/opt/newsroom/static
         depends_on:
             - elastic
             - redis

diff --git a/newsroom/templates/base_layout.html b/newsroom/templates/base_layout.html
@@ -60,7 +60,7 @@ <h3 class="a11y-only">{{ gettext('Side Navigation') }}</h3>
                     {% for group in range(0, 10) %}
                         {% for nav in sidenavs(request.blueprint)|selectattr("group", "equalto", group) %}
                         {% if group > 0 and loop.first and loop.length %}
-                        <li class="sidenav-icons__item d-none d-sm-block"><span><i class="icon--more icon--rotate-90 icon--mid-blue"></i></span></li>
+                        <li class="sidenav-icons__item d-none d-sm-block"><span aria-hidden="true"><i class="icon--more icon--rotate-90 icon--mid-blue"></i></span></li>
                         {% endif %}
 
                         {% include "sidenav_icon.html" %}

diff --git a/newsroom/templates/logo.html b/newsroom/templates/logo.html
@@ -1,5 +1,6 @@
 <div class="navbar__logo flex-shrink-0 flex-grow-0">
     <a href="{{ url_for('wire.index') }}">
-        <img src="{{ theme_url('logo.svg') }}" alt="{{ config.SITE_NAME }}"/>
+        <h1 class="a11y-only">{{ config.SITE_NAME }}</h1>
+        <img src="{{ theme_url('logo.svg') }}" alt="{{ config.SITE_NAME }}" aria-hidden="true" />
     </a>
 </div>