Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

patterns.html の簡易版 #154

Open
wants to merge 3 commits into
base: waic-main
Choose a base branch
from
Open

patterns.html の簡易版 #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
872a2e4
patternsを最新版に追従
ef81sp Nov 30, 2024
1c8eaae
仮リリースのため、Alertパターン以外を消去
ef81sp Nov 30, 2024
ee2d1c6
patterns.html のアラートを翻訳（アラートパターンのページからコピペ）
ef81sp Nov 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
370 changes: 12 additions & 358 deletions content/patterns/patterns.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,378 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Patterns</title>
<title>パターン</title>

<!-- Core JS and CSS for the patterns page -->
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
<link rel="stylesheet" href="../shared/css/core.css">
<script src="../shared/js/highlight.pack.js"></script>
<script src="../shared/js/app.js"></script>
<script src="../shared/js/skipto.js"></script>
<script src="../shared/js/filterBySearch.js"></script>
<script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../shared/js/skipto.js"></script>
</head>
<body>
<h1>Patterns</h1>
<ul class="tiles">
<li class="tile">
<a href="accordion/accordion-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-accordion.svg">
<span>Accordion (Sections With Show/Hide Functionality)</span>
</h2>
</a>
<div class="tile-introduction">
An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.
</div>
</li>

<li class="tile">
<h1>パターン</h1>
<!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/2d60c413ec23875a30162364a7e715b26875d9db -->
<ul id="patterns" class="list">
<li class="pattern">
<a href="alert/alert-pattern.html">
<h2 class="tile-name">
<h2 class="pattern-name">
<img alt="" src="../images/pattern-alert.svg">
<span>Alert</span>
</h2>
</a>
<div class="tile-introduction">
An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
</div>
</li>

<li class="tile">
<a href="alertdialog/alertdialog-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-alertdialog.svg">
<span>Alert and Message Dialogs</span>
</h2>
</a>
<div class="tile-introduction">
An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.
</div>
</li>

<li class="tile">
<a href="breadcrumb/breadcrumb-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-breadcrumb.svg">
<span>Breadcrumb</span>
</h2>
</a>
<div class="tile-introduction">
A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order.
</div>
</li>

<li class="tile">
<a href="button/button-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-button.svg">
<span>Button</span>
</h2>
</a>
<div class="tile-introduction">
A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
</div>
</li>

<li class="tile">
<a href="carousel/carousel-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-carousel.svg">
<span>Carousel (Slide Show or Image Rotator)</span>
</h2>
</a>
<div class="tile-introduction">
A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.
</div>
</li>

<li class="tile">
<a href="checkbox/checkbox-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-checkbox.svg">
<span>Checkbox</span>
</h2>
</a>
<div class="tile-introduction">
WAI-ARIA supports two types of checkbox widgets: dual-state checkboxes toggle between two choices -- checked and not checked -- and tri-state checkboxes, which allow an additional third state known as partially checked.
</div>
</li>

<li class="tile">
<a href="combobox/combobox-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-combobox.svg">
<span>Combobox</span>
</h2>
</a>
<div class="tile-introduction">
A combobox is an input widget that has an associated popup.
</div>
</li>

<li class="tile">
<a href="dialog-modal/dialog-modal-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-dialog-modal.svg">
<span>Dialog (Modal)</span>
</h2>
</a>
<div class="tile-introduction">
A dialog is a window overlaid on either the primary window or another dialog window.
</div>
</li>

<li class="tile">
<a href="disclosure/disclosure-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-disclosure.svg">
<span>Disclosure (Show/Hide)</span>
</h2>
</a>
<div class="tile-introduction">
A disclosure is a widget that enables content to be either collapsed (hidden) or expanded (visible).
</div>
</li>

<li class="tile">
<a href="feed/feed-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-feed.svg">
<span>Feed</span>
</h2>
</a>
<div class="tile-introduction">
A feed is a section of a page that automatically loads new sections of content as the user scrolls.
</div>
</li>

<li class="tile">
<a href="grid/grid-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-grid.svg">
<span>Grid (Interactive Tabular Data and Layout Containers)</span>
</h2>
</a>
<div class="tile-introduction">
A grid widget is a container that enables users to navigate the information or interactive elements it contains using directional navigation keys, such as arrow keys, Home, and End.
</div>
</li>

<li class="tile">
<a href="landmarks/landmarks-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-landmarks.svg">
<span>Landmarks</span>
</h2>
</a>
<div class="tile-introduction">
Landmarks are a set of eight roles that identify the major sections of a page.
</div>
</li>

<li class="tile">
<a href="link/link-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-link.svg">
<span>Link</span>
</h2>
</a>
<div class="tile-introduction">
A link widget provides an interactive reference to a resource.
</div>
</li>

<li class="tile">
<a href="listbox/listbox-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-listbox.svg">
<span>Listbox</span>
</h2>
</a>
<div class="tile-introduction">
A listbox widget presents a list of options and allows a user to select one or more of them.
</div>
</li>

<li class="tile">
<a href="menubar/menu-and-menubar-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-menubar.svg">
<span>Menu and Menubar</span>
</h2>
</a>
<div class="tile-introduction">
A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
</div>
</li>

<li class="tile">
<a href="menu-button/menu-button-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-menu-button.svg">
<span>Menu Button</span>
</h2>
</a>
<div class="tile-introduction">
A menu button is a button that opens a menu as described in the Menu and Menubar Pattern.
</div>
</li>

<li class="tile">
<a href="meter/meter-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-meter.svg">
<span>Meter</span>
</h2>
</a>
<div class="tile-introduction">
A meter is a graphical display of a numeric value that varies within a defined range.
</div>
</li>

<li class="tile">
<a href="radio/radio-group-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-radio.svg">
<span>Radio Group</span>
</h2>
</a>
<div class="tile-introduction">
A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
</div>
</li>

<li class="tile">
<a href="slider/slider-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-slider.svg">
<span>Slider</span>
</h2>
</a>
<div class="tile-introduction">
A slider is an input where the user selects a value from within a given range.
</div>
</li>

<li class="tile">
<a href="slider-multithumb/slider-multithumb-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-slider-multithumb.svg">
<span>Slider (Multi-Thumb)</span>
</h2>
</a>
<div class="tile-introduction">
A multi-thumb slider implements the Slider Pattern but includes two or more thumbs, often on a single rail.
</div>
</li>

<li class="tile">
<a href="spinbutton/spinbutton-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-spinbutton.svg">
<span>Spinbutton</span>
</h2>
</a>
<div class="tile-introduction">
A spinbutton is an input widget that restricts its value to a set or range of discrete values.
</div>
</li>

<li class="tile">
<a href="switch/switch-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-switch.svg">
<span>Switch</span>
</h2>
</a>
<div class="tile-introduction">
A switch is an input widget that allows users to choose one of two values: on or off.
</div>
</li>

<li class="tile">
<a href="table/table-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-table.svg">
<span>Table</span>
</h2>
</a>
<div class="tile-introduction">
Like an HTML table element, a WAI-ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget.
</div>
</li>

<li class="tile">
<a href="tabs/tabs-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-tabs.svg">
<span>Tabs</span>
</h2>
</a>
<div class="tile-introduction">
Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
</div>
</li>

<li class="tile">
<a href="toolbar/toolbar-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-toolbar.svg">
<span>Toolbar</span>
</h2>
</a>
<div class="tile-introduction">
A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.
</div>
</li>

<li class="tile">
<a href="tooltip/tooltip-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-tooltip.svg">
<span>Tooltip</span>
</h2>
</a>
<div class="tile-introduction">
A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
</div>
</li>

<li class="tile">
<a href="treeview/treeview-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-treeview.svg">
<span>Tree View</span>
</h2>
</a>
<div class="tile-introduction">
A tree view widget presents a hierarchical list.
</div>
</li>

<li class="tile">
<a href="treegrid/treegrid-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-treegrid.svg">
<span>Treegrid</span>
</h2>
</a>
<div class="tile-introduction">
A treegrid widget presents a hierarchical data grid consisting of tabular information that is editable or interactive.
</div>
</li>

<li class="tile">
<a href="windowsplitter/windowsplitter-pattern.html">
<h2 class="tile-name">
<img alt="" src="../images/pattern-windowsplitter.svg">
<span>Window Splitter</span>
<span>アラート</span>
</h2>
</a>
<div class="tile-introduction">
A window splitter is a moveable separator between two sections, or panes, of a window that enables users to change the relative size of the panes.
<div class="pattern-introduction">
アラートは、利用者のタスクを中断することなく、利用者の注意を引くように、簡潔で重要なメッセージを表示する要素です。
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alert-pattern.html の1文目をコピペしてきました

Copy link
Author

@ef81sp ef81sp Nov 30, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PRごとに最新版に追従する手順 の影響で、差分がずれますね。。
(変更前は古いファイルの翻訳前、変更後は新しいファイルの翻訳後）

waic-mainが分岐してから1年以上経っているので(分岐元: e716cc2)、一度最新版にrebaseした方がよいかもしれません。

</div>
</li>
</ul>
Expand Down
1 change: 1 addition & 0 deletions content/shared/css/core.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ th .example-header {
margin-left: 1em;
}

.example-code button,
.example-header button {
display: inline-block;
position: relative;
Expand Down
Loading