Skip to content
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.

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

fix(VChip): add aria-label to chip close button #12384

Merged

Conversation

jyburns
Copy link
Contributor

@jyburns jyburns commented Oct 9, 2020

Description

fixes #11165 by adding a default aria-label of '$vuetify.close' to the close <button> tag on VChip. This change also created a new prop of close-label on VChip.

Motivation and Context

#11165

How Has This Been Tested?

Tested in playground and with unit tests. Added a unit test to check for new aria-label when expected.

Markup:

<template>
  <v-container>
    <v-chip
      close
      close-icon="mdi-close-outline"
      color="green"
    >Hello Vuetify (default aria label)</v-chip>
    <v-chip
      close
      close-icon="mdi-close-outline"
      color="purple"
      close-label="custom aria label"
    >Hello Vuetify (custom aria label)</v-chip>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      //
    }),
  }
</script>

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

  • The PR title is no longer than 64 characters.
  • The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
  • My code follows the code style of this project.
  • I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

@jyburns
Copy link
Contributor Author

jyburns commented Oct 11, 2020

Looking for guidance on properly updating the API docs. Initially thought https://github.com/vuetifyjs/vuetify/blob/master/packages/api-generator/src/locale/en/v-chip.json would be the file to update, but it is gitignored.

Copy link
Member

@KaelWD KaelWD left a comment

Choose a reason for hiding this comment

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

  • That file is correct, change the gitignore to !/src/locale/en
  • Don't need a new test, it's already covered by the snapshot
  • v-alert calls the prop closeLabel
  • This adds a new prop so rebase to dev: git fetch && git rebase origin/dev && git push --force then click edit on github and change the base branch

@jyburns jyburns force-pushed the bug/#11165-chip-close-button-aria-label branch from 290f24a to a7643f3 Compare October 11, 2020 14:07
@jyburns jyburns changed the base branch from master to dev October 11, 2020 14:07
@jyburns jyburns force-pushed the bug/#11165-chip-close-button-aria-label branch 2 times, most recently from b7f41c8 to fec29c6 Compare October 11, 2020 14:51
@jyburns jyburns changed the base branch from dev to master October 11, 2020 15:12
@jyburns jyburns changed the base branch from master to dev October 11, 2020 15:12
@jyburns jyburns force-pushed the bug/#11165-chip-close-button-aria-label branch from fec29c6 to 4dd9cc4 Compare October 11, 2020 15:43
@jyburns
Copy link
Contributor Author

jyburns commented Oct 11, 2020

@KaelWD Thanks for your feedback! I was being associated with previous commits to the dev branch after rebasing... I was able to get the diff to just reflect my changes again but i'm afraid I lost my previous commit history in the process. Apologies for that.

@johnleider johnleider added the C: VChip VChip label Oct 20, 2020
@johnleider johnleider added this to the v2.3.x milestone Oct 20, 2020
Copy link
Member

@MajesticPotatoe MajesticPotatoe left a comment

Choose a reason for hiding this comment

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

👍
Thank you for your contribution and interest in improving Vuetify! Make sure to join us in the Discord community.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VChip VChip T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report] v-chip close lacks accessibility label
4 participants