[MCL-22] Language selector Created: 11/Dec/23 Updated: 11/Dec/23 |
|
| Status: | Open |
| Project: | Magnolia Component Library |
| Component/s: | Page Structure |
| Affects Version/s: | None |
| Fix Version/s: | None |
| Type: | Story | Priority: | Neutral |
| Reporter: | Raymond Tran | Assignee: | Unassigned |
| Resolution: | Unresolved | Votes: | 0 |
| Labels: | None | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | Not Specified | ||
| Original Estimate: | Not Specified | ||
| Issue Links: |
|
||||||||||||
| Template: |
|
||||||||||||
| Acceptance criteria: |
Acceptance Criteria
[ ]*
Component is called "Language selector"
[ ]*
Indicates the current page’s selected language in a dropdown menu
[ ]*
All available languages should be listed in the dropdown menu
[ ]*
The links should be rendered as an unordered list of <a> elements
[ ]*
The dropdown menu is triggered when the button is clicked
[ ]*
The active (current) language is shown as the label of the dropdown button
[ ]*
Format of language label text is "Language (Country)" e.g. "English (United States)"
[ ]*
When the user clicks or touches a language item in the expanded language dropdown menu, the page reloads in the desired language.
Documentation Acceptance Criteria
[ ]*
Contains Title, Description and Examples
[ ]*
Contains FTL and YAML code
Content Author Acceptance Criteria
[ ]*
The component is hard-coded into the nav area template "btk/templates/areas/nav.ftl"
Accessibility Acceptance Criteria
[ ]*
Logical tab order should be maintained, ensuring that keyboard users navigate through the elements in a coherent sequence.
[ ]*
The navigation menu <nav> element contains aria-label="breadcrumb" to indicate the purpose of the navigation menu
[ ]*
The menu can be selected using the tab key
[ ]*
The state of the menu should be reflected in the aria-expanded="true" or aria-expanded="false" attribute
[ ]*
Cursor keys and return key can be used to select the desired menu item
|
||||||||||||
| Description |
User Story:As a content author, Bootstrap documentation: https://getbootstrap.com/docs/5.3/components/dropdowns/ |