feat(web-components): ensure screen-reader-only text is hidden for RTL languages #2953
Conversation
add a new dismissLabel prop which allows the user to change the text of the label on the dismiss button feat mi6#2839
Add prop to customise tooltip label for chip. Add Cypress test and stories . mi6#2839
…agination-bar-items-per-page-prop Prevent duplication of pagination bar items per page dropdown items
…p-text feat(web-components): [ic-chip] add prop to customise tooltip text
…L languages This change also standardises on using -9999px from the start of the page as the offscreen position to make it easier to locate occurrences of this pattern with search. Closes: mi6#2906
|
Hi @irl, thank you for your contribution! I agree that it is unnecessary / redundant to use different classes across components. If we were to just use one shared class, I think the However, I feel as though implementing the use of a single class may be a bit more involved as the screen-reader-only classes currently applied to individual components have slightly different styles applied; it would require checking that the styles on a single shared class work for all components, alongside some refactoring. I’d say it’s up to you if you want to fix the redundancy in this PR - but it is a bit out of scope for the ticket so we’d be happy if you want to create a separate ticket for it (or let us know if you want us to create one!). (Also, for the checklist on the PR, you can mark any task as done if it isn’t applicable or related to your changes. They will need to all be ticked before the PR can be merged.) |
| @@ -209,6 +209,10 @@ slot[name="app-title"]::slotted(a) { | |||
| transition: opacity var(--ic-easing-transition-slow); | |||
| } | |||
|
|
|||
| :host(.sm-collapsed) slot[name="app-title"]:dir(rtl)::slotted(a) { | |||
There was a problem hiding this comment.
I think the same for line 204 needs adding here too:
| :host(.sm-collapsed) slot[name="app-title"]:dir(rtl)::slotted(a) { | |
| :host(.sm-collapsed) slot[name="app-title"]:dir(rtl)::slotted(ic-typography), | |
| :host(.sm-collapsed) slot[name="app-title"]:dir(rtl)::slotted(a) { |
GCHQ-Developer-112
force-pushed
the
develop
branch
from
65d32e1 to
a7135b5
Compare
GCHQ-Developer-741
force-pushed
the
develop
branch
from
c46a88a to
1eee1a4
Compare
|
Hi @irl, just wondered if you are planning to update this PR soon? There are at least a few conflicts and one comment which needs resolving Let us know if you have any more questions or issues |
Yes, thanks for the prompt. I do want to get this done soon. |
Summary of the changes
When using RTL languages, elements using
left: -9999pxand roughly equivalent styles will cause a large scrollable but blank region to appear on the left of the screen. By using the:dirpseudo-class it is possible to instead shift these elements to beright: -9999pxwhich the browser will hide when<html dir="rtl">in the same way as it does for elements to the left when<html dir="ltr">.This change also standardises on using -9999px from the start of the page as the offscreen position to make it easier to locate occurrences of this pattern with search. I also found -10000px and -625rem but these are roughly or exactly equivalent.
There is a question as to whether this is the correct change, or if the correct change is to have just one class that can be applied to these elements. Seeing multiple classes defined as:
feels redundant to me. The technique is also applied directly to component-specific classes instead of defining the styles just once for the technique and re-using that class where it is needed.
Related issue
Closes: #2906
Checklist
General
Testing
Accessibility
Resize/zoom behaviour
System modes
Testing content extremes