[x] Change ARIA-Label of the nav to say “Skip Link and Language Selector” (instead of “Skip Link and Accessibility Options”).
[x] When no translations are available add link “All Translations [A-Z]” with a link to an overview page with translations.
[x] When translations available:
[x] On small screens (up to 768px/48em):
[x] Add a button “[x⃕a] Select Language, Translations” (Icon uses #000.) that toggles the following behavior:
[x] Change label of the toggle to “[x⃕a] Hide Languages - -” (Note: Might use our expand/collapse anything widget minus the design from the style guide. MUST NOT LOOK LIKE BUTTON BUT INLINE TEXT LINK.)
[x] Change label of the toggle to “[x⃕a] Hide Languages - -” (Note: Might use our expand/collapse anything widget minus the design from the style guide. MUST NOT LOOK LIKE BUTTON BUT INLINE TEXT LINK.)
[x] Adds text “This page in:” in bold & black. (Specified is “black”, I suppose using --off-black as used in the style guide). After “This page in:” add about 1.25em of right margin.
[x] Do NOT save the button state in local storage.
[x] Add link “All Translations [A-Z]” with a link to an overview page with translations.
[x] On large screens (above 768px/48em):
[x] Add the list of languages as specified on mobile. As the last item in the list of languages add a button:
[x] By default that button is collapsed and has no visual label but the standard collapsed icon that we use with the expand/collapse anything widget. (Note: MUST NOT LOOK LIKE BUTTON BUT INLINE TEXT LINK.)
[x] When the icon/button is clicked,
[x] the button gets a label “… Show languages”
[x] The button hides the list of languages but not the black bold “This page in:” text.
[x] Add a variable to local storage that indicates the state of the button. (Our standard expand/collapse widget does that out of the box.)
Considerations
As those are two different menus, the currently focused element might be hidden when the user changes orientation of their device. This might cause the focus to be lost.
JavaScript needs to reset the visibility when the orientation changes, otherwise a user could hide the language list on the larger view, change orientation, and the list would still be hidden.
Changes to standard components to make above work:
[x] Add expand/collapse style that looks like an inline link.
[x] Make it possible in script to specify that one or both states displays no label but instead using an ARIA-label.
[x] Add possibility to add an icon to the button.
[x] Add new breakpoints.
[x] Change how the meta menu list is displayed (Uses flexbox now, needs to be changed to inline.)
from #21 to not confuse with the discussion about the visuals vs. the implementation details.
THIS ISSUE IS FOR ERIC. IF YOU’RE NOT ERIC, DONT LOOK AT THE FOLLOWING ;-)
Implementation steps:
[x] Remove link “Change Text Size or Colors” from header. (Note: Orphans this page: https://www.w3.org/WAI/meta/customize/)
[x] Change ARIA-Label of the
navto say “Skip Link and Language Selector” (instead of “Skip Link and Accessibility Options”).[x] When no translations are available add link “All Translations [A-Z]” with a link to an overview page with translations.
[x] When translations available:
[x] On small screens (up to 768px/48em):
[x] Add a button “[x⃕a] Select Language, Translations” (Icon uses #000.) that toggles the following behavior:
[x] Change label of the toggle to “[x⃕a] Hide Languages - -” (Note: Might use our expand/collapse anything widget minus the design from the style guide. MUST NOT LOOK LIKE BUTTON BUT INLINE TEXT LINK.)
[x] Change label of the toggle to “[x⃕a] Hide Languages - -” (Note: Might use our expand/collapse anything widget minus the design from the style guide. MUST NOT LOOK LIKE BUTTON BUT INLINE TEXT LINK.)
[x] Adds text “This page in:” in bold & black. (Specified is “black”, I suppose using
--off-blackas used in the style guide). After “This page in:” add about1.25emof right margin.[x] Do NOT save the button state in local storage.
[x] Add link “All Translations [A-Z]” with a link to an overview page with translations.
[x] On large screens (above 768px/48em):
[x] Add the list of languages as specified on mobile. As the last item in the list of languages add a button:
[x] By default that button is collapsed and has no visual label but the standard collapsed icon that we use with the expand/collapse anything widget. (Note: MUST NOT LOOK LIKE BUTTON BUT INLINE TEXT LINK.)
[x] When the icon/button is clicked,
[x] the button gets a label “… Show languages”
[x] The button hides the list of languages but not the black bold “This page in:” text.
[x] Add a variable to local storage that indicates the state of the button. (Our standard expand/collapse widget does that out of the box.)
Considerations
Changes to standard components to make above work: