diff --git a/coral-component-shell/src/scripts/ShellUser.js b/coral-component-shell/src/scripts/ShellUser.js index cdedd5edc4..106877f9d5 100644 --- a/coral-component-shell/src/scripts/ShellUser.js +++ b/coral-component-shell/src/scripts/ShellUser.js @@ -49,6 +49,9 @@ class ShellUser extends BaseComponent(HTMLElement) { footer: this.querySelector('coral-shell-user-footer') || document.createElement('coral-shell-user-footer') }; + this._elements.name.setAttribute('role', 'heading'); + this._elements.name.setAttribute('aria-level', '2'); + user.call(this._elements, {icon: avatar.DEFAULT}); } diff --git a/coral-component-shell/src/tests/test.Shell.User.js b/coral-component-shell/src/tests/test.Shell.User.js index 1c8adfe725..4b6c3eecb8 100644 --- a/coral-component-shell/src/tests/test.Shell.User.js +++ b/coral-component-shell/src/tests/test.Shell.User.js @@ -71,6 +71,11 @@ describe('Shell.User', function () { el.name = newContentZone; expect(el.name).to.equal(newContentZone); }); + + it('should have role of heading', function () { + expect(el.name.role).to.equal('heading'); + expect(el.name.ariaLevel).to.equal('2'); + }); }); describe('#heading', function () {