Skip to content

Commit 72a1363

Browse files
jacobmllr95jacobmllr95
authored
fix(b-icon): use aria-label attribute instead of alt (bootstrap-vue#5581)
1 parent 1964363 commit 72a1363

File tree

4 files changed

+16
-11
lines changed

4 files changed

+16
-11
lines changed

‎src/icons/helpers/icon-base.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const baseAttrs = {
5252
height: '1em',
5353
focusable: 'false',
5454
role: 'img',
55-
alt: 'icon'
55+
'aria-label': 'icon'
5656
}
5757

5858
// Attributes that are nulled out when stacked
@@ -61,7 +61,7 @@ const stackedAttrs = {
6161
height: null,
6262
focusable: null,
6363
role: null,
64-
alt: null
64+
'aria-label': null
6565
}
6666

6767
// Shared private base component to reduce bundle/runtime size

‎src/icons/helpers/make-icon.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ import { commonIconProps, BVIconBase } from './icon-base'
1313
export const makeIcon = (name, content) => {
1414
// For performance reason we pre-compute some values, so that
1515
// they are not computed on each render of the icon component
16+
const kebabName = kebabCase(name)
1617
const iconName = `BIcon${pascalCase(name)}`
17-
const iconNameClass = `bi-${kebabCase(name)}`
18+
const iconNameClass = `bi-${kebabName}`
1819
const svgContent = trim(content || '')
1920
// Return the icon component definition
2021
return /*#__PURE__*/ Vue.extend({
@@ -30,7 +31,11 @@ export const makeIcon = (name, content) => {
3031
render(h, { data, props }) {
3132
return h(
3233
BVIconBase,
33-
mergeData(data, { staticClass: iconNameClass, props: { ...props, content: svgContent } })
34+
mergeData(data, {
35+
staticClass: iconNameClass,
36+
props: { ...props, content: svgContent },
37+
attrs: { 'aria-label': kebabName.replace(/-/g, ' ') }
38+
})
3439
)
3540
}
3641
})

‎src/icons/icons.spec.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ describe('icons', () => {
2222
expect(wrapper.classes()).toContain('bi-alarm-fill')
2323
expect(wrapper.classes().length).toBe(3)
2424
expect(wrapper.attributes('role')).toBe('img')
25-
expect(wrapper.attributes('alt')).toBe('icon')
25+
expect(wrapper.attributes('aria-label')).toBe('alarm fill')
2626
expect(wrapper.attributes('focusable')).toBe('false')
2727
expect(wrapper.attributes('xmlns')).toBe('http://www.w3.org/2000/svg')
2828
expect(wrapper.attributes('width')).toBe('1em')
@@ -54,7 +54,7 @@ describe('icons', () => {
5454
expect(wrapper.classes()).toContain('bi-alarm-fill')
5555
expect(wrapper.classes().length).toBe(3)
5656
expect(wrapper.attributes('role')).not.toBe('img')
57-
expect(wrapper.attributes('alt')).not.toBe('icon')
57+
expect(wrapper.attributes('aria-label')).not.toBe('icon')
5858
expect(wrapper.attributes('focusable')).not.toBe('false')
5959
expect(wrapper.attributes('focusable')).not.toBe('true')
6060
expect(wrapper.attributes('xmlns')).not.toBe('http://www.w3.org/2000/svg')
@@ -153,7 +153,7 @@ describe('icons', () => {
153153
expect(wrapper.classes()).toContain('text-danger')
154154
expect(wrapper.classes().length).toBe(4)
155155
expect(wrapper.attributes('role')).toBe('img')
156-
expect(wrapper.attributes('alt')).toBe('icon')
156+
expect(wrapper.attributes('aria-label')).toBe('alarm fill')
157157
expect(wrapper.attributes('focusable')).toBe('false')
158158
expect(wrapper.find('svg > g').exists()).toBe(true)
159159
expect(wrapper.find('svg > g').attributes('transform')).not.toBeDefined()
@@ -178,7 +178,7 @@ describe('icons', () => {
178178
expect(wrapper.classes()).toContain('bi-alarm-fill')
179179
expect(wrapper.classes().length).toBe(3)
180180
expect(wrapper.attributes('role')).toBe('img')
181-
expect(wrapper.attributes('alt')).toBe('icon')
181+
expect(wrapper.attributes('aria-label')).toBe('alarm fill')
182182
expect(wrapper.attributes('focusable')).toBe('false')
183183
expect(wrapper.attributes('style')).toBeDefined()
184184
expect(wrapper.element.style.fontSize).toEqual('125%')

‎src/icons/iconstack.spec.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('icons > b-iconstack', () => {
1212
expect(wrapper.classes()).toContain('bi')
1313
expect(wrapper.classes().length).toBe(3)
1414
expect(wrapper.attributes('role')).toBe('img')
15-
expect(wrapper.attributes('alt')).toBe('icon')
15+
expect(wrapper.attributes('aria-label')).toBe('icon')
1616
expect(wrapper.attributes('focusable')).toBe('false')
1717
expect(wrapper.attributes('xmlns')).toBe('http://www.w3.org/2000/svg')
1818
expect(wrapper.attributes('width')).toBe('1em')
@@ -43,7 +43,7 @@ describe('icons > b-iconstack', () => {
4343
expect(wrapper.classes()).toContain('text-danger')
4444
expect(wrapper.classes().length).toBe(4)
4545
expect(wrapper.attributes('role')).toBe('img')
46-
expect(wrapper.attributes('alt')).toBe('icon')
46+
expect(wrapper.attributes('aria-label')).toBe('icon')
4747
expect(wrapper.attributes('focusable')).toBe('false')
4848
expect(wrapper.find('svg > g').exists()).toBe(true)
4949
expect(wrapper.find('svg > g').attributes('transform')).not.toBeDefined()
@@ -65,7 +65,7 @@ describe('icons > b-iconstack', () => {
6565
expect(wrapper.classes()).toContain('bi')
6666
expect(wrapper.classes().length).toBe(3)
6767
expect(wrapper.attributes('role')).toBe('img')
68-
expect(wrapper.attributes('alt')).toBe('icon')
68+
expect(wrapper.attributes('aria-label')).toBe('icon')
6969
expect(wrapper.attributes('focusable')).toBe('false')
7070
expect(wrapper.attributes('style')).toBeDefined()
7171
expect(wrapper.element.style.fontSize).toEqual('125%')

0 commit comments

Comments
 (0)