An Angular front-end framework Tailored for your swiss branded business web application, Oblique provides a standardized corporate design look and feel as well as a collection of ready-to-use Angular components. Oblique, through its fully customizable master layout, takes care of the application's structure, letting you focus on the content.
Another issue is caused by the usage of the material Tooltip which gets enabled when label exceeds the max width and is cut off.
The material tooltip adds the provided text as aria-description (even if disabled). Since the tooltip text is the same as the actual link text, some screen readers (tested with VoiceOver on MacOS) will end up reading out the label twice for each link.
This should be fixable by one of the following options:
stop using the material tooltip
add the link text as aria-label on the same element as the tooltip. This may sound counterproductive but has 2 effects: 1st the aria-label text will override the text supplied within the link. 2nd the cdk AriaDescriber (used by the matTooltip) will not add the aria-description since it checks whether there's already an aria-label on the element with the same value.
Oblique version
11.3.2
Description
Following aria attributes are currently missing but should be used to be understood when using assistive technology:
aria-label="Breadcrumb"on thenavtag to label the landmark\ https://github.com/oblique-bit/oblique/blob/d9ed7d79042f407b61f355b21039cbde8dc4829a/projects/oblique/src/lib/breadcrumb/breadcrumb.component.html#L1aria-current="page"on the lists last element (span)\ https://github.com/oblique-bit/oblique/blob/d9ed7d79042f407b61f355b21039cbde8dc4829a/projects/oblique/src/lib/breadcrumb/breadcrumb.component.html#L18Another issue is caused by the usage of the material
Tooltipwhich gets enabled when label exceeds the max width and is cut off. The material tooltip adds the provided text asaria-description(even if disabled). Since the tooltip text is the same as the actual link text, some screen readers (tested with VoiceOver on MacOS) will end up reading out the label twice for each link. This should be fixable by one of the following options:aria-labelon the same element as the tooltip. This may sound counterproductive but has 2 effects: 1st the aria-label text will override the text supplied within the link. 2nd the cdkAriaDescriber(used by the matTooltip) will not add thearia-descriptionsince it checks whether there's already anaria-labelon the element with the same value.Reproduction
render the component and
Expected behaviour
Context