Commit 9c31653f authored by Dave Pisek's avatar Dave Pisek

Enrich aria-labels to increase accessibility

parent 517c385b
<script> <script>
import { GlLink } from '@gitlab/ui'; import { GlLink } from '@gitlab/ui';
import { __, sprintf } from '~/locale'; import { s__, __, sprintf } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
export default { export default {
...@@ -71,6 +71,13 @@ export default { ...@@ -71,6 +71,13 @@ export default {
return sprintf(body, { linkStart, linkEnd }, false); return sprintf(body, { linkStart, linkEnd }, false);
}, },
}, },
methods: {
getFeatureDocumentationLinkLabel(featureName) {
return sprintf(s__('SecurityConfiguration|Feature documentation for %{featureName}'), {
featureName,
});
},
},
}; };
</script> </script>
...@@ -125,7 +132,7 @@ export default { ...@@ -125,7 +132,7 @@ export default {
<gl-link <gl-link
target="_blank" target="_blank"
:href="feature.link" :href="feature.link"
:aria-label="s__('SecurityConfiguration|Feature documentation')" :aria-label="getFeatureDocumentationLinkLabel(feature.name)"
>{{ __('More information') }}</gl-link >{{ __('More information') }}</gl-link
> >
</div> </div>
......
...@@ -54,18 +54,6 @@ exports[`Security Configuration App features table displays a given feature 1`] ...@@ -54,18 +54,6 @@ exports[`Security Configuration App features table displays a given feature 1`]
name-feature-0 name-feature-0
</div> </div>
<gl-link-stub
aria-label="Feature documentation"
class="d-inline-flex ml-1"
href="link-feature-0"
target="_blank"
>
<icon-stub
name="external-link"
size="16"
/>
</gl-link-stub>
</div> </div>
<div <div
...@@ -73,7 +61,14 @@ exports[`Security Configuration App features table displays a given feature 1`] ...@@ -73,7 +61,14 @@ exports[`Security Configuration App features table displays a given feature 1`]
> >
description-feature-0 description-feature-0
<gl-link-stub
aria-label="Feature documentation for name-feature-0"
href="link-feature-0"
target="_blank"
>
More information
</gl-link-stub>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -2026,10 +2026,10 @@ msgstr "" ...@@ -2026,10 +2026,10 @@ msgstr ""
msgid "Analyze a review version of your web application." msgid "Analyze a review version of your web application."
msgstr "" msgstr ""
msgid "Analyze your dependencies for known vulnerabilities" msgid "Analyze your dependencies for known vulnerabilities."
msgstr "" msgstr ""
msgid "Analyze your source code for known vulnerabilities" msgid "Analyze your source code for known vulnerabilities."
msgstr "" msgstr ""
msgid "Ancestors" msgid "Ancestors"
...@@ -3460,7 +3460,7 @@ msgstr "" ...@@ -3460,7 +3460,7 @@ msgstr ""
msgid "Check your .gitlab-ci.yml" msgid "Check your .gitlab-ci.yml"
msgstr "" msgstr ""
msgid "Check your Docker images for known vulnerabilities" msgid "Check your Docker images for known vulnerabilities."
msgstr "" msgstr ""
msgid "Checking %{text} availability…" msgid "Checking %{text} availability…"
...@@ -17082,7 +17082,7 @@ msgstr "" ...@@ -17082,7 +17082,7 @@ msgstr ""
msgid "Search users or groups" msgid "Search users or groups"
msgstr "" msgstr ""
msgid "Search your project dependencies for their licenses and apply policies" msgid "Search your project dependencies for their licenses and apply policies."
msgstr "" msgstr ""
msgid "Search your projects" msgid "Search your projects"
...@@ -17308,7 +17308,7 @@ msgstr "" ...@@ -17308,7 +17308,7 @@ msgstr ""
msgid "SecurityConfiguration|Feature" msgid "SecurityConfiguration|Feature"
msgstr "" msgstr ""
msgid "SecurityConfiguration|Feature documentation" msgid "SecurityConfiguration|Feature documentation for %{featureName}"
msgstr "" msgstr ""
msgid "SecurityConfiguration|Not yet configured" msgid "SecurityConfiguration|Not yet configured"
......
Markdown is supported
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