[pull] dev from opf:dev

app/components/work_packages/date_picker/date_form_component.html.erb

@@ -18,7 +18,7 @@
         end
 
         start_date.with_row(classes: "wp-datepicker-dialog-date-form--text-field-container") do
-          render(Primer::Alpha::TextField.new(**text_field_options(name: :start_date, label: start_date_label)))
+          render(Primer::Alpha::TextField.new(**text_field_options(name: :start_date, label: start_date_label), aria: { live: :polite }))
         end
         start_date.with_row(classes: "wp-datepicker-dialog-set-today-link") do
           render_today_link(name: :start_date)
@@ -45,7 +45,7 @@
           end
 
           due_date.with_row(classes: "wp-datepicker-dialog-date-form--text-field-container") do
-            render(Primer::Alpha::TextField.new(**text_field_options(name: :due_date, label: I18n.t("attributes.due_date"))))
+            render(Primer::Alpha::TextField.new(**text_field_options(name: :due_date, label: I18n.t("attributes.due_date")), aria: { live: :polite }))
           end
           due_date.with_row(classes: "wp-datepicker-dialog-set-today-link") do
             render_today_link(name: :due_date)
@@ -54,7 +54,7 @@
       end
 
       body.with_column(classes: "wp-datepicker-dialog-date-form--duration") do
-        render(Primer::Alpha::TextField.new(**text_field_options(name: :duration, label: WorkPackage.human_attribute_name("duration"))))
+        render(Primer::Alpha::TextField.new(**text_field_options(name: :duration, label: WorkPackage.human_attribute_name("duration")), aria: { live: :polite }))
       end
     end
   end

app/controllers/errors_controller.rb

@@ -10,9 +10,10 @@ def not_found
     render_404
   end
 
+  # this may be called on CSRF validation failure
   def unacceptable
     render file: "#{Rails.public_path.join('422.html')}",
-           status: :not_acceptable,
+           status: :unprocessable_entity,
            layout: false
   end
 

frontend/src/app/features/work-packages/components/wp-buttons/wp-filter-button/wp-filter-button.html

@@ -12,7 +12,7 @@
   <op-icon icon-classes="{{ iconClass }} button--icon"></op-icon>
   <span class="button--text">
     {{ buttonText }}
-    <span class="badge -secondary" *ngIf="initialized" [textContent]="filterCount"></span>
+    <span class="badge" *ngIf="initialized" [textContent]="filterCount"></span>
   </span>
   <span class="spot-icon spot-icon_dropdown"></span>
 </button>

frontend/src/app/features/work-packages/components/wp-buttons/wp-share-button/wp-share-button.html

@@ -10,7 +10,7 @@
     size="small"
   ></svg>
   <span class="button--text" *ngIf="(shareCount$ | async) as shareCount">
-    <span class="badge -secondary"
+    <span class="badge"
           [textContent]="shareCount"></span>
   </span>
 

frontend/src/app/features/work-packages/components/wp-fast-table/builders/relation-cell-builder.ts

@@ -73,7 +73,7 @@ export class RelationCellbuilder {
     badge.classList.add('wp-table--relation-count');
 
     badge.textContent = count.toString();
-    badge.classList.add('badge', '-border-only');
+    badge.classList.add('badge');
 
     return badge;
   }

frontend/src/app/shared/components/fields/display/field-types/resources-display-field.module.ts

@@ -72,7 +72,7 @@ export class ResourcesDisplayField extends DisplayField {
     content.appendChild(abridged);
 
     if (values.length > 2) {
-      const badge = this.optionDiv(values.length.toString(), 'badge', '-secondary');
+      const badge = this.optionDiv(values.length.toString(), 'badge');
       content.appendChild(badge);
     }
 

frontend/src/app/shared/components/principal/principal-renderer.service.ts

@@ -61,7 +61,7 @@ export class PrincipalRendererService {
 
     if (users.length > maxCount) {
       const badge = document.createElement('span');
-      badge.classList.add('op-principal-list--badge', 'badge', '-secondary');
+      badge.classList.add('op-principal-list--badge', 'badge');
       badge.textContent = users.length.toString();
       wrapper.appendChild(badge);
     }

frontend/src/app/shared/components/project-include/project-include.component.html

@@ -14,7 +14,7 @@
     {{ text.toggle_title }}
     <span
       *ngIf="(numberOfProjectsInFilter$ | async) as count"
-      class="badge -secondary"
+      class="badge"
       [textContent]="count"
     >
     </span>

frontend/src/global_styles/content/_badges.sass

@@ -27,8 +27,7 @@
 //++
 
 $badge-diameter: 1.25rem
-$badge-background: var(--buttonCounter-default-bgColor-rest)
-$badge-secondary-background: var(--buttonCounter-default-bgColor-rest)
+$badge-background: var(--bgColor-neutral-muted)
 $badge-color: var(--fgColor-default)
 
 @mixin badge-layout($diameter: $badge-diameter)
@@ -40,6 +39,7 @@ $badge-color: var(--fgColor-default)
   color: $color
 
 .badge
+  font-size: var(--text-body-size-small)
   display: inline-flex
   align-items: center
   justify-content: center
@@ -51,13 +51,3 @@ $badge-color: var(--fgColor-default)
   min-width: 1.25rem
   padding-left: 0.3rem
   padding-right: 0.3rem
-
-  &.-secondary
-    @include badge-style($badge-secondary-background, $badge-color)
-
-  &.-border-only
-    border-color: var(--button-default-borderColor-rest)
-    color: var(--body-font-color)
-    background: transparent
-    border-width: 1px
-    border-style: solid

frontend/src/global_styles/content/work_packages/_table_relations.sass

@@ -20,9 +20,8 @@ body
     @extend .icon-arrow-up1
 
 // Add some margin between badge and indicator
-.wp-table--relation-count.-border-only
+.wp-table--relation-count
   margin-right: 5px
-  background: white
 
 // Override default left-align of cells
 .wp-table--relation-cell-td

frontend/src/global_styles/layout/_toolbar.sass

@@ -138,10 +138,7 @@ $nm-color-success-background: #d8fdd1
       margin-left: 0.2em
 
     .badge
-      font-size: 14px
       vertical-align: 1px
-
-      font-size: 14px
       line-height: 1
 
       i