Create a the two web components <radio-group> and <radio-button> that are used to mimic the behaviour of radio buttons, i.e. a group of toggle buttons where only one of the buttons can be toggled on at the same time.

For this exercise you can use the <toggle-button> from Assignment 4, Exercise 2 as the starting point for your new <radio-button> component, or you can start from scratch.

The idea of the exercise is not to use the built-in <input type="radio">, your <radio-button> component will instead replicate that functionality and the <radio-group> component coordinates the behaviour of the group, i.e. makes sure only one is toggled on and stores the selected value for the group.

HTML

Create a page with the following HTML for two groups of radio buttons.

<radio-group>
  <radio-button value="A">Value A</radio-button>
  <radio-button value="B">Value B</radio-button>
  <radio-button value="C">Value C</radio-button>
</radio-group>

<radio-group>
  <radio-button value="1">Value 1</radio-button>
  <radio-button value="2">Value 2</radio-button>
  <radio-button value="3">Value 3</radio-button>
  <radio-button value="4">Value 4</radio-button>
  <radio-button value="5">Value 5</radio-button>
</radio-group>

<radio-button> elements are placed inside a <radio-group>. Only one <radio-button> per group can be selected and the value of each <radio-button> is set using its value attribute.

Shadow DOM structure

The element containing the “button” elements should have the ARIA attribute role="radiogroup".

The elements you use as buttons should have the ARIA attributes role="radio" and aria-checked. A checked button should have aria-checked="true" and the unchecked buttons in the group should have aria-checked="false"

Behavior

When the user clicks one of the radio buttons, it should visually indicate that it has been selected. The values of the ARIA attribute aria-checked should also be changed so that the clicked button has aria-checked="true" and the other buttons in the group should have aria-checked="false".

The value property of the <radio-group> element should contain the value of the currently selected <radio-button>

When the value of the <radio-group> changes, fire an input event that bubbles.

Visuals

It should be visible which of the buttons is selected, which button belongs to which text, and which buttons are grouped.

Also add an element on your page (outside of the web component) that shows the current value of each <radio-group>. This text should be updated from one or two event listeners that are listening to the radiogroups.

Create a version of the accordion web component from Assignment 4, Exercise 3 with the difference being that only one accordion panel in an accordion group is allowed to be open at the same time, i.e. when the user clicks on another accordion title, the expanded accordion panel should close, and the panel associated with the title clicked on should expand.

You may use your code from Assignment 4 as a starting points if you want, or you can start from scratch.

Create a tabbed web component, <tabs-component>.

There are prepared files for this assignment: a4e3.zip

The zip-file contain a web page that uses the <tabs-component>.

Visuals

a4e3.html should look something like this when you have created the CSS for the tabs widget.

ARIA attributes

The tab widget has a number of ARIA attributes associated with it.

• Roles In the tab widget, the attribute role can have following values:
  • tablist: this element contains tabs
  • tab: this element is a selectable tab
  • tabpanel: this is a panel with the content associated with a tab
• State The currently selected tab should have the attribute aria-selected set to true. All other tabs should have aria-selected set to false.
• Relationship
  • aria-controls: this attribute is set on a tab and its value is the id of the panel it controls the visibility of
  • aria-labelledby: this attribute is set on a element with the tabpanel role and its value is the id of the tab it belongs to.
• Misc The hidden attribute is set on tabpanels that are not visible

HTML

The idea here, similar to the <accordion-component>, is to let the user write only what is necessary from a content author’s perspective. Here is the HTML that is the user is required to write.

<tabs-component>
    <h2>Tab 1 title</h2>
    <div><p>Content for Tab 1<p></div>

    <h2>Tab 2 title</h2>
    <div><p>Content for Tab 1<p></div>

    <h2>Tab 3 title</h2>
    <div><p>Content for Tab 1<p></div>
</tabs-component>

HTML Template / Shadow DOM

Use the following as your template:

<div class="tabs">
  <div role="tablist">
  </div>
</div>

Each tab title should get its own button inside the div with the role="tablist". The content for each tab is placed in their own div elements after the tablist.

Here is what the shadow DOM should look like for the above content with the first tab selected (one tab should always be selected).

<div class="tabs">
  <div role="tablist">
    <button id="tab-1" role="tab" aria-selected="true" aria-controls="panel-1">Tab 1</button>
    <button id="tab-2" role="tab" aria-selected="false" aria-controls="panel-2">Tab 2</button>
    <button id="tab-3" role="tab" aria-selected="false" aria-controls="panel-3">Tab 3</button>
  </div>
  <div id="panel-1" role="tabpanel" aria-labeledby="tab-1">
    <p>Content for Tab 1<p>
  </div>
  <div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
    <p>Content for Tab 2<p>
  </div>
  <div id="panel-3" role="tabpanel" aria-labelledby="tab-3" hidden>
    <p>Content for Tab 3<p>
  </div>
</div>

Add classes according to your needs. However, remember that you can also use the attribute selector; e.g. the selector button[aria-selected="true"] will target the selected tab.

Behavior

• Exactly one tab per tab-widget and its associated tabpanel should be selected/not hidden at any time.
• Clicking a tab reveals the tabpanel it controls and hides the any previously shown tabpanel.
• The attribute aria-selected of the clicked tab should be set to "true". The value of the attribute aria-selected of all other tabs should be set to "false".
• The selected tab should have a different visual style from the non-selected tabs.
• It should only be possible for one tab to selected and visible at the same time.