feat: removed unnecessary props and added role and aria-label to head…

…ings for header card

dev/views/Cards.vue

@@ -1,23 +1,17 @@
 <template>
  <div>
- <Card
- :card-container="plainContainer"
- :card-content="plainContent">
+ <Card>
  I am a plain card
  </Card>
 
  <Card 
  heading="I am a card heading"
- :card-container="headingContainer"
- :card-heading="headingHeading"
- :card-content="headingContent">
+ >
  I am card content
  </Card>
 
  <Card
- :card-container="backgroundContainer"
- :card-heading="backgroundHeading"
- :card-content="backgroundContent">
+ >
  <div
  slot="heading"
  slot-scope="{ headerClass }"
@@ -31,9 +25,7 @@
 
  <Card 
  branded="card-sample-brand-class"
- :card-brand="brandedBrand"
- :card-container="brandedContainer"
- :card-content="brandedContent">
+ >
  I am a branded card
  </Card>
  </div>
@@ -50,26 +42,6 @@ export default Vue.extend({
  },
  data: function(){
  return{
- // Text controlling individual card's aria-labels for screen readers
-
- //Plain card's Aria Labels
- plainContainer : "a plain card's container",
- plainContent: "a plain card's content",
-
- //Heading card's Aria Labels
- headingContainer: "a heading card's container",
- headingHeading: "a heading card's heading",
- headingContent: " a heading card's content",
-
- //Heading with Custom Background card's Aria Label
- backgroundContainer: "a heading w/ background card's container",
- backgroundHeading: "a heading w/ background card's heading",
- backgroundContent: "a heading w/ background card's content",
-
- //Branded card's Aria Label
- brandedBrand : "a branded card's brand",
- brandedContainer: "a branded card's container",
- brandedContent: "a branded card's content"
  }
  }
 })

src/components/FishTankCard.vue

@@ -4,27 +4,25 @@
  v-if="branded"
  :class="branded"
  class="ft-card__brand-stripe"
- v-bind:area-label="cardBrand"
  />
  <div 
  class="ft-card__container"
- v-bind:aria-label="cardContainer"
  >
  <slot
  :headerClass="'ft-card__heading'"
  name="heading"
  />
  <div 
- v-bind:aria-label="cardHeading"
  v-if="!$slots.heading && heading"
  class="ft-card__heading"
+ role="heading"
+ aria-level="3"
  >
  {{ heading }}
  </div>
 
  <div
  class="ft-card__body"
- v-bind:aria-label="cardContent"
  >
  <slot/>
  </div>
@@ -45,26 +43,6 @@ export default Vue.extend({
  type: String,
  required: false,
  default: undefined,
- },
- cardContainer: {
- type: String,
- required: false,
- default: undefined
- },
- cardHeading: {
- type: String,
- required: false,
- default: undefined
- },
- cardContent: {
- type: String,
- required: false,
- default: undefined
- },
- cardBrand:{
- type: String,
- required: false,
- default: undefined
  }
 
  }