Skip to content

Commit

Permalink
enh(aria): changed check color to adhere to 3:1 ratio
Browse files Browse the repository at this point in the history
Signed-off-by: Eduardo Morales <[email protected]>
  • Loading branch information
emoral435 committed Dec 13, 2023
1 parent ebbe5c6 commit 150a38b
Showing 1 changed file with 35 additions and 1 deletion.
36 changes: 35 additions & 1 deletion src/components/NcColorPicker/NcColorPicker.vue
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export default {
:style="{ backgroundColor: color }"
class="color-picker__simple-color-circle"
:class="{ 'color-picker__simple-color-circle--active' : color === currentColor }">
<Check v-if="color === currentColor" :size="20" />
<Check v-if="color === currentColor" :size="20" :fill-color="`${contrastColor()}`"/>

Check failure on line 176 in src/components/NcColorPicker/NcColorPicker.vue

View workflow job for this annotation

GitHub Actions / eslint

Expected a space before '/>', but not found
<input type="radio"
class="hidden-visually"
:aria-label="name"
Expand Down Expand Up @@ -386,6 +386,40 @@ export default {
this.$emit('input', color)

},

/**
* Calculate luminance of provided hex color
*
* @param {string} color the hex color
*/
calculateLuma(color) {
const [red, green, blue] = this.hexToRGB(color)
return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255
},

/**
* Convert hex color to RGB
*
* @param {string} hex the hex color
*/
hexToRGB(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
return result
? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]
: null
},

/**
* gets the contrast color to use for the user chosen color
*
* @returns {string} representing the hex value to change the check color to contrast with the background color

Check warning on line 415 in src/components/NcColorPicker/NcColorPicker.vue

View workflow job for this annotation

GitHub Actions / eslint

Invalid JSDoc tag (preference). Replace "returns" JSDoc tag with "return"
*

Check failure on line 416 in src/components/NcColorPicker/NcColorPicker.vue

View workflow job for this annotation

GitHub Actions / eslint

Trailing spaces not allowed
*/
contrastColor() {
const black = "#000000"

Check failure on line 419 in src/components/NcColorPicker/NcColorPicker.vue

View workflow job for this annotation

GitHub Actions / eslint

Strings must use singlequote
const white = "#FFFFFF"

Check failure on line 420 in src/components/NcColorPicker/NcColorPicker.vue

View workflow job for this annotation

GitHub Actions / eslint

Strings must use singlequote
return (this.calculateLuma(this.currentColor) > .5) ? black : white

Check failure on line 421 in src/components/NcColorPicker/NcColorPicker.vue

View workflow job for this annotation

GitHub Actions / eslint

A leading decimal point can be confused with a dot
},
},
}

Expand Down

0 comments on commit 150a38b

Please sign in to comment.