placing button to delete, add aria infos in step 3

src/app/core/services/poll.service.ts

@@ -50,7 +50,7 @@ export class PollService implements Resolve<Poll> {
 	public showDateInterval = false;
 	public allowSeveralHours = false;
 	public richTextMode = false;
-	public mode_calendar = true; // default input to select dates in creation step
+	public mode_calendar = false; // default input to select dates in creation step
 	public calendar: Date[] = [new Date()];
 	public disabled_dates: Date[] = [];
 

src/app/features/administration/form/date/list/day/day-list.component.html

@@ -3,7 +3,7 @@
 		<div class="date-choice-container" *ngFor="let choice of dateChoices; index as id">
 			<div class="date-choice" [ngClass]="{ 'day-weekend': isWeekendDay(choice.date_input) }">
 				<div class="top">
-					<label class="pull-left" for="dateChoices_{{ id }}">
+					<label class="pull-left" for="dateChoices_{{ id }}" [attr.aria-describedby]="'format-date-' + id">
 						{{ 'dates.element' | translate }} {{ id + 1 }}
 					</label>
 					<p class="format-helper pull-right" id="format-date-{{ id }}">
@@ -25,9 +25,14 @@
 					</div>
 				</div>
 				<hr />
-				<div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
+				<div class="delete-date">
+					<button
+						class="has-no-outline has-no-background has-text-primary has-text-left"
+						(click)="dateChoices.splice(id, 1)"
+					>
 						<img class="icon" aria-hidden="true" src="assets/icons/trash.svg" />
-					{{ 'dates.remove' | translate }}
+						{{ 'dates.remove' | translate }} {{ id + 1 }}
+					</button>
 				</div>
 			</div>
 		</div>

src/app/features/administration/form/date/list/day/day-list.component.scss

@@ -58,6 +58,7 @@
 
 			&:nth-of-type(odd) {
 				background: #9880d5;
+
 				&.day-weekend {
 					background: #8e72d4;
 				}
@@ -82,15 +83,25 @@
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
 		background: transparent;
-		text-align: left;
+
 		margin-right: 0;
 
+		button {
+			text-align: left !important;
+			width: 100%;
+			display: block;
+			padding-left: 1rem;
+			&:hover {
+				color: $white !important;
+			}
+		}
+
 		.fa,
 		.icon {
 			float: left;
 			color: $primary_color;
 			margin: 0;
-			margin-right: 1rem;
+			margin-right: 8px;
 			height: 1.25rem;
 			// filter converter is here https://codepen.io/sosuke/pen/Pjoqqp
 			filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
@@ -114,6 +125,7 @@
 		font-size: 14px;
 		line-height: 16px;
 	}
+
 	.add_date {
 		margin-top: 2rem;
 	}

src/app/features/administration/form/steps/step-three/step-three.component.html

@@ -39,7 +39,7 @@
 		<div class="text-date-list" *ngIf="!pollService.mode_calendar">
 			<app-day-list
 				[form]="pollService.form"
-				[hasSeveralHours]="environment.creation_display_hour_per_day && pollService.form.value.hasSeveralHours"
+				[hasSeveralHours]="environment.creation_display_hour_per_day"
 			></app-day-list>
 		</div>
 	</div>

src/environments/environment.prod.ts

@@ -28,7 +28,7 @@ export const environment = {
 	autofill_participation: false,
 	autoSendNewPoll: false,
 	creation_display_admin_url: false,
-	creation_display_hour_per_day: true, // display or not the ability to choose time slices different per day
+	creation_display_hour_per_day: false, // display or not the ability to choose time slices different per day
 	creation_display_proposals_time_slices: false,
 	creation_email_is_required: true,
 	display_header_create_button: false,

src/environments/environment.ts

@@ -29,7 +29,7 @@ export const environment = {
 	autofill_participation: false,
 	autoSendNewPoll: false,
 	creation_display_admin_url: false,
-	creation_display_hour_per_day: true, // display or not the ability to choose time slices different per day
+	creation_display_hour_per_day: false, // display or not the ability to choose time slices different per day
 	creation_display_proposals_time_slices: false,
 	creation_email_is_required: true,
 	display_header_create_button: false,

src/styles/dev-utilities/_helpers.scss

@@ -81,6 +81,10 @@
 	}
 }
 
+.has-no-background {
+	background: none;
+}
+.has-no-outline,
 .has-no-border {
 	border: none;
 }