Skip to content
Snippets Groups Projects
Commit 679fa5fd authored by Alex Penczko's avatar Alex Penczko
Browse files

[TASK] adapt sg-jobs for accessibility

parent 4bb3f49f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Resources/Private/Language/de.locallang.xlf
+ 4
− 0
View file @ 679fa5fd
......@@ -526,6 +526,10 @@
<source><![CDATA[Vacancies worldwide]]></source>
<target><![CDATA[Offene Stellen weltweit]]></target>
</trans-unit>
<trans-unit id="frontend.button.download" resname="frontend.button.download">
<source><![CDATA[Download button]]></source>
<target><![CDATA[Download Schaltfläche]]></target>
</trans-unit>
<trans-unit id="pagebrowser.label" resname="pagebrowser.label" approved="yes">
<source><![CDATA[Jobs pagination]]></source>
<target><![CDATA[Stellen Paginierung]]></target>
......
Resources/Private/Language/locallang.xlf
+ 3
− 0
View file @ 679fa5fd
......@@ -336,6 +336,9 @@
<trans-unit id="frontend.filter.countries" resname="frontend.filter.countries">
<source><![CDATA[Country]]></source>
</trans-unit>
<trans-unit id="frontend.button.download" resname="frontend.button.download">
<source><![CDATA[Download button]]></source>
</trans-unit>
<trans-unit id="frontend.filter.countriesfunctions" resname="frontend.filter.countriesfunctions">
<source><![CDATA[Function]]></source>
</trans-unit>
......
Resources/Private/Partials/Bootstrap5/Filter.html
+ 12
− 4
View file @ 679fa5fd
......@@ -16,7 +16,9 @@
options="{countries}"
prependOptionLabel="{f:translate(key: 'frontend.filter.selections.all')}"
prependOptionValue="0"
id="filter-countries"/>
id="filter-countries"
additionalAttributes="{autocomplete: 'off'}"
/>
</div>
<div class="col-md-3 col-sm-6 col-12">
<label for="filter-locations" class="form-label">
......@@ -31,7 +33,9 @@
options="{cities}"
prependOptionLabel="{f:translate(key: 'frontend.filter.selections.all')}"
prependOptionValue="0"
id="filter-locations"/>
id="filter-locations"
additionalAttributes="{autocomplete: 'off'}"
/>
</div>
<div class="col-md-3 col-sm-6 col-12">
<label for="filter-departments" class="form-label">
......@@ -47,7 +51,9 @@
options="{departments}"
prependOptionLabel="{f:translate(key: 'frontend.filter.selections.all')}"
prependOptionValue="0"
id="filter-departments"/>
id="filter-departments"
additionalAttributes="{autocomplete: 'off'}"
/>
</div>
<div class="col-md-3 col-sm-6 col-12">
<label for="filter-experienceLevels" class="form-label">
......@@ -63,7 +69,9 @@
options="{experienceLevels}"
prependOptionLabel="{f:translate(key: 'frontend.filter.selections.all')}"
prependOptionValue="0"
id="filter-experienceLevels"/>
id="filter-experienceLevels"
additionalAttributes="{autocomplete: 'off'}"
/>
</div>
</div>
<div class="row default-content-element">
......
Resources/Private/Templates/Bootstrap5/Joblist/ApplyForm.html
+ 30
− 27
View file @ 679fa5fd
......@@ -25,7 +25,8 @@
<f:if condition="{job.attachment}">
<div class="ms-auto">
<f:link.typolink target="_blank" parameter="{job.attachment.0.originalResource.publicUrl}" class="btn btn-outline-dark" additionalAttributes="{alt: '{f:translate(key: \'frontend.attachment\', extensionName: \'SgJobs\')} (PDF, {job.attachment.0.originalResource.size -> f:format.bytes()})'}">
<sg:renderSvg name="fontawesome/solid/download" width="20" height="20" color="currentColor" createColorAttribute="TRUE" />
<sg:renderSvg name="fontawesome/solid/download" width="20" height="20" color="currentColor" createColorAttribute="TRUE" role="img" aria-label="Download icon"/>
<span class="visually-hidden"><f:translate key="frontend.button.download" /></span>
</f:link.typolink>
</div>
</f:if>
......@@ -40,7 +41,7 @@
<sg:renderSvg name="fontawesome/solid/clock" width="16"
height="16" color="currentColor"
createColorAttribute="TRUE"
class="d-inline-block translate-y-px-1" />
class="d-inline-block translate-y-px-1" role="presentation" />
<span class="text-muted">
<f:format.raw>
<f:translate key="frontend.jobStart" />
......@@ -61,7 +62,7 @@
<sg:renderSvg name="fontawesome/solid/arrow-trend-up" width="16"
height="16" color="currentColor"
createColorAttribute="TRUE"
class="d-inline-block translate-y-px-1" />
class="d-inline-block translate-y-px-1" role="presentation" />
<span class="text-muted">
<strong>
<f:translate key="frontend.experienceLevel" />:
......@@ -77,7 +78,7 @@
<sg:renderSvg name="fontawesome/solid/map-location-dot" width="16"
height="16" color="currentColor"
createColorAttribute="TRUE"
class="d-inline-block translate-y-px-1" />
class="d-inline-block translate-y-px-1" role="presentation" />
<f:if condition="!{job.telecommutePossible}">
<f:then>
<span class="text-muted">
......@@ -260,53 +261,53 @@
<f:if condition="!{job}">
<div class="col">
<f:render section="formLabel" arguments="{label-for: 'company', label-text: 'company'}" />
<f:form.select property="company" multiple="0" size="1" id="apply-company" class="form-select" options="{companies}" optionLabelField="city" optionValueField="uid" prependOptionLabel="{f:translate(key:'frontend.apply.country.empty')}" required="required" />
<f:form.select property="company" multiple="0" size="1" id="apply-company" class="form-select" options="{companies}" optionLabelField="city" optionValueField="uid" prependOptionLabel="{f:translate(key:'frontend.apply.country.empty')}" required="required" additionalAttributes="{autocomplete: 'off'}" />
<f:render section="formValidation" arguments="{form-field: 'company'}" />
</div>
</f:if>
<div class="col">
<f:render section="formLabel" arguments="{label-for: 'gender', label-text: 'gender'}" />
<f:form.select property="gender" id="apply-gender" class="form-select" options="{male: '{f:translate(key: \'frontend.apply.gender.male\')}', female: '{f:translate(key: \'frontend.apply.gender.female\')}', other: '{f:translate(key: \'frontend.apply.gender.other\')}'}" />
<f:form.select property="gender" id="apply-gender" class="form-select" options="{male: '{f:translate(key: \'frontend.apply.gender.male\')}', female: '{f:translate(key: \'frontend.apply.gender.female\')}', other: '{f:translate(key: \'frontend.apply.gender.other\')}'}" additionalAttributes="{autocomplete: 'off'}" />
<f:render section="formValidation" arguments="{form-field: 'gender'}" />
</div>
</div>
<div class="row">
<f:render section="formTextField" arguments="{wrapper-class: 'col', field-id: 'firstName', field-text: 'first_name', required: 'required'}" />
<f:render section="formTextField" arguments="{wrapper-class: 'col', field-id: 'lastName', field-text: 'last_name', required: 'required'}" />
<f:render section="formTextField" arguments="{wrapper-class: 'col', field-id: 'firstName', field-text: 'first_name', required: 'required', autocomplete: 'given-name'}" />
<f:render section="formTextField" arguments="{wrapper-class: 'col', field-id: 'lastName', field-text: 'last_name', required: 'required', autocomplete: 'family-name'}" />
</div>
<div class="row">
<f:render section="formTextField" arguments="{wrapper-class: 'col col-sm-6', field-id: 'street', field-text: 'street', required: 'required'}" />
<f:render section="formTextField" arguments="{wrapper-class: 'col-6 col-sm-4', field-id: 'city', field-text: 'city', required: 'required'}" />
<f:render section="formTextField" arguments="{wrapper-class: 'col-6 col-sm-2', field-id: 'zip', field-text: 'zip', required: 'required'}" />
<f:render section="formTextField" arguments="{wrapper-class: 'col col-sm-6', field-id: 'street', field-text: 'street', required: 'required', autocomplete: 'street-address'}" />
<f:render section="formTextField" arguments="{wrapper-class: 'col-6 col-sm-4', field-id: 'city', field-text: 'city', required: 'required', autocomplete: 'address-level2'}" />
<f:render section="formTextField" arguments="{wrapper-class: 'col-6 col-sm-2', field-id: 'zip', field-text: 'zip', required: 'required', autocomplete: 'postal-code'}" />
</div>
<div class="row">
<div class="col">
<f:render section="formLabel" arguments="{label-for: 'country', label-text: 'country'}" />
<f:form.countrySelect value="DE" property="country" id="apply-country" class="form-select" required="required" />
<f:form.countrySelect value="DE" property="country" id="apply-country" class="form-select" required="required" additionalAttributes="{autocomplete: 'off'}" />
<f:render section="formValidation" arguments="{form-field: 'county'}" />
</div>
<div class="col">
<f:render section="formLabel" arguments="{label-for: 'nationality', label-text: 'nationality'}" />
<f:form.countrySelect value="DE" property="nationality" id="apply-nationality" class="form-select" required="required" />
<f:form.countrySelect value="DE" property="nationality" id="apply-nationality" class="form-select" required="required" additionalAttributes="{autocomplete: 'off'}" />
<f:render section="formValidation" arguments="{form-field: 'nationality'}" />
</div>
</div>
<div class="row">
<f:render section="formTextField" arguments="{wrapper-class: 'col', field-id: 'education', field-text: 'education', required: 'required'}" />
<f:render section="formTextField" arguments="{wrapper-class: 'col', field-id: 'education', field-text: 'education', required: 'required', autocomplete: 'off'}" />
<div class="col">
<f:render section="formLabel" arguments="{label-for: 'birthDate', label-text: 'birthDate'}" />
<f:form.textfield type="date" property="birthDate" id="apply-birthDate" class="form-control" placeholder="{f:translate(key:'frontend.apply.birthDate')}" required="required" />
<f:form.textfield type="date" property="birthDate" id="apply-birthDate" class="form-control" placeholder="{f:translate(key:'frontend.apply.birthDate')}" required="required" additionalAttributes="{autocomplete: 'off'}" />
<f:render section="formValidation" arguments="{form-field: 'birthDate'}" />
</div>
</div>
<div class="row">
<f:render section="formTextField" arguments="{wrapper-class: 'col', field-id: 'phone', field-text: 'phone', required: 'required'}" />
<f:render section="formTextField" arguments="{wrapper-class: 'col', field-id: 'mobile', field-text: 'mobile'}" />
<f:render section="formTextField" arguments="{wrapper-class: 'col', field-id: 'phone', field-text: 'phone', required: 'required', autocomplete: 'tel'}" />
<f:render section="formTextField" arguments="{wrapper-class: 'col', field-id: 'mobile', field-text: 'mobile', autocomplete: 'tel'}" />
</div>
<div class="row">
<div class="col-6">
<f:render section="formLabel" arguments="{label-for: 'email', label-text: 'email'}" />
<f:form.textfield type="email" property="email" id="apply-email" class="form-control" placeholder="{f:translate(key:'frontend.apply.email')}" required="required" />
<f:form.textfield type="email" property="email" id="apply-email" class="form-control" placeholder="{f:translate(key:'frontend.apply.email')}" required="required" additionalAttributes="{autocomplete: 'email'}" />
<f:render section="formValidation" arguments="{form-field: 'email'}" />
</div>
</div>
......@@ -388,7 +389,7 @@
<div class="row mb-4">
<div class="col">
<f:render section="formLabel" arguments="{label-for: 'message', label-text: 'message'}" />
<f:form.textarea class="form-control" rows="10" property="message" id="apply-message" placeholder="{f:translate(key:'frontend.apply.message')}" />
<f:form.textarea class="form-control" rows="10" property="message" id="apply-message" placeholder="{f:translate(key:'frontend.apply.message')}" additionalAttributes="{autocomplete: 'on'}" />
</div>
</div>
<div class="form-check mb-4">
......@@ -467,7 +468,7 @@
<f:else>
<sg:renderSvg name="fontawesome/solid/user" width="50" height="50"
color="currentColor" createColorAttribute="TRUE"
class="px-4 py-4 bg-light o-50" />
class="px-4 py-4 bg-light o-50" role="img" aria-label="User icon" />
</f:else>
</f:if>
</div>
......@@ -486,7 +487,7 @@
<sg:renderSvg name="fontawesome/solid/envelope" width="16"
height="16" color="currentColor"
createColorAttribute="TRUE"
class="d-inline-block me-2 translate-y-px-1" />
class="d-inline-block me-2 translate-y-px-1" role="presentation"/>
<f:format.html parseFuncTSPath="lib.parseFunc">
<a href="mailto:{contact.email}" class="stretched-link">
<f:translate key="frontend.emailContact" />
......@@ -522,17 +523,19 @@
<label for="apply-{field-id}" class="form-label">
<f:translate key="frontend.apply.{field-text}" />
</label>
<f:form.textfield property="{field-id}" id="apply-{field-id}" class="form-control" placeholder="{f:translate(key:'frontend.apply.{field-text}')}" required="{required}" />
<f:form.textfield property="{field-id}" id="apply-{field-id}" class="form-control" placeholder="{f:translate(key:'frontend.apply.{field-text}')}" required="{required}" additionalAttributes="{autocomplete: '{autocomplete}'}"/>
<f:render section="formValidation" arguments="{form-field: '{field-id}'}" />
</div>
</f:section>
<f:section name="formValidation">
<f:form.validationResults for="applyData.{form-field}">
<ul class="text-danger mb-0">
<f:for each="{validationResults.errors}" as="error">
<li class="pt-2">{error.message}</li>
</f:for>
</ul>
<f:if condition="{validationResults.errors}">
<ul class="text-danger mb-0">
<f:for each="{validationResults.errors}" as="error">
<li class="pt-2">{error.message}</li>
</f:for>
</ul>
</f:if>
</f:form.validationResults>
</f:section>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment