diff --git a/src/components/progress/progress-bar.js b/src/components/progress/progress-bar.js index 02af3d0d4e3..f5745cca82d 100644 --- a/src/components/progress/progress-bar.js +++ b/src/components/progress/progress-bar.js @@ -16,6 +16,7 @@ export const props = makePropsConfigurable( animated: makeProp(PROP_TYPE_BOOLEAN, null), label: makeProp(PROP_TYPE_STRING), labelHtml: makeProp(PROP_TYPE_STRING), + ariaLabel: makeProp(PROP_TYPE_STRING, 'progress-bar'), max: makeProp(PROP_TYPE_NUMBER_STRING, null), precision: makeProp(PROP_TYPE_NUMBER_STRING, null), showProgress: makeProp(PROP_TYPE_BOOLEAN, null), @@ -99,7 +100,7 @@ export const BProgressBar = /*#__PURE__*/ extend({ } }, render(h) { - const { label, labelHtml, computedValue, computedPrecision } = this + const { ariaLabel, label, labelHtml, computedValue, computedPrecision } = this let $children let domProps = {} @@ -121,6 +122,7 @@ export const BProgressBar = /*#__PURE__*/ extend({ style: this.progressBarStyles, attrs: { role: 'progressbar', + 'aria-label': ariaLabel, 'aria-valuemin': '0', 'aria-valuemax': toString(this.computedMax), 'aria-valuenow': toFixed(computedValue, computedPrecision) diff --git a/src/components/progress/progress-bar.spec.js b/src/components/progress/progress-bar.spec.js index 730db5ceb60..ffe98109898 100644 --- a/src/components/progress/progress-bar.spec.js +++ b/src/components/progress/progress-bar.spec.js @@ -267,4 +267,16 @@ describe('progress-bar', () => { wrapper.destroy() }) + + it('has aria-label attribute when explicitly set', () => { + const wrapper = mount(BProgressBar, { + attrs: { + 'aria-label': 'ariaLabel' + } + }) + + expect(wrapper.attributes('aria-label')).toBe('ariaLabel') + + wrapper.destroy() + }) }) diff --git a/src/components/progress/progress.js b/src/components/progress/progress.js index d0c50723c96..7f4734b1e68 100644 --- a/src/components/progress/progress.js +++ b/src/components/progress/progress.js @@ -8,7 +8,7 @@ import { BProgressBar, props as BProgressBarProps } from './progress-bar' // --- Props --- -const progressBarProps = omit(BProgressBarProps, ['label', 'labelHtml']) +const progressBarProps = omit(BProgressBarProps, ['ariaLabel', 'label', 'labelHtml']) export const props = makePropsConfigurable( sortKeys({ diff --git a/src/components/progress/progress.spec.js b/src/components/progress/progress.spec.js index b375a7f07d8..c0f89c299dd 100644 --- a/src/components/progress/progress.spec.js +++ b/src/components/progress/progress.spec.js @@ -13,6 +13,7 @@ describe('progress', () => { const $bar = wrapper.find('.progress-bar') expect($bar.element.tagName).toBe('DIV') expect($bar.attributes('role')).toBe('progressbar') + expect($bar.attributes('aria-label')).toBe('progress-bar') expect($bar.attributes('aria-valuemin')).toBe('0') expect($bar.attributes('aria-valuemax')).toBe('100') expect($bar.attributes('aria-valuenow')).toBe('0') @@ -55,6 +56,7 @@ describe('progress', () => { const $bar = wrapper.find('.progress-bar') expect($bar.element.tagName).toBe('DIV') expect($bar.attributes('role')).toBe('progressbar') + expect($bar.attributes('aria-label')).toBe('progress-bar') expect($bar.attributes('aria-valuemin')).toBe('0') expect($bar.attributes('aria-valuemax')).toBe('50') expect($bar.attributes('aria-valuenow')).toBe('25')