Skip to content

fix: improve contact view accessibility #4368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: improve contact view accessibility #4368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/components/Properties/PropertyDateTime.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
-->

<template>
<div v-if="propModel" class="property">
<div v-if="propModel" class="property" role="group">
<!-- title if first element -->
<PropertyTitle v-if="isFirstProperty && propModel.icon"
:property="property"
Expand All @@ -14,8 +14,8 @@
:icon="propModel.icon"
:readable-name="propModel.readableName" />

<div class="property__row">
<div class="property__label">
<div class="property__row" role="rowgroup">
<div class="property__label" role="rowheader">
<!-- type selector -->
<NcSelect v-if="propModel.options"
v-model="localType"
Expand All @@ -38,7 +38,7 @@
</span>
</div>

<div class="property__value">
<div class="property__value" role="cell">
<!-- Real input where the picker shows -->
<DateTimePicker v-if="!isReadOnly"
:value="vcardTimeLocalValue.toJSDate()"
Expand All @@ -57,7 +57,7 @@
</div>

<!-- props actions -->
<div class="property__actions">
<div class="property__actions" role="cell">
<PropertyActions v-if="!isReadOnly"
:actions="actions"
:property-component="this"
Expand Down
6 changes: 3 additions & 3 deletions src/components/Properties/PropertyGroups.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@
-->

<template>
<div v-if="propModel && showProperty" class="property">
<div v-if="propModel && showProperty" class="property" role="group">
<PropertyTitle icon="icon-contacts-dark"
:readable-name="t('contacts', 'Contact groups')"
:is-read-only="isReadOnly" />

<div class="property__row">
<div class="property__row" role="rowgroup">
<div class="property__label">
<span>{{ propModel.readableName }}</span>
</div>

<!-- multiselect taggable groups -->
<div class="property__value">
<div class="property__value" role="cell">
<NcSelect v-if="!isReadOnly"
v-model="localValue"
:options="groups"
Expand Down
20 changes: 10 additions & 10 deletions src/components/Properties/PropertyMultipleText.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
-->

<template>
<div v-if="propModel" class="property property--multiple-text">
<div v-if="propModel" class="property property--multiple-text" role="group">
<!-- title if first element -->
<PropertyTitle v-if="isFirstProperty && propModel.icon"
:property="property"
Expand All @@ -23,8 +23,8 @@
</template>
</PropertyTitle>

<div v-if="showActionsInFirstRow" class="property__row">
<div class="property__label">
<div v-if="showActionsInFirstRow" class="property__row" role="rowgroup">
<div class="property__label" role="rowheader">

Check warning on line 27 in src/components/Properties/PropertyMultipleText.vue

View check run for this annotation

Codecov / codecov/patch

src/components/Properties/PropertyMultipleText.vue#L27 

Added line #L27 was not covered by tests
<!-- read-only type because NcMultiselect can't be styled properly -->
<span v-if="isReadOnly && propModel.options">
{{ (localType && localType.name) || '' }}
Expand Down Expand Up @@ -54,7 +54,7 @@
</span>
</div>

<div class="property__value">
<div class="property__value" role="cell">
<!-- show the first input if not a structured value -->
<input v-if="!property.isStructuredValue"
v-model.trim="localValue[0]"
Expand All @@ -64,7 +64,7 @@
</div>

<!-- props actions -->
<div class="property__actions">
<div class="property__actions" role="cell">
<PropertyActions v-if="showActionsInFirstRow && !isReadOnly"
:actions="actions"
:property-component="this"
Expand All @@ -76,12 +76,12 @@
<template v-if="propModel.displayOrder && propModel.readableValues">
<div v-for="index in propModel.displayOrder"
:key="index"
class="property__row">
class="property__row" role="rowgroup">

Check failure on line 79 in src/components/Properties/PropertyMultipleText.vue

View workflow job for this annotation

GitHub Actions / NPM lint 

'role' should be on a new line
<template v-if="(isReadOnly && localValue[index]) || !isReadOnly">
<div class="property__label">
<div class="property__label" role="rowheader">
<span>{{ propModel.readableValues[index] }}</span>
</div>
<div class="property__value">
<div class="property__value" role="cell">
<NcTextField :value.sync="localValue[index]"
:readonly="isReadOnly"
type="text"
Expand All @@ -98,10 +98,10 @@
<template v-else>
<div v-for="(value, index) in filteredValue"
:key="index"
class="property__row">
class="property__row" rolw="rowgroup">

Check failure on line 101 in src/components/Properties/PropertyMultipleText.vue

View workflow job for this annotation

GitHub Actions / NPM lint 

'rolw' should be on a new line
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Careful

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Otherwise looks good

<template v-if="(isReadOnly && filteredValue[index]) || !isReadOnly">
<div class="property__label" />
<div class="property__value">
<div class="property__value" role="cell">
<NcTextField :value.sync="filteredValue[index]"
:readonly="isReadOnly"
:label-outside="true"
Expand Down
10 changes: 5 additions & 5 deletions src/components/Properties/PropertyRev.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@
-->

<template>
<div class="property property--rev">
<div class="property__row">
<div class="property__label" />
<div class="property property--rev" role="group">
<div class="property__row" role="rowgroup">
<div class="property__label" role="rowheader" />

<div class="property__value">
<div class="property__value" role="cell">

Check warning on line 11 in src/components/Properties/PropertyRev.vue

View check run for this annotation

Codecov / codecov/patch

src/components/Properties/PropertyRev.vue#L11 

Added line #L11 was not covered by tests
{{ t('contacts', 'Last modified') }} {{ relativeDate }}
</div>

<div class="property__actions" />
<div class="property__actions" role="cell" />
</div>
</div>
</template>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Properties/PropertySelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
-->

<template>
<div v-if="propModel && showProperty && !isSingleOption" class="property">
<div v-if="propModel && showProperty && !isSingleOption" class="property" role="group">
<!-- title if first element -->
<PropertyTitle v-if="isFirstProperty && propModel.icon"
:property="property"
Expand All @@ -14,8 +14,8 @@
:icon="propModel.icon"
:readable-name="propModel.readableName" />

<div class="property__row">
<div class="property__label">
<div class="property__row" role="rowgroup">
<div class="property__label" role="rowheader">
<!-- if we do not support any type on our model but one is set anyway -->
<span v-if="selectType">
{{ selectType.name }}
Expand All @@ -27,7 +27,7 @@
</span>
</div>

<div class="property__value">
<div class="property__value" role="cell">
<NcSelect v-if="!isReadOnly"
v-model="matchedOptions"
:options="selectableOptions"
Expand All @@ -43,7 +43,7 @@
</div>

<!-- props actions -->
<div class="property__actions">
<div class="property__actions" role="cell">
<PropertyActions v-if="!isReadOnly && !hideActions"
:actions="actions"
:property-component="this"
Expand Down
10 changes: 5 additions & 5 deletions src/components/Properties/PropertyText.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
-->

<template>
<div v-if="propModel && showProperty" class="property">
<div v-if="propModel && showProperty" class="property" role="group">
<!-- title if first element -->
<PropertyTitle v-if="isFirstProperty && propModel.icon"
:property="property"
Expand All @@ -14,8 +14,8 @@
:icon="propModel.icon"
:readable-name="propModel.readableName" />

<div class="property__row">
<div class="property__label">
<div class="property__row" role="rowgroup">
<div class="property__label" role="rowheader">
<!-- read-only type -->
<span v-if="isReadOnly && propModel.options">
{{ (localType && localType.name) || '' }}
Expand Down Expand Up @@ -46,7 +46,7 @@
</div>

<!-- textarea for note -->
<div class="property__value">
<div class="property__value" role="cell">
<NcTextArea v-if="propName === 'note'"
id="textarea"
ref="textarea"
Expand Down Expand Up @@ -77,7 +77,7 @@
</div>

<!-- props actions -->
<div class="property__actions">
<div class="property__actions" role="cell">
<PropertyActions v-if="!isReadOnly"
:actions="actions"
:property-component="this"
Expand Down
2 changes: 1 addition & 1 deletion src/components/Properties/PropertyTitle.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
-->

<template>
<div class="property property--title">
<div class="property property--title" role="heading">
<div class="property__label">
<PropertyTitleIcon :icon="icon" />
</div>
Expand Down
Loading