fix(seprator): add hasRole input to separator

[elenagarrone]

Description

Because the lg-separator is mainly used as a decoration we have decided to have it hidden to screen readers by default with the option of adding the role of separator via the input hasRole.

This change will remove the default role from the element but I don't think it's a breaking change to have the role or not.

Link to the discussion: #139

Storybook link: (once netlify has deployed link provide a link to the component)

Checklist:

• The commit messages follow the convention for this project
• I have provided an adequate amount of test coverage
• I have added the functionality to the test app
• I have provided a story in storybook to document the changes
• I have provided documentation in the notes section of the story
• I have added any new public feature modules to public-api.ts
• I have linked the new component to adobe DSM (if appropriate)

[andy-polhill]

I'm happy this isn't a breaking change. I think currently we have some situations where it is right and some where it is wrong. After this fix that will still be the case, but consumers will at least have the capability to put it right.

[owensgit]

May be missing something here, but I'm just wondering if we definitely need this to be an input? Would it still work if we manually added the role to the component when using it, without having it as an Angular input - just a regular HTML attribute?

E.g. <lg-seperator role="seperator"></lg-seperator>

If so, part of me is wondering if this is more intuitive? 🤔

What do you think?

[elenagarrone]

May be missing something here, but I'm just wondering if we definitely need this to be an input? Would it still work if we manually added the role to the component when using it, without having it as an Angular input - just a regular HTML attribute?

E.g. <lg-seperator role="seperator"></lg-seperator>

If so, part of me is wondering if this is more intuitive? 🤔

What do you think?

I thought about that and decided to go with the input instead. Major reason is that if you add the role yourself you will also have to override the aria-hidden="true" that we set by default and I feel like that is an overhead and very prone to errors. Adding the aria-hidden by default seem the right thing to me as it will stop screen readers reading an unnecessary element.

[github-actions]

🎉 This PR is included in version 5.7.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀