feat(VIcon): Add 'tag' prop to VIcon that sets a custom tag to be used #6899
Conversation
Codecov Report
@@ Coverage Diff @@
## next #6899 +/- ##
==========================================
+ Coverage 81.85% 81.86% +<.01%
==========================================
Files 329 329
Lines 8438 8437 -1
Branches 2138 2138
==========================================
Hits 6907 6907
+ Misses 1440 1439 -1
Partials 91 91
Continue to review full report at Codecov.
|
|
This pull request is automatically deployed with Now. |
Add a new optional prop to VIcon, the 'tag' prop, that specifies a custom tag to use in the component, similar to the tag prop from VContainer. If none is provided, the component will fallback to use <i> as the tag, for the benefit of backwards compatibility.
FRFlor
force-pushed
the
feat/v-icon-tag-prop
branch
from
558777e
to
ccc3d43
Compare
|
@sh7dm Rebased with next |
|
@FRFlor thanks. Have you tested it with different icon sets such as Material Icons, Material Design Icons, Font Awesome 4/5 and SVG? |
|
Hey @FRFlor, TravisCI finished with status TravisBuddy Request Identifier: 5bf32680-55c9-11e9-bc42-792bcead230c |
Fix linting error by removing the trailing comma
I'll do a more thorough test and will let you know. |
|
@sh7dm Everything seems okay. Thanks for all the help, really appreciated it! |
Description
Add a new optional prop to VIcon, the 'tag' prop, that specifies a custom tag to use in the
component, similar to the tag prop from VContainer.
For the sake of backwards compatibility with existing Vuetify projects, this PR keeps the standard behavior of using the
<i>tag if none is provided. However, it also gives the option for the developer to pass a new tag prop. If this prop is provided, the V-icon component will use the element specified as the wrapper.Motivation and Context
The usage of
<i>is not recommended under the guidelines of accessibility (WCAG A/AA), since the<i>tag is not handled well by some screenreaders.Even though these
<i>tags are being used for icons on the VIcon component, this still leads to warnings on Accessibility tests.Using the Accessibility Checker website, we can see multiple instances of errors from the icons used on the page.
https://achecker.ca/ .
On either https://vuetifyjs.com/en/ or https://www.felipeflor.com will show that every instance of v-icon being used triggers a warning.
How Has This Been Tested?
The changes have been implemented with a TDD approach. Two new unit tests have been added with this new commit, one that assures the component will remain using the
<i>tag if none is provided, and another test that assures the component will use any given tag provided by the developer.Types of changes
Checklist:
masterfor bug fixes and documentation updates,devfor new features and breaking changes).